Last Updated: 25 February 2026 Status: Homepage Refresh -- 1,323 Sessions, 380+ Protocols, v9.2.4

A personal portfolio website built with Astro, focusing on performance, component reusability, and zero-JavaScript defaults.

This documents how I built (and evolved) a complete portfolio website with AI-augmented execution using Project Athena.

The site includes a complete $10K-equivalent brand package:

• Logomark: Lambda (L) -- represents Athena, precision, the L+XX signature
• Colors: Void (#0A0A0A) + Bionic Gradient (#3B82F6 - #EC4899)
• Typography: Outfit (display) + Inter (body) + JetBrains Mono (code)
• Personality: Sovereign * Precise * Bionic * Premium * No-Bullshit

The homepage includes an interactive AI chat widget that demonstrates the Athena experience.

API integration with Gemini was too much hassle -- rate limits, latency, key management. So we built a Smart Mock system instead: keyword-matched, pre-authored responses with simulated typing delay. Same UX, zero cost, instant responses.

• Smart Mock System -- Rule-based responses covering ~20 common questions
• localStorage Persistence -- Chat state survives page refresh for seamless UX
• Reset Command -- /reset command allows users to clear cache and restart the flow
• Dynamic Suggestions -- Context-aware follow-up prompts after each response
• Graceful Fallback -- Unknown queries get a helpful "how to reach me" response

Future: If usage justifies it, we'll add live API. The architecture already supports it -- just swap the mock for a real fetch.

Try it: winstonkoh87.com - Click the chat icon

We started with pure HTML/CSS/JS to prove a point about simplicity. But as the site grew (blogs, components, layouts), we needed a maintainable architecture without sacrificing performance.

Enter Astro.

• Zero JS by Default: Ships pure HTML unless interactivity is explicitly requested.
• Component Architecture: Reusable .astro components for Headers, Footers, and Cards.
• Content Collections: Markdown/MDX support for the blog (coming soon).
• Same Performance: Still ~40KB initial load, but now with better developer experience.

We didn't sell out. We leveled up.

This entire site was co-created with Project Athena -- my AI-Powered Digital Personal Assistant.

This isn't just a portfolio about AI-augmented work -- it's a living demonstration of the workflow itself.

• Migrated entire site from Vanilla HTML to Astro v5
• Refactored repeated UI into reusable Components (,
• Built the Athena Live AI widget with Smart Mock response system
• Implemented localStorage caching for instant responses
• Designed dark mode aesthetic, glassmorphism cards, particle constellation
• Audited codebase for SEO, accessibility, broken links
• Cleaned 230+ lines of duplicate code (January 2026 Audit)
• Optimized GA4 event tracking with beacon-based outbound CTA tracking
• Refreshed homepage content -- outcome-first project cards, testimonial attributions, 380+ protocols, 1,323 sessions, v9.2.4
• Corrected model references to Claude Opus 4.6 and Gemini 3.1 Pro
• Added CSS metric-glow animation and fulltime mode resume CTA

"Athena is a digital extension of me. It executes in my voice, with my principles."

• Interactive particle constellation background
• Athena Live AI chat widget
• Mobile responsive
• Dark mode aesthetic
• Fast load (~40KB total) -- Powered by Astro Island Architecture
• JSON-LD structured data (SEO)
• Accessibility: skip-links, focus-visible states
• localStorage caching for AI responses
• GitHub Actions: CI/CD Build & Deploy

Hosted on Cloudflare Pages with GitHub Actions build pipeline.

System architectures and strategic frameworks are hosted on the Athena-Public Repo:

• Architecture -- System design
• Trilateral Feedback -- Multi-AI validation
• Getting Started -- Build your own

Built with Astro + Project Athena. 1,323 sessions. 380+ protocols. Ships fast.