Paloma Kop

About This Website

Site Map

Click to toggle site map

Built With Hand-Written HTML/CSS

I began creating this website at the end of 2022. Before then, I had been maintaining a website built with Cargo since about 2016. But over time, I began to realize that I needed to build my own website natively with HTML and CSS. Here were some of my goals in doing so:

  • I wanted my site to exist as a set of self-contained files, which could be edited in a text-editing program, without requiring anything else to build or load its pages. This would allow me to:
    • Host the site on any static site server, and move between hosting services or self-hosting at will, giving me control over the costs and freeing me from any customer lock-in or dependence on centralized services
    • Easily create backups and copies for my archives
    • Edit the source code of the site on any device, without needing to install anything
  • I wanted control over all aspects of the site in order to make it accessible, tracker-free, and friendly to low-bandwidth users (including my future self)
  • I have found writing HTML and CSS to be a fun and rewarding creative activity!

Thus, this site was born. Creating the layout and rebuilding most the pages from my old site took a little over a month of working in my spare time. I have definitely learned a lot from the process and am looking forward to building more!

I found a lot of help, inspiration, and reference material from many folks along the way. Most especially, personal websites and wikis from others in merveilles, xxiivv webring, and adjacent communities, and the ideas of permacomputing, digital gardens, and the "small web" which they have instilled in me.

Current Setup

Hosting

This site is hosted on GitHub Pages, with media assets stored in s3. The domain is registered with PorkBun.

In the future, I would like to set up a VPS, from which I can host multiple sites and have SSH access to the server itself. But this is has been a good first step, and is very low cost.

Scripts

While most of the site is built with simple html and css, I have included some scripts written in vanilla JavaScript where they could improve functionality. However, no essential functionality of the site depends on them.

On some pages, I have included a javascript lightbox based on this code in order to allow images to be viewed fullscreen and in higher resolution. The larger images are not loaded unless the lightbox is opened by clicking the smaller images in the page. If javascript is disabled, the fallback is simply a direct link to the higher res image file.

System Fonts

The styling of this site uses only system fonts. This means that it might look different depending on the device, but no font files need to be loaded. All of the font options are monospaced. I used this helpful page as a reference.

Media Embeds

Video and audio are embedded using the native html5 <video> and <audio> elements. <video> tags are set to preload="none", so the videos don't add much to the bandwidth of the page until the play button is pressed. Most of the videos are encoded as 720p, with a webm version and an mp4 version. The maximum bitrate for these is about 3000kbps, but many of the videos are much lower, depending on the complexity and movement of the imagery. I used Handbrake to encode my video files and Reaper to encode my mp3 audio files.

Most of the images are encoded as jpegs, and are optimized for a balance of quality and file size. On the News pages, which tend to have more scrolling, I set loading="lazy" for more bandwidth friendliness. I also created a number of SVG vector graphics that are used around the site.

Moving Away from Vimeo

As a media artist, displaying video content is very important to me, but it's also the most bandwidth-hungry media type. On my old site, I used Vimeo to embed my videos. An advantage of their service was that they provided different quality levels based on available bandwidth. But ultimately, in order to ensure my webpages were as lightweight as possible, decrease dependence on centralized services, and decrease expenses, I needed to stop using Vimeo. The trade-offs were well worth it. I also created a local database of all of my public videos, their local file paths, and their captions, to avoid any future vendor lock-in.