About this website!

Squared Pancake
Site Type	Static + SSG
Created	Oct. 2021 (Old) | ~2023 (Simple)

History

My journey of making websites began with an older website that I made and abandoned, but am still keeping up for keepsakes. The styling took heavy inspirations from Wikipedia as I strived to catalogue everything there was to catalogue about one's life – all my successes, hardships, failures, stories, thoughts, doubts, moments, friendships, mistakes and more. I also kept a page called the Article Index, which was full of ideas, thoughts, concepts and questions I would have about life and basic concepts such as love, or religion. I wanted to discover if there was a true, absolute answer to these things. to foster curiosity and general life knowledge/wisdom to round out my character. While the goals were strong, I was led astray by other worries and my general inability to focus – the website wasn't particularly big and most of the time spent working on it was working on the design instead of the content ("working on the frame holding the content instead of working on the content itself", as biko has said) as, while I did have some interesting questions, I didn't have the discipline to really answer them in a thorough manner befitting of a piece of writing. I still have fond memories of my old website – some sessions of working on it felt really fun and it was nice to first discover other people's websites with similar enthusiasm and unprofessional formatting on NeoCities.

Sometime later, I got sick of the maintainance burden of the first website (with me feeling like it wasn't fun to work on the website anymore because there always was something that needed tending) and tried sprouting off a new website, the one you're on right now. I first named this sub-site "The Simple Hub" (you can still observe this legacy name by inspecting the url of the pages here) as a reminder that this time, I should keep the styling to a minimum and just keep it mostly HTML and content focused. Therefore, the layout got simpler (just being a singular column with everything in it row by row) but even then I iterated and experimented with the design a bunch to end up where we are now.

Now, when looking back at my old site, I can really admire that spirit that I feel like I partly lost as my mind got astrayed by the increasing burdens that come from growing up. I feel kind of sad that it faded a bit, but can count myself lucky that I kept such a vibrant and lively time capsule that reminds me of this pure child-like drive of curiosity I've kind of forgotten about. I feel respect towards my past self, and have a will to honor his past dreams by maintaining our old website and potentially discovering the answers to the questions he sought to answer.

If you're interested, you can look at the Design Graveyard for past ideas I had for the design of this website that didn't work out or that got usurped by better ideas, or the Changelog Log for a chronological log of major changes done to this website (some even have before vs. after pictures!!).

Purpose

Even though I don't truly recall why I made my website in the first place, over time some reasons started appearing the longer my mind had time to mull things over:

1. Major Purpose: It allows me to compile and share useful and/or cool things made by myself or others (take for example the entire Links section or anything worthwhile in the Me section).
• This ability to share is unparalleled to anything else in my life (social media, talking to / texting people directly, like friends, family or at local community events) and so this website can be quite useful once I have something worth sharing. Reasons why sharing things here is superior:
• It's voluntary: I don't have to worry about a conversation being cut short because the other party isn't interested – I can go into as much detail as I like because nobody is forced to read it all.
• It's customly formatted Hypertext: Lists, tables, links, images and custom CSS/JavaScript (e.g. hovercards, filterable tags) all help me to illustrate, emphasize, structure and sort that which words alone can't.
• It's digital writing without time limit: Instead of real time conversations, I can take the time I need to write to the degree of perfection I desire. I can iterate and tweak sentences, paragraphs and article structures easily. I have a literal lifetime to chip away at it.
• It's (relatively) permanent, accumulative and accessible: Instead of being only available at the time and place of communication (such as when talking to friends, or chatting in a walled-off Discord server), my writings are always available, can accumulate over time and can easily be shared with others by just sharing a link.
2. Minor Purpose: As a sort of online backup for things like bookmarks, art, thoughts and more that I found worthwhile enough to share – for when my mind or my hard drive fails me.

3. Minor Purpose: Another minor purpose is that of finding my general workflow. Rarely has a project of mine exceeded the scope I reached with this website, and with that comes the challenge of how to structure a big project – how to organize what goes where, in what order I do things in, how I efficiently process everyday thoughts and findings into things worthy of publishing – that sort of thing.

   I will definitely be writing about this when I get to find my mojo with it!

Design Decisions

This is a general summary of certain design decisions for this website. Mouse over the text with the blue marker background to read more about that particular topic! Also see Design Graveyard for design decisions that ended up being scrapped for one reason or another.

• Content in paranthesis being less highlighted

  This was something I sometimes did back in school when I was writing texts to better order them visually. Since most of the things I write in paranthesis tend to be additional information (that e.g. clarifies what I did and didn't mean, or provides further thoughts or connections that don't fit the bigger picture of the text at hand), I wanted a way to visually highlight the parts that are skippable if you just want to read the main text without any distractions sprinkled throughout.

  -> (like so...)
• Hovercards
  This is a hovercard!

  I first created them since browser tooltips were limited (no styling like italics, bold text, images, etc.) and became unwieldy to use for longer tooltips. Having paragraph-long text in paranthesis or footnotes would be possible, but:

  • Paranthesis aren't optimal in some situations (they remove the overview aspect of lists, or have no space to be written out in places like the Links page).
  • Footnotes without proper QoL features (such as those from gwern.net – like having a window pop-up on hover, or displaying them as margin notes) are hard to spot, annoying to jump back and forth from and don't scale well when there are hundred of them (as is the case again with the Links page), making the page needlessly long and the trek between the footnotes section and the footer below arduous.

  Thus, improved tooltips are the convenient middle ground I chose. They're easy to type out, fully keep the formatting and visual structure of the thing they're describing intact and hide additional, but potentially uninteresting topics from the main text, keeping it focused.

  This, however, comes at the cost of accessability:

  • Text inside hovercards can't be printed out easily.
  • Screenreaders probably have problems parsing the foreign syntax (although I suppose I can just grab a screenreader and test it with that).
  • Keyboard-only users can't focus on hovercards, preventing them from reading their content.
  • The website would probably look weird for those that browse via a text-only web browser like Lynx.

  That is indeed unfortunate, but I see this feature as something worth experimenting with in the hopes that one day, I or someone else would pick up on it and polish it to a standard where it could be more usable by everyone.

  Drafts

  • Since hovercards are essentially little "html sub-pages", they're quite malleable. They can have text-formatting, links, other hovercards, little widgets and more depending on what's needed.
  • One concern I had when implementing hovercards was that it would hide the content beneath it, making it annoying when accidentally lingering over an element long enough for it to open the hovercard and prevent you from doing what you wanted with the content below it.
  • At the current day, this is indeed a problem for some edge cases – however, the ability to use links inside hovercards is invaluable to me and worth the hassle.
  • At first I "solved"(?) it by making the actual hovercard itself not hoverable, but this brought forth a number of limitations and other problems:
  • Hovercards couldn't contain links or other hovercards
  • you couldn't scroll through Hovercards, so if the hovercard was large enough, the content would just move out of your screen
  • you couldn't select and copy text inside hovercards
• Visuals (Color Palette

  Originally, when first creating this website, I tried employing a contrasting color scheme with blue and orange, using blue for the background and orange for things like links, simply because A) it was simple, B) I knew that contrasting color schemes existed and C) because my old website was really monotone because it only really used a pale orange (to try to imitate the color of pancakes) both as the background and foreground color and I plainly wanted something more pleasant/varied to the eyes. It worked, and for a while it stayed that way.

  New colors then slowly trickled in, starting with the <details> element that had boxes for every color of the rainbow. Then came the light theme. And then came the hiatus between 2023-2025, during which I discovered the "Things" theme in Obsidian and decided to make headings and bold stuff colorful. And now we're here and every hue is utilized here in one way or another. I don't know if this palette is bad or all over the place, but I like it and that's all that really matters here.

  / Bold Colors

  After discovering a theme called "Things" for Obsidian and integrating it pretty well into my note-taking system, I thought to port some things I liked from it over to this website.

  Colorful Headings

  I always struggled with how I should mark each level of header (h1-h6) for this website. Changing the font size is subtle and not really easy to tell at a glance – same with giving each header a different underline.
  Things had the solution: Map each heading level to a specific color (alongside the more subtle font size change). Now each header has it's own color and can be quickly identified once you internalized the order of colors! (For this website, it's just the colors of the rainbow, so White -> Red -> Yellow -> Green -> Blue -> Purple)

  Colored Emboldenment

  One additional thing I liked about "Things" is that bold stuff is pink. I never really found it useful to embolden something as a mildly thicker font is more of a subtle effect you have to pay attention to to really notice it. With bold stuff being colored, it has that oomph that grabs my attention more effectively.

  This boldness can also be used in a variety of ways, such as to A) highlight the word a paragraph is about, B) serve as a sort of mini/inline header (as you can see here in this hovercard with "Colored Emboldenment" and "Bold Colors"!) and C) be a visual landmark for in-sentence enumerations like this one!

  )
