Where Full-Stack Web Development Meets Intelligent Machine Learning
This is not a static resume; it is an interactive digital nervous system. Built for the Kuberns AI Portfolio Hackathon, this project demonstrates a visceral, highly gamified approach to showcasing dual-expertise in both cutting-edge AI/ML engineering and dynamic, cinematic frontend development.
- 🎭 Dual-Identity Split Hero: The landing physics dynamically shift between "Web Developer Mode" (Neon Purple/Cyberpunk) and "AI & ML Engineer Mode" (Neon Green/Matrix) based on precise real-time mouse tracking.
- 🧠 Interactive Neural Network Canvas: A global, background-spanning
Three.jsparticle engine where nodes (neurons) calculate their proximity to draw flowing, color-shifting synapses directly toward the user's cursor. - 💻 Live 3D CLI Terminal: A fully functional, embedded shell environment. Typing
helpreveals a suite of commands (e.g.run nidsorcd timeline) which trigger terminal outputs followed by smooth, programmatic scroll events guiding the user through the portfolio. - ⬡ Hexagon Skills Matrix: A custom CSS interconnected honeycomb grid that animates into view and reacts to hover states with category-specific glowing shadows, dropping 3D physics in favor of extreme readability and flawless UX.
- 📬 Live Comms Link: The contact architecture at the footer is wired directly to Formspree, enabling real-time payload transmission directly to my inbox.
This portfolio pushes the browser to its rendering limits while remaining astonishingly lightweight:
| Domain | Technology | Purpose |
|---|---|---|
| Foundation | Vite + React 19 + TypeScript |
Blistering fast HMR and strictly typed architecture. |
| Styling | Tailwind CSS v4 |
Modern utilitarian styling with native nesting and bleeding edge CSS features. |
| 3D & Canvas | Three.js + @react-three/fiber |
High-performance WebGL calculations for the Neural Network routing. |
| Animation | Framer Motion + GSAP |
Complex timing curves, scroll-triggered reveals, and layout morphing. |
| Control | Lenis |
Physics-based smooth scrolling logic for buttery user traversal. |
Want to spin up the matrix locally? Proceed with the following commands:
# 1. Clone the repository
git clone https://github.com/LogicalGagan/portfolio-v2.git
# 2. Navigate to directory
cd portfolio-v2
# 3. Install NPM dependencies
npm install
# 4. Initiate local development server
npm run devYour local instance will be running on http://localhost:5173.
[ STATUS: ONLINE / HACKATHON BUILD FINALIZED ]
Designed and Engineered by GAGAN G.N.
Drop a ⭐ if you like the aesthetics!