├── .gitignore
├── README.md
├── eslint.config.mjs
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
    ├── profile.avif
    └── projects
    │   ├── blog-website.jpeg
    │   ├── chat-app.png
    │   ├── e-commerce-website.png
    │   ├── expense-tracker.webp
    │   ├── portfolio-website.jpg
    │   ├── recipe-finder.png
    │   ├── task-manager.webp
    │   └── weather-app.png
├── src
    ├── app
    │   ├── about
    │   │   └── page.tsx
    │   ├── api
    │   │   └── contact
    │   │   │   └── route.ts
    │   ├── blogs
    │   │   └── page.tsx
    │   ├── components
    │   │   ├── Blogs.tsx
    │   │   ├── Footer.tsx
    │   │   ├── Hero.tsx
    │   │   ├── Navbar.tsx
    │   │   ├── Newsletter.tsx
    │   │   └── Projects.tsx
    │   ├── contact
    │   │   └── page.tsx
    │   ├── context
    │   │   └── ThemeContext.tsx
    │   ├── favicon.ico
    │   ├── globals.css
    │   ├── layout.tsx
    │   ├── page.tsx
    │   └── projects
    │   │   └── page.tsx
    ├── contents
    │   ├── blogs.ts
    │   └── projects.ts
    ├── types
    │   └── index.ts
    └── utils
    │   └── animations.ts
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Devfolio
 2 | 
 3 | Devfolio is a portfolio website built using Next.js, Tailwind CSS, and Framer Motion. It allows developers to showcase their projects, skills, and blogs in a visually appealing manner.
 4 | 
 5 | ## Table of Contents
 6 | 
 7 | - [Features](#features)
 8 | - [Installation](#installation)
 9 | - [Usage](#usage)
10 | - [Animations](#animations)
11 | - [Components](#components)
12 | - [Types](#types)
13 | - [Contributing](#contributing)
14 | - [License](#license)
15 | 
16 | ## Features
17 | 
18 | - Responsive design using Tailwind CSS
19 | - Smooth animations with Framer Motion
20 | - Dark mode support
21 | - Modular and reusable components
22 | - Easy to customize
23 | 
24 | ## Installation
25 | 
26 | To get started with Devfolio, follow these steps:
27 | 
28 | 1. **Clone the repository:**
29 | 
30 |    ```bash
31 |    git clone https://github.com/yourusername/devfolio.git
32 |    cd devfolio
33 |    ```
34 | 
35 | 2. **Install the dependencies:**
36 | 
37 |    Make sure you have [Node.js](https://nodejs.org/) installed. Then, run the following command to install the necessary packages:
38 | 
39 |    ```bash
40 |    npm install
41 |    ```
42 | 
43 | 3. **Run the development server:**
44 | 
45 |    Start the development server to view the project locally:
46 | 
47 |    ```bash
48 |    npm run dev
49 |    ```
50 | 
51 |    Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
52 | 
53 | 4. **Build for production:**
54 | 
55 |    To create an optimized production build, run:
56 | 
57 |    ```bash
58 |    npm run build
59 |    ```
60 | 
61 | 5. **Start the production server:**
62 | 
63 |    After building the project, you can start the production server with:
64 | 
65 |    ```bash
66 |    npm start
67 |    ```
68 | 
69 | ## Usage
70 | The Devfolio project is structured to be intuitive and easy to navigate.
71 | 
72 | By understanding the structure and components of Devfolio, you can easily customize and extend the project to fit your needs.
73 | 
74 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
 1 | import type { NextConfig } from "next";
 2 | 
 3 | const nextConfig: NextConfig = {
 4 |   images: {
 5 |     remotePatterns: [
 6 |       {
 7 |         protocol: 'https',
 8 |         hostname: 'images.unsplash.com',
 9 |         port: '',
10 |         pathname: '/**',
11 |       },
12 |     ],
13 |   },
14 | };
15 | 
16 | export default nextConfig;
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "portfolio-project-2",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@heroicons/react": "^2.2.0",
13 |     "framer-motion": "^12.9.7",
14 |     "next": "15.3.1",
15 |     "react": "^19.0.0",
16 |     "react-dom": "^19.0.0",
17 |     "react-icons": "^5.5.0"
18 |   },
19 |   "devDependencies": {
20 |     "@eslint/eslintrc": "^3",
21 |     "@tailwindcss/postcss": "^4",
22 |     "@types/node": "^20",
23 |     "@types/react": "^19",
24 |     "@types/react-dom": "^19",
25 |     "eslint": "^9",
26 |     "eslint-config-next": "15.3.1",
27 |     "tailwindcss": "^4",
28 |     "typescript": "^5"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/public/profile.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/devfolio-nextjs-portfolio-website/5cfcf9e90e2caac0cebb56bfbea42a31347c243d/public/profile.avif


--------------------------------------------------------------------------------
/public/projects/blog-website.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/devfolio-nextjs-portfolio-website/5cfcf9e90e2caac0cebb56bfbea42a31347c243d/public/projects/blog-website.jpeg


--------------------------------------------------------------------------------
/public/projects/chat-app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/devfolio-nextjs-portfolio-website/5cfcf9e90e2caac0cebb56bfbea42a31347c243d/public/projects/chat-app.png


--------------------------------------------------------------------------------
/public/projects/e-commerce-website.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/devfolio-nextjs-portfolio-website/5cfcf9e90e2caac0cebb56bfbea42a31347c243d/public/projects/e-commerce-website.png


--------------------------------------------------------------------------------
/public/projects/expense-tracker.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/devfolio-nextjs-portfolio-website/5cfcf9e90e2caac0cebb56bfbea42a31347c243d/public/projects/expense-tracker.webp


--------------------------------------------------------------------------------
/public/projects/portfolio-website.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/devfolio-nextjs-portfolio-website/5cfcf9e90e2caac0cebb56bfbea42a31347c243d/public/projects/portfolio-website.jpg


--------------------------------------------------------------------------------
/public/projects/recipe-finder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/devfolio-nextjs-portfolio-website/5cfcf9e90e2caac0cebb56bfbea42a31347c243d/public/projects/recipe-finder.png


--------------------------------------------------------------------------------
/public/projects/task-manager.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/devfolio-nextjs-portfolio-website/5cfcf9e90e2caac0cebb56bfbea42a31347c243d/public/projects/task-manager.webp


--------------------------------------------------------------------------------
/public/projects/weather-app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/devfolio-nextjs-portfolio-website/5cfcf9e90e2caac0cebb56bfbea42a31347c243d/public/projects/weather-app.png


--------------------------------------------------------------------------------
/src/app/about/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { FaCode, FaLaptopCode, FaGraduationCap } from 'react-icons/fa'
  4 | import { motion } from 'framer-motion'
  5 | import { 
  6 |   fadeInUp, 
  7 |   fadeInDown, 
  8 |   fadeIn, 
  9 |   staggerContainer, 
 10 |   cardHover, 
 11 |   cardHoverSmall 
 12 | } from '@/utils/animations'
 13 | 
 14 | export default function About() {
 15 |   return (
 16 |     <div className="container max-w-7xl mx-auto py-12">
 17 |       <motion.h1 
 18 |         className="text-4xl font-bold mb-8 text-center"
 19 |         {...fadeInDown}
 20 |       >
 21 |         About Me
 22 |       </motion.h1>
 23 |       
 24 |       {/* Bio Section */}
 25 |       <motion.section 
 26 |         className="mb-16"
 27 |         {...fadeInUp}
 28 |       >
 29 |         <p className="text-lg text-secondary max-w-3xl mx-auto text-center">
 30 |           I&apos;m a passionate Full Stack Developer with expertise in building modern web applications.
 31 |           With a strong foundation in both frontend and backend technologies, I create seamless
 32 |           user experiences and robust server-side solutions.
 33 |         </p>
 34 |       </motion.section>
 35 | 
 36 |       {/* Skills Section */}
 37 |       <motion.section 
 38 |         className="mb-16"
 39 |         {...fadeIn}
 40 |         transition={{ delay: 0.2 }}
 41 |       >
 42 |         <motion.h2 
 43 |           className="section-title"
 44 |           {...fadeInUp}
 45 |         >
 46 |           Skills
 47 |         </motion.h2>
 48 |         <motion.div 
 49 |           className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
 50 |           variants={staggerContainer}
 51 |           initial="initial"
 52 |           animate="animate"
 53 |         >
 54 |           <motion.div 
 55 |             className="bg-white dark:bg-dark/50 p-6 rounded-lg shadow-md"
 56 |             variants={fadeInUp}
 57 |             {...cardHover}
 58 |           >
 59 |             <FaCode className="h-8 w-8 text-primary mb-4" />
 60 |             <h3 className="text-xl font-semibold mb-2">Frontend</h3>
 61 |             <ul className="text-secondary space-y-2">
 62 |               <li>React / Next.js</li>
 63 |               <li>TypeScript</li>
 64 |               <li>Tailwind CSS</li>
 65 |               <li>HTML5 / CSS3</li>
 66 |             </ul>
 67 |           </motion.div>
 68 |           
 69 |           <motion.div 
 70 |             className="bg-white dark:bg-dark/50 p-6 rounded-lg shadow-md"
 71 |             variants={fadeInUp}
 72 |             {...cardHover}
 73 |           >
 74 |             <FaLaptopCode className="h-8 w-8 text-primary mb-4" />
 75 |             <h3 className="text-xl font-semibold mb-2">Backend</h3>
 76 |             <ul className="text-secondary space-y-2">
 77 |               <li>Node.js</li>
 78 |               <li>Express</li>
 79 |               <li>PostgreSQL</li>
 80 |               <li>MongoDB</li>
 81 |             </ul>
 82 |           </motion.div>
 83 |           
 84 |           <motion.div 
 85 |             className="bg-white dark:bg-dark/50 p-6 rounded-lg shadow-md"
 86 |             variants={fadeInUp}
 87 |             {...cardHover}
 88 |           >
 89 |             <FaGraduationCap className="h-8 w-8 text-primary mb-4" />
 90 |             <h3 className="text-xl font-semibold mb-2">Tools & Others</h3>
 91 |             <ul className="text-secondary space-y-2">
 92 |               <li>Git / GitHub</li>
 93 |               <li>Docker</li>
 94 |               <li>AWS</li>
 95 |               <li>CI/CD</li>
 96 |             </ul>
 97 |           </motion.div>
 98 |         </motion.div>
 99 |       </motion.section>
100 | 
101 |       {/* Experience Section */}
102 |       <motion.section 
103 |         className="mb-16"
104 |         {...fadeIn}
105 |         transition={{ delay: 0.4 }}
106 |       >
107 |         <motion.h2 
108 |           className="section-title"
109 |           {...fadeInUp}
110 |         >
111 |           Experience
112 |         </motion.h2>
113 |         <motion.div 
114 |           className="max-w-3xl mx-auto space-y-8"
115 |           variants={staggerContainer}
116 |           initial="initial"
117 |           animate="animate"
118 |         >
119 |           <motion.div 
120 |             className="bg-white dark:bg-dark/50 p-6 rounded-lg shadow-md"
121 |             variants={fadeInUp}
122 |             {...cardHoverSmall}
123 |           >
124 |             <h3 className="text-xl font-semibold mb-2">Senior Full Stack Developer</h3>
125 |             <p className="text-primary mb-2">Company Name • 2020 - Present</p>
126 |             <ul className="text-secondary list-disc list-inside space-y-2">
127 |               <li>Led development of multiple web applications using React and Node.js</li>
128 |               <li>Implemented CI/CD pipelines reducing deployment time by 50%</li>
129 |               <li>Mentored junior developers and conducted code reviews</li>
130 |             </ul>
131 |           </motion.div>
132 |           
133 |           <motion.div 
134 |             className="bg-white dark:bg-dark/50 p-6 rounded-lg shadow-md"
135 |             variants={fadeInUp}
136 |             {...cardHoverSmall}
137 |           >
138 |             <h3 className="text-xl font-semibold mb-2">Full Stack Developer</h3>
139 |             <p className="text-primary mb-2">Previous Company • 2018 - 2020</p>
140 |             <ul className="text-secondary list-disc list-inside space-y-2">
141 |               <li>Developed and maintained RESTful APIs</li>
142 |               <li>Built responsive user interfaces with modern JavaScript frameworks</li>
143 |               <li>Optimized database queries improving performance by 40%</li>
144 |             </ul>
145 |           </motion.div>
146 |         </motion.div>
147 |       </motion.section>
148 | 
149 |       {/* Education Section */}
150 |       <motion.section
151 |         {...fadeIn}
152 |         transition={{ delay: 0.6 }}
153 |       >
154 |         <motion.h2 
155 |           className="section-title"
156 |           {...fadeInUp}
157 |         >
158 |           Education
159 |         </motion.h2>
160 |         <motion.div 
161 |           className="max-w-3xl mx-auto"
162 |           variants={staggerContainer}
163 |           initial="initial"
164 |           animate="animate"
165 |         >
166 |           <motion.div 
167 |             className="bg-white dark:bg-dark/50 p-6 rounded-lg shadow-md"
168 |             variants={fadeInUp}
169 |             {...cardHoverSmall}
170 |           >
171 |             <h3 className="text-xl font-semibold mb-2">Bachelor of Science in Computer Science</h3>
172 |             <p className="text-primary mb-2">University Name • 2014 - 2018</p>
173 |             <p className="text-secondary">
174 |               Graduated with honors. Focused on software engineering and web development.
175 |             </p>
176 |           </motion.div>
177 |         </motion.div>
178 |       </motion.section>
179 |     </div>
180 |   )
181 | } 


--------------------------------------------------------------------------------
/src/app/api/contact/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from 'next/server'
 2 | 
 3 | interface ContactRequestBody {
 4 |   name: string;
 5 |   email: string;
 6 |   message: string;
 7 | }
 8 | 
 9 | export async function POST(request: Request) {
10 |   try {
11 |     await request.json() as ContactRequestBody
12 |     // Here you would typically:
13 |     // 1. Validate the input
14 |     // 2. Send an email using a service like SendGrid, AWS SES, etc.
15 |     // 3. Store the message in a database if needed
16 | 
17 |     // For now, we'll just simulate a successful response
18 |     return NextResponse.json(
19 |       { message: 'Message sent successfully' },
20 |       { status: 200 }
21 |     )
22 |   } catch (error: unknown) {
23 |     const errorMessage = error instanceof Error ? error.message : 'Failed to send message'
24 |     return NextResponse.json(
25 |       { message: errorMessage },
26 |       { status: 500 }
27 |     )
28 |   }
29 | } 


--------------------------------------------------------------------------------
/src/app/blogs/page.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { blogs } from '@/contents/blogs'
 4 | import Link from 'next/link'
 5 | import { FaCalendarAlt, FaClock } from 'react-icons/fa'
 6 | import { motion } from 'framer-motion'
 7 | import { fadeInUp, staggerContainer, cardHoverSmall } from '@/utils/animations'
 8 | 
 9 | export default function Blogs() {
10 |   return (
11 |     <div className="container max-w-7xl mx-auto py-12">
12 |       <motion.h1 
13 |         className="text-4xl font-bold mb-8 text-center"
14 |         initial={{ opacity: 0, y: -20 }}
15 |         animate={{ opacity: 1, y: 0 }}
16 |         transition={{ duration: 0.5 }}
17 |       >
18 |         Blog Posts
19 |       </motion.h1>
20 |       
21 |       <motion.div 
22 |         className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
23 |         variants={staggerContainer}
24 |         initial="initial"
25 |         animate="animate"
26 |       >
27 |         {blogs.map((blog, index) => (
28 |           <motion.article
29 |             key={index}
30 |             className="bg-white dark:bg-dark/50 rounded-lg shadow-md overflow-hidden"
31 |             variants={fadeInUp}
32 |             {...cardHoverSmall}
33 |           >
34 |             <div className="p-6">
35 |               <motion.h2 
36 |                 className="text-xl font-semibold mb-2"
37 |                 whileHover={{ x: 5 }}
38 |                 transition={{ type: "spring", stiffness: 300 }}
39 |               >
40 |                 <Link href={`/blogs/${blog.slug}`} className="hover:text-primary transition-colors">
41 |                   {blog.title}
42 |                 </Link>
43 |               </motion.h2>
44 |               
45 |               <motion.p 
46 |                 className="text-secondary mb-4"
47 |                 initial={{ opacity: 0 }}
48 |                 animate={{ opacity: 1 }}
49 |                 transition={{ delay: 0.2 }}
50 |               >
51 |                 {blog.excerpt}
52 |               </motion.p>
53 |               
54 |               <motion.div 
55 |                 className="flex items-center gap-4 text-sm text-secondary"
56 |                 initial={{ opacity: 0 }}
57 |                 animate={{ opacity: 1 }}
58 |                 transition={{ delay: 0.3 }}
59 |               >
60 |                 <motion.div 
61 |                   className="flex items-center gap-2"
62 |                   whileHover={{ scale: 1.05 }}
63 |                 >
64 |                   <FaCalendarAlt className="h-4 w-4" />
65 |                   <span>{new Date(blog.date).toLocaleDateString()}</span>
66 |                 </motion.div>
67 |                 
68 |                 <motion.div 
69 |                   className="flex items-center gap-2"
70 |                   whileHover={{ scale: 1.05 }}
71 |                 >
72 |                   <FaClock className="h-4 w-4" />
73 |                   <span>{blog.readTime}</span>
74 |                 </motion.div>
75 |               </motion.div>
76 |             </div>
77 |           </motion.article>
78 |         ))}
79 |       </motion.div>
80 |     </div>
81 |   )
82 | } 


--------------------------------------------------------------------------------
/src/app/components/Blogs.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { blogs } from '@/contents/blogs';
 4 | import Link from 'next/link';
 5 | import { FaCalendarAlt, FaClock } from 'react-icons/fa';
 6 | import { motion } from 'framer-motion';
 7 | import { fadeInUp, staggerContainer, cardHoverSmall } from '@/utils/animations';
 8 | 
 9 | export default function Blogs() {
10 |   return (
11 |     <section className="py-20">
12 |       <div className="container max-w-7xl mx-auto px-4">
13 |         <motion.h2 
14 |           className="text-3xl font-bold mb-12 text-center"
15 |           {...fadeInUp}
16 |         >
17 |           Latest Blog Posts
18 |         </motion.h2>
19 | 
20 |         <motion.div 
21 |           className="grid grid-cols-1 md:grid-cols-3 gap-8"
22 |           variants={staggerContainer}
23 |           initial="initial"
24 |           animate="animate"
25 |         >
26 |           {blogs.map((blog) => (
27 |             <motion.article
28 |               key={blog.slug}
29 |               className="bg-white dark:bg-dark/50 rounded-lg shadow-md p-6"
30 |               variants={fadeInUp}
31 |               {...cardHoverSmall}
32 |             >
33 |               <Link href={`/blogs/${blog.slug}`}>
34 |                 <motion.h3 
35 |                   className="text-xl font-semibold mb-2 hover:text-primary transition-colors"
36 |                   whileHover={{ x: 5 }}
37 |                   transition={{ type: "spring", stiffness: 300 }}
38 |                 >
39 |                   {blog.title}
40 |                 </motion.h3>
41 |               </Link>
42 |               <motion.p 
43 |                 className="text-gray-600 dark:text-gray-300 mb-4"
44 |                 initial={{ opacity: 0 }}
45 |                 animate={{ opacity: 1 }}
46 |                 transition={{ delay: 0.2 }}
47 |               >
48 |                 {blog.excerpt}
49 |               </motion.p>
50 |               <motion.div 
51 |                 className="flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4"
52 |                 initial={{ opacity: 0 }}
53 |                 animate={{ opacity: 1 }}
54 |                 transition={{ delay: 0.3 }}
55 |               >
56 |                 <motion.span 
57 |                   className="flex items-center"
58 |                   whileHover={{ scale: 1.05 }}
59 |                 >
60 |                   <FaCalendarAlt className="mr-2" />
61 |                   {new Date(blog.date).toLocaleDateString()}
62 |                 </motion.span>
63 |                 <motion.span 
64 |                   className="flex items-center"
65 |                   whileHover={{ scale: 1.05 }}
66 |                 >
67 |                   <FaClock className="mr-2" />
68 |                   {blog.readTime}
69 |                 </motion.span>
70 |               </motion.div>
71 |             </motion.article>
72 |           ))}
73 |         </motion.div>
74 | 
75 |         <motion.div 
76 |           className="text-center mt-12"
77 |           initial={{ opacity: 0, y: 20 }}
78 |           animate={{ opacity: 1, y: 0 }}
79 |           transition={{ delay: 0.4 }}
80 |         >
81 |           <motion.div
82 |             whileHover={{ scale: 1.05 }}
83 |             whileTap={{ scale: 0.95 }}
84 |           >
85 |             <Link
86 |               href="/blogs"
87 |               className="inline-block bg-primary text-white px-8 py-3 rounded-lg hover:bg-primary/90 transition-colors"
88 |             >
89 |               View All Posts
90 |             </Link>
91 |           </motion.div>
92 |         </motion.div>
93 |       </div>
94 |     </section>
95 |   );
96 | } 


--------------------------------------------------------------------------------
/src/app/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import { FaGithub, FaTwitter, FaLinkedin } from 'react-icons/fa'
 3 | 
 4 | export default function Footer() {
 5 |   return (
 6 |     <footer className="bg-white dark:bg-dark border-t border-gray-200 dark:border-gray-800">
 7 |       <div className="container max-w-7xl mx-auto px-4 py-8">
 8 |         <div className="flex flex-col md:flex-row justify-between items-center">
 9 |           <div className="mb-4 md:mb-0">
10 |             <Link href="/" className="text-xl font-bold text-primary">
11 |               Devfolio&trade;
12 |             </Link>
13 |             <p className="text-sm text-secondary mt-2">
14 |               © {new Date().getFullYear()} Devfolio. All rights reserved.
15 |             </p>
16 |           </div>
17 |           
18 |           <div className="flex space-x-6">
19 |             <a
20 |               href="https://github.com/yourusername"
21 |               target="_blank"
22 |               rel="noopener noreferrer"
23 |               className="text-secondary hover:text-primary transition-colors"
24 |             >
25 |               <FaGithub className="h-6 w-6" />
26 |             </a>
27 |             <a
28 |               href="https://twitter.com/yourusername"
29 |               target="_blank"
30 |               rel="noopener noreferrer"
31 |               className="text-secondary hover:text-primary transition-colors"
32 |             >
33 |               <FaTwitter className="h-6 w-6" />
34 |             </a>
35 |             <a
36 |               href="https://linkedin.com/in/yourusername"
37 |               target="_blank"
38 |               rel="noopener noreferrer"
39 |               className="text-secondary hover:text-primary transition-colors"
40 |             >
41 |               <FaLinkedin className="h-6 w-6" />
42 |             </a>
43 |           </div>
44 |         </div>
45 |       </div>
46 |     </footer>
47 |   )
48 | } 


--------------------------------------------------------------------------------
/src/app/components/Hero.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import Link from 'next/link';
  4 | import Image from 'next/image';
  5 | import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
  6 | import { motion } from 'framer-motion';
  7 | import { fadeInUp, fadeIn, scaleIn } from '@/utils/animations';
  8 | 
  9 | export default function Hero() {
 10 |   return (
 11 |     <section className="py-28">
 12 |       <div className="container max-w-7xl mx-auto px-4">
 13 |         <div className="max-w-3xl mx-auto text-center">
 14 |           <motion.div 
 15 |             className='flex justify-center items-center mb-4'
 16 |             {...scaleIn}
 17 |             transition={{ delay: 0.2 }}
 18 |           >
 19 |             <Image src="/profile.avif" alt="Profile" width={100} height={100} className="rounded-full mb-4 w-32 h-32 object-cover ring-2 ring-primary" />
 20 |           </motion.div>
 21 |           <motion.h1 
 22 |             className="text-4xl md:text-6xl font-bold mb-6"
 23 |             {...fadeInUp}
 24 |             transition={{ delay: 0.3 }}
 25 |           >
 26 |             Hi, I&apos;m <motion.span 
 27 |               className="text-primary"
 28 |               {...fadeIn}
 29 |               transition={{ delay: 0.8 }}
 30 |             >
 31 |               John Doe
 32 |             </motion.span>
 33 |           </motion.h1>
 34 |           <motion.p 
 35 |             className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8"
 36 |             {...fadeInUp}
 37 |             transition={{ delay: 0.4 }}
 38 |           >
 39 |             Full Stack Developer | UI/UX Enthusiast | Open Source Contributor
 40 |           </motion.p>
 41 |           <motion.div 
 42 |             className="flex justify-center space-x-4 mb-8"
 43 |             {...fadeInUp}
 44 |             transition={{ delay: 0.5 }}
 45 |           >
 46 |             <motion.a
 47 |               href="https://github.com"
 48 |               target="_blank"
 49 |               rel="noopener noreferrer"
 50 |               className="text-2xl text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
 51 |               whileHover={{ scale: 1.2 }}
 52 |               whileTap={{ scale: 0.9 }}
 53 |             >
 54 |               <FaGithub />
 55 |             </motion.a>
 56 |             <motion.a
 57 |               href="https://linkedin.com"
 58 |               target="_blank"
 59 |               rel="noopener noreferrer"
 60 |               className="text-2xl text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
 61 |               whileHover={{ scale: 1.2 }}
 62 |               whileTap={{ scale: 0.9 }}
 63 |             >
 64 |               <FaLinkedin />
 65 |             </motion.a>
 66 |             <motion.a
 67 |               href="https://twitter.com"
 68 |               target="_blank"
 69 |               rel="noopener noreferrer"
 70 |               className="text-2xl text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary transition-colors"
 71 |               whileHover={{ scale: 1.2 }}
 72 |               whileTap={{ scale: 0.9 }}
 73 |             >
 74 |               <FaTwitter />
 75 |             </motion.a>
 76 |           </motion.div>
 77 |           <motion.div 
 78 |             className="flex flex-col md:flex-row justify-center gap-4"
 79 |             {...fadeInUp}
 80 |             transition={{ delay: 0.6 }}
 81 |           >
 82 |             <motion.div
 83 |               whileHover={{ scale: 1.05 }}
 84 |               whileTap={{ scale: 0.95 }}
 85 |             >
 86 |               <Link
 87 |                 href="/projects"
 88 |                 className="bg-primary inline-block w-full md:w-auto text-white px-8 py-3 rounded-lg hover:bg-primary/90 transition-colors"
 89 |               >
 90 |                 View Projects
 91 |               </Link>
 92 |             </motion.div>
 93 |             <motion.div
 94 |               whileHover={{ scale: 1.05 }}
 95 |               whileTap={{ scale: 0.95 }}
 96 |             >
 97 |               <Link
 98 |                 href="/contact"
 99 |                 className=" inline-block w-full bg-gray-500  md:w-auto text-gray-800 dark:text-white px-8 py-3 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
100 |               >
101 |                 Contact Me
102 |               </Link>
103 |             </motion.div>
104 |           </motion.div>
105 |         </div>
106 |       </div>
107 |     </section>
108 |   );
109 | } 


--------------------------------------------------------------------------------
/src/app/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import Link from 'next/link'
  3 | import { SunIcon, MoonIcon, Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
  4 | import { useTheme } from '../context/ThemeContext'
  5 | import { motion, AnimatePresence } from 'framer-motion'
  6 | import { useState } from 'react'
  7 | 
  8 | export default function Navbar() {
  9 |   const { theme, toggleTheme } = useTheme();
 10 |   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 11 | 
 12 |   const toggleMobileMenu = () => {
 13 |     setIsMobileMenuOpen(!isMobileMenuOpen);
 14 |   };
 15 | 
 16 |   const menuItems = [
 17 |     { href: '/', label: 'Home' },
 18 |     { href: '/about', label: 'About' },
 19 |     { href: '/projects', label: 'Projects' },
 20 |     { href: '/blogs', label: 'Blogs' },
 21 |     { href: '/contact', label: 'Contact' },
 22 |   ];
 23 | 
 24 |   return (
 25 |     <nav className="fixed w-full bg-white/80 dark:bg-dark/80 backdrop-blur-sm z-50">
 26 |       <div className="container max-w-7xl mx-auto px-4">
 27 |         <div className="flex items-center justify-between h-16">
 28 |           <Link href="/" className="text-xl font-bold text-primary">
 29 |             Devfolio&trade;
 30 |           </Link>
 31 |           
 32 |           {/* Desktop Menu */}
 33 |           <div className="hidden md:flex items-center space-x-8">
 34 |             {menuItems.map((item) => (
 35 |               <Link 
 36 |                 key={item.href}
 37 |                 href={item.href} 
 38 |                 className="hover:text-primary transition-colors"
 39 |               >
 40 |                 {item.label}
 41 |               </Link>
 42 |             ))}
 43 |             <motion.button
 44 |               onClick={toggleTheme}
 45 |               className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
 46 |               whileHover={{ scale: 1.1 }}
 47 |               whileTap={{ scale: 0.9 }}
 48 |             >
 49 |               {theme === 'dark' ? (
 50 |                 <SunIcon className="h-5 w-5" />
 51 |               ) : (
 52 |                 <MoonIcon className="h-5 w-5" />
 53 |               )}
 54 |             </motion.button>
 55 |           </div>
 56 | 
 57 |           {/* Mobile Menu Button */}
 58 |           <motion.button
 59 |             className="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
 60 |             onClick={toggleMobileMenu}
 61 |             whileHover={{ scale: 1.1 }}
 62 |             whileTap={{ scale: 0.9 }}
 63 |           >
 64 |             {isMobileMenuOpen ? (
 65 |               <XMarkIcon className="h-6 w-6" />
 66 |             ) : (
 67 |               <Bars3Icon className="h-6 w-6" />
 68 |             )}
 69 |           </motion.button>
 70 |         </div>
 71 | 
 72 |         {/* Mobile Menu */}
 73 |         <AnimatePresence>
 74 |           {isMobileMenuOpen && (
 75 |             <motion.div
 76 |               initial={{ opacity: 0, height: 0 }}
 77 |               animate={{ opacity: 1, height: 'auto' }}
 78 |               exit={{ opacity: 0, height: 0 }}
 79 |               transition={{ duration: 0.3 }}
 80 |               className="md:hidden"
 81 |             >
 82 |               <div className="py-4 space-y-4">
 83 |                 {menuItems.map((item, index) => (
 84 |                   <motion.div
 85 |                     key={item.href}
 86 |                     initial={{ opacity: 0, x: -20 }}
 87 |                     animate={{ opacity: 1, x: 0 }}
 88 |                     transition={{ delay: index * 0.1 }}
 89 |                   >
 90 |                     <Link
 91 |                       href={item.href}
 92 |                       className="block py-2 hover:text-primary transition-colors"
 93 |                       onClick={() => setIsMobileMenuOpen(false)}
 94 |                     >
 95 |                       {item.label}
 96 |                     </Link>
 97 |                   </motion.div>
 98 |                 ))}
 99 |                 <motion.div
100 |                   initial={{ opacity: 0, x: -20 }}
101 |                   animate={{ opacity: 1, x: 0 }}
102 |                   transition={{ delay: menuItems.length * 0.1 }}
103 |                 >
104 |                   <button
105 |                     onClick={() => {
106 |                       toggleTheme();
107 |                       setIsMobileMenuOpen(false);
108 |                     }}
109 |                     className="flex items-center py-2 hover:text-primary transition-colors"
110 |                   >
111 |                     {theme === 'dark' ? (
112 |                       <>
113 |                         <SunIcon className="h-5 w-5 mr-2" />
114 |                         Light Mode
115 |                       </>
116 |                     ) : (
117 |                       <>
118 |                         <MoonIcon className="h-5 w-5 mr-2" />
119 |                         Dark Mode
120 |                       </>
121 |                     )}
122 |                   </button>
123 |                 </motion.div>
124 |               </div>
125 |             </motion.div>
126 |           )}
127 |         </AnimatePresence>
128 |       </div>
129 |     </nav>
130 |   )
131 | } 


--------------------------------------------------------------------------------
/src/app/components/Newsletter.tsx:
--------------------------------------------------------------------------------
 1 | export default function Newsletter() {
 2 |   return (
 3 |     <section className="py-20">
 4 |        <div className="bg-white dark:bg-dark/50 rounded-lg shadow-md overflow-hidden animate-slide-up">
 5 |         <div className="p-8 md:p-12">
 6 |           <div className="max-w-7xl mx-auto">
 7 |             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
 8 |               <div>
 9 |                 <h2 className="text-2xl font-bold mb-4">Subscribe to My Newsletter</h2>
10 |                 <p className="text-gray-600 dark:text-gray-300">
11 |                   Get the latest updates on my projects, blog posts, and tech insights delivered straight to your inbox.
12 |                 </p>
13 |               </div>
14 |               <form className="flex flex-col sm:flex-row gap-4">
15 |                 <input
16 |                   type="email"
17 |                   placeholder="Enter your email"
18 |                   className="flex-1 px-4 py-3 rounded-lg border dark:text-white border-gray-300 dark:border-gray-600 bg-white text-gray-500 dark:bg-dark focus:outline-none focus:ring-2 focus:ring-primary"
19 |                   required
20 |                 />
21 |                 <button
22 |                   type="submit"
23 |                   className="bg-primary text-white px-8 py-3 rounded-lg hover:bg-primary/90 transition-colors"
24 |                 >
25 |                   Subscribe
26 |                 </button>
27 |               </form>
28 |             </div>
29 |           </div>
30 |         </div>
31 |       </div>
32 |     </section>
33 |   );
34 | } 


--------------------------------------------------------------------------------
/src/app/components/Projects.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { projects } from '@/contents/projects'
  4 | import Image from 'next/image'
  5 | import { FaGithub, FaExternalLinkAlt } from 'react-icons/fa'
  6 | import { motion } from 'framer-motion'
  7 | import { fadeInUp, staggerContainer, cardHoverSmall } from '@/utils/animations'
  8 | 
  9 | export default function Projects() {
 10 |   return (
 11 |     <section className="py-20">
 12 |       <div className="container max-w-7xl mx-auto px-4">
 13 |         <motion.h2 
 14 |           className="text-3xl font-bold mb-12 text-center"
 15 |           {...fadeInUp}
 16 |         >
 17 |           Featured Projects
 18 |         </motion.h2>
 19 | 
 20 |         <motion.div 
 21 |           className="grid grid-cols-1 md:grid-cols-3 gap-8"
 22 |           variants={staggerContainer}
 23 |           initial="initial"
 24 |           animate="animate"
 25 |         >
 26 |           {projects.map((project) => (
 27 |             <motion.article
 28 |               key={project.title}
 29 |               className="bg-white dark:bg-dark/50 rounded-lg shadow-md p-6"
 30 |               variants={fadeInUp}
 31 |               {...cardHoverSmall}
 32 |             >
 33 |               <div className="relative aspect-video mb-4 rounded-lg overflow-hidden">
 34 |                 <Image
 35 |                   src={project.image}
 36 |                   alt={project.title}
 37 |                   fill
 38 |                   className="object-cover"
 39 |                   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
 40 |                 />
 41 |               </div>
 42 |               <motion.h3 
 43 |                 className="text-xl font-semibold mb-2"
 44 |                 whileHover={{ x: 5 }}
 45 |                 transition={{ type: "spring", stiffness: 300 }}
 46 |               >
 47 |                 {project.title}
 48 |               </motion.h3>
 49 |               <motion.p 
 50 |                 className="text-gray-600 dark:text-gray-300 mb-4"
 51 |                 initial={{ opacity: 0 }}
 52 |                 animate={{ opacity: 1 }}
 53 |                 transition={{ delay: 0.2 }}
 54 |               >
 55 |                 {project.description}
 56 |               </motion.p>
 57 |               <motion.div 
 58 |                 className="flex flex-wrap gap-2 mb-4"
 59 |                 initial={{ opacity: 0 }}
 60 |                 animate={{ opacity: 1 }}
 61 |                 transition={{ delay: 0.3 }}
 62 |               >
 63 |                 {project.technologies.map((tech) => (
 64 |                   <motion.span
 65 |                     key={tech}
 66 |                     className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm"
 67 |                     whileHover={{ scale: 1.1 }}
 68 |                     whileTap={{ scale: 0.95 }}
 69 |                   >
 70 |                     {tech}
 71 |                   </motion.span>
 72 |                 ))}
 73 |               </motion.div>
 74 |               <motion.div 
 75 |                 className="flex gap-4"
 76 |                 initial={{ opacity: 0 }}
 77 |                 animate={{ opacity: 1 }}
 78 |                 transition={{ delay: 0.4 }}
 79 |               >
 80 |                 <motion.a
 81 |                   href={project.githubLink}
 82 |                   target="_blank"
 83 |                   rel="noopener noreferrer"
 84 |                   className="flex items-center gap-2 text-secondary hover:text-primary transition-colors"
 85 |                   whileHover={{ x: 5 }}
 86 |                   whileTap={{ scale: 0.95 }}
 87 |                 >
 88 |                   <FaGithub className="h-5 w-5" />
 89 |                   <span>Code</span>
 90 |                 </motion.a>
 91 |                 <motion.a
 92 |                   href={project.demoLink}
 93 |                   target="_blank"
 94 |                   rel="noopener noreferrer"
 95 |                   className="flex items-center gap-2 text-secondary hover:text-primary transition-colors"
 96 |                   whileHover={{ x: 5 }}
 97 |                   whileTap={{ scale: 0.95 }}
 98 |                 >
 99 |                   <FaExternalLinkAlt className="h-5 w-5" />
100 |                   <span>Live Demo</span>
101 |                 </motion.a>
102 |               </motion.div>
103 |             </motion.article>
104 |           ))}
105 |         </motion.div>
106 |       </div>
107 |     </section>
108 |   )
109 | } 


--------------------------------------------------------------------------------
/src/app/contact/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { useState } from 'react'
  4 | import { FaEnvelope, FaPhone, FaMapMarkerAlt } from 'react-icons/fa'
  5 | import { motion } from 'framer-motion'
  6 | import { fadeInUp, fadeIn, slideInLeft, slideInRight } from '@/utils/animations'
  7 | 
  8 | interface FormData {
  9 |   name: string;
 10 |   email: string;
 11 |   message: string;
 12 | }
 13 | 
 14 | type FormStatus = 'idle' | 'loading' | 'success' | 'error';
 15 | 
 16 | export default function Contact() {
 17 |   const [formData, setFormData] = useState<FormData>({
 18 |     name: '',
 19 |     email: '',
 20 |     message: ''
 21 |   })
 22 |   const [status, setStatus] = useState<FormStatus>('idle')
 23 | 
 24 |   const handleSubmit = async (e: React.FormEvent) => {
 25 |     e.preventDefault()
 26 |     setStatus('loading')
 27 | 
 28 |     try {
 29 |       const response = await fetch('/api/contact', {
 30 |         method: 'POST',
 31 |         headers: {
 32 |           'Content-Type': 'application/json',
 33 |         },
 34 |         body: JSON.stringify(formData),
 35 |       })
 36 | 
 37 |       if (!response.ok) throw new Error('Failed to send message')
 38 |       
 39 |       setStatus('success')
 40 |       setFormData({ name: '', email: '', message: '' })
 41 |     } catch {
 42 |       setStatus('error')
 43 |     }
 44 |   }
 45 | 
 46 |   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
 47 |     setFormData(prev => ({
 48 |       ...prev,
 49 |       [e.target.name]: e.target.value
 50 |     }))
 51 |   }
 52 | 
 53 |   return (
 54 |     <div className="container max-w-7xl mx-auto py-12">
 55 |       <motion.h1 
 56 |         className="text-4xl font-bold mb-8 text-center"
 57 |         {...fadeInUp}
 58 |       >
 59 |         Contact Me
 60 |       </motion.h1>
 61 |       
 62 |       <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
 63 |         {/* Contact Information */}
 64 |         <motion.div 
 65 |           className="space-y-8"
 66 |           {...slideInLeft}
 67 |         >
 68 |           <motion.div {...fadeInUp}>
 69 |             <h2 className="text-2xl font-semibold mb-4">Get in Touch</h2>
 70 |             <p className="text-secondary">
 71 |               I&apos;m always open to discussing new projects, creative ideas, or
 72 |               opportunities to be part of your visions.
 73 |             </p>
 74 |           </motion.div>
 75 |           
 76 |           <motion.div 
 77 |             className="space-y-4"
 78 |             variants={fadeIn}
 79 |             initial="initial"
 80 |             animate="animate"
 81 |           >
 82 |             <motion.div 
 83 |               className="flex items-center gap-4"
 84 |               variants={fadeInUp}
 85 |               whileHover={{ x: 10 }}
 86 |               transition={{ type: "spring", stiffness: 300 }}
 87 |             >
 88 |               <FaEnvelope className="h-6 w-6 text-primary" />
 89 |               <div>
 90 |                 <h3 className="font-semibold">Email</h3>
 91 |                 <a href="mailto:your.email@example.com" className="text-secondary hover:text-primary">
 92 |                   your.email@example.com
 93 |                 </a>
 94 |               </div>
 95 |             </motion.div>
 96 |             
 97 |             <motion.div 
 98 |               className="flex items-center gap-4"
 99 |               variants={fadeInUp}
100 |               whileHover={{ x: 10 }}
101 |               transition={{ type: "spring", stiffness: 300 }}
102 |             >
103 |               <FaPhone className="h-6 w-6 text-primary" />
104 |               <div>
105 |                 <h3 className="font-semibold">Phone</h3>
106 |                 <a href="tel:+1234567890" className="text-secondary hover:text-primary">
107 |                   +1 (234) 567-890
108 |                 </a>
109 |               </div>
110 |             </motion.div>
111 |             
112 |             <motion.div 
113 |               className="flex items-center gap-4"
114 |               variants={fadeInUp}
115 |               whileHover={{ x: 10 }}
116 |               transition={{ type: "spring", stiffness: 300 }}
117 |             >
118 |               <FaMapMarkerAlt className="h-6 w-6 text-primary" />
119 |               <div>
120 |                 <h3 className="font-semibold">Location</h3>
121 |                 <p className="text-secondary">San Francisco, CA</p>
122 |               </div>
123 |             </motion.div>
124 |           </motion.div>
125 |         </motion.div>
126 |         
127 |         {/* Contact Form */}
128 |         <motion.div 
129 |           className="bg-white dark:bg-dark/50 p-6 rounded-lg shadow-md"
130 |           {...slideInRight}
131 |         >
132 |           <motion.form 
133 |             onSubmit={handleSubmit} 
134 |             className="space-y-6"
135 |             variants={fadeIn}
136 |             initial="initial"
137 |             animate="animate"
138 |           >
139 |             <motion.div variants={fadeInUp}>
140 |               <label htmlFor="name" className="block text-sm font-medium mb-2">
141 |                 Name
142 |               </label>
143 |               <input
144 |                 type="text"
145 |                 id="name"
146 |                 name="name"
147 |                 value={formData.name}
148 |                 onChange={handleChange}
149 |                 required
150 |                 className="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-dark focus:ring-2 focus:ring-primary focus:border-transparent"
151 |               />
152 |             </motion.div>
153 |             
154 |             <motion.div variants={fadeInUp}>
155 |               <label htmlFor="email" className="block text-sm font-medium mb-2">
156 |                 Email
157 |               </label>
158 |               <input
159 |                 type="email"
160 |                 id="email"
161 |                 name="email"
162 |                 value={formData.email}
163 |                 onChange={handleChange}
164 |                 required
165 |                 className="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-dark focus:ring-2 focus:ring-primary focus:border-transparent"
166 |               />
167 |             </motion.div>
168 |             
169 |             <motion.div variants={fadeInUp}>
170 |               <label htmlFor="message" className="block text-sm font-medium mb-2">
171 |                 Message
172 |               </label>
173 |               <textarea
174 |                 id="message"
175 |                 name="message"
176 |                 value={formData.message}
177 |                 onChange={handleChange}
178 |                 required
179 |                 rows={4}
180 |                 className="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-dark focus:ring-2 focus:ring-primary focus:border-transparent"
181 |               />
182 |             </motion.div>
183 |             
184 |             <motion.button
185 |               type="submit"
186 |               disabled={status === 'loading'}
187 |               className="w-full btn btn-primary"
188 |               whileHover={{ scale: 1.02 }}
189 |               whileTap={{ scale: 0.98 }}
190 |             >
191 |               {status === 'loading' ? 'Sending...' : 'Send Message'}
192 |             </motion.button>
193 |             
194 |             {status === 'success' && (
195 |               <motion.p 
196 |                 className="text-green-500 text-center"
197 |                 initial={{ opacity: 0, y: 10 }}
198 |                 animate={{ opacity: 1, y: 0 }}
199 |               >
200 |                 Message sent successfully!
201 |               </motion.p>
202 |             )}
203 |             
204 |             {status === 'error' && (
205 |               <motion.p 
206 |                 className="text-red-500 text-center"
207 |                 initial={{ opacity: 0, y: 10 }}
208 |                 animate={{ opacity: 1, y: 0 }}
209 |               >
210 |                 Failed to send message. Please try again.
211 |               </motion.p>
212 |             )}
213 |           </motion.form>
214 |         </motion.div>
215 |       </div>
216 |     </div>
217 |   )
218 | } 


--------------------------------------------------------------------------------
/src/app/context/ThemeContext.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { createContext, useContext, useEffect, useState } from "react";
 4 | 
 5 | type Theme = "light" | "dark";
 6 | 
 7 | interface ThemeContextType {
 8 |   theme: Theme;
 9 |   toggleTheme: () => void;
10 |   setTheme: (theme: Theme) => void;
11 | }
12 | 
13 | const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
14 | 
15 | export function ThemeProvider({ children }: { children: React.ReactNode }) {
16 |   const [theme, setThemeState] = useState<Theme>("light");
17 |   const [mounted, setMounted] = useState(false);
18 | 
19 |   // Update theme
20 |   const setTheme = (newTheme: Theme) => {
21 |     setThemeState(newTheme);
22 |     localStorage.setItem("theme", newTheme);
23 |     document.documentElement.classList.toggle("dark", newTheme === "dark");
24 |   };
25 | 
26 |   // Toggle theme
27 |   const toggleTheme = () => {
28 |     setTheme(theme === "light" ? "dark" : "light");
29 |     console.log(theme);
30 |   };
31 | 
32 |   // Initialize theme
33 |   useEffect(() => {
34 |     const savedTheme = localStorage.getItem("theme") as Theme | null;
35 |     const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
36 |     const initialTheme = savedTheme || systemTheme;
37 | 
38 |     setThemeState(initialTheme);
39 |     document.documentElement.classList.toggle("dark", initialTheme === "dark");
40 |     setMounted(true);
41 |   }, []);
42 | 
43 |   // Prevent flash of wrong theme
44 |   if (!mounted) {
45 |     return null;
46 |   }
47 | 
48 |   return (
49 |     <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
50 |       {children}
51 |     </ThemeContext.Provider>
52 |   );
53 | }
54 | 
55 | export function useTheme() {
56 |   const context = useContext(ThemeContext);
57 |   if (context === undefined) {
58 |     throw new Error("useTheme must be used within a ThemeProvider");
59 |   }
60 |   return context;
61 | }
62 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdalmamunit427/devfolio-nextjs-portfolio-website/5cfcf9e90e2caac0cebb56bfbea42a31347c243d/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | @theme {
 4 |   --color-primary: #007AFF;
 5 |   --color-secondary: #6B7280;
 6 |   --color-dark: #1F2937;
 7 |   --color-light: #F9FAFB;
 8 |   --color-text: #000000;
 9 |   --color-bg: #ffffff;
10 | 
11 |   --font-sans: 'Inter', sans-serif;
12 | 
13 |   --animation-fade-in: fadeIn 0.5s ease-in-out;
14 |   --animation-slide-up: slideUp 0.5s ease-in-out;
15 | }
16 | 
17 | 
18 | @custom-variant dark (&:where(.dark, .dark *));
19 | 
20 | a {
21 |   transition: all 0.2s ease;
22 | }
23 | 
24 | @layer components {
25 |   .container {
26 |     @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
27 |   }
28 |   
29 |   .btn {
30 |     @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
31 |   }
32 |   
33 |   .btn-primary {
34 |     @apply bg-primary text-white hover:bg-primary/90;
35 |   }
36 |   
37 |   .btn-secondary {
38 |     @apply bg-secondary text-white hover:bg-secondary/90;
39 |   }
40 |   
41 |   .section-title {
42 |     @apply text-3xl font-bold mb-8 text-center;
43 |   }
44 | } 
45 | 
46 | @keyframes fadeIn {
47 |   from {
48 |     opacity: 0;
49 |   }
50 |   to {
51 |     opacity: 1;
52 |   }
53 | }
54 | 
55 | @keyframes slideUp {
56 |   from {
57 |     transform: translateY(20px);
58 |     opacity: 0;
59 |   }
60 |   to {
61 |     transform: translateY(0);
62 |     opacity: 1;
63 |   }
64 | }


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | import "./globals.css";
 4 | import { ThemeProvider } from "./context/ThemeContext";
 5 | import Navbar from "./components/Navbar";
 6 | import Footer from "./components/Footer";
 7 | 
 8 | const geistSans = Geist({
 9 |   variable: "--font-geist-sans",
10 |   subsets: ["latin"],
11 | });
12 | 
13 | const geistMono = Geist_Mono({
14 |   variable: "--font-geist-mono",
15 |   subsets: ["latin"],
16 | });
17 | 
18 | export const metadata: Metadata = {
19 |   title: "Devfolio | Portfolio Website using Next.js, Tailwind CSS, and Framer Motion",
20 |   description: "Devfolio is a portfolio website for developers to showcase their projects and skills.",
21 | };
22 | 
23 | export default function RootLayout({
24 |   children,
25 | }: Readonly<{
26 |   children: React.ReactNode;
27 | }>) {
28 |   return (
29 |     <html lang="en">
30 |     <body className={`bg-white transition-colors dark:bg-gray-900 dark:text-white ${geistSans.variable} ${geistMono.variable}`}>
31 |         <ThemeProvider>
32 |           <Navbar />
33 |           <main className="min-h-screen pt-24">
34 |             {children}
35 |           </main>
36 |           <Footer />
37 |         </ThemeProvider>
38 |       </body>
39 |     </html>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Blogs from "./components/Blogs";
 2 | import Hero from "./components/Hero";
 3 | import Newsletter from "./components/Newsletter";
 4 | import Projects from "./components/Projects";
 5 | 
 6 | 
 7 | export default function Home() {
 8 |   return (
 9 |     <main>
10 |       <Hero />
11 |       <Projects />
12 |       <Blogs />
13 |       <Newsletter />
14 |     </main>
15 |   );
16 | } 


--------------------------------------------------------------------------------
/src/app/projects/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { projects } from '@/contents/projects'
  4 | import Image from 'next/image'
  5 | import { FaGithub, FaExternalLinkAlt } from 'react-icons/fa'
  6 | import { motion } from 'framer-motion'
  7 | import { fadeInUp, staggerContainer, cardHoverSmall } from '@/utils/animations'
  8 | 
  9 | export default function Projects() {
 10 |   return (
 11 |     <div className="container max-w-7xl mx-auto py-12">
 12 |       <motion.h1 
 13 |         className="text-4xl font-bold mb-4 text-center"
 14 |         initial={{ opacity: 0, y: -20 }}
 15 |         animate={{ opacity: 1, y: 0 }}
 16 |         transition={{ duration: 0.5 }}
 17 |       >
 18 |         My Projects
 19 |       </motion.h1>
 20 |       <motion.p 
 21 |         className="text-lg text-secondary mb-24 text-center"
 22 |         initial={{ opacity: 0, y: 20 }}
 23 |         animate={{ opacity: 1, y: 0 }}
 24 |         transition={{ duration: 0.5, delay: 0.2 }}
 25 |       >
 26 |         Here are some of my recent projects. Click on the links to view the code or live demo.
 27 |       </motion.p>
 28 |       
 29 |       <motion.div 
 30 |         className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3  gap-8"
 31 |         variants={staggerContainer}
 32 |         initial="initial"
 33 |         animate="animate"
 34 |       >
 35 |         {projects.map((project, index) => (
 36 |           <motion.div
 37 |             key={index}
 38 |             className="bg-white dark:bg-dark/50 rounded-lg shadow-md overflow-hidden"
 39 |             variants={fadeInUp}
 40 |             {...cardHoverSmall}
 41 |           >
 42 |             <motion.div 
 43 |               className="aspect-video bg-gray-200 dark:bg-gray-800"
 44 |               whileHover={{ scale: 1.05 }}
 45 |               transition={{ type: "spring", stiffness: 300 }}
 46 |             >
 47 |               <Image
 48 |                 src={project.image}
 49 |                 alt={project.title}
 50 |                 className="object-cover w-full h-full"
 51 |                 width={500}
 52 |                 height={500}
 53 |               />
 54 |             </motion.div>
 55 |             
 56 |             <div className="p-6">
 57 |               <motion.h3 
 58 |                 className="text-xl font-semibold mb-2"
 59 |                 whileHover={{ x: 5 }}
 60 |                 transition={{ type: "spring", stiffness: 300 }}
 61 |               >
 62 |                 {project.title}
 63 |               </motion.h3>
 64 |               <motion.p 
 65 |                 className="text-secondary mb-4"
 66 |                 initial={{ opacity: 0 }}
 67 |                 animate={{ opacity: 1 }}
 68 |                 transition={{ delay: 0.2 }}
 69 |               >
 70 |                 {project.description}
 71 |               </motion.p>
 72 |               
 73 |               <motion.div 
 74 |                 className="flex flex-wrap gap-2 mb-4"
 75 |                 initial={{ opacity: 0 }}
 76 |                 animate={{ opacity: 1 }}
 77 |                 transition={{ delay: 0.3 }}
 78 |               >
 79 |                 {project.technologies.map((tech, techIndex) => (
 80 |                   <motion.span
 81 |                     key={techIndex}
 82 |                     className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm"
 83 |                     whileHover={{ scale: 1.1 }}
 84 |                     whileTap={{ scale: 0.95 }}
 85 |                   >
 86 |                     {tech}
 87 |                   </motion.span>
 88 |                 ))}
 89 |               </motion.div>
 90 |               
 91 |               <motion.div 
 92 |                 className="flex gap-4"
 93 |                 initial={{ opacity: 0 }}
 94 |                 animate={{ opacity: 1 }}
 95 |                 transition={{ delay: 0.4 }}
 96 |               >
 97 |                 <motion.a
 98 |                   href={project.githubLink}
 99 |                   target="_blank"
100 |                   rel="noopener noreferrer"
101 |                   className="flex items-center gap-2 text-secondary hover:text-primary transition-colors"
102 |                   whileHover={{ x: 5 }}
103 |                   whileTap={{ scale: 0.95 }}
104 |                 >
105 |                   <FaGithub className="h-5 w-5" />
106 |                   <span>Code</span>
107 |                 </motion.a>
108 |                 <motion.a
109 |                   href={project.demoLink}
110 |                   target="_blank"
111 |                   rel="noopener noreferrer"
112 |                   className="flex items-center gap-2 text-secondary hover:text-primary transition-colors"
113 |                   whileHover={{ x: 5 }}
114 |                   whileTap={{ scale: 0.95 }}
115 |                 >
116 |                   <FaExternalLinkAlt className="h-5 w-5" />
117 |                   <span>Live Demo</span>
118 |                 </motion.a>
119 |               </motion.div>
120 |             </div>
121 |           </motion.div>
122 |         ))}
123 |       </motion.div>
124 |     </div>
125 |   )
126 | } 


--------------------------------------------------------------------------------
/src/contents/blogs.ts:
--------------------------------------------------------------------------------
 1 | import { Blog } from "@/types";
 2 | 
 3 | export const blogs: Blog[] = [
 4 |     {
 5 |         title: 'Getting Started with Next.js 14',
 6 |         excerpt: 'Learn about the new features and improvements in Next.js 14.',
 7 |         date: '2024-03-15',
 8 |         readTime: '5 min read',
 9 |         slug: 'getting-started-with-nextjs-14',
10 |       },
11 |       {
12 |         title: 'Mastering TypeScript for React',
13 |         excerpt: 'A comprehensive guide to using TypeScript with React applications.',
14 |         date: '2024-03-10',
15 |         readTime: '8 min read',
16 |         slug: 'mastering-typescript-for-react',
17 |       },
18 |       {
19 |         title: 'Building Responsive Layouts with Tailwind CSS',
20 |         excerpt: 'Tips and tricks for creating responsive designs using Tailwind CSS.',
21 |         date: '2024-03-05',
22 |         readTime: '6 min read',
23 |         slug: 'building-responsive-layouts-with-tailwind-css',
24 |       },
25 |       {
26 |         title: 'Understanding React Hooks',
27 |         excerpt: 'A deep dive into React Hooks and how to use them effectively.',
28 |         date: '2024-03-01',
29 |         readTime: '7 min read',
30 |         slug: 'understanding-react-hooks',
31 |       },
32 |         {
33 |             title: 'Deploying Next.js Applications on Vercel',
34 |             excerpt: 'Step-by-step guide to deploying your Next.js applications on Vercel.',
35 |             date: '2024-02-25',
36 |             readTime: '4 min read',
37 |             slug: 'deploying-nextjs-applications-on-vercel',
38 |         },
39 |         {
40 |             title: 'Building a RESTful API with Node.js and Express',
41 |             excerpt: 'Learn how to create a RESTful API using Node.js and Express.',
42 |             date: '2024-02-20',
43 |             readTime: '10 min read',
44 |             slug: 'building-a-restful-api-with-nodejs-and-express',
45 |         },
46 |   ];


--------------------------------------------------------------------------------
/src/contents/projects.ts:
--------------------------------------------------------------------------------
 1 | import { Project } from "@/types";
 2 | 
 3 | 
 4 | export const projects: Project[] = [
 5 |     {
 6 |         title: 'E-commerce Platform',
 7 |         description: 'A full-stack e-commerce platform built with Next.js, TypeScript, and Tailwind CSS.',
 8 |         technologies: ['Next.js', 'TypeScript', 'Tailwind CSS', 'Stripe'],
 9 |         githubLink: 'https://github.com',
10 |         demoLink: 'https://demo.com',
11 |         image: '/projects/e-commerce-website.png',
12 |       },
13 |       {
14 |         title: 'Task Management App',
15 |         description: 'A collaborative task management application with real-time updates.',
16 |         technologies: ['React', 'Node.js', 'MongoDB', 'Socket.io'],
17 |         githubLink: 'https://github.com',
18 |         demoLink: 'https://demo.com',
19 |         image: '/projects/task-manager.webp',
20 |       },
21 |       {
22 |         title: 'Portfolio Website',
23 |         description: 'My personal portfolio website showcasing my projects and skills.',
24 |         technologies: ['Next.js', 'Tailwind CSS', 'Framer Motion'],
25 |         githubLink: 'https://github.com',
26 |         demoLink: 'https://demo.com',
27 |         image: '/projects/portfolio-website.jpg',
28 |       },
29 |       {
30 |         title: 'Blog Platform',
31 |         description: 'A blogging platform with user authentication and markdown support.',
32 |         technologies: ['Gatsby', 'GraphQL', 'Contentful'],
33 |         githubLink: 'https://github.com',
34 |         demoLink: 'https://demo.com',
35 |         image: '/projects/blog-website.jpeg',
36 |       },
37 |       {
38 |         title: 'Weather App',
39 |         description: 'A weather application that provides real-time weather updates.',
40 |         technologies: ['React', 'OpenWeatherMap API'],
41 |         githubLink: 'https://github.com',
42 |         demoLink: 'https://demo.com',
43 |         image: '/projects/weather-app.png',
44 |       },
45 |       {
46 |         title: 'Chat Application',
47 |         description: 'A real-time chat application using WebSocket technology.',
48 |         technologies: ['React', 'Node.js', 'Socket.io'],
49 |         githubLink: 'https://github.com',
50 |         demoLink: 'https://demo.com',
51 |         image: '/projects/chat-app.png',
52 |       },
53 |       {
54 |         title: 'Recipe Finder',
55 |         description: 'A recipe search application using the Edamam API.',
56 |         technologies: ['React', 'Edamam API'],
57 |         githubLink: 'https://github.com',
58 |         demoLink: 'https://demo.com',
59 |         image: '/projects/recipe-finder.png',
60 |       },
61 |       {
62 |         title: 'Expense Tracker',
63 |         description: 'A personal finance tracker to manage expenses and income.',
64 |         technologies: ['React', 'Firebase'],
65 |         githubLink: 'https://github.com',
66 |         demoLink: 'https://demo.com',
67 |         image: '/projects/expense-tracker.webp',
68 |       }
69 |   ];


--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
 1 | export interface Project {
 2 |   title: string;
 3 |   description: string;
 4 |   technologies: string[];
 5 |   githubLink: string;
 6 |   demoLink: string;
 7 |   image: string;
 8 | }
 9 | 
10 | export interface Blog {
11 |   title: string;
12 |   excerpt: string;
13 |   date: string;
14 |   readTime: string;
15 |   slug: string;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/utils/animations.ts:
--------------------------------------------------------------------------------
 1 | export const fadeInUp = {
 2 |   initial: { opacity: 0, y: 20 },
 3 |   animate: { opacity: 1, y: 0 },
 4 |   transition: { duration: 0.5 }
 5 | }
 6 | 
 7 | export const fadeInDown = {
 8 |   initial: { opacity: 0, y: -20 },
 9 |   animate: { opacity: 1, y: 0 },
10 |   transition: { duration: 0.5 }
11 | }
12 | 
13 | export const fadeIn = {
14 |   initial: { opacity: 0 },
15 |   animate: { opacity: 1 },
16 |   transition: { duration: 0.5 }
17 | }
18 | 
19 | export const staggerContainer = {
20 |   animate: {
21 |     transition: {
22 |       staggerChildren: 0.1
23 |     }
24 |   }
25 | }
26 | 
27 | export const cardHover = {
28 |   whileHover: { scale: 1.05 },
29 |   transition: { type: "spring", stiffness: 300 }
30 | }
31 | 
32 | export const cardHoverSmall = {
33 |   whileHover: { scale: 1.02 },
34 |   transition: { type: "spring", stiffness: 300 }
35 | }
36 | 
37 | export const pageTransition = {
38 |   initial: { opacity: 0 },
39 |   animate: { opacity: 1 },
40 |   exit: { opacity: 0 },
41 |   transition: { duration: 0.5 }
42 | }
43 | 
44 | export const slideInLeft = {
45 |   initial: { x: -60, opacity: 0 },
46 |   animate: { x: 0, opacity: 1 },
47 |   transition: { duration: 0.5 }
48 | }
49 | 
50 | export const slideInRight = {
51 |   initial: { x: 60, opacity: 0 },
52 |   animate: { x: 0, opacity: 1 },
53 |   transition: { duration: 0.5 }
54 | }
55 | 
56 | export const scaleIn = {
57 |   initial: { scale: 0.8, opacity: 0 },
58 |   animate: { scale: 1, opacity: 1 },
59 |   transition: { duration: 0.5 }
60 | } 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------