Arman Thakur - Developer Portfolio

A modern, responsive developer portfolio built with Next.js, React, and TailwindCSS.

Live Demo • Features • Tech Stack • Getting Started • Structure

---

✨ Features

🎨 Design & UI

• Theme toggle (dark/light) with system preference detection and localStorage persistence
• Responsive mobile-first design with smooth animations (Framer Motion)
• Custom typography (Geist, Hanken Grotesk) and playful handwritten fonts
• Asset preloading for critical images and theme-aware hero backgrounds

👤 Hero Section

• Animated profile avatar with Easter egg click effects
• Live Spotify activity display with fallback states
• Interactive tech stack icons with tooltips
• Social links and personal stats (experience, projects)

💼 Experience & Projects

• Interactive career timeline with animated achievements
• Clickable project grid with expandable modal details
• Project cards with tech stacks, status indicators, and live links

📊 GitHub Integration

• Contribution calendar and counter (GitHub GraphQL API)
• Direct GitHub profile link

💬 Engagement Features

• Guestbook page with OAuth-protected comments
• SEO-optimized pages with dynamic metadata
• Theme-consistent UI components and transitions

🔍 SEO & Performance

• Auto-generated sitemap and robots.txt
• Open Graph/Twitter Cards and structured data
• Vercel Analytics and Speed Insights integration

---

🛠️ Tech Stack

Core Frameworks

Tech	Version	Role
Next.js	16.2.0	App Router
React	19.2.4	UI Library
TypeScript	5.x	Type Safety

Styling & UI

Tech	Purpose
TailwindCSS v4	Utility-first CSS
Radix UI	Headless UI components
Lucide React	Icon library
Framer Motion	Animations

Data & APIs

Tech	Purpose
Axios	HTTP client
react-github-calendar	Contribution visualization

Tools

Tool	Purpose
ESLint/Prettier	Code quality/formatting
Husky/lint-staged	Git hooks
Vercel Analytics/Speed Insights	Performance monitoring

---

📁 Project Structure

next_portfolio/
├── app/               # Next.js App Router
├── components/        # Reusable UI components
├── hooks/             # Custom React hooks
├── lib/               # Utility functions
├── public/            # Static assets
├── types/             # TypeScript types
└── config files       # Project configuration

---

🚀 Getting Started

Prerequisites

• Node.js 18.17+
• Docker (optional)

Installation

git clone https://github.com/kaihere14/next_portfolio.git
cd next_portfolio
npm install

Environment Variables

Create .env.local:

GITHUB_PATH=your_github_token
NEXT_PUBLIC_SITE_URL=https://your-domain.com

Run Locally

npm run dev
# Visit http://localhost:3000

Docker Deployment

docker build -t next_portfolio .
docker run -p 3000:3000 next_portfolio

---

📜 Available Scripts

Command	Action
npm run dev	Development server
npm run build	Production build
npm run start	Start production server
npm run lint	Code linting
npm run format	Code formatting

---

🎨 Theme Configuration

• System preference detection with localStorage persistence
• Theme-aware background images and CSS variables
• Smooth transitions with prefers-reduced-motion support

Custom variables in globals.css:

:root {
  /* light theme variables */
}
.dark {
  /* dark theme overrides */
}

---

🔧 Customization

Add Projects

Edit components/Projects/Projects.tsx with project metadata.

Update Tech Stack

Modify components/HeroSection/TechStack.tsx with new technologies.

Social Links

Edit components/HeroSection/SocialLinks.tsx for social media integration.

---

🌐 Deployment

Vercel (Recommended)

Other Platforms

• Netlify
• Railway
• AWS Amplify
• Self-hosted (Node.js/Docker)

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Submit a pull request

---

📄 License

MIT License - see LICENSE

---

📬 Contact

Arman Thakur - Full Stack Developer

• Website
• Email
• LinkedIn
• Twitter/X
• GitHub

Made with ❤️ by Arman Thakur