• Typography

  I've always been kind of struggling with the typography of this site – I didn't know what combination of letter-spacing, word-spacing, line-height and paragraph spacing is the best in terms of looks or readability. Because of that, I mostly just copied other people's implementations of it and tweaked them until I semi-automagically liked it.

  I think I first started off by copying the line-height of the old Wikipedia design as that was what my old website was styled like.

  Later, when first making this "second" website, I copied bikobatanari's typography settings which stayed around for a good while.

  After that while, I changed it again, this time mostly basing it off of solaria's readability tips, adding a bit of letter- (.2px) and word-spacing (1px) while reducing line-height (from 30px (1.875rem) to 24px (1.5rem)) and keeping the vertical spacing between elements (16px (1rem)).

  Right now, it feels like I like this, especially with paragraphs (although I definitely didn't like it the first few days I had this around).

  (Old Wikipedia, bikobatanari, Solaria's Readability Tips)
• General Site Structure

  Currently, my website is structured more or less like a tree: There are the main four categories at the top that can then expand depending on what I want to share.

  For example, the Links page first began as a way to link to other people's websites, but later on, I had a little obsession with those shareable graphics I kept seeing as I browsed around the web (buttons, stamps, blinkies etc.). Because of that, I tacked the Graphics Gallery onto the Links section where I now share those graphics.

  One strength of this design is the extendability and wonder of what you could find. None of these top sections is bound to any criteria other than incredibly generic stuff like...

  • "This is info about the site itself or me as a person"
  • "This was made by me"
  • "This is something cool I saw and wanted to share!".
  • "This is anything else that doesn't fit the other categories"

  ...so you could fit literally any kind of content under these categories, giving you complete freedom on what you want to share, how to structure that and what sub-pages and -categories to make.

  I myself love that structure because it just gives off this sense of wonder and freedom when first wading through a website. Pair that with a beefy or overwhelming amount of content and you can just go where the links take you and enjoy what you'll find. It also encourages making secrets and one-off pages that have unique styling!

  One neat consequence of this structure is that with each subpage you visit, the topic gets more specific / in-depth. This can be best seen with the "breadcrumbs" thing under the main navigation links at the top that tells you where you currently are (on PC, you need to hover over the navigation links for it to display). I first only implemented those breadcrumbs because I saw it used on freckleskies' website and thought it might be neat to have around.

  Sometimes though, there are still things that match multiple categories, and I don't know in which one place to put them in. This problem is especially prevalent in the Miscellanea section since things like Cool Lingo could just as well be a card in Me Words.

• Not using target="_blank" for any link

  A small decision I made to make navigation more consistent. Marking a link with target="_blank" forces your browser to open it in a new tab, and I dislike it since it essentially just takes away user control as to how you want to open and organize your tabs.

  You can already manually decide if you want to open the link in a new tab by holding CTRL while clicking it, middle-clicking it or right-clicking it and selecting "Open link in a new tab". Funnily enough, another personal website I like holds the same stance and made a button to "campaign" against the usage of target="_blank":

  

  if i wanted a new tab, i'd middle click!
  (to escape an iframe, use target="_top")

  The button's tooltip on it's creator's homepage
• Subtitles

  One thing I've grown to love about my website is the inclusion of subtitles and hovertexts for headers. These are present on some to most <h1>'s and rarely on some other header types on the page itself (<h2> - <h6>).

  There's just something so fun about them, and there are some instances where, after I've had a hiatus on working on this website and forgot some of the ones I don't see as often, they made me smile and chuckle.

  Sometimes they can be used as a sort of punchline to a joke while other times they're a good summary or visual metaphor for the section at hand (see this page's subtitle for an example of that!).

  It's also a wonder to me that I've managed to find so many subtitles I like – it feels like it'd be hard to find something fitting for every header, but for some reason it isn't that much. There are a few headers every now and then where I don't know what to put there (and I then sometimes put something half-hearted there that I don't really like, but that's serviceable), but that can get fixed over time while letting my brain mull on it for a while until a good subtitle randomly pops into my mind.

• Descriptions for things in the Links section

  This essentially refers to pages mainly in the Links section (like the Links page itself, the Graphics Gallery or the Music Library), where aside from just linking to a thing, I write a bit (or rarely a bit more) about why I like that thing.
  Especially in the early days of this website it was a cause of emotional turmoil, but even back then there was and still is one great reason for doing it:

  Adding descriptions just adds so much context and interesting information that is just unbeatable when compared to having a big list of things without any additional information. It's interesting to see why someone likes something. It tells something about the person that shared it and gives a first pointer towards what kind of content this thing has and what the reader may like as well. It can also show the hidden gold of a website (like the Text Analysis tool on the Boxentriq website) and highlight any other important things (controversies, massive version changes, free demo versions of games, a list of good add-ons as well as workflows and use cases for software). It can also point to complementary material, or even be a resource itself for the thing it's linking to – take my list of mods for Minecraft or list of commonly used commands for yt-dlp, for example. It's surprising how much a simple description field about something (especially with extensive mark-up) can be so varied and practical!

  ---

  When I first decided to write these descriptions, there were many negatives that occured – most were of an emotional nature:

  • I felt pressured to include descriptions to everything and felt like I couldn't just link to a website without at least writing a somewhat broad overview without feeling bad.
  • Because of this, I couldn't just casually add links willy-nilly. This led to me commenting out entries that were unfinished, which prevented sharing resources that could've been useful to others all because the knobhead at the writer's desk couldn't find the right words.
  • Sometimes, I felt like I had to scrape and scrutinize the thing I'm linking to to find a way to formulate what I like about it in a unique way that doesn't mimic the other 100's of descriptions. Some descriptions felt disgenuine because I felt forced to find unique reasons to like them, even if all I liked was something simple and general such as "this blog is really relatable!" and "I really like this website's styling!".
  • Since it usually takes time and iteration to write descriptions I truly like, some days it felt like it was such a time sink to write those descriptions, like I was wasting my lifetime that I could've spent on more important matters.
  • For personal websites, I was worried how the people I'm linking to would interpret my description about them:
  • If I didn't write a description, I feared it would've be taken up as an insult – that they have nothing worthwhile to say compared to those that got a description (which is paradoxical since I wouldn't even be including it in the Links section if that were the case).
  • I still feel a bit awkward when I disagree with a part of someone's website. One primary example of this is stating that I find the Yumejoshi Corner (where the webmaster lives out their crush on Sans from Undertale) on vivarism.net weird. I don't know if it's right to stay silent about such feelings or not, and it still causes an interesting conflict inside me.

  The way I solved this problem is multi-fold: First, every page can have a unique description of what it does – a 2-3 sentence summary of what it does, what it contains, what I generally like about it. "What kind of personal website is it?", "Who's the admin?", "What kind of things do they upload?" or "What was it's initial reason for existing?". This gives everything an overview without feeling too forced

  Secondly, through the implementation of tags, I was able to link to things without any description at all if I didn't feel like writing one – I'd just give them a tag that denotes they have no description and then the user can quickly filter them out if they want to. I didn't feel pressured anymore to force a description onto something and could share things even without sharing my thoughts on it.

  ---

  As an related aside, one interesting notion I discovered through adding tags to the Graphics Gallery is that I can just use a tag to describe commonly used reasons to link to things – e.g. if I include a #Pretty tag, I know that I linked to this thing because it just looks pretty, preventing the need to write the same (but uniquely worded) shtick anytime I wanted to highlight that the thing is pretty.

• Light Theme

  Back in 'ye old days, there was only a dark theme. Because of my draconic button hoarding tendencies (see the Graphics Gallery), I noticed that some buttons looked better on a bright background while others looked better on a dark background, so, for those pages I implemented a little button that would toggle between a light theme and a dark theme. That then escalated, by e.g. needing to account for the styling of every element that could potentially appear on such a page and the annoyance of the website jumping between light and dark mode when switching between pages that did and didn't supported the light theme, so I began working on a more permanent Light Theme.

  One cool little detail I like is that when switching between the themes, a sort of medium-bright blue slowly fades in and out to ease the transition from really dark to really bright and vice versa. It's a really neat detail I find.

• URL Design
  • Links should not have .html at the end – While I did link to my pages with .html at the end in the beginning to help foster the mental connection in me (and hopefully other beginners) that the URL really does just point to a normal .html file, I decided to abandon it so that the URL just looks clean and nice
  • All links used here are absolute links and not relative links – this is because of a problem relative links have when used in conjunction with A) URLs not ending with .html as well as B) a browser that automatically appends a / to the URL of certain pages (namely those that have a folder with the same name as the html file in the same folder) for no reason other than to break relative links
  • The names of slugs (e.g. /simple/meta/website/graveyard) are mostly short and snappy, whilst the id of headings is mostly a 1-to-1 transcription of the heading's text
  • "Sub-Sites" are implemented using top-level folders instead of a subdomain – For example, this page is in the simple/ folder whilst my old website is in the old folder

