Anurag Jha — Portfolio

A high-performance, responsive, and aesthetically premium personal portfolio built with React, Vite, Tailwind CSS, and TypeScript. Inspired by minimalist retro terminal grids and modern typographic grids.

Tech Stack

• Core & Routing: React 18 & React Router v6
• Build Tool: Vite 6
• Styling: Tailwind CSS with custom premium fonts (Amiamie & Instrument Serif)
• Animations: Framer Motion for fluid page transitions, interactive hover events, and layout entries
• Analytics: @vercel/analytics for real-time web traffic insights
• Icons: @iconify/react (official brand SVG assets) & lucide-react

Features

• Typographic & CRT Grid Design: Sleek retro layout system using dashed alignment columns, custom serif layouts, scanline overlays, and grayscale images.
• Switchable Profile Avatar: Rotate through different custom profile images by clicking the avatar frame directly or the quick rotate trigger icon.
• Search Command Palette (⌘K / Ctrl+K): Dynamic keyboard-accessible command menu with shortcuts to jump directly to page sections, external socials, or toggle themes.
• Interactive GitHub Contributions Matrix: Asynchronous heatmap fetching live contribution levels directly from the GitHub API using a custom React hook, displayed in a responsive 7-row calendar grid.
• Fading Quotes Rotator: An interactive inspiration panel in the footer cycling through selected quotes (Steve Jobs, Elon Musk, Luffy, Naruto, Zuckerberg) with custom fading transitions.
• Pixel Cat Cursor Follower: Interactive classic oneko.js pixel cat that follows the user's cursor across the screen, complete with automatic cleanup and nested route loading support.
• Konami Code Easter Egg: Listening for classic trigger keys ("anurag", "jha", or the classic Konami sequence) to activate interactive falling confetti achievements.
• Writing / Blog Integration: Centered grid writing section displaying technical essays and system architecture reviews synced directly to Medium.

Getting Started

First, install dependencies:

npm install

Then, run the local development server:

npm run dev

Open http://localhost:3000 in your browser to view the application.

Customization

To customize the content of the portfolio (such as titles, biography details, social URLs, or technical blog posts), modify the central configuration file:

• src/config/site.ts