├── .eslintrc.cjs
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
    ├── projects
    │   ├── ai-saas.png
    │   ├── social-media.png
    │   └── stopwatch.png
    └── vite.svg
├── src
    ├── App.css
    ├── App.jsx
    ├── assets
    │   └── react.svg
    ├── components
    │   ├── Contact.jsx
    │   ├── Hero.jsx
    │   ├── Navbar.jsx
    │   └── Projects.jsx
    ├── index.css
    └── main.jsx
└── vite.config.js


/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |   ],
10 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
11 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 |   settings: { react: { version: '18.2' } },
13 |   plugins: ['react-refresh'],
14 |   rules: {
15 |     'react/jsx-no-target-blank': 'off',
16 |     'react-refresh/only-export-components': [
17 |       'warn',
18 |       { allowConstantExport: true },
19 |     ],
20 |   },
21 | }
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | 
  3 | # Build a Developer Portfolio with Vite & Framer Motion
  4 | 
  5 | <div align="center">
  6 |   <br />
  7 |   <a href="https://youtu.be/KSQOPRea-P4" target="_blank">
  8 | 
  9 |   <img width="1280" height="720" alt="Copy of Copy of Copy of Copy of Copy of Copy of Copy of Copy of Copy of Copy of Copy of Copy of Copy of Copy of Copy of 10,000 REACT COMPONENTS (3)" src="https://github.com/user-attachments/assets/44608dad-40be-4a71-ae43-a0a76f1505d8" />
 10 | 
 11 |   </a>
 12 |   <br />
 13 |   <div>
 14 |     <img src="https://img.shields.io/badge/-Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite" />
 15 |     <img src="https://img.shields.io/badge/-React-61DAFB?style=for-the-badge&logo=react&logoColor=black" alt="React" />
 16 |     <img src="https://img.shields.io/badge/-Framer_Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white" alt="Framer Motion" />
 17 |     <img src="https://img.shields.io/badge/-TailwindCSS-06B6D4?style=for-the-badge&logo=tailwindcss" alt="Tailwind CSS" />
 18 |     <img src="https://img.shields.io/badge/-EmailJS-FF5C83?style=for-the-badge&logo=emailjs&logoColor=white" alt="EmailJS" />
 19 |   </div>
 20 |   <h3 align="center">Craft a Stunning Personal Portfolio with Vite, React & Framer Motion</h3>
 21 |   <div align="center">
 22 |     Follow the full video tutorial on  
 23 |     <a href="https://youtu.be/YOUR_VIDEO_ID" target="_blank"><b>YouTube</b></a>
 24 |   </div>
 25 |   <br />
 26 | </div>
 27 | 
 28 | ## 📋 Table of Contents
 29 | 
 30 | 1. [Introduction](#-introduction)
 31 | 2. [Tech Stack](#-tech-stack)
 32 | 3. [Features](#-features)
 33 | 4. [Quick Start](#-quick-start)
 34 | 5. [Screenshots](#-screenshots)
 35 | 6. [Deployment](#-deployment)
 36 | 
 37 | ---
 38 | 
 39 | ## 🚀 Introduction
 40 | 
 41 | In this comprehensive tutorial, you’ll build a modern **Developer Portfolio** from scratch using **Vite**, **React**, and **Framer Motion**. You’ll implement an animated navbar, glitch title effect, floating cards, responsive hero, projects grid, a fully working contact form powered by EmailJS, and an animated footer—then deploy to Vercel.
 42 | 
 43 | **Timestamps at a glance:**
 44 | 
 45 | * 00:00 Intro & What We’ll Build
 46 | * 12:04 Animated Navbar with Framer Motion
 47 | * 31:49 Hero Section Entrance Animation
 48 | * 40:49 Glitch Title Effect
 49 | * 55:12 Syntax‑Highlighted Code Block
 50 | * 57:05 Floating Card Animation
 51 | * 1:14:03 Projects Grid Layout
 52 | * 1:36:04 Contact Section UI
 53 | * 1:50:47 EmailJS Configuration
 54 | * 2:09:38 Animated Footer
 55 | * 2:13:02 Deploying to Vercel
 56 | 
 57 | 🎥 Watch the full tutorial: [YouTube](https://youtu.be/KSQOPRea-P4)
 58 | 
 59 | ---
 60 | 
 61 | ## ⚙️ Tech Stack
 62 | 
 63 | * **Vite** – Next‑generation frontend tooling
 64 | * **React 18** – Component‑based UI
 65 | * **Framer Motion** – Fluid animations & gestures
 66 | * **TailwindCSS** – Utility‑first styling
 67 | * **EmailJS** – Client‑side email sending
 68 | * **TypeScript** (optional) – Static type checking
 69 | 
 70 | ---
 71 | 
 72 | ## ⚡️ Features
 73 | 
 74 | * ✨ **Animated Navbar**
 75 |   Smooth entrance and hover states built with Framer Motion.
 76 | 
 77 | * 🚀 **Hero Section**
 78 |   Engaging entrance animation, glitch title effect & call‑to‑action buttons.
 79 | 
 80 | * 🃏 **Floating Card**
 81 |   Interactive profile card floating on scroll.
 82 | 
 83 | * 💻 **Embedded Code Block**
 84 |   Syntax-highlighted code snippet in the hero.
 85 | 
 86 | * 🎨 **Projects Showcase**
 87 |   Responsive grid of project cards with glassy hover effects.
 88 | 
 89 | * 📱 **Mobile Responsiveness**
 90 |   Tweaks for a perfect experience on all screen sizes.
 91 | 
 92 | * 📨 **Contact Form**
 93 |   Styled form with glassy submit button, integrated with EmailJS.
 94 | 
 95 | * 🎬 **Animated Footer**
 96 |   Subtle motion effects to wrap up the page.
 97 | 
 98 | * ☁️ **One‑Click Deployment**
 99 |   Deploy your portfolio to Vercel in seconds.
100 | 
101 | ---
102 | 
103 | ## 👌 Quick Start
104 | 
105 | ### Prerequisites
106 | 
107 | * [Node.js](https://nodejs.org/) (v14+)
108 | * [EmailJS Account](https://www.emailjs.com/)
109 | 
110 | ### Clone and Run
111 | 
112 | ```bash
113 | git clone https://github.com/yourusername/portfolio-vite-framer.git
114 | cd portfolio-vite-framer
115 | npm install
116 | ```
117 | 
118 | 1. Copy `.env.example` to `.env.local` and add your EmailJS service ID, template ID & public key.
119 | 2. Start the development server:
120 | 
121 |    ```bash
122 |    npm run dev
123 |    ```
124 | 3. Open [http://localhost:5173](http://localhost:5173) in your browser.
125 | 
126 | ---
127 | 
128 | ## 🖼️ Screenshots
129 | 
130 | <img width="1200" alt="Hero Animation" src="https://github.com/user-attachments/assets/hero-screenshot.png" />  
131 | <img width="1200" alt="Projects Grid" src="https://github.com/user-attachments/assets/projects-screenshot.png" />  
132 | <img width="1200" alt="Contact Form" src="https://github.com/user-attachments/assets/contact-screenshot.png" />
133 | 
134 | ---
135 | 
136 | ## ☁️ Deployment
137 | 
138 | ### Deploy on Vercel
139 | 
140 | 1. Push your code to GitHub
141 | 2. Go to [Vercel](https://vercel.com/) and import your repo
142 | 3. Add your EmailJS keys as Environment Variables in Vercel dashboard
143 | 4. Click **Deploy** — your live portfolio will be online in moments!
144 | 
145 | ---
146 | 
147 | ## 🔗 Useful Links
148 | 
149 | * [Vite Docs](https://vitejs.dev/)
150 | * [React Docs](https://reactjs.org/docs)
151 | * [Framer Motion Docs](https://www.framer.com/motion/)
152 | * [Tailwind CSS Docs](https://tailwindcss.com/docs)
153 | * [EmailJS Docs](https://www.emailjs.com/docs/)
154 | * [Vercel](https://vercel.com/)
155 | 
156 | ---
157 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React</title>
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
11 |     />
12 |     <link
13 |       rel="stylesheet"
14 |       href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap"
15 |     />
16 |   </head>
17 |   <body>
18 |     <div id="root"></div>
19 |     <script type="module" src="/src/main.jsx"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cool-animation-portfolio",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@emailjs/browser": "^4.4.1",
14 |     "framer-motion": "^12.16.0",
15 |     "react": "^18.3.1",
16 |     "react-dom": "^18.3.1",
17 |     "react-syntax-highlighter": "^15.6.1"
18 |   },
19 |   "devDependencies": {
20 |     "@types/react": "^18.3.3",
21 |     "@types/react-dom": "^18.3.0",
22 |     "@vitejs/plugin-react": "^4.3.1",
23 |     "eslint": "^8.57.0",
24 |     "eslint-plugin-react": "^7.34.3",
25 |     "eslint-plugin-react-hooks": "^4.6.2",
26 |     "eslint-plugin-react-refresh": "^0.4.7",
27 |     "vite": "^5.3.4"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/public/projects/ai-saas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/machadop1407/animation-personal-portfolio/a89ff47b98bda9d4636cf416f4c45d8060c126a8/public/projects/ai-saas.png


--------------------------------------------------------------------------------
/public/projects/social-media.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/machadop1407/animation-personal-portfolio/a89ff47b98bda9d4636cf416f4c45d8060c126a8/public/projects/social-media.png


--------------------------------------------------------------------------------
/public/projects/stopwatch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/machadop1407/animation-personal-portfolio/a89ff47b98bda9d4636cf416f4c45d8060c126a8/public/projects/stopwatch.png


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 |   --primary-color: #7c3aed;
  9 |   --primary-dark: #5b21b6;
 10 |   --secondary-color: #db2777;
 11 |   --accent-color: #f472b6;
 12 |   --text-color: #e2e8f0;
 13 |   --light-text: #94a3b8;
 14 |   --background: #0f172a;
 15 |   --section-bg: #1e293b;
 16 |   --card-bg: #1e293b;
 17 |   --gradient-start: #7c3aed;
 18 |   --gradient-end: #db2777;
 19 |   --nav-bg: rgba(15, 23, 42, 0.8);
 20 |   --card-border: rgba(148, 163, 184, 0.1);
 21 | }
 22 | 
 23 | body {
 24 |   line-height: 1.6;
 25 |   color: var(--text-color);
 26 |   background: var(--background);
 27 | }
 28 | 
 29 | .app {
 30 |   opacity: 0;
 31 |   transform: translateY(20px);
 32 |   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 33 |   width: 100%;
 34 |   min-height: 100vh;
 35 | }
 36 | 
 37 | .app.loaded {
 38 |   opacity: 1;
 39 |   transform: translateY(0);
 40 | }
 41 | 
 42 | .navbar {
 43 |   position: fixed;
 44 |   top: 0;
 45 |   left: 0;
 46 |   right: 0;
 47 |   display: flex;
 48 |   justify-content: space-between;
 49 |   align-items: center;
 50 |   padding: 1.5rem 5%;
 51 |   background: var(--nav-bg);
 52 |   backdrop-filter: blur(10px);
 53 |   z-index: 1000;
 54 |   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
 55 |   border-bottom: 1px solid var(--card-border);
 56 | }
 57 | 
 58 | .logo {
 59 |   font-size: 1.5rem;
 60 |   font-weight: 700;
 61 |   color: var(--accent-color);
 62 |   text-shadow: 0 0 10px rgba(244, 114, 182, 0.3);
 63 | }
 64 | 
 65 | .nav-links {
 66 |   display: flex;
 67 |   gap: 2rem;
 68 |   list-style: none;
 69 | }
 70 | 
 71 | .nav-links a {
 72 |   text-decoration: none;
 73 |   color: var(--text-color);
 74 |   font-weight: 500;
 75 |   transition: all 0.3 ease;
 76 |   position: relative;
 77 |   cursor: pointer;
 78 | }
 79 | 
 80 | .nav-links a::after {
 81 |   content: "";
 82 |   position: absolute;
 83 |   bottom: -5px;
 84 |   left: 0;
 85 |   width: 0;
 86 |   height: 2px;
 87 |   background: var(--accent-color);
 88 |   transition: width 0.3s ease;
 89 | }
 90 | 
 91 | .nav-links a:hover {
 92 |   color: var(--accent-color);
 93 | }
 94 | 
 95 | .nav-links a:hover::after {
 96 |   width: 100%;
 97 | }
 98 | 
 99 | /* Hero Section */
100 | 
101 | .hero {
102 |   min-height: 100vh;
103 |   background: linear-gradient(
104 |     135deg,
105 |     var(--gradient-start) 0%,
106 |     var(--gradient-end) 100%
107 |   );
108 | 
109 |   display: flex;
110 |   align-items: center;
111 |   padding: 0 5%;
112 |   position: relative;
113 |   overflow: hidden;
114 | }
115 | 
116 | .hero-container {
117 |   display: flex;
118 |   justify-content: space-between;
119 |   align-items: center;
120 |   gap: 4rem;
121 |   max-width: 1400px;
122 |   margin: 0 auto;
123 |   width: 100%;
124 |   padding-top: 100px;
125 | }
126 | 
127 | .hero-content {
128 |   flex: 1;
129 |   text-align: left;
130 |   max-width: 600px;
131 |   position: relative;
132 |   z-index: 2;
133 | }
134 | 
135 | .hero-badge {
136 |   display: inline-block;
137 |   padding: 0.5rem 1rem;
138 |   background: rgba(255, 255, 255, 0.1);
139 |   border-radius: 50px;
140 |   margin-bottom: 1.5rem;
141 |   backdrop-filter: blur(5px);
142 |   border: 1px solid rgba(255, 255, 255, 0.2);
143 | }
144 | 
145 | .glitch {
146 |   font-size: 4.5rem;
147 |   font-weight: 800;
148 |   text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
149 |   position: relative;
150 |   margin-bottom: 1rem;
151 |   line-height: 1.1;
152 | }
153 | 
154 | .hero-subtitle {
155 |   font-size: 2rem;
156 |   color: var(--accent-color);
157 |   margin-bottom: 1.5rem;
158 |   font-weight: 600;
159 | }
160 | 
161 | .hero-description {
162 |   font-size: 1.1rem;
163 |   margin-bottom: 2rem;
164 |   line-height: 1.7;
165 | }
166 | 
167 | .cta-buttons {
168 |   display: flex;
169 |   gap: 1rem;
170 |   margin-bottom: 2rem;
171 | }
172 | 
173 | .cta-primary,
174 | .cta-secondary {
175 |   padding: 0.8rem 2rem;
176 |   border-radius: 50px;
177 |   font-weight: 600;
178 |   font-size: 1rem;
179 |   text-decoration: none;
180 |   transition: all 0.3s ease;
181 |   position: relative;
182 |   overflow: hidden;
183 |   display: inline-flex;
184 |   align-items: center;
185 |   justify-content: center;
186 |   min-width: 160px;
187 | }
188 | 
189 | .cta-primary {
190 |   background: white;
191 |   color: var(--primary-color);
192 |   box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
193 |   border: 2px solid white;
194 | }
195 | 
196 | .cta-secondary {
197 |   background: transparent;
198 |   color: white;
199 |   box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
200 |   border: 2px solid white;
201 |   backdrop-filter: blur(5px);
202 | }
203 | 
204 | .cta-secondary:hover {
205 |   background: rgba(255, 255, 255, 0.1);
206 |   border-color: rgba(255, 255, 255, 0.3);
207 |   transform: translateY(-2px);
208 | }
209 | 
210 | .cta-secondary:active {
211 |   transform: translateY(0);
212 | }
213 | 
214 | .cta-secondary::before {
215 |   content: "";
216 |   position: absolute;
217 |   top: 0;
218 |   left: -100%;
219 |   width: 100%;
220 |   height: 100%;
221 |   background: linear-gradient(
222 |     90deg,
223 |     transparent,
224 |     rgba(255, 255, 255, 0.2),
225 |     transparent
226 |   );
227 |   transition: 0.5s;
228 | }
229 | 
230 | .cta-secondary:hover::before {
231 |   left: 100%;
232 | }
233 | 
234 | .social-links {
235 |   display: flex;
236 |   gap: 1.5rem;
237 | }
238 | 
239 | .social-links a {
240 |   color: white;
241 |   font-size: 1.5rem;
242 |   transition: all 0.3s ease;
243 | }
244 | 
245 | .social-links a:hover {
246 |   color: var(--accent-color);
247 | }
248 | 
249 | .floating-card {
250 |   position: absolute;
251 |   bottom: 2rem;
252 |   right: -2rem;
253 |   background: rgba(255, 255, 255, 0.1);
254 |   backdrop-filter: blur(10px);
255 |   padding: 1rem 1.5rem;
256 |   border-radius: 15px;
257 |   border: 1px solid rgba(255, 255, 255, 0.2);
258 |   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
259 | }
260 | 
261 | .card-content {
262 |   display: flex;
263 |   align-items: center;
264 |   gap: 1rem;
265 | }
266 | 
267 | .card-text {
268 |   color: white;
269 |   font-size: 0.9rem;
270 |   font-weight: 500;
271 | }
272 | 
273 | .card-icon {
274 |   font-size: 1.5rem;
275 | }
276 | 
277 | .hero-image-container {
278 |   flex: 1;
279 |   position: relative;
280 |   max-width: 600px;
281 | }
282 | 
283 | .code-display {
284 |   width: 100%;
285 | }
286 | 
287 | /* Hero Media Queries */
288 | 
289 | @media (max-width: 1024px) {
290 |   .hero-container {
291 |     flex-direction: column;
292 |     text-align: center;
293 |     gap: 3rem;
294 |     padding-top: 120px;
295 |   }
296 | 
297 |   .hero-content {
298 |     text-align: center;
299 |     max-width: 100%;
300 |   }
301 | 
302 |   .cta-buttons {
303 |     justify-content: center;
304 |   }
305 | 
306 |   .social-links {
307 |     justify-content: center;
308 |   }
309 | }
310 | 
311 | @media (max-width: 768px) {
312 |   .hero-image-container {
313 |     display: none;
314 |   }
315 | }
316 | 
317 | /* Projects Sections */
318 | 
319 | .projects {
320 |   padding: 6rem 5%;
321 |   background-color: var(--background);
322 |   position: relative;
323 | }
324 | 
325 | .projects h2 {
326 |   text-align: center;
327 |   font-size: 2.5rem;
328 |   margin-bottom: 3rem;
329 | }
330 | 
331 | .project-grid {
332 |   display: grid;
333 |   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
334 |   gap: 2rem;
335 |   max-width: 1200px;
336 |   margin: 0 auto;
337 | }
338 | 
339 | .project-card {
340 |   background: var(--card-bg);
341 |   border-radius: 1rem;
342 |   overflow: hidden;
343 |   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
344 |   transition: all 0.3 ease;
345 |   border: 1px solid var(--card-border);
346 |   position: relative;
347 |   display: flex;
348 |   flex-direction: column;
349 | }
350 | 
351 | .project-card::before {
352 |   content: "";
353 |   position: absolute;
354 |   top: 0;
355 |   left: 0;
356 |   right: 0;
357 |   bottom: 0;
358 |   background: linear-gradient(
359 |     135deg,
360 |     var(--gradient-start) 0%,
361 |     var(--gradient-end) 100%
362 |   );
363 | 
364 |   opacity: 0;
365 |   transition: opacity 0.3s ease;
366 |   z-index: 1;
367 | }
368 | 
369 | .project-card:hover::before {
370 |   opacity: 0.1;
371 | }
372 | 
373 | .project-card:hover {
374 |   transform: translateY(-10px) scale(1.02);
375 |   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
376 |   border-color: var(--accent-color);
377 | }
378 | 
379 | .project-image {
380 |   height: 240px;
381 |   background-size: cover;
382 |   background-position: center;
383 |   position: relative;
384 |   overflow: hidden;
385 | }
386 | 
387 | .project-image::after {
388 |   content: "";
389 |   position: absolute;
390 |   top: 0;
391 |   left: 0;
392 |   right: 0;
393 |   bottom: 0;
394 |   background: linear-gradient(
395 |     45deg,
396 |     transparent 0%,
397 |     rgba(255, 255, 255, 0.1) 50%,
398 |     transparent 100%
399 |   );
400 |   transform: translateX(-100%);
401 |   transition: transform 0.6s ease;
402 | }
403 | 
404 | .project-card:hover .project-image::after {
405 |   transform: translateX(100%);
406 | }
407 | 
408 | .project-card h3 {
409 |   padding: 1.5rem 1.5rem 0.5rem;
410 |   font-size: 1.5rem;
411 |   color: var(--text-color);
412 | }
413 | 
414 | .project-card p {
415 |   padding: 0 1.5rem 1rem;
416 |   color: var(--light-text);
417 |   flex-grow: 1;
418 | }
419 | 
420 | .project-tech {
421 |   padding: 0 1.5rem 1.5rem;
422 |   display: flex;
423 |   gap: 0.5rem;
424 |   flex-wrap: wrap;
425 | }
426 | 
427 | .project-tech span {
428 |   padding: 0.3rem 0.8rem;
429 |   background: rgba(255, 255, 255, 0.1);
430 |   border-radius: 50px;
431 |   font-size: 0.8rem;
432 |   color: var(--accent-color);
433 |   border: 1px solid rgba(244, 114, 182, 0.2);
434 | }
435 | 
436 | /* contact section */
437 | 
438 | .contact {
439 |   padding: 6rem 5%;
440 |   background: var(--section-bg);
441 |   position: relative;
442 | }
443 | 
444 | .contact::before {
445 |   content: "";
446 |   position: absolute;
447 |   top: 0;
448 |   left: 0;
449 |   right: 0;
450 |   height: 1px;
451 |   background: linear-gradient(
452 |     90deg,
453 |     transparent,
454 |     var(--accent-color),
455 |     transparent
456 |   );
457 | }
458 | 
459 | .contact h2 {
460 |   text-align: center;
461 |   font-size: 2.5rem;
462 |   margin-bottom: 3rem;
463 | }
464 | 
465 | .contact-content {
466 |   max-width: 600px;
467 |   margin: 0 auto;
468 | }
469 | 
470 | .contact-form {
471 |   display: flex;
472 |   flex-direction: column;
473 |   gap: 1rem;
474 | }
475 | 
476 | .contact-form input,
477 | .contact-form textarea {
478 |   padding: 1rem;
479 |   border: 2px solid var(--card-border);
480 |   border-radius: 0.5rem;
481 |   font-size: 1rem;
482 |   transition: all 0.3s ease;
483 |   background: var(--card-bg);
484 |   color: var(--text-color);
485 |   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
486 | }
487 | 
488 | .contact-form input:focus,
489 | .contact-form textarea:focus {
490 |   outline: none;
491 |   border-color: var(--accent-color);
492 |   box-shadow: 0 4px 12px rgba(244, 144, 182, 0.2);
493 | }
494 | 
495 | .contact-form textarea {
496 |   min-height: 150px;
497 |   resize: vertical;
498 | }
499 | 
500 | .submit-btn {
501 |   padding: 1rem;
502 |   background: var(--primary-color);
503 |   color: white;
504 |   border: none;
505 |   border-radius: 0.5rem;
506 |   font-size: 1rem;
507 |   font-weight: 600;
508 |   cursor: pointer;
509 |   transition: all 0.3s ease;
510 |   box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
511 |   position: relative;
512 |   overflow: hidden;
513 | }
514 | 
515 | .submit-btn::before {
516 |   content: "";
517 |   position: absolute;
518 |   top: 0;
519 |   left: -100%;
520 |   width: 100%;
521 |   height: 100%;
522 |   background: linear-gradient(
523 |     90deg,
524 |     transparent,
525 |     rgba(255, 255, 255, 0.2),
526 |     transparent
527 |   );
528 |   transition: 0.5s;
529 | }
530 | 
531 | .submit-btn:hover::before {
532 |   left: 100%;
533 | }
534 | 
535 | .form-status {
536 |   margin-top: 1rem;
537 |   padding: 1rem;
538 |   border-radius: 0.5rem;
539 |   text-align: center;
540 |   font-weight: 500;
541 | }
542 | 
543 | .form-status.success {
544 |   background: rgba(34, 197, 94, 0.1);
545 |   border: 1px solid rgba(34, 197, 94, 0.2);
546 |   color: #4ade80;
547 | }
548 | 
549 | .form-status.error {
550 |   background: rgba(239, 68, 68, 0.1);
551 |   border: 1px solid rgba(239, 68, 68, 0.2);
552 |   color: #f87171;
553 | }
554 | 
555 | .footer {
556 |   text-align: center;
557 |   padding: 2rem;
558 |   background: var(--background);
559 |   color: var(--text-color);
560 |   border-top: 1px solid var(--card-border);
561 | }
562 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import "./App.css";
 2 | import { Navbar } from "./components/Navbar";
 3 | import { Hero } from "./components/Hero";
 4 | import { Projects } from "./components/Projects";
 5 | import { Contact } from "./components/Contact";
 6 | import { useEffect, useState } from "react";
 7 | import emailjs from "@emailjs/browser";
 8 | import { motion } from "framer-motion";
 9 | 
10 | function App() {
11 |   const [isLoaded, setIsLoaded] = useState(false);
12 | 
13 |   useEffect(() => {
14 |     setIsLoaded(true);
15 |     emailjs.init(import.meta.env.VITE_EMAILJS_PUBLIC_KEY);
16 |   }, []);
17 | 
18 |   return (
19 |     <div className={`app ${isLoaded ? "loaded" : ""}`}>
20 |       <Navbar />
21 | 
22 |       <Hero />
23 |       <Projects />
24 |       <Contact />
25 | 
26 |       <motion.footer
27 |         className="footer"
28 |         initial={{ opacity: 0 }}
29 |         whileInView={{ opacity: 1 }}
30 |         viewport={{ once: true }}
31 |         transition={{ duration: 0.6 }}
32 |       >
33 |         <p> &copy; 2025 PedroTech. All rights reserved.</p>
34 |       </motion.footer>
35 |     </div>
36 |   );
37 | }
38 | 
39 | export default App;
40 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/Contact.jsx:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | import emailjs from "@emailjs/browser";
  3 | import { useState } from "react";
  4 | 
  5 | const fadeInUp = {
  6 |   initial: { opacity: 0, y: 20 },
  7 |   animate: { opacity: 1, y: 0 },
  8 |   transition: { duration: 0.6 },
  9 | };
 10 | 
 11 | const staggerContainer = {
 12 |   animate: {
 13 |     transition: {
 14 |       staggerChildren: 0.1,
 15 |     },
 16 |   },
 17 | };
 18 | 
 19 | export const Contact = () => {
 20 |   const [formData, setFormData] = useState({
 21 |     name: "",
 22 |     email: "",
 23 |     message: "",
 24 |   });
 25 | 
 26 |   const [formStatus, setFormStatus] = useState({
 27 |     submitting: false,
 28 |     success: false,
 29 |     error: false,
 30 |     message: "",
 31 |   });
 32 | 
 33 |   const handleInputChange = (e) => {
 34 |     const { name, value } = e.target;
 35 |     setFormData((prev) => ({
 36 |       ...prev,
 37 |       [name]: value,
 38 |     }));
 39 |   };
 40 | 
 41 |   const handleSubmit = async (e) => {
 42 |     e.preventDefault();
 43 | 
 44 |     setFormStatus({
 45 |       submitting: true,
 46 |       success: false,
 47 |       error: false,
 48 |       message: "",
 49 |     });
 50 | 
 51 |     try {
 52 |       await emailjs.send(
 53 |         import.meta.env.VITE_EMAILJS_SERVICE_ID,
 54 |         import.meta.env.VITE_EMAILJS_TEMPLATE_ID,
 55 |         {
 56 |           name: formData.name,
 57 |           email: formData.email,
 58 |           message: formData.message,
 59 |         }
 60 |       );
 61 | 
 62 |       setFormStatus({
 63 |         submitting: false,
 64 |         success: true,
 65 |         error: false,
 66 |         message: "Message sent successfully!",
 67 |       });
 68 | 
 69 |       setFormData({
 70 |         name: "",
 71 |         email: "",
 72 |         message: "",
 73 |       });
 74 |     } catch (error) {
 75 |       setFormStatus({
 76 |         submitting: false,
 77 |         success: false,
 78 |         error: true,
 79 |         message: "Failed to send message. Please try again.",
 80 |       });
 81 |     }
 82 |   };
 83 | 
 84 |   return (
 85 |     <motion.section
 86 |       id="contact"
 87 |       className="contact"
 88 |       initial={{ opacity: 0 }}
 89 |       whileInView={{ opacity: 1 }}
 90 |       viewport={{ once: true }}
 91 |       transition={{ duration: 0.6 }}
 92 |     >
 93 |       <motion.h2
 94 |         variants={fadeInUp}
 95 |         initial="initial"
 96 |         animate="animate"
 97 |         viewport={{ once: true }}
 98 |       >
 99 |         Get in Touch
100 |       </motion.h2>
101 | 
102 |       <motion.div className="contact-content" variants={fadeInUp}>
103 |         <motion.form className="contact-form" onSubmit={handleSubmit}>
104 |           <motion.input
105 |             type="text"
106 |             name="name"
107 |             placeholder="Your Name..."
108 |             required
109 |             whileFocus={{ scale: 1.02 }}
110 |             onChange={handleInputChange}
111 |           />
112 |           <motion.input
113 |             type="email"
114 |             name="email"
115 |             placeholder="Your Email..."
116 |             required
117 |             whileFocus={{ scale: 1.02 }}
118 |             onChange={handleInputChange}
119 |           />
120 |           <motion.textarea
121 |             name="message"
122 |             placeholder="Your Message..."
123 |             required
124 |             whileFocus={{ scale: 1.02 }}
125 |             onChange={handleInputChange}
126 |           />
127 | 
128 |           <motion.button
129 |             className="submit-btn"
130 |             type="submit"
131 |             whileHover={{ scale: 1.05 }}
132 |             whileTap={{ scale: 0.95 }}
133 |             disabled={formStatus.submitting}
134 |           >
135 |             {formStatus.submitting ? "Sending..." : "Send Message"}
136 |           </motion.button>
137 | 
138 |           {formStatus.message && (
139 |             <motion.div
140 |               className={`form-status ${
141 |                 formStatus.success ? "success" : "error"
142 |               } `}
143 |             >
144 |               {formStatus.message}
145 |             </motion.div>
146 |           )}
147 |         </motion.form>
148 |       </motion.div>
149 |     </motion.section>
150 |   );
151 | };
152 | 


--------------------------------------------------------------------------------
/src/components/Hero.jsx:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
  3 | import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
  4 | 
  5 | const fadeInUp = {
  6 |   initial: { opacity: 0, y: 20 },
  7 |   animate: { opacity: 1, y: 0 },
  8 |   transition: { duration: 0.6 },
  9 | };
 10 | 
 11 | const staggerContainer = {
 12 |   animate: {
 13 |     transition: {
 14 |       staggerChildren: 0.1,
 15 |     },
 16 |   },
 17 | };
 18 | 
 19 | export const Hero = () => {
 20 |   return (
 21 |     <motion.section
 22 |       id="home"
 23 |       className="hero"
 24 |       initial={{ opacity: 0 }}
 25 |       animate={{ opacity: 1 }}
 26 |       transition={{ duration: 0.8, delay: 0.2 }}
 27 |     >
 28 |       <div className="hero-container">
 29 |         <motion.div
 30 |           className="hero-content"
 31 |           variants={staggerContainer}
 32 |           initial="initial"
 33 |           animate="animate"
 34 |         >
 35 |           <motion.div className="hero-badge">
 36 |             <span> 👋 Hello, I'm </span>
 37 |           </motion.div>
 38 |           <motion.h1
 39 |             className="glitch"
 40 |             variants={fadeInUp}
 41 |             whileHover={{ scale: 1.02 }}
 42 |           >
 43 |             PedroTech
 44 |           </motion.h1>
 45 |           <motion.h2 className="hero-subtitle" variants={fadeInUp}>
 46 |             {" "}
 47 |             Creative Developer & Designer
 48 |           </motion.h2>
 49 |           <motion.p className="hero-description" variants={fadeInUp}>
 50 |             I craft beautiful digital experiences that combine stunning design
 51 |             with powerful functionality. Specializing in modern web applications
 52 |             and interactive user interfaces.
 53 |           </motion.p>
 54 | 
 55 |           <motion.div className="cta-buttons" variants={staggerContainer}>
 56 |             <motion.a
 57 |               href="#projects"
 58 |               className="cta-primary"
 59 |               whileHover={{ scale: 1.05 }}
 60 |               whileTap={{ scale: 0.95 }}
 61 |             >
 62 |               {" "}
 63 |               View My Work
 64 |             </motion.a>
 65 |             <motion.a
 66 |               href="#contacts"
 67 |               className="cta-secondary"
 68 |               whileHover={{ scale: 1.05 }}
 69 |               whileTap={{ scale: 0.95 }}
 70 |             >
 71 |               Contact Me
 72 |             </motion.a>
 73 |           </motion.div>
 74 |           <motion.div className="social-links" variants={staggerContainer}>
 75 |             <motion.a href="https://github.com" target="_blank">
 76 |               <i className="fab fa-github"> </i>
 77 |             </motion.a>
 78 |             <motion.a href="https://linkedin.com" target="_blank">
 79 |               <i className="fab fa-linkedin"> </i>
 80 |             </motion.a>
 81 |             <motion.a href="https://twitter.com" target="_blank">
 82 |               <i className="fab fa-twitter"> </i>
 83 |             </motion.a>
 84 |           </motion.div>
 85 |         </motion.div>
 86 | 
 87 |         <motion.div
 88 |           className="hero-image-container"
 89 |           initial={{ opacity: 0, x: 50 }}
 90 |           animate={{ opacity: 1, x: 0 }}
 91 |           transition={{ duration: 0.8, delay: 0.4 }}
 92 |         >
 93 |           <div className="code-display">
 94 |             <SyntaxHighlighter
 95 |               language="typescript"
 96 |               customStyle={{
 97 |                 margin: 0,
 98 |                 padding: "2rem",
 99 |                 height: "100%",
100 |                 borderRadius: "20px",
101 |                 background: "rgba(30, 41, 59, 0.8)",
102 |                 backdropFilter: "blur(10px)",
103 |                 marginBottom: 50,
104 |               }}
105 |               style={vscDarkPlus}
106 |             >
107 |               {`const aboutMe: DeveloperProfile = {
108 |   codename: "PedroTech",
109 |   origin: "🌍 Somewhere between a coffee shop and a terminal",
110 |   role: "Fullstack Web Sorcerer",
111 |   stack: {
112 |     languages: ["JavaScript", "TypeScript", "SQL"],
113 |     frameworks: ["React", "Next.js", "TailwindCSS", "Supabase"],
114 |   },
115 |   traits: [
116 |     "pixel-perfectionist",
117 |     "API whisperer",
118 |     "dark mode advocate",
119 |     "terminal aesthetic enthusiast",
120 |   ],
121 |   missionStatement:
122 |     "Turning ideas into interfaces and bugs into feature",
123 |   availability: "Available for hire",
124 | };`}
125 |             </SyntaxHighlighter>
126 |           </div>
127 | 
128 |           <motion.div
129 |             className="floating-card"
130 |             animate={{ y: [0, -10, 0], rotate: [0, 2, 0] }}
131 |             transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
132 |           >
133 |             <div className="card-content">
134 |               <span className="card-icon"> 💻 </span>
135 |               <span className="card-text">
136 |                 {" "}
137 |                 Currently working on something awesome!
138 |               </span>
139 |             </div>
140 |           </motion.div>
141 |         </motion.div>
142 |       </div>
143 |     </motion.section>
144 |   );
145 | };
146 | 


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import { motion } from "framer-motion";
 2 | 
 3 | const fadeInUp = {
 4 |   initial: { opacity: 0, y: 20 },
 5 |   animate: { opacity: 1, y: 0 },
 6 |   transition: { duration: 0.6 },
 7 | };
 8 | 
 9 | const staggerContainer = {
10 |   animate: {
11 |     transition: {
12 |       staggerChildren: 0.1,
13 |     },
14 |   },
15 | };
16 | 
17 | export const Navbar = () => {
18 |   return (
19 |     <motion.nav
20 |       className="navbar"
21 |       initial={{ y: -100 }}
22 |       animate={{ y: 0 }}
23 |       transition={{ duration: 0.6, ease: "easeOut" }}
24 |     >
25 |       <motion.div
26 |         className="logo"
27 |         whileHover={{ scale: 1.05 }}
28 |         whileTap={{ scale: 0.95 }}
29 |       >
30 |         Portfolio
31 |       </motion.div>
32 | 
33 |       <motion.ul
34 |         className="nav-links"
35 |         variants={staggerContainer}
36 |         initial="initial"
37 |         animate="animate"
38 |       >
39 |         <motion.li
40 |           variants={fadeInUp}
41 |           whileHover={{ scale: 1.1 }}
42 |           whileTap={{ scale: 0.95 }}
43 |         >
44 |           <a href="#home"> Home</a>
45 |         </motion.li>
46 |         <motion.li
47 |           variants={fadeInUp}
48 |           whileHover={{ scale: 1.1 }}
49 |           whileTap={{ scale: 0.95 }}
50 |         >
51 |           <a href="#projects"> Projects</a>
52 |         </motion.li>
53 |         <motion.li
54 |           variants={fadeInUp}
55 |           whileHover={{ scale: 1.1 }}
56 |           whileTap={{ scale: 0.95 }}
57 |         >
58 |           <a href="#contact"> Contact</a>
59 |         </motion.li>
60 |       </motion.ul>
61 |     </motion.nav>
62 |   );
63 | };
64 | 


--------------------------------------------------------------------------------
/src/components/Projects.jsx:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | 
  3 | const fadeInUp = {
  4 |   initial: { opacity: 0, y: 20 },
  5 |   animate: { opacity: 1, y: 0 },
  6 |   transition: { duration: 0.6 },
  7 | };
  8 | 
  9 | const staggerContainer = {
 10 |   animate: {
 11 |     transition: {
 12 |       staggerChildren: 0.1,
 13 |     },
 14 |   },
 15 | };
 16 | 
 17 | export const Projects = () => {
 18 |   return (
 19 |     <motion.section
 20 |       id="projects"
 21 |       className="projects"
 22 |       initial={{ opacity: 0 }}
 23 |       whileInView={{ opacity: 1 }}
 24 |       viewport={{ once: true }}
 25 |       transition={{ duration: 0.6 }}
 26 |     >
 27 |       <motion.h2
 28 |         variants={fadeInUp}
 29 |         initial="initial"
 30 |         whileInView="animate"
 31 |         viewport={{ once: true }}
 32 |       >
 33 |         My Projects
 34 |       </motion.h2>
 35 |       <motion.div
 36 |         className="project-grid"
 37 |         variants={staggerContainer}
 38 |         initial="initial"
 39 |         whileInView="animate"
 40 |         viewport={{ once: true }}
 41 |       >
 42 |         <motion.div
 43 |           className="project-card"
 44 |           variants={fadeInUp}
 45 |           whileHover={{ y: -10, transition: { duration: 0.2 } }}
 46 |         >
 47 |           <motion.div
 48 |             className="project-image"
 49 |             style={{ backgroundImage: "url('/projects/ai-saas.png')" }}
 50 |             whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
 51 |           />
 52 |           <h3> AI SaaS Platform</h3>
 53 |           <p>
 54 |             A modern SaaS platform built with Next.js and OpenAI integration,
 55 |             featuring real-time AI-powered content generation and analytics.
 56 |           </p>
 57 |           <div className="project-tech">
 58 |             <span>Next.js</span>
 59 |             <span>OpenAI</span>
 60 |             <span>TailwindCSS</span>
 61 |           </div>
 62 |         </motion.div>
 63 | 
 64 |         <motion.div
 65 |           className="project-card"
 66 |           variants={fadeInUp}
 67 |           whileHover={{ y: -10, transition: { duration: 0.2 } }}
 68 |         >
 69 |           <motion.div
 70 |             className="project-image"
 71 |             style={{
 72 |               backgroundImage: "url('/projects/social-media.png')",
 73 |             }}
 74 |             whileHover={{ scale: 1.05 }}
 75 |             transition={{ duration: 0.2 }}
 76 |           />
 77 |           <h3>Social Media Dashboard</h3>
 78 |           <p>
 79 |             A comprehensive social media management dashboard with analytics,
 80 |             scheduling, and engagement tracking features.
 81 |           </p>
 82 |           <div className="project-tech">
 83 |             <span>React</span>
 84 |             <span>Node.js</span>
 85 |             <span>MongoDB</span>
 86 |           </div>
 87 |         </motion.div>
 88 | 
 89 |         <motion.div
 90 |           className="project-card"
 91 |           variants={fadeInUp}
 92 |           whileHover={{ y: -10, transition: { duration: 0.2 } }}
 93 |         >
 94 |           <motion.div
 95 |             className="project-image"
 96 |             style={{
 97 |               backgroundImage: "url('/projects/stopwatch.png')",
 98 |             }}
 99 |             whileHover={{ scale: 1.05 }}
100 |             transition={{ duration: 0.2 }}
101 |           />
102 |           <h3>Productivity Timer</h3>
103 |           <p>
104 |             A sleek productivity timer application with customizable work
105 |             sessions, statistics tracking, and dark mode support.
106 |           </p>
107 |           <div className="project-tech">
108 |             <span>React</span>
109 |             <span>TypeScript</span>
110 |             <span>TailwindCSS</span>
111 |           </div>
112 |         </motion.div>
113 |       </motion.div>
114 |     </motion.section>
115 |   );
116 | };
117 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
 2 | 
 3 | :root {
 4 |   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 5 |     sans-serif;
 6 |   line-height: 1.5;
 7 |   font-weight: 400;
 8 |   color-scheme: dark;
 9 |   color: rgba(255, 255, 255, 0.87);
10 |   background-color: #242424;
11 |   font-synthesis: none;
12 |   text-rendering: optimizeLegibility;
13 |   -webkit-font-smoothing: antialiased;
14 |   -moz-osx-font-smoothing: grayscale;
15 | }
16 | 
17 | html {
18 |   scroll-behavior: smooth;
19 |   width: 100%;
20 | }
21 | 
22 | body {
23 |   margin: 0;
24 |   min-width: 100%;
25 |   min-height: 100vh;
26 |   width: 100%;
27 | }
28 | 
29 | /* Custom scrollbar */
30 | ::-webkit-scrollbar {
31 |   width: 10px;
32 | }
33 | 
34 | ::-webkit-scrollbar-track {
35 |   background: #f1f1f1;
36 | }
37 | 
38 | ::-webkit-scrollbar-thumb {
39 |   background: #888;
40 |   border-radius: 5px;
41 | }
42 | 
43 | ::-webkit-scrollbar-thumb:hover {
44 |   background: #555;
45 | }
46 | 
47 | /* Selection color */
48 | ::selection {
49 |   background: var(--primary-color);
50 |   color: white;
51 | }
52 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


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