How was this site built?

NB

How This Site Was Built

This site is designed to look and feel like ChatGPT — but it's actually a personal portfolio. Built in March 2026 almost entirely with Claude Code as my AI engineering partner.

The ChatGPT replica was close to a one-shot on the first attempt — Claude Code got the layout, sidebar, and input bar right out of the gate. From there it was refinement and wiring up a real AI backend. There's something appropriately recursive about using Claude to build a site powered by Claude.

Stack

  • Framework: Next.js 14+ (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS v4 with CSS custom properties
  • Hosting: AWS Amplify (static export)
  • AI Backend: Amazon Bedrock (Claude) via API Gateway + Lambda

How It Works

The sidebar conversations are pre-authored JSON files that get statically generated at build time. No server needed — pure HTML served from a CDN.

The "New Chat" feature connects to Claude via Amazon Bedrock. The model has been given context about my background, projects, and skills — it can answer freeform questions but stays grounded in facts about me.

The Typing Animation

API Gateway (REST) doesn't support streaming responses, so the AI reply arrives all at once as a buffered payload. The typing animation reveals text character-by-character on the client side after the full response lands. It sells the ChatGPT feel without the complexity of a streaming architecture. The latency from Bedrock is real — everything after that is theater.

Why ChatGPT's Interface?

Every developer portfolio looks the same. I wanted something that makes you do a double-take — "wait, this isn't ChatGPT." The familiar interface means zero learning curve, and the chat format is a natural way to explore someone's work.

NateGPT can make mistakes. Verify important info in the sidebar conversations.