this

How this site was built, the architecture behind it, and why it exists.

I built this over a week with the help of OpenCode and Gemini 3.1 Pro Preview. I designed the systems and architecture, while agents handled boilerplate and rapid prototyping. I stepped in frequently to fix logic, rebuild components, and enforce my style guidelines.
This setup is intentionally over-engineered to demonstrate my technical capabilities. The design is heavily inspired by others, and you can find my references in the inspirations section below. The website uses Phosphor Icons, and the home screen logo ticker uses Simple Icons.
Check out the project repo.

01 Architecture & Systems

Built as a Turborepo monorepo managed by Bun. This ensures fast execution and keeps the frontend, CMS, and API tightly coupled for rapid iteration.

  • Go API (Echo): The entire backend runs on Go. I chose this to showcase my comfort with strictly typed, compiled languages and to benefit from its speed and concurrency model. It connects to PostgreSQL (via pgx v5) and uses Redis for JWT refresh rotation.
  • Custom WebSockets Layer: Instead of relying on a managed service like Convex (which I use frequently), I built a raw Server-Sent Events / WebSockets layer in Go. I wanted updates made in the CMS to instantly reflect on the public site, while proving I can build real-time infrastructure at a low level.
  • Next.js App Router: The public-facing site. It consumes the Go REST API, handles caching and ISR, and integrates with PostHog for product analytics and Resend for communications.
Next.js Client
React 19 • App Router
Svelte Admin
Embedded SPA
REST API
Go Binary
Echo v4 • API Core
PostgreSQL
Redis

Thoughtful Considerations

Is exposing my entire architecture, API routes, and database schema a smart security move? Probably not. It gives potential attackers a literal roadmap of the system. But whatever. The API is secured with strict JWT HTTP-only cookies, password hashing (bcrypt), and proper origin policies. I value transparency and demonstration of skill more than security through obscurity. Well, only in this case. 😂

02 API & Routing Design

The Go API strictly separates concerns into handlers, db stores, and services. It provides standard REST endpoints consumed by both the Next.js frontend and the Svelte CMS.

Public Routes (v1/public)

GET /health (root)
GET /projects [/:slug]
GET /blogs [/:slug]
GET /skills
GET /experience
GET /profile
GET /tags
GET /cv/active
POST /contact
SSE /events (realtime)
GET /f1 (proxy)
No auth required. Used by Next.js for ISR & static generation. Open to the public.

Auth Routes (v1/auth)

POST /login
POST /refresh
POST /logout
GET /me
GET /activity
POST /change-password
Handles login and session state. Issues HTTP-only cookies.

Admin Routes (v1/admin)

GETPOSTPUTDEL
/tags [/:id]
GETPOSTPUTDEL
/projects [/:id] [/:id/reorder]
GETPOSTPUTDEL
/blogs [/:id]
GETPOSTPUTDEL
/skills [/:id]
GETPOSTPUTDEL
/experience [/:id]
GETPOSTPUTDEL
/cv [/:id]
GETPOSTPUTDEL
/webhooks [/:id]
GETPUT /profile (upsert)
POST /upload
Requires RS256 JWT in HttpOnly cookies. Used exclusively by the CMS. Do not expose.

03 Custom Embedded CMS

I built a custom Content Management System using Svelte 5 and Vite. I had never worked with Svelte prior to this, but picked it to demonstrate my ability to adopt new tools efficiently. It relies on hash-based routing to avoid history API conflicts, and the entire production build is embedded straight into the Go API binary using Go's embed package. No separate frontend hosting required for the admin panel.

#/dashboard
CMS Dashboard
#/editor/project
CMS Editor
#/editor/project/options
CMS Editor Options
CMS interface views

04 Design System & Components

The aesthetic uses the Geist Sans font for structure and Geist Mono for technical details. Below are the actual components rendering dynamically.

Face Logo
Primary Logo
SVG vector
Color Palette

Interaction & Layout Components

Floating Navigation (Mocked)
logo
Filter Dropdown (Interactive)
Desktop:
Mobile:
Action Buttons
repo
try it
Back to Top Indicator (Footer style)
Hero Cover Image (Projects & Blogs)
Project Title Overlay
Inline Micro-components
Embedded social media link.
Currently playing the most amazing playlist on earth.
Referencing Dune natively.
Internal linking via demo.
Discussing tech and reaching out via email.
Downloading the active CV.
Checking the latest F1 standings.
Featured Card Component
Infinite Logos Ticker
Go
TypeScript
Go
TypeScript
Go
TypeScript
Go
TypeScript
Go
TypeScript
Go
TypeScript
Go
TypeScript
Go
TypeScript
Go
TypeScript
Go
TypeScript
React
Next.js
React
Next.js
React
Next.js
React
Next.js
React
Next.js
React
Next.js
React
Next.js
React
Next.js
React
Next.js
React
Next.js
Bun
Redis
Tailwind
PostgreSQL
Bun
Redis
Tailwind
PostgreSQL
Bun
Redis
Tailwind
PostgreSQL
Bun
Redis
Tailwind
PostgreSQL
Bun
Redis
Tailwind
PostgreSQL
Bun
Redis
Tailwind
PostgreSQL
React
Next.js
Tailwind
Bun
Redis
PostgreSQL
React
Next.js
Tailwind
Bun
Redis
PostgreSQL
React
Next.js
Tailwind
Bun
Redis
PostgreSQL
React
Next.js
Tailwind
Bun
Redis
PostgreSQL
Scrollable Carousel

