Last Updated: 17 January 2026 Status: Migrated to Astro Framework 🚀
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.
| Metric | Count |
|---|---|
| Pages | 8 |
| Articles | 14 |
| Live Demo Sites | 6 |
| AI Widget | ✅ Athena Live |
| Framework | Astro 5.0 |
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.
┌──────────────────────────────────────┐
User Query │ "What is Athena?" │
└──────────────┬───────────────────────┘
▼
┌──────────────────────────────────────┐
│ Keyword Match: "athena" detected │
│ → Return pre-authored response │
│ → 800ms simulated typing delay │
└──────────────────────────────────────┘
- Smart Mock System — Rule-based responses covering ~20 common questions
- localStorage Persistence — Chat state survives page refresh for seamless UX
- Reset Command —
/resetcommand 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.github.io → Click the chat icon
| Component | Technology |
|---|---|
| Framework | Astro 5.0 |
| Styling | Vanilla CSS (Scoped & Global) |
| Interactivity | Vanilla JavaScript (Islands Architecture) |
| Build | npm run build (Static Site Generation) |
| CI/CD | GitHub Actions (Astro Build + Deploy) |
| Hosting | GitHub Pages |
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
.astrocomponents 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.
| Layer | Role | Example |
|---|---|---|
| Human (Winston) | Vision, strategy, taste | "I need a portfolio that positions me as someone who builds reliable systems" |
| AI (Athena) | Execution, research, code | Astro migration, component extraction, SEO audit |
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 (
<Navigation/>,<Footer/>) - 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)
┌─────────────────────────────────────────────────────────────┐
│ Human Intent (Top 1% nuance) + AI Scale (99% execution) │
│ = │
│ 1000% Leverage │
└─────────────────────────────────────────────────────────────┘
"Athena is a digital extension of me. It executes in my voice, with my principles."
| Page | Description |
|---|---|
| Home | Hero + Athena Live widget + Featured projects |
| About | Identity, philosophy, Bionic Operating Model |
| Framework | Three-Pillar Leadership, Arena Physics, Laws, SDR |
| Writing | Blog with 13 published articles |
| Portfolio | 6 live demo sites |
| Athena | Product page: What Athena is and how it works |
| Services | Fixed pricing. Fast delivery. Systems that work. |
| Contact | WhatsApp CTA + social links |
| Title | Topic |
|---|---|
| The AI Bionic Layer | Why AI augmentation beats replacement |
| The 5 Pillars of Athena | Architecture deep-dive |
| Athena Public Launch | Open-source announcement |
| Case Study: P6 Math Tuition | Client work breakdown |
| SME AI Marketing Guide | Practical AI for small business |
| Trilateral Feedback Loop | Multi-AI validation system |
| The Anti-Slop Protocol | AI co-creation workflow |
| Project | Type | Link |
|---|---|---|
| P6 Math Tuition | Education | View Site |
| Brew & Bean | F&B | View Site |
| Sticker Shop | E-commerce | View Site |
| That Bio Tutor | Education | View Site |
| Melvin Lim Portfolio | Personal | View Site |
| Coach Derrick Lim | Digital Marketing | View Case Study |
- 🎆 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 GitHub Pages via Astro Build Action.
git push origin main
# → GitHub Actions builds Astro project
# → Output generated in /dist
# → Deployed to GitHub PagesSystem 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. Efficient. Scalable. Ships fast.