Technical Notes

My static site is generated using Jekyll. I am hosted by Neocities. I push my code from my computer to Neocities with Bret Comnesโ€™ deploy-to-neocities workflow, and I followed this guide to set that up. For the non-technical, Jekyll-curious, I wrote out every single step I took to set up Jekyll for this site as a complete beginner, including creating a Github account though I have changed a few things since that was written.

My blog posts on web dev include all the sources I found and used while working on technical aspects of this site and creating my ideal developer environment. I felt like it was most useful to attribute those in context, so please refer to individual posts for those sources.

Past Layouts

This is my log of the past iterations of the site, so I can look back on all the terrible code I've written good memories Iโ€™ve made! Itโ€™s important to me to give credit to the folks who have generously provided code snippets and free-to-use assets to create this site, so my CSS files also contain credit comments in line if youโ€™re curious.

Version 4: Scrolling Boxes | Nov '23

๐ŸŒธ
๐ŸŒฑ
๐Ÿฎ

After a day full of fighting with git to deploy my site, I created two new themes to blow off steam. Iโ€™ve wanted a green theme for a while now since theyโ€™re so easy on the eyes. I also felt like a cute pink theme was past due for a site that is partially dedicated to cute pixel art. Since I had recently recoded my original theme to leverage CSS border image slicing, I added a sakura background with CRT-inspired scan-lines to soften the contrast and give a retro vibe. The green theme is very similar except it a dark mode without a border image, making it a very pleasant mobile experience for nighttime. Iโ€™m also going to throw my pretty purin theme in here even though I made it later because I wanted that cute pixel web 1.0 look.

Version 3: 3-Column Throwback | Oct '23

๐Ÿ’œ
๐Ÿ’Œ
๐ŸŽƒ

I coded three new layouts over two days: Preppy Purple, Trans Love Letter (dedicated to my partner), and Halloween. I did this while listening to Pain Hasnโ€™t Hit Me by The Crane almost exclusively, and the experience reminded me of listening to Burning by The Whitest Boy Alive in high school, browsing tumblrs of girls who were definitely cooler than me. Fitting with that nostalgia, I wanted to create desktop layouts that I donโ€™t see often anymore: the classic โ€œholy grailโ€ 3-column layout. I immediately went to Matthew James Taylorโ€™s website as it offers the bare bones code for literally any layout you could possibly want. As a bonus, theyโ€™re all responsive for mobile, and he offers many different ways to approach the layouts using CSS grid, flex, or whatever youโ€™re comfortable with. There are so many sites on Neocities that could be mobile-friendly, and this is such an easy way to go about that. I hope more folks learn from this incredible resource.

Once I had the code for my site structure, I wanted to add a theme switcher for Halloween. This is done easily just by switching out whatever you want to customize in your main CSS file by swapping in variables and having those defined in separate style sheets that some JS can point to. I followed this very easy tutorial that provided all the code snippets needed, then I got busy, committing as many CSS crimes as I wanted. The entire effort took about two days, but the majority of that was spent tweaking the CSS to figure out fun combinations that worked well together and then leaving it alone for a while so I could view it with fresh eyes. One of the really helpful resources I used to develop cohesive color schemes for each layout was colorffyโ€™s CSS / SCSSย color variablesย generator. You just specify a HEX code for a color you like, and it spits out a family of related shades, which you can then evaluate to ensure youโ€™ve got the right contrast ratios for your site.

Version 2: Lost in Space! | Mar '23 - Oct '23

๐ŸŒ 

With this layout, I simplified the elements of my first layout using the body styling from Paleโ€™s gorgeous Glassy layout. Iโ€™ve been totally on a space kick, playing Starforged, reading Leviathan Wakes by James S. A. Corey, and watching The Expanse, which is based on that book. I think that probably explains why I went with the space background. Itโ€™s hard to find something dark, but not too boring.

Version 1: Lace Letters | Oct '22 - Mar '23

๐ŸŽ€

Note: This is a hidden theme because the sakura theme is an improved second version of this, but you can still view this layout by clicking the ribbon icon. The font has been adjusted for accessibility.

This layout was adapted from a template by Fool Lovers. They provided the lace header, lacy content container graphics and code, url hover sparkles, favicon, and bouncing sakura divider. I will always be extremely fond of this layout since it was the first one I tweaked to my liking to launch Lost Letters on Neocities. A lot of folks enjoyed the gorgeous pixel art based on the guestbook entries from that time.

Assets

Milestones