A modern, responsive portfolio website showcasing my education, work experience, and projects. Built with Next.js, TypeScript, and Tailwind CSS, featuring a clean design with smooth animations and dark mode.
Visit the live website: https://www.aaryan-patel.com
- 📱 Responsive Design - Optimized for all device sizes
- 🌙 Dark Mode - Clean, professional dark theme
- ⚡ Performance Optimized - Built with Next.js 15 and React 19
- 🎨 Modern UI - shadcn/ui components with smooth Framer Motion animations
- 📧 Contact Form - Functional contact form with Mailgun integration
- 📊 Interactive Sections - Education timeline, experience cards, project showcases
- 🎯 SEO Optimized - Proper meta tags and structured data
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS 4
- UI Components: shadcn/ui (New York style)
- Icons: Material UI Icons
- Animations: Framer Motion
- Forms: React Hook Form with Zod validation
- Email Service: Mailgun.js
- Contact API: Next.js API routes
website/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ └── contact/ # Contact form endpoint
│ ├── education/ # Education page
│ ├── experience/ # Experience page
│ ├── projects/ # Projects page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Homepage
├── components/ # Reusable components
│ ├── ui/ # shadcn/ui components
│ ├── home/ # Homepage sections
│ ├── education/ # Education page components
│ ├── experience/ # Experience page components
│ ├── projects/ # Projects page components
│ ├── footer/ # Footer components
│ ├── navbar.tsx # Navigation bar
│ └── footer.tsx # Footer
├── data/ # Data layer
│ ├── portfolio.json # Portfolio content data
│ └── types.ts # TypeScript type definitions
├── lib/ # Utilities
│ └── utils.ts # Helper functions
├── public/ # Static assets
│ ├── icons/ # Tech stack icons (SVGs)
│ ├── profile.png # Profile image
│ └── resume.pdf # Resume file
└── components.json # shadcn/ui configuration
The portfolio content is managed through the data/portfolio.json file, which includes:
- Personal Information - Name, email, taglines, social links
- About Me - Professional summary
- Skills - Categorized by Languages, Frontend, Backend, DevOps
- Education - University details, courses, clubs, milestones
- Experience - Work history with descriptions and tech stacks
- Projects - Featured and complete project listings
- Tailwind CSS configuration in
tailwind.config.js - Global styles in
app/globals.css - Component-specific styles using Tailwind classes
- shadcn/ui components in
components/ui/ - Custom components organized by page/section
- Consistent design system with CSS variables
- Framer Motion animations in component files
- Smooth page transitions and hover effects
- Performance-optimized animations
The contact form uses:
- React Hook Form for form handling
- Zod for validation
- Mailgun for email delivery
- Next.js API routes for backend processing
This project is licensed under the MIT License - see the LICENSE file for details.