HomeAboutBlogTechCreativeContact
Engineering Case Study

Collaborative AI
Architecture & Dev

A deep dive into the methodology of building this portfolio: bridging creative vision with advanced AI-assisted engineering.

The Perspective

As a creative lead and technical artist, my objective was to build a portfolio that serves as a living demonstration of my ability to bridge vision with execution. I chose to build this site using Google Antigravity as my AI pair-programmer—not to automate the work, but to augment my capacity to solve complex architectural challenges in real-time.

The Modern Stack

  • Framework: Next.js 16 (App Router)
  • Styling: Tailwind CSS & Lucide Icons
  • CMS: Notion API (Headless CMS)
  • Deployment: Vercel (CI/CD)

100% Data-Driven

I architected the site to be fully modular. Using a centralized configuration file, I can toggle entire site sections on or off without writing a single line of new JSX.

availability: { show: true },
tech: { liveDemos: { show: false } }

Logic & Troubleshooting

1. The Data Pipeline (Notion → Vercel)

I architected a custom ingestion engine that transforms raw Notion blocks into high-performance web content:

  1. Fetch: Server-side query via `@notionhq/client` with status filtering.
  2. Parse: Recursive property extraction to flatten nested rich-text arrays.
  3. Transform: Markdown conversion via `notion-to-md` for standard structure.
  4. Render: Optimized JSX output via `react-markdown` with tailwind typography.
const cleanSlug = rawSlug.trim().toLowerCase()
.replace(/\s+/g, '-') || page.id;

2. Performance: SSG & ISR

To ensure sub-second load times, I utilized **Static Site Generation (SSG)** combined with **Incremental Static Regeneration (ISR)**. This allows the blog to be served as pure HTML from the edge while automatically refreshing the content every few minutes whenever I update my Notion database—no manual rebuilds required.

3. Defensive Engineering

I identified and fixed a critical deployment failure caused by invisible newline characters in environment secrets. We refactored our initialization logic to defensively trim all keys at the root level, ensuring the production build was resilient to dashboard formatting nuances.

Scalability Roadmap

Phase 1

Search functionality & category filtering via Notion Tags.

Phase 2

Post Analytics integration using Vercel Web Analytics API.

Phase 3

Automated social distribution via custom Webhooks.

"Technical Art is about bridging the gap. This portfolio is proof that I can lead a technical project from concept to deployment while maintaining total command over the underlying codebase."