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.
- my guestbook is now powered by code from virtualobserver with a h/t to Frills for pointing me their way and creating moderation capabilities
- recreated my original layout from Fool Lovers using just a couple lines of code thanks to border-image css (Nov โ23)
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.
- Added this page (Mar โ23), TTRPG section (Mar โ23), Health section (May โ23), reworked my toybox into a semi-shrine (Aug โ23), tamagotchi shrine (Aug โ23)
- Implemented high-contrast text colors for better accessibility
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.
- Designed my beloved dropdown menu for site navigation
- Major new content sections: q*bee shrine, confessions, stationery
Assets
- Credit for fonts, index pixels, and stamps can all be found in-line within each CSS theme file
- Pokyaron - 88x31 button base
- pixel-soup & lost-sozai - in-line emoticons
- GifCities - Guestbook gif
- web.badges.world - tamagotchi and neopets badges
- Lou (Elfwink) - chaotic good and pansexual badges
- I used this button maker tool to create the trans rights, vegan always, and union member badges
Milestones
- 300,000 views - 2023/11/06
- 200 followers - 2023/10/22
- 200,000 views - 2023/08/27
- 100,000 views - 2023/06/05
- 100 followers - 2023/04/20