Vaibhav Singh - Portfolio

A modern, TypeScript-based portfolio website built with React 19, Vite 7, and Tailwind CSS 4.

🚀 Live Preview

✨ Features

• TypeScript: Full type safety across the entire application
• React 19: Latest React features and optimizations
• Vite 7: Lightning-fast development and build times
• Tailwind CSS v4: Modern utility-first CSS framework
• Three.js: Interactive 3D mask model
• React Router v7: Client-side routing
• Framer Motion: Smooth page transitions and animations
• EmailJS: Contact form integration
• Responsive Design: Mobile-first, fully responsive layout

🛠️ Tech Stack

Frontend

• React 19.2.0
• TypeScript 5.9.3
• Vite 7.1.7
• Tailwind CSS 4.1.16

Libraries

• Three.js & @react-three/fiber (3D graphics)
• React Router 7.6.2 (routing)
• Framer Motion (animations)
• Material-UI (components)
• React Bootstrap (grid system)
• EmailJS (contact form)
• Typewriter Effect

📦 Installation

# Clone the repository
git clone https://github.com/Z3RO-O/portfolio.git

# Navigate to project directory
cd portfolio/zero-portfolio

# Install dependencies
npm install

# Start development server
npm run dev

🔧 Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linter
npm run lint

📁 Project Structure

src/
├── assets/          # Static assets (3D models, SVGs)
├── components/      # Reusable components
├── header/          # Navigation header
├── hooks/           # Custom React hooks
├── models/          # 3D model components
├── pages/           # Page components (Home, About, Projects, Contact)
├── types/           # TypeScript type definitions
├── App.tsx          # Main app component
├── routes.tsx       # Route configuration
└── content_option.ts # Portfolio content & configuration

🎨 Customization

Edit src/content_option.ts to customize:

• Personal information
• Skills and technologies
• Work experience
• Projects
• Contact details
• Social media links

🚀 Deployment

This project is configured for deployment on Vercel:

# Build the project
npm run build

# Deploy to Vercel
vercel

The vercel.json configuration handles client-side routing.

📝 License

MIT License - see LICENSE file for details

👤 Author

Vaibhav Singh

• GitHub: @Z3RO-O
• LinkedIn: vvaibhavsingh
• Twitter: @vaibhavsngh0

🙏 Acknowledgments

• 3D Hacker Face model by ʜᴀᴄᴋᴇʀ (CC-BY-4.0)