Cinematic 3D Full-Stack Developer Portfolio

Full-Stack Developer — John Alpha

My own portfolio: a cinematic Next.js site with a 3D globe hero, an AI assistant for visitors and a full admin dashboard behind it.

The Challenge

Making a portfolio feel distinctive and fast at the same time: rich 3D visuals and AI features without hurting load time or accessibility.

The Solution

The globe loads lazily behind a static fallback, content lives in Postgres behind an admin dashboard, and the AI features (assistant, persona tailoring, semantic search) run on rate-limited server routes.

Key Highlights

Interactive 3D globe hero built with Three.js, pinned to Freetown with a live local-time chip

AI assistant that answers visitor questions, captures leads and books calls

Pages that reorder themselves around the visitor's intent: recruiter, tech lead or creative

Built-in admin dashboard to manage projects, posts, reviews and messages

Code Highlights

Lazy 3D globe

const HeroGlobe = dynamic(() => import("./HeroGlobe"), {
  ssr: false,
  loading: () => <div className="w-full aspect-square" aria-hidden="true" />,
});

The heavy Three.js scene is client-only and loads behind a static placeholder.

Rate-limited AI route

const allowed = await checkRateLimit(`ai:${getClientIp(req)}`, 30, 60 * 60 * 1000);
if (!allowed) {
  return NextResponse.json({ error: "Too many requests. Try again later." }, { status: 429 });
}

Every AI request is limited per client before any model call is made.

Tech Stack

Next.jsReactTypeScriptThree.jsTailwind CSSFramer MotionNeon PostgresDrizzle ORM

Live Demo ← Back to portfolio