All projects
Creative2026

AUREA

This portfolio — an award-style premium developer website

The site you're looking at right now — a production-grade portfolio with a 3D particle hero, GSAP scroll choreography, command palette, AI concierge and live GitHub dashboard. Engineered and deployed entirely from an Android phone.

Live demo Source

Next.js 14

Framework

100%

Type-safe

A phone 📱

Built from

Vercel

Deployed

  • Next.js 14
  • TypeScript
  • Tailwind CSS
  • GSAP
  • Framer Motion
  • Three.js

The problem

Most developer portfolios are templates — same layout, same sections, zero personality. I needed a portfolio that itself proves engineering skill: performance, accessibility, security and motion design in one product.

The solution

I built AUREA as a real product: typed end-to-end with TypeScript, animated with a shared spring vocabulary (GSAP + Framer Motion), a lazy-loaded Three.js scene that never blocks page load, and SEO/security baked in — CSP headers, JSON-LD, dynamic OG images.

Architecture

  1. 01Next.js 14 App Router — server components by default, client only where interaction demands
  2. 02Design tokens as CSS variables → dark/light themes + 5 accent palettes retint the whole site live
  3. 03One global scroll-reveal orchestrator ([data-reveal]) animates every section — zero per-section JS
  4. 04Three.js particle scene lazy-loaded after hydration, desktop-only, reduced-motion aware
  5. 05API routes: GitHub dashboard (with graceful fallback), validated contact form, AI chatbot

Key features

  • 3D particle hero with cursor interaction
  • ⌘K command palette + hidden terminal easter egg
  • Live GitHub contribution graph, repos and commits
  • AI concierge chatbot answering from site data
  • Dark/light themes with 5 accent color palettes
  • Validated contact form with honeypot + rate limiting

Development process

  • Built and verified with production builds before every push
  • Entire Git + deploy workflow executed from an Android phone via Termux
  • Every animation collapses under prefers-reduced-motion for accessibility

Hero

3D particles + character-reveal name

Command palette

⌘K fuzzy search across the site

GitHub dashboard

Live contribution heatmap

Challenges

  • Next.js SWC binary doesn't exist for Android — solved by letting Vercel be the build machine
  • Keeping 60fps animations while running aurora background + custom cursor + 3D scene together

Lessons learned

  • Constraints teach real workflows: push small, deploy often, verify on production
  • Design tokens make theming trivial; hardcoded colors make it impossible

Next case study

DevHire Pro

Job portal & applicant tracking system for tech recruitment