6 min read

How This Site Is Designed

A walkthrough of the architecture behind ademro.ai — the tech stack, the aesthetic choices, and why I built it the way I did.

builddesignainextjs

I built this site for a few reasons. I wanted a place to write. I wanted something that felt like me and something I could build tangibly using the latest capabilities available. Create something unencumbered from business requirements or bogged down in aligning stakeholders. Pure technological creative expression. While I recognize those are a reality of business, it is sure refreshing to engage in pure technical expression.

This post is a breakdown of how the site works, what I chose to use and why, and what's still in progress.

The Aesthetic: Why 16-Bit

I wanted this design because it feels rad. These days when I am coding I am doing it late at night or really early in the morning. In those environments I have a heavy favor for dark themes and, recently, found the VS code theme SynthWave '84. In short, I love it. Who can deny the satisfaction when the text glows in your text editor? The little things I guess. From there it was a series of iterations to ensure the aesthetic fits the mold without going too far. Surprising how quickly things can get nutty.

Here is the color palette I went with:

  • Obsidian (#0B0E1A) — the base. Dark, minimal, everything sits on top of it.
  • Cyber Teal (#00F3FF) — interactive elements, hover states, links. The thing that moves.
  • Laser Magenta (#FF00FF) — accent. Used sparingly for emphasis.
  • Digital Mist (#E0E6ED) — body text. Readable without screaming.

Typography follows the same logic. Honestly, though I kept it pretty simple. Namely because I wanted to have markdown be the primary driver of the site. Why you ask? Great transition to general design.

The Stack

The site runs on Next.js 13 with the App Router and Tailwind CSS. Here's why:

Next.js made sense because I wanted static generation for performance and the option to add dynamic features later without rebuilding everything. The App Router pattern (the src/app/ directory structure) gives each page its own folder and makes the routing obvious. No magic and ideal for a simple blog.

Tailwind I learned is the right tool when you're moving fast and want your styling decisions to live right next to the markup. I've historically used CSS like everybody else. When I was researching the site, Tailwind caught my eye because it manages styling using the same component hierarchy as this site build. I found this intuitive and convenient. No more searching for random classes. Just go right to the component and make your changes.

TypeScript throughout. The content system uses typed JSON files so I'm not guessing what fields exist when I'm writing components. I wanted a site built this way because I want to edit and build blog content using markdown files and json. A perfect transition to the content architecture.

Content Architecture

The content is split between two systems:

JSON files (src/content/) drive the structured data — site metadata, the about page, capabilities, the career timeline. These are easy to edit directly, and because they're imported as typed modules, the TypeScript compiler tells me immediately if I break something.

Markdown files (src/content/blog/) drive the blog. Each post is a .md file with frontmatter (title, date, tags, excerpt). A small utility in src/lib/blog.ts reads the directory, parses the frontmatter with gray-matter, calculates reading time, and returns typed post objects. The blog index and individual post pages are just React Server Components that consume those utilities — no CMS API call, no database, no latency.

This is the part of the architecture I'm most happy with. Adding a new post is: create a file, write in Markdown, push. That's it. Moreover it makes it easy to have a coding companion in claude because I can easily find where changes are taking place.

Content Management

Decap CMS — a git-based headless CMS so I can write and publish posts without touching a code editor. It commits directly to the GitHub repo, which triggers a rebuild. Granted, if I feel inclined I could push updates to my blog entirely through the CLI and github. Dealer's choice.

Hosting

AWS Amplify deployment — I chose Amplify out of familiarity and convenience. I am generally a fan of AWS services because it feels like I can see what is 'going on under the hood' better than other hosting services. I like to have that added layer of customization. I configured Amplify to work with parity with my GitHub repo. I configured the site on Amplify to auto-build on push and serve it at ademro.ai with SSL. Easy peasy.

The Toolchain

This site was built using Claude Code (Anthropic's CLI agent) and Cursor as the primary development environment. I'm not just mentioning this as a curiosity it's central to how the project came together. Some may say I am crazy for having Claude and Cursor at the same time. My take? I am still learning what I like and what I don't like and both are central to modern vibe coding, so why choose when I can just use both.

I used Claude Code to scaffold the project, generate components, and work through architecture decisions interactively using a general instruction file (instruction.md) I created that charted overall site design. My dev workflow looked like this: describe what you want, review what comes back, edit to taste. It's closer to pair programming than code generation. The instructions.md file in the repo is the single source of truth I've been maintaining and it doubles as a build guide and a prompt reference.

What I've enjoyed most about this project is the level of personalization I've been able to generate. It is so satisfying to see a vision in your head rendered on the page in minutes. Granted, I can't help myself but to fine-tune and tweak things. It's taken me about 2-3 weeks of intermittent focus time between work, kids, and other obligations to get this going. I would chalk that up to my obsession with details. You could easily get something similar created in a day if you were in a time crunch.

Summary

I've really enjoyed this build and approach. Using Claude and Cursor is just fun. Some of the custom components on the site like the dynamic home image or the career arc visual would not be possible without the use of AI or some ungodly sum of hours to figure out independently. Based on this experience I am firmly in the camp that AI will create opportunities for those who are creative and looking for a collaborator to bring things to life. I will continue to use this site as a learning lab for my own work and look forward to updates as progress happens.