About this site

Made with
intention.

This site was built collaboratively with Claude Sonnet, Anthropic's AI coding assistant. The design direction, content, copy, and every architectural decision are mine — Claude helped translate them into production-quality code faster than I could have alone.

I want to be upfront about that. AI was a real part of this build, not a shortcut and not something to hide. I used it the same way I'd use any powerful tool: deliberately, with judgment, and with full ownership of the outcome.

Every component, every animation, every accessibility decision was discussed, reviewed, and intentional. The craft is still mine. The process was just faster.

Stack

Astro 5 Static site framework
React 18 UI components / islands
Tailwind CSS v4 Styling
Framer Motion Animations
TypeScript Type safety
MDX Case study content
Formspree Contact form
lucide-react Icons
Prettier Code formatting
GitHub Actions CI / CD
GitHub Pages Hosting
Cloudflare Analytics Privacy-first analytics

AI

Model Claude Sonnet 4 (claude-sonnet-4-6)
Interface Claude Code (CLI)
Tokens used [TBD — tracking in progress]

Claude Code operated in an agentic loop across the full build — reading files, writing components, resolving TypeScript errors, running builds, and fixing whatever broke. I directed every meaningful decision: the design, the UX model, the copy, and every architectural call. Claude translated those decisions into production code faster than I could have done alone.

Accessibility

Target level WCAG 2.1 AA
  • ↳ ARIA roles, labels, and live regions throughout
  • ↳ Full keyboard navigation (arrow keys, Enter, Escape)
  • ↳ Focus management on modal open/close
  • ↳ Screen reader announcements for scene changes
  • ↳ Reduced-motion support via prefers-reduced-motion
  • ↳ Colour contrast meets AA minimums

Languages

English

en

Spanish

es

French

fr

Italian

it

German

de

Chinese

zh

Japanese

ja

Arabic

ar

Browser language is detected on first visit and redirects automatically. RTL layout is fully supported for Arabic.

Stats

5 Portfolio scenes
8 Languages
20+ Easter eggs
14 Pages built
WCAG AA Accessibility
0 Cookie banners

Timeline

Apr 2025
Decided to rebuild from scratch Previous site was Express + EJS. Time to move on.
Apr 2025
Migrated to Astro Ported all existing pages, case studies, and assets.
May 2025
Designed the scene-based UX Name-gated entry, linear navigation, editorial aesthetic.
May 2025
Built core portfolio experience React islands, SceneEngine, 5 scenes, Framer Motion transitions.
May 2025
Internationalisation 8-language support with auto-detection and RTL layout.
May 2025
Accessibility pass ARIA roles, keyboard nav, focus management, reduced-motion support.
May 2025
Easter egg system Name recognition triggers personalised animations. 20+ names covered — try a few.
May 2025
Contact form Formspree integration in a modal. Catches you if you submit under an alias.
May 2025
Nav drawer & cross-page chrome Consistent hamburger, drawer, and language switcher on every page.
May 2025
Deployed via GitHub Actions Automated build and deploy to GitHub Pages on every push to main.
May 2025
Launched on austinban.com Custom domain via Namecheap. HTTPS enforced.

Source

github.com/austinban/portfolio-v2 ↗

MIT licensed. If something here is useful, take it. If something is broken, let me know.