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

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:

. Monospace: or . Strict hierarchy, distinct font weights for headers (600/700) vs. body (400).

Global State & Rules

Theme Transitions (Light/Dark)

• Apply

  code

  transition: background-color 0.3s ease, color 0.3s ease;
  only to
  code

  body
  ,
  code

  header
  ,
  code

  nav
  , and
  code

  .card
  elements.

• Scrollbars: Custom, ultra-thin scrollbars.

• Light mode:

  code

  #E5E5E5
  track,
  code

  #CCCCCC
  thumb.

• Dark mode:

  code

  #1A1A1A
  track,
  code

  #333333
  thumb.

Spacing & Whitespace

• Line Height:

  code

  1.6
  for readability.

• Paragraph Spacing:

  code

  1.5rem
  bottom margin.

• Section Padding: Minimum

  code

  4rem
  top/bottom.

Image Handling (Strict Rules)

• Thumbnails (Cards): Must use

  code

  aspect-ratio: 16/9
  or
  code

  1.91/1
  . Must use
  code

  object-fit: cover
  .

• Borders: Thumbnails must have a subtle

  code

  1px solid
  border matching the theme's divider color (
  code

  #E5E5E5
  light /
  code

  ##333333
  dark) and a border-radius of
  code

  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 (

  code

  opacity: 0
  to
  code

  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

  code

  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

  code

  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

  code

  2rem
  , bottom margin
  code

  1rem
  . Invisible anchor link icon
  code

  #
  on hover.

• Hero Image (Optional in Detail View only): Full width,

  code

  max-height: 400px
  ,
  code

  object-fit: cover
  , bottom margin
  code

  2rem
  .

• Code Blocks: Dark Theme background (

  code

  #0D0D0D
  ). "Copy Code" hover button. Syntax highlighting.

• Blockquotes: Left border

  code

  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.