A high-performance, interactive candidate portfolio engineered specifically for recruiters, hiring managers, and AI engineering leads. Designed with a premium, sharp-edged technical SaaS aesthetic (inspired by Supermemory/Vercel) and built on the modern React 19 + Next.js 16 architecture.
- Recruiter-First UX (
30-Second Drawer): A slide-over drawer designed for rapid evaluation, providing key metrics (98.2% Agent Accuracy, 7.6 IIT Madras CGPA, 120+ LeetCode solved), skill matrices, and one-click contact options. - Vercel Geist Typography: Fully integrated with Vercel's signature
Geistfont for a crisp, geometric, developer-focused aesthetic. - Interactive CLI Experience: A one-click CLI command snippet (
npx hire-atul --role=ai-engineer) integrated directly into the hero section. - Dynamic Storytelling: Includes an animated tech stack marquee, a side-by-side product catalog detailing architectural rigor, and a benchmarking section for quantitative performance metrics.
- Tailwind CSS v4 Engine: Built using the latest standalone Tailwind v4 Rust engine natively integrated with Next.js Turbopack.
The codebase follows a modular Next.js App Router architecture. Everything is organized clearly to separate layout, data, and interactive components.
d:/projects/modern-portfolio/
├── src/
│ ├── app/ # Next.js App Router Core
│ │ ├── layout.tsx # Root layout configuring Geist fonts & metadata
│ │ ├── page.tsx # Main single-page application assembling all sections
│ │ └── globals.css # Tailwind v4 @theme configuration & global styles
│ │
│ ├── components/ # Modular React UI Components
│ │ ├── layout/
│ │ │ ├── navbar.tsx # Sticky navigation with quick anchor links
│ │ │ └── footer.tsx # Clean footer with quick links & social connections
│ │ │
│ │ ├── recruiter/
│ │ │ └── recruiter-drawer.tsx # Slide-over modal built for quick 30-sec recruiter scans
│ │ │
│ │ ├── storytelling/ # Main Landing Page Sections
│ │ │ ├── hero-section.tsx # Main hero, candidate metrics, dual cards & CLI copy tool
│ │ │ ├── tech-marquee.tsx # Animated infinite scrolling technology stack marquee
│ │ │ ├── product-catalog.tsx # Interactive side-by-side project showcase & code preview
│ │ │ ├── benchmarks-section.tsx # Performance metrics (Accuracy, Latency, Throughput)
│ │ │ ├── enterprise-section.tsx # Architectural standards and security practices
│ │ │ └── faq-section.tsx # Expandable interactive FAQ accordion
│ │ │
│ │ └── ui/
│ │ └── icons.tsx # Reusable SVG icon components
│ │
│ ├── data/ # Centralized Content Store
│ │ └── portfolio.ts # Single source of truth for candidate profile, projects & FAQs
│ │
│ └── types/ # TypeScript Definitions
│ └── portfolio.ts # Interfaces for CandidateProfile and ProjectItem
│
├── tailwind.config.ts # (Removed) Migrated to Tailwind v4 native @theme in globals.css
├── postcss.config.mjs # PostCSS config for Next.js Tailwind processing
└── package.json # Project dependencies (React 19, Next 16.2, Framer Motion)
The entire portfolio is driven by a centralized data file. You do not need to edit the React components to update your resume or add new projects.
- Open
src/data/portfolio.ts. - Edit the
ATUL_PROFILEobject to update your bio, CGPA, LeetCode count, or skills. - Edit the
ATUL_PROJECTSarray to add or modify your portfolio projects. TheProductCatalogcomponent will automatically render any new projects you add here. - Edit the
ATUL_FAQSarray to update the questions in the FAQ accordion section.
- Framework: Next.js 16.2 (App Router, Turbopack)
- Library: React 19.2
- Language: TypeScript 5
- Styling: Tailwind CSS v4
- Animations: Framer Motion
- Icons: Lucide React
- Typography: Geist (via
next/font/google)
First, clone the repository and install the dependencies:
npm installRun the development server using Turbopack for ultra-fast HMR:
npm run devOpen http://localhost:3000 with your browser to see the result. The application supports Hot Module Replacement (HMR) and will auto-update as you edit the files in src/.
The easiest way to deploy this Next.js app is to use the Vercel Platform.
Since this project uses the standard Next.js build command (npm run build), you can deploy it by simply pushing your code to GitHub and importing the repository into Vercel.
Atul Mishra is an AI Engineer and Full-Stack Developer pursuing a BS in Data Science & Applications at IIT Madras ('27). He specializes in engineering autonomous LangGraph multi-agent runtimes, hybrid RAG memory engines, and production-grade web platforms.
Actively seeking Summer and Winter 2026 Internships in AI/ML Engineering and Full-Stack Development.