Demo Carousel

Item 1
Item 2
Item 3
Item 4
Item 5
Expandable Text (Experience)

This is a really long experience description that demonstrates how the component truncates text by default but allows the user to expand it to read the full context. It's particularly useful for the experience timeline where brevity is preferred initially, but detail is available for those who are interested.

Contact Form

05 Sitemap

/ (Home)
├── /projects
└── /[slug]
├── /experience
├── /stack
├── /blog
└── /[slug]
├── /contact
└── /this (you are here)

06 Database Schema

The raw tables powering the backend, extracted from the Go API's SQL migrations.

projects
idUUID (PK)
titleTEXT
slugTEXT (UNIQUE)
summaryTEXT
contentTEXT
image_urlTEXT
live_urlTEXT
repo_urlTEXT
featuredBOOLEAN
publishedBOOLEAN
sort_orderINT
start_dateTIMESTAMPTZ
end_dateTIMESTAMPTZ
created_atTIMESTAMPTZ
updated_atTIMESTAMPTZ
experience
idUUID (PK)
companyTEXT
roleTEXT
typeTEXT
locationTEXT
descriptionTEXT
start_dateDATE
end_dateDATE
created_atTIMESTAMPTZ
updated_atTIMESTAMPTZ
blogs
idUUID (PK)
titleTEXT
slugTEXT (UNIQUE)
summaryTEXT
contentTEXT
cover_image_urlTEXT
publishedBOOLEAN
published_atTIMESTAMPTZ
created_atTIMESTAMPTZ
updated_atTIMESTAMPTZ
skills
idUUID (PK)
nameTEXT
categoryENUM
icon_urlTEXT
proficiencySMALLINT
sort_orderINT
created_atTIMESTAMPTZ
profile
idINT (PK)
open_to_workBOOLEAN
spotify_urlTEXT
apple_music_urlTEXT
currently_reading_titleTEXT
currently_reading_urlTEXT
github_urlTEXT
twitter_urlTEXT
linkedin_urlTEXT
website_urlTEXT
threads_urlTEXT
updated_atTIMESTAMPTZ
tags
idUUID (PK)
nameTEXT (UNIQUE)
slugTEXT (UNIQUE)
created_atTIMESTAMPTZ
admin_users
idUUID (PK)
emailTEXT (UNIQUE)
password_hashTEXT
last_login_atTIMESTAMPTZ
created_atTIMESTAMPTZ
updated_atTIMESTAMPTZ
login_events
idUUID (PK)
user_idUUID (FK)
is_activeBOOLEAN
ip_addressTEXT
user_agentTEXT
last_seen_atTIMESTAMPTZ
created_atTIMESTAMPTZ
cv
idUUID (PK)
file_urlTEXT
labelTEXT
is_activeBOOLEAN (UNIQUE)
uploaded_atTIMESTAMPTZ
webhook_endpoints
idUUID (PK)
urlTEXT (UNIQUE)
secretTEXT
is_activeBOOLEAN
created_atTIMESTAMPTZ
updated_atTIMESTAMPTZ
project_tags
project_idUUID (FK)
tag_idUUID (FK)
Composite PK
blog_tags
blog_idUUID (FK)
tag_idUUID (FK)
Composite PK

07 Inspirations

"Good artists copy, great artists steal." The aesthetic and interactive choices on this site were heavily influenced by several incredible designers and engineers:

  • Alex Gilev
    I saw his posts (here and here) and really loved the simplicity. I tried implementing his style mainly in the CMS, but that minimalist DNA naturally carried over to the rest of the site.
  • Akshit Verma
    His post made me realize I don't have to rely on standard static hyperlinks. It inspired me to come up with a more creative, interactive approach to inline references. I definitely borrowed his format for the main description section on the home page.
  • Onur
    I really loved his real-time CMS built with Convex and Next.js. It looks stunning. I wanted to replicate that vibe but build the real-time layer completely from scratch using standard WebSockets/SSE via Go.
  • Noah
    He posted about his simple website and I loved that he just had a raw list of his languages and tools. That directly inspired the Stack page on this site, which I then iterated on to make my own.
  • Ben Davis
    His video particularly convinced me to pick Svelte for my CMS. It got the ball over the line over HTMX, which Prime (@ThePrimeagen) almost swayed me into using.