A high-performance, engineering-centric portfolio designed to showcase technical depth, AI integration, and systems architecture. Built with a "Developer-First" aesthetic, moving beyond simple layouts into immersive, interactive storytelling.
- Engineering Board Aesthetics: Project visuals are presented as "Floating Modular Chassis" with stationary background grids, mimicking professional engineering workbenches.
- Deep-Dive Gallery: Immersive, full-screen project previews triggered by technical badges. Features a thumbnail carousel for quick navigation through system screenshots.
- Dynamic Personas: A hero section that dynamically rotates technical identities (Lead Frontend Engineer, AI Systems Architect, Fullstack Developer).
- Architecture Schemas: Custom visual components representing complex data flows and backend infrastructures (WebContainers, Django Channels, Gemini AI).
- Technical UI Elements: Monospaced typography, blueprint-inspired grids, and status indicators using raw hex-code identifiers.
- Mobile First: Fully responsive architecture with gesture-friendly navigation and mobile-optimized height constraints for complex diagrams.
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS 4.0
- Icons: Lucide React
- Email Service: EmailJS (Integrated via Server Actions)
src/components/index/: Main landing page sections (Hero, Projects, Experience, Skills).src/components/projects/: Specialist visual components for different system architectures.src/components/projects/data.tsx: Centralized data store for project descriptions and gallery assets.public/demos/: Source for project screenshots and technical visual assets.
First, install dependencies:
npm installThen, run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
The site is optimized for deployment on Vercel or Netlify, leveraging Next.js's optimized image handling and edge delivery.
Built for performance. Refined for the web.