Website details

Have you ever wondered how this website was built? Here's some technical info about frameworks and libraries used on this website, as well as sources for assets.

This website was built with SvelteKit, a web development framework that uses Svelte, an UI framework that makes it easier to build interfaces on websites. You know when you're using JavaScript, when you modify a variable but also want to display that variable on the page, you have to update the variable and also manually update the HTML element with the new value of the variable? Svelte takes care of that for you. You can bind variables to HTML elements and they will automatically update when the variable changes. It's like magic!

Meanwhile SvelteKit helps with creating entire websites or web apps. It handles routing - for example, when you click on links in the menus, you'll notice that even though the URL changes, it doesn't feel like a proper page load, and the next page displays pretty much instantly. That's because it's not a full page load and SvelteKit just replaces the main content of the page with the new one, keeping the header, sidebar and footer the same. No <iframe> shenanigans needed! This can albo be used to persist the state of shared elements like the header or background music between pages. Another thing is that you can keep the code for repeatable elements like the header in one place and just include it on other pages like one normal HTML element, which lets me make changes in the header in one place and have them apply on every single page on the website!

This website makes use of the following libraries:

• vanilla-lazyload - for preventing images, videos and iframes from loading until they're visible
• svelte-typewriter - a Svelte library for the "typewriter" animation
• Marqueeck - a Svelte library for marquees
• svelte-focus-trap - a Svelte library for trapping focus inside open modals
• chiptune3.js - a library for playing module music, powers the music widget on the sidebar
• normalize.css - for consistent styling of HTML elements between browsers
• Sass - for nesting CSS rules
• Stylelint - for linting CSS and SCSS files that helps keep good practices and automatically corrects some errors and orders CSS properties
• Prettier - for automatic code formatting

This website uses the following external services:

• Isso - a self-hosted commenting system that powers the Guestbook page
• Plausible Analytics - a privacy-friendly analytics service that also offers a self-hosted version that powers the analytics on this website
• status.cafe - a place to show your status, powers the status widget on the homepage

• Most assets on this page - Uplink video game - the whole site's look was inspired by this game, and many assets like fonts, buttons and graphics are taken from this game and sometimes edited by me.
• Badges on "About me" page - this thread on Flight Rising forums