Today is the Eid Holiday, and I’m sitting at my favorite 24-hour Kopi Kenangan. Thanks to a solid 'blu' discount and the quiet holiday energy, I decided to finally build this website.

It took less than five hours.

How? It wasn't just manual coding; it was the 'holy feature' of the latest Google Stitch combined with Google Antigravity and its MCP (Model Context Protocol). I prompted the entire design system in Stitch and used the Antigravity Agent to fetch the pages, run integration tests in a sandbox browser, and wire everything together.

To give you an idea of the level of detail we’re talking about, here was my core prompt for the design.md file:

Project Overview

Name: Calvin's Portfolio (calvinkamardi.me)

Design System: Minimalist, high-utility, documentation-driven design.

Primary Reference: OpenAI Developer Platform & API Documentation.

Typography: Primary: Inter. Monospace: Fira Code or JetBrains Mono. Strict hierarchy, distinct font weights for headers (600/700) vs. body (400).

Global State & Rules

Theme Transitions (Light/Dark)

  • Apply transition: background-color 0.3s ease, color 0.3s ease; only to body, header, nav, and .card elements.

  • Scrollbars: Custom, ultra-thin scrollbars.

  • Light mode: #E5E5E5 track, #CCCCCC thumb.

  • Dark mode: #1A1A1A track, #333333 thumb.

Spacing & Whitespace

  • Line Height: 1.6 for readability.

  • Paragraph Spacing: 1.5rem bottom margin.

  • Section Padding: Minimum 4rem top/bottom.

Image Handling (Strict Rules)

  • Thumbnails (Cards): Must use aspect-ratio: 16/9 or 1.91/1. Must use object-fit: cover.

  • Borders: Thumbnails must have a subtle 1px solid border matching the theme's divider color (#E5E5E5 light / ##333333 dark) and a border-radius of 4px top-left and top-right.

Page Specifications

1. Home (Landing Page)

  • Layout: Centered, high-whitespace hero section.

  • Content: H1: "Architecting Future System" (Weight: 700). H2: "Calvin" Bio: "A Software engineer focused on building robust, data-driven systems. From high performance mobile architecture to scalable backends and AI-driven experiments." CTA buttons to "My Lab" and "Lyra".

2. My Story (Timeline)

  • Layout: Vertical timeline with left-aligned years and right-aligned descriptions. Fade-in on scroll (opacity: 0 to 1 over 500ms).

  • Strict Constraint: NO IMAGES. Typography and spacing only.

  • Timeline Data:

  • 2021 — Started Computer Science (PPTI BCA Scholarship).

  • 2023 — Deep-dived into Android development and Kotlin.

  • 2025 — Joined BCA Digital (blu). Developed BluWearApp for Wear OS.

  • 2026 — Founded Calmade AI, a no-code AI interface builder.

3. Shared Layout: My Thoughts & My Lab

  • Structure: Two-column CSS Grid.

  • Left Sidebar (250px): Sticky navigation.

  • Main Content (Auto): Centered, max-width 800px.

  • Card UI (List State): When displaying the list of articles/projects, each item must be a card containing:

  • Image: A top-anchored thumbnail adhering to the global image rules.

  • Content Body: Padding 1.5rem. Title, category pill, and a 2-line text excerpt.

  • Interaction: Clicking a card or sidebar link instantly replaces the grid of cards with the Detail View of that specific content.

4. Content Structure: My Thoughts

  • Sidebar Categories:

  • Finance: Core Portfolio (VTI & SPY), Bitcoin & Crypto, BBCA Analysis.

  • AI: Future of No-Code, LLM Patterns.

  • Books: Psychology of Money, Tech Biographies.

  • Random: First Month of Tennis, HMNS Untitled.

5. Content Structure: My Lab

  • Sidebar Categories:

  • Android: BluWearApp Challenges, Kotlin Coroutines, Jetpack Compose.

  • AI: Calmade AI Architecture, No-Code Form Parsing.

  • Others: Automated Trading Scripts, Deploying calvinkamardi.me.

6. Detail View Specification (Article/Doc Rendering)

  • H1: 2.5rem, bold, bottom margin 1rem.

  • H2 & H3: Top margin 2rem, bottom margin 1rem. Invisible anchor link icon # on hover.

  • Hero Image (Optional in Detail View only): Full width, max-height: 400px, object-fit: cover, bottom margin 2rem.

  • Code Blocks: Dark Theme background (#0D0D0D). "Copy Code" hover button. Syntax highlighting.

  • Blockquotes: Left border 4px solid #10A37F, italicized.

7. Lyra (AI Assistant)

  • Layout: Full-viewport chat interface. Central chat history, fixed bottom input.

8. Contact Me

  • Layout: Minimalist footer element. Clean SVG icons mapped to Text Primary color.```

AI has reached a point where the 'builder' is now an 'architect of intent.' I spent my time planning, prompting, and verifying rather than fighting CSS alignment.

It’s a world that is both fascinating and a little terrifying. As I look toward 2030, I find myself wondering: How do I keep up with this pace? For now, the answer is simple: I control what I can, I learn the tools that amplify my vision, and I keep building. What a time to be alive.