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