# Building the XQuest Portfolio: Antigravity UI, Codex-assisted workflows, and a content-first stack This write-up documents how the portfolio was built end-to-end: the visual system, the Antigravity scroll hero, the admin dashboard, and the MDX-driven content pipeline (projects + blog). It is based on the current codebase structure and the instrumentation patterns we used while iterating. There were no `implementation.md` files found in the repo, so the narrative below is synthesized from the source layout and runtime behavior. > **Stack:** Next.js 16 (App Router), Tailwind v4, Framer Motion, Prisma (SQLite), MDX Remote, and a custom admin dashboard. --- ## 1) Vision and layout map The goal was to make the site feel **engineered** and **cinematic** at the same time: a grid-based layout with glass layers, neon-soft gradients, and tactile interactions. That meant a few guiding rules: - **Dark surfaces + subtle noise** to create depth. - **Bold typography** with tight tracking. - **Motion as narrative** (not decoration). - **One design system** across landing, work, blog, and admin.

Home hero and sections — Home: Antigravity hero, scroll-driven visuals, and a cinematic grid rhythm.

--- ## 2) The Antigravity hero (scroll-synced canvas) The hero uses a frame sequence rendered into a `

The thinking log.

Building the XQuest Portfolio: Antigravity UI, Codex-assisted workflows, and a content-first stack