Personal Blog Setup

This post provides a high-level overview of the architecture and setup of this personal portfolio and blog. It covers the technical stack, design choices, and key features of the website.

Tech Stack

This site was developed using Svelte 5 and SvelteKit 2 along with TypeScript and Tailwind CSS 4. I chose Svelte mainly because I had worked on it for a previous project and had found its component-based system to be highly intuitive.

The website does not use any Content Management System (CMS) or database; instead it is a completely static site. For the blog, I opted for a local Markdown approach via mdsvex. This way not only can I write standard markdown but I also have the ability to inject custom Svelte components within my blog posts.

For the deployment pipeline, the site is hosted on Vercel and is linked directly to a GitHub repository containing the source code. I set up two branches: dev for previewing builds privately and main for the live site. Pushing to a branch triggers a build and deploys the site automatically.

Additionally, I also used a custom domain name — this can be bought from any domain registrar. I got the domain from Hostinger but later changed the DNS records to use Vercel.

Design Principles

The design of the website was initially heavily influenced by Framer-like websites and Apple’s Liquid Glass. The concept was to have a deep dark background with fluid background gradients, neon accented colors and transparent floating UI components.

However, to make the website performant and simpler, the transparency and background gradients were greatly toned down. Instead, clean typography and whitespace were utilized to create a minimalist and readable website. Wide margins, large headings, and professional fonts help give a cohesive personality to the website.

The website also needed to stay responsive on mobile screens so style overrides were added for smaller screens. For example, on small screens, the navbar collapses into a hamburger menu and the footer stops floating.

Blog Architecture

Each blog post lives in a dedicated folder named after its title. This folder can contain multiple Markdown files to provide localizations (e.g., en.md and fr.md). An image called cover can also be placed in the folder and it will be automatically added to the blog post. The website eagerly loads the metadata to build the blog index, and lazy-loads the actual content only when a user navigates to a post. The blog’s metadata is handled by frontmatter properties:

---
title: 'Personal Blog Setup'
subtitle: 'A high-level architectural overview'
tags: ['hci']
date: '2026-10-08'
published: false
---

Validation of these properties is done via a Zod schema during the build step. Here is a system-level view of how the blog functions:

flowchart TD
    Files[Markdown & Cover Files] --> Glob[Vite import.meta.glob]

    Glob -->|Eager Load| Meta[Frontmatter Metadata]
    Glob -.->|Lazy Load| Content[Svelte Content]

    Meta --> Zod[Zod Validation]
    Zod --> Registry[Tag & Post Registry]

    Registry --> UI[Blog Interface]
    Content -.->|On Page Visit| UI

Key Features

Themes

Initially, the website was designed with a pure black background and a bright green accent to emulate the look of old computer terminals. Later, a light theme with a blue accent was added to get a calm nordic look.

Internationalization (i18n)

The website also supports full internationalization (i18n). Using a lookup dictionary for UI labels makes management very easy and ensures no labels are missing across languages. One challenge was supporting Urdu since it’s written from right-to-left. However, we can override CSS styles where needed specifically for it.

Filtering

The blog page includes a command bar that allows fuzzy searching, filtering by tags as well as sorting. This greatly increases discoverability and ease of use of the website. A pinned posts section is also present to highlight important pages. The filter bar was kept minimal but still highly functional — filters cleanly overflow to the right when there are too many, and the search bar can be easily accessed by the / key.

Rich Rendering

A code block component was added that allows copy-pasting and provides rich syntax highlight via the shiki plugin. A custom callout component with several variants (note, tip, warning) was defined to make important information stand out from the rest of the text. To add support for LaTeX style equations (e.g., $E=mc^2$), the remark-math and rehype-katex plugins were used. Support for mermaid diagrams was also added with custom themes that fit the site’s style.

Optimization

In addition to the lazy loading, several micro-optimizations were applied — most notably the enhanced-img plugin which optimizes all images at build time.