How this site is built.
Six diagrams.
Page structure, navigation, content pipeline, SEO, CI/CD, and component hierarchy. The canonical reference for how arkashj.com is built.
Diagram 01
Site map
Top-level routes served by the App Router.
Page tree
Diagram 02
Navigation flow
Where the homepage links out — entry points to each major section.
Homepage sections → linked pages
Home
Hero · Stats · CTAs
Diagram 03
Content pipeline
MDX files in /content are loaded, parsed, and rendered as static pages.
MDX → loader → static pages
Source
Loader
Output
Diagram 04
SEO pipeline
Metadata, OG images, and JSON-LD layered onto every route.
Per-page metadata layers
Every page
app/[route]/page.tsx
generateMetadata()
title · description · canonical
opengraph-image
OG · Twitter card
<JsonLd> Person
global identity
Article JSON-LD
/writing · /knowledge
ScholarlyArticle
/research papers
<link rel="me">
identity verification
Diagram 05
CI/CD pipeline
From local commit through GitHub Actions to a Vercel deploy.
Local → remote → deploy
01
git commit
local
02
husky pre-commit
lint-staged · prettier
03
git push
origin
04
GitHub Actions
lint · format:check · build
05
Vercel deploy
preview / prod
Diagram 06
Component hierarchy
How layout, sections, UI primitives, and embeds compose the page tree.
Layout · sections · UI · embeds