behind the scenes

Colophon

A detailed look at how this website was built, the technologies used, and the people who inspired it.

Live Since

1,378days

since early 2023

Core Stack

Next.jsReactTypeScriptTailwind CSSPrismaPostgreSQLFramer MotionVercel

8 core technologies

Typography

Space GroteskCaveat

Primary & Accent

the story

About This Website

This is my personal site. I use it as a portfolio, a blog, and a place to track what I am building. The guestbook is for anyone who wants to leave a note. The dashboard pulls live data from WakaTime and GitHub so visitors can see what I have been working on recently.

The site has gone through three versions. The first was a static site built with Hugo. It was fast to build and deploy, but the templating system made adding interactive features tedious. I rewrote it in pure React when I needed a comments section and a few dynamic pages. That worked for a while, but routing and SEO became harder to manage as the site grew. I moved to Next.js for the current version to get file-based routing, server-side rendering, and API routes in one framework.

The content is mostly MDX. Blog posts are Markdown files with React components embedded where needed, like code blocks with copy buttons and screenshot carousels. The guestbook and comments sections use a PostgreSQL database via Prisma, deployed on a managed Postgres instance.

The blog covers things I had to figure out myself and could not find a clear answer for elsewhere. Posts like the Django deployment guide on cPanel or the pymysql setup exist because I spent hours on those problems and wanted to leave a record. Most of my open-source work follows the same pattern: I run into a missing tool, build it, and publish it. django-nepkit came from working on Nepali business applications that needed BS date fields and local phone validation. djinit came from setting up the same Django project structure repeatedly. lapctl came from managing GPU switching and battery profiles through a collection of scattered shell scripts that kept breaking.

The design is intentionally minimal. No animations, no hero gradients, no floating cards, no carousels on the homepage. Every section uses a flat border system with no shadows. The goal was a site that loads fast, reads clearly in both light and dark mode, and gets out of the way of the actual content.

design

Design & Colors

Every card, panel, image, and button uses border border-border with no border radius and no box shadows. The colour palette is a neutral grey scale in both light and dark modes, with a single teal accent for interactive elements. Labels and metadata use font-mono uppercase tracking-wider to separate them visually from body copy. Handwritten annotations use the Caveat font. The swatches below are live CSS variables, so they change when you switch themes. Toggle between light and dark mode to see both palettes.

Background
Card
Muted
Primary
Secondary
Accent
Foreground
third-party

External Services & APIs

I tried to keep the list of third-party dependencies short. Each one below does a specific job that would have taken more time to build correctly than to integrate. Here is what the site currently depends on:

  • Clerk: Authentication for the guestbook. Handles GitHub and Google OAuth so I did not have to build and maintain a session system from scratch.
  • Giscus: Blog comments backed by GitHub Discussions. Comments are stored on GitHub, so there is no extra database table to manage and spam is handled by GitHub natively.
  • WakaTime: Live coding stats on the dashboard page. A plugin runs in my editor and sends time-tracking data to their API. I display weekly totals and per-language breakdowns.
  • GitHub API: Public repository list and recent contribution data. The projects page pulls live repo metadata so it stays up to date without manual edits.
credits

Acknowledgements

These developers and their public work influenced how I designed or built parts of this site. I looked at their source code, read their writing, or borrowed ideas from their portfolios when I was figuring out how to approach something:

And plenty of open-source code I read, copied from, and learned from along the way. If you spot something that looks familiar and think it came from your work, it probably did. Thank you.

Colophon | Sankalp Tharu | Sankalp Tharu