diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 157 |
1 files changed, 152 insertions, 5 deletions
@@ -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/) + +--- |