Overview
This portfolio website is itself a project — a demonstration of what modern AI-assisted development looks like in practice. The entire site was designed, built, and deployed in under a day through natural language conversation with Kiro, an agentic AI IDE. No design tools, no manual CSS tweaking sessions, no hours spent reading Firebase docs.
"The biggest lesson: scalability isn't about making things faster. It's about controlling how work flows through the system — and AI is the best flow controller I've found."
Features
Visual & UX
- Animated starfield background (CSS + JS)
- Mouse-trail falling star particle effect
- Hero avatar with radial glow ring
- Typing animation on page load
- Scroll-triggered fade-in for all sections
- Dark mode by default, persisted via localStorage
Navigation & Layout
- Sticky nav with active link highlight on scroll
- Smooth scroll to all sections
- Mobile hamburger menu
- Scroll-to-top button
- Fully responsive — desktop, tablet, mobile
- Project detail pages with Read More navigation
Tech Stack
Deliberately kept framework-free. No React, no build step, no bundler. The site loads instantly because there's nothing to compile or hydrate — just HTML, CSS, and a single JS file.
How AI Built This
The development process was entirely driven through conversation with Kiro. Here's what the AI handled:
- Translating design intent ("dark space theme with starfield") into production CSS with custom properties and animations
- Implementing all JavaScript features from plain English descriptions
- Updating all content from resume data without manual copy-paste
- Debugging layout issues from described symptoms
- Writing and maintaining a steering context file so the agent always has full project knowledge
- Creating this project detail page system from a single request
"Proper prompt engineering turns vague ideas into production-ready solutions. These agentic AI tools don't replace developers — they amplify our ability to ship faster and focus on what matters."
CSS Architecture
The stylesheet uses CSS custom properties for a complete theming system. All colors, shadows, and surfaces switch between light and dark mode by toggling a single .dark class on the body.
- Primary gradient: indigo → plum (
#667eea → #764ba2) - Dark accent: lavender (
#E0BBE4) and plum (#957DAD) - Responsive breakpoints at 768px and 480px
- CSS Grid for skills and project layouts
- Keyframe animations: fadeInUp, blinkStars, fallStar