A modern, developer-focused portfolio showcasing my projects, articles (powered by MDX), and curated development resources — all built with a strong focus on performance, accessibility, and scalability.
The portfolio allows users to:
- Explore the site in light and dark mode
- Read articles written in MDX format with dynamic routing
- Browse projects with descriptions and live links
- Discover a curated list of development resources
- Contact me via a validated, fully functional form powered by EmailJS
- Live Site: gshukla.in
- Repository: https://github.com/heygauravshukla/portfolio
- Semantic TSX markup & mobile-first responsive design
- Static Site Generation (SSG)
- Next.js 16 (App Router) – framework core
- React 19 – latest React features
- MDX – Articles with markdown and interactive components
- shadcn/ui – accessible UI component library
- Radix UI – headless UI primitives
- Tailwind CSS v4 – utility-first styling
- TypeScript – type-safe development
- Motion – smooth animations & micro-interactions
- Lenis – smooth scrolling experience
- next-themes – theme management (light/dark mode)
- react-hook-form + Zod – form handling & validation
- Sonner – toast notifications
- EmailJS – client-side email delivery
- Lucide React – icon library
- pnpm – fast, disk space efficient package manager
- Working with MDX to create articles with dynamic routing and metadata extraction
- Generating dynamic sitemaps that automatically include all articles from the file system
- Creating accessible, validated contact forms with
react-hook-form,Zod, and EmailJS - Designing reusable UI components with
shadcn/uiand Tailwind CSS - Implementing smooth scrolling with Lenis for enhanced user experience
- Implementing theme switching (light/dark mode) using
next-themes - Implementing subtle animations and micro-interactions using the Motion library
- Structuring a scalable project with modern Next.js features like the App Router
- Working with React 19 and Next.js 16 App Router patterns
Planned improvements include:
- Automating RSS feed generation
- Implementing project filtering and article search
- Replacing EmailJS with Nodemailer for unlimited email sending capabilities
-
Clone the repository
git clone https://github.com/heygauravshukla/portfolio.git cd portfolio -
Install dependencies
pnpm install
-
Set up environment variables Create a
.env.localfile at the root with the following variables:NEXT_PUBLIC_BASE_URL= NEXT_PUBLIC_GA_ID= NEXT_PUBLIC_EMAILJS_SERVICE_ID= NEXT_PUBLIC_EMAILJS_TEMPLATE_ID= NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=
-
Run the development server
pnpm run dev
Open http://localhost:3000 in your browser to see the result.
Ensure you've configured your EmailJS service and template IDs before running the app.
- Inter Font GitHub Repo – Inter font files & usage guide
- IBM Plex Font GitHub Repo – IBM Plex font family resources
- Squoosh – Image compression and optimization
- og.new – Dynamic Open Graph image generator
- RedKetchup Favicon Generator – Favicon creation tool
- Website: gshukla.in
- GitHub: @heygauravshukla
- Twitter/X: @heygauravshukla
Special thanks to the Tailwind CSS Docs repository for insights into font self-hosting and structure organization. The Spotlight Template by Tailwind Labs served as the initial inspiration for this portfolio’s layout and design.