The bits and pixels held together by tape

BY
Pranav Karawale

This website has gone through a lot of tremendous changes over the years depending on the complexity, the tech stack and the aesthetic and looks of the website.

It took me a lot of thinking, procrastination and a fresh start to come up with the current state of the website and its tech stack, which I plan to use for at least a few years now without getting the itch to rewrite it again. To document everything, this is a colophon of my digital home.

Logo

I designed this logo on Figma. The font in the logo is ITC Benguiat. I wanted to go with a vintage 80s CRT aesthetic and look with a logo that resembled the typical logo from that era or something that invokes nostalgia from that era. The name is my alias, retronav.

Colors

My site uses these colors specifically. Every color you see is either the color itself or a variation of it by playing with alpha, brightness, etc.

Fonts

The fonts used here are:

I use the Fontsource npm package to install these fonts.

Source Code

The website is open source, and the source code is available at github.com/retronav/karawale.com. This website is made using SvelteKit, with all of the styling and effects done by me with the help and inspiration from a lot of other sites which I have left comments everywhere in the source code.

The website’s content is managed by WordPress. I self host this instance on my VPS, and it is a headless instance since this website itself is the frontend. The website is hosted on Cloudflare Pages, which makes it amazingly fast.

I have put a lot of emphasis on performance, and graceful degradation to make sure the website is accessible on a wide variety of browsers and loads fast enough on all types of networks. However, it is possible my little digital home might not be loading correctly somewhere, and if that is the case with you I would like to know.

Website analytics

I also self host an Umami instance for analytics. It is privacy friendly, and respecting of your adblocker. C’mon, who doesn’t like to see their work be seen by real people and feel proud 😀 But at the same time, I do not want to invade anybody’s privacy at all, and let everyone have a carefree, safe browsing experience.

Content Management

Like said, I manage the content of this website through my WordPress instance. Only the home page, projects page and about page are written in code, but the rest of the stuff lives in pages and posts on my WordPress instance. I use a custom setup of plugins from the marketplace and custom written by me to optimize my WordPress experience, which I will someday write a post about it.

I use the WPGraphQL to fetch data from my instance to pre-render pages via SvelteKit.

Right now to deploy, I have chosen to manually trigger deployment from Cloudflare Pages since I do not want to cross the 500 deployments/month limit. Maybe in the future I will add something on WordPress to decrease the friction to update my actual website’s content after making changes here in WordPress.

My website’s source code respects draft and published posts so it makes it easier for me to work on posts and not worry about accidentally making it live.

Previously I used to write and make posts through markdown and honestly it was a lot of friction and effort to get a post done. But with WordPress its much more easier and convenient for me to write content for my website without forcing a rewrite again and again. And it solves a pet peeve of mine – I don’t like writing code for content. I just want to put out some words.