A modern, responsive portfolio website built with Next.js 15, TailwindCSS, and Shadcn/ui. Features a clean design, dark mode support, and smooth animations.
- 🎨 Modern and Clean Design
- 🌓 Dark/Light Mode Support
- 📱 Fully Responsive Layout
- ⚡ Fast Performance & SEO Optimized
- 🎬 Smooth Animations with Framer Motion
- 📝 Blog Support with MDX
- 🎵 Spotify Integration
- 🔄 Project Filtering & Sorting
- 🛠 Built with:
- Next.js 15
- TypeScript
- TailwindCSS
- Shadcn/ui
- Framer Motion
- MDX
- Lucide Icons
- 🏠 Home - Hero section with quick links and Spotify integration
- 👤 About - Personal introduction and featured projects
- 💻 Skills - Technical skills and expertise
- 🎓 Education - Academic background and achievements
- 💼 Experience - Work experience and internships
- 🚀 Projects - Portfolio with:
- Tag-based filtering
- Star-based sorting
- GitHub integration
- Live demo links
- 📝 Blog - MDX-powered blog with:
- Tag filtering
- Responsive images
- Code syntax highlighting
- SEO optimization
- 🏆 Achievements - Awards and volunteer work
- 📬 Contact - Contact form and social links
- Clone this repository:
git clone https://github.com/byigitt/portfolio.git- Install dependencies:
pnpm install- Set up environment variables:
cp .env.example .env.local-
Update your information:
- Edit
src/data/projects.tsfor your projects - Add blog posts in
content/blog - Modify content in page components under
src/app - Update social links in components
- Edit
-
Generate blog data:
pnpm generate:blog- Run the development server:
pnpm dev├── content/ # Blog posts and content
├── public/ # Static assets
├── scripts/ # Build and generation scripts
├── src/
│ ├── app/ # Next.js 15 app directory
│ ├── components/ # React components
│ ├── data/ # Project data and configuration
│ ├── lib/ # Utility functions
│ └── styles/ # Global styles
- Update personal information in respective page components
- Modify projects in
src/data/projects.ts - Edit navigation items in
src/components/layout/navbar.tsx - Add blog posts as MDX files in
content/blog
- Theme colors in
src/app/globals.css - Component styling uses Tailwind classes
- Shadcn/ui components can be customized in
components.json
- SEO settings in
src/app/layout.tsx - Site metadata in page layouts
- Environment variables in
.env.local
The easiest way to deploy your portfolio is using Vercel:
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - feel free to use this for your own portfolio!
- UI Components: shadcn/ui
- Icons: Lucide
- Animations: Framer Motion
- Blog Support: MDX