A modern, responsive portfolio website built with Next.js 15, TypeScript, and Tailwind CSS. Features real-time Discord status, GitHub activity, blog posts, and project showcases.
- Modern Design: Clean, responsive UI with dark/light theme support
- Real-time Status: Live Discord status and Spotify now playing integration
- Blog System: MDX-powered blog with syntax highlighting
- Project Showcase: Dynamic project gallery with live links
- GitHub Integration: Latest commit activity and GitHub calendar
- Contact Form: Direct messaging system
- Auto-labeling: GitHub Actions workflow for PR auto-labeling
- Performance Optimized: Built with Next.js 15 and Turbopack
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS v4
- UI Components: Radix UI primitives
- Animations: Framer Motion
- Icons: Tabler Icons, React Icons, Lucide React
- Theme: next-themes for dark/light mode
- API Routes: Next.js API routes
- Data Fetching: SWR for real-time updates
- Form Handling: React Hook Form with Zod validation
- Content: MDX for blog posts
- Package Manager: pnpm
- Linting: ESLint 9
- Formatting: Prettier
- Type Checking: TypeScript 5
- Build Tool: Turbopack
The guestbook uses Vercel KV (Redis) for persistent storage. To set it up:
-
Install Vercel CLI (if not already installed):
npm i -g vercel
-
Create a KV database:
vercel kv:create
-
Get your KV connection details:
vercel kv:ls
-
Add environment variables to Vercel:
- Go to your Vercel dashboard → Project Settings → Environment Variables
- Add the KV variables that were displayed after
vercel kv:create
The guestbook data will now persist across deployments! 🎉
pnpm dev- Start development server with Turbopackpnpm build- Build for productionpnpm start- Start production serverpnpm lint- Run ESLintpnpm format- Format code with Prettier
src/
├── app/ # Next.js app router
│ ├── api/ # API routes
│ ├── blog/ # Blog pages
│ ├── projects/ # Projects page
│ └── about/ # About page
├── components/ # React components
│ ├── ui/ # Shadcn/ui components
│ └── myComponents/ # Custom components
├── content/ # MDX blog posts
├── data/ # Static data files
├── lib/ # Utility functions
└── styles/ # Global styles
- Activities: Real-time GitHub activity feed
- Discord: Live Discord status integration
- NowPlaying: Spotify currently playing track
- MessageBox: Contact form with validation
- TechStack: Animated technology showcase
- ProgressBar: Page loading indicator
/api/get-discord-status- Fetch Discord user status/api/latest-commit- Get latest GitHub commit/api/now-playing- Spotify currently playing/api/send-message- Contact form submission
Blog posts are written in MDX format and stored in the src/content/ directory. Each post includes:
- Frontmatter metadata
- Syntax highlighting with Shiki
- Custom MDX components
- Automatic sitemap generation
- Personal Information: Update
src/data/metadata.ts - Projects: Modify
src/data/projects.ts - Tech Stack: Edit
src/data/techstack.tsx - Styling: Customize Tailwind config and global styles
- Components: Add or modify components in
src/components/
The site is optimized for deployment on Vercel:
- Push to GitHub
- Connect repository to Vercel
- Configure environment variables
- Deploy automatically on push to main branch
Contributions are welcome! Please feel free to submit a Pull Request. The repository includes auto-labeling for PRs via GitHub Actions.
This project is licensed under the MIT License - see the LICENSE file for details.
- Live Site: https://mannu.live
- GitHub: @MannuVilasara
- Twitter: @dev_mannuu
Built with ❤️ by Manpreet Singh