Update README.md

1 files changed, 152 insertions, 5 deletions

diff --git a/README.md b/README.md
index f768e33..0bdba55 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,155 @@
-# React + Vite
+---
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+# Build a Developer Portfolio with Vite & Framer Motion
 
-Currently, two official plugins are available:
+<div align="center">
+  <br />
+  <a href="https://youtu.be/YOUR_VIDEO_ID" target="_blank">
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+  
+  </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/YOUR_VIDEO_ID)
+
+---
+
+## ⚙️ 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/)
+
+---