💼 Developer Portfolio — Prashanna A

A premium, route-based developer portfolio with a custom circular "command-dial" navigation, GSAP animations, adaptive light/dark theming, and an optional WebGL 3D accent. Built to present my game-development work like a product, not a résumé.

🔴 Live Demo → prashannadev.vercel.app

---

📖 Overview

This is my personal portfolio, designed around a game-UI aesthetic. Each section is its own route (not a single long scroll), navigated through a rotating circular dial inspired by in-game radial menus. The whole site is data-driven — projects, skills, and milestones are defined in JSON, so content updates never touch component code.

✨ Highlights

• Route-per-section architecture — /, /about, /skills, /projects, /journey, /inventory, /credits via React Router; one section renders at a time.
• Circular command dial — a custom radial navigation that eases the active page to the top; scroll-wheel and arrow-key driven.
• Adaptive theming — follows the OS light/dark preference live; both themes hand-tuned for contrast and brand consistency (brand #FFAB00).
• Custom "Journey" page — a single eased progress value drives a horizontal track and walks an animated character along a rail (limbs animate only while moving).
• 3D hero tilt — the profile card tilts in 3D toward the cursor with a moving glare; optional React Three Fiber amber crystal kept opt-in so three.js doesn't affect first paint.
• Data-driven content — add a project/skill/milestone by editing JSON.

🛠️ Tech Stack

React · React Router · Vite · GSAP · Tailwind CSS · Three.js / React Three Fiber · Bun

📂 Structure

src/
├── main.jsx
├── App.jsx                  # React Router: one <Route> per section
├── index.css
├── components/
│   ├── GamePortfolio.jsx    # pages + dial + theme + styles
│   └── ThreeAccent.jsx      # optional WebGL amber crystal
└── data/
    └── profile.json  skills.json  projects.json  journey.json

🚀 Getting Started

npm install
npm run dev       # http://localhost:5173
npm run build     # production build
npm run preview

For SPA hosting, configure a fallback to index.html so deep links like /projects resolve. (Automatic on Vercel.)

🖼️ Screenshots

📸 Add a screenshot/GIF of the command dial and a couple of pages here.

🎯 What I Built / Learned

• A non-trivial custom navigation component (radial dial) with smooth easing.
• Animation choreography with GSAP tied to a single progress value.
• Data-driven, themeable front-end architecture.
• Production deployment with SPA routing on Vercel.

---

📫 Contact

Prashanna A — Portfolio · LinkedIn · prashanna876@gmail.com

Keywords: React, React Router, Vite, GSAP, Tailwind CSS, Three.js, React Three Fiber, front-end, web development, animation, responsive design, portfolio.