Build a Developer Portfolio with Vite & Framer Motion

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)

Craft a Stunning Personal Portfolio with Vite, React & Framer Motion

Follow the full video tutorial on YouTube

📋 Table of Contents

Introduction
Tech Stack
Features
Quick Start
Screenshots
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

⚙️ 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 (v14+)
EmailJS Account

Clone and Run

git clone https://github.com/yourusername/portfolio-vite-framer.git
cd portfolio-vite-framer
npm install

Copy .env.example to .env.local and add your EmailJS service ID, template ID & public key.
Start the development server:

bash npm run dev 3. Open http://localhost:5173 in your browser.

🖼️ Screenshots

Hero Animation
Projects Grid
Contact Form

☁️ Deployment

Deploy on Vercel

Push your code to GitHub
Go to Vercel and import your repo
Add your EmailJS keys as Environment Variables in Vercel dashboard
Click Deploy — your live portfolio will be online in moments!