Principles

These are not set-in-stone things that I actively wager any time I add something to this site – it's just a list of more sub-conscious thoughts that I noticed commonly popping up while working on this site that subtly influence the kind of decisions I make.

• Link often...: Linking is the life blood of diversity and the old web. By linking to others, I promote exploration and looking over the horizon of just one individuals opinion. Whenever I remember a site or page that is similar to the page I'm currently making, why not link to it as an additional resource? (e.g. linking to more graphic collection in the Graphic Gallery, turd's dictionary on the Cool Lingo page or 32-Bit Cafe's gigantic resources list on the Link page).
• ...and describe plenty: Giving my own thoughts on the things I share both offers a look into my thinking as well as serving as recommendations on what to check out. It gives info on how I effectively use tools, what I like primarily about websites and anything, really. The Links section is the prime showcase of this principle with each item having it's own description.

Update Checklist

• Check for broken links using linkchecker (linkchecker --no-warnings http://localhost:4000 >> ~/Desktop/linkchecker-output.txt)
• Update the Sitemap to account for any page additions, renames, moves or removals
• Potentially write a new changelog and/or add a new entry to the RSS feed

Tools & Credits

Software

• The note-taking app "Obsidian" for storing my ToDo's, unfinished drafts and the Inbox of things I ought to refine for use within the website
• The static site generator "Jekyll"

  I ditch most functionality (theming, blog features like _posts, markdown file parsing) and primarily use jekyll for...

  • ...hot-reloading.
  • ...it's layout feature where you can define a template page where things like the nav-bar and header are automatically added to every page.
  • ...it's _data folder, with which you can define a dataset and automatically generate content using it. Pages like the Graphics Gallery use it to automatically supply the image path, link, sources and description for each button.

  I also make use of two one jekyll plug-ins:

  • jekyll-contentblocks, which just opens up more options for the layout feature described above.
  • jekyll-last-modified-at, which added a variable that contained the time a file was last modified at. I used it to display the date when a page was last updated on under the <header>. It suddenly broke one day and I found the project lying blood-ridden on the floor of it's apartment as I saw that it got archived on GitHub.

  I recommend anyone trying out jekyll to start with just getting it to run – meaning that you can get it set up where you can feed it one HTML file and have it spit out the exact HTML file

  Despite using a static site generator, I aim for the generated HTML & CSS to be formatted as if I've written it by hand so that others can peruse the HTML files without weird spaces inserted everywhere.

  (jekyll-contentblocks, jekyll-last-modified-at)
• The digital drawing program “Krita” for the rare high-res drawings I do for this site (like the Splash Page)
• The pixel art program "Aseprite"

  Just as a side-note: If you don't want to pay for Aseprite, you can completely compile it for yourself from their GitHub. According to the FaQ on the official website, you can still use your own compiled version for personal and commercial uses – the only thing prohibited in the EULA is sharing compiled copies online. This basically means you can buy the software if you don't want to compile it yourself and/or want to support whoever the money goes to, else it's just more cost-efficient money-wise to compile it yourself.

  There is also a project called "LibreSprite", a fork of the last Aseprite version that was published under the shareable license (General Public License v2), that is maintained and probably updated with new features (although I don't know for sure since I didn't test it) and available for free.

• A text editor thingy called "VSCodium"

  I somehow managed to get used to using an IDE. Previously, I was kind of overwhelmed with all of the stuff ham-fisted into it, but once I started ignoring 99% of all power-user features it's basically just a text editor with an in-built file browser and console.

  However, with each additional project I worked on, I grew queasy about some rough edges in my programming workflow, causing me to slowly discover the first percent of all features available. Those mainly include stuff like QoL extensions and configuring those and other stuff using workspaces, profiles and the global profile. Some of the extensions that proved (and still prove) useful to me:

  • Todo Tree is an extension that provides a list of every line of code that contain specific keywords such as TODO or TOFIX, making it easier to keep a todo list of all the things one needs to do.
    While it's more useful in other projects I work on, for this website project I for some reason prefer keeping my ToDo's all inside a Markdown file in Obsidian.
  (Todo Tree) as well as "KWrite"/"Kate" (Linux) for quick and small edits
• I mostly use & test this site with "Firefox"With the "Noto" font family, 16px font size and a 1920x1080 monitor.. I also occassionally skim through this site with "Ungoogled Chromium".

Assets

• The marker background texture (used for hovercardsSample or h1) is from SVGBox
• Fonts
• Noto Sans, the main font used for most written text
• JetBrains Mono, used for code blocks of any kind because it's a bit more condensed than most monospace fonts, allowing it to fit more text into tight width's – a thing most monospace fonts struggle with when compared to proportional fonts
• font-feature-settings: "calt";
• TSCu Comic, rarely used for graphics (like the one on the splash screen)
• Trunic, included just for fun and to see if it works on the web (na_d woerk ta_ does!)
• Win2000System, a recreation of an old Windows font used for the Unregistered HyperCam 2 watermark on unfinished pages

Web Services

• This website is hosted on NeoCities

  NeoCities is the service I use to host my website. It's name is a reference to GeoCities, an older, now retired web service where people could host their own personal websites for free. It has a few extra features like update feeds, view counts or finding websites with specific tags, but I personally only really use it as a hosting platform. Regardless, I think it's a solid, available way to gain some experience with web development with the added bonus of being a bit on the radar, compared to just buying a domain and hosting it silently without anyone knowing of it's existance.

  The NeoCities button on my Links page
• I use Formspree to aid in keeping a guestbook.
• I also have an unused account on status.cafe

  I still don't know if it's something I'll continue using, or even how I'd use it.

Other