About this website!

History

I had an older website that I've abandoned. It's still hosted up for keepsakes and some stuff is still on there that hasn't made it over, like the arts section and other more or less outdated writing about myself and the reasons I made a website in the first place. It also features a few broken links and is generally not as polished.

Purpose

The website doesn't really have a concrete use. It's rather something I work on when I feel like it. There are, however, some common thoughts that somewhat manage to regularly motivate me to work on this website:

• The idea of sharing useful stuff with others! (Links, Parts of Misc like the Screensaver homepages)
• Sometimes just wanting to vent out my feelings (Me Words, Parts of Links like the Music Library)
• Sometimes it's fun to work on this website - adding pages, optimizing the code, adding little features and details and working on new JavaScript things is just plain fun when I'm up for it (which varies wildly)!
• I've also seen value in using this website as a place to store some of my more finished thoughts, more visited links and just general stuff regarding myself. It's like an extra cloud backup should things on my local drive or my memory get irretrievable.

It just in general feels a bit like this is a pretty important project to me - one of the greatest things I could achieve in my life.

But then there are also moments where it kind of feels like I have no real motivation to work on this - no real reason to care for it. It's interesting to say the least.

Design decisions

• Content in paranthesis being less highlighted (like so...) This was something I did in real life back in school when I was writing texts sometimes to better order them visually (I mostly wrote with pencils because I would always rewrite the trash I've written and noted. It was kind of not really understandable to me how others could use pens for writing, but then again, Tipp-ex (which might only be a thing in europe according to Wikipedia) is like an eraser for any kind of pen). Since most of the things I write in paranthesis tend to be additional information like stuff to clarify what I did and didn't mean or furthering thoughts that don't fit the bigger picture of the current text, I wanted a way to visually highlight the parts that are skippable if you just want the main text without any distractions sprinkled throughout (although there aren't a lot of meaty texts on here...).
• Side/Hover Notes

  These were made as a way to make better tooltips (more freedom in styling with italics, bold text, images, headers, code and more) and to free my text of paragraph-long side notes that would otherwise be put as paranthesis inside the text, breaking the flow of reading. Think of it as content in paranthesis but too long to be reasonably put inside paranthesis inside of the text. I could've also used foot-notes, but I tend to overlook them when reading quickly (which I apparently do a lot then) and they're also quite bothersome to set up and type out, so I use this convenient middle ground which just requires me to write:

  <s-n>The text that should be underlined and hoverable</s-n>
  <sn-n>The text that should appear when hovering over the previous element<sn-n>

  Sadly, this probably makes this website more mobile unfriendly, but I guess that too would be the case if I just used the title attribute on everything (although the title attribute might be supported by screen readers instead of this, where I don't know how screen readers would handle these side notes).

  One other thing that kind of bothers me is link support. Since you can't hover over those side notes since else navigating this website becomes wonky (with notes staying unintendedly because you scrolled down and your mouse hovered over a note accidentily, or wanting to access a hover note that's covering up another one in the text), I can't really link to anything except the blue, underlined part itself, so that's a possible link (although I still haven't found a way to make it look nice and easily identifiable). One potential option for having multiple links is just adding additional links as paranthesis after the hover-note, which is kind of viable. Another fun limitation to think about is with hover-notes inside hover-notes, which can be possible if my hover-notes tend to be as long as this. But it all doesn't bother me too much at the moment, I'm just rolling with it.

• Color Palette & Visuals

  I tried employing a contrasting color scheme with blue and orange, simple because I know that contrasting color schemes exist and 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, which I think I did better with this new site at least.

  Also, it's a pretty nice coincidence that this dark theme naturally resembles a blueprint, which I didn't intend when first coming up with the design (which was light-themed and supposed to represent square paper you'd doodle on in math class)!

• Typography

  I've always been kind of struggling with typography - I don'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.

  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 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 visually, especially with paragraphs (although I definitely didn't like it the first few days I had this around). I'm glad to have figured this out.

  (Old Wikipedia, bikobatanari, Solaria's Readability Tips)
• Individual stylings per page

  I like the idea of most sites having their own visuals so it's a bit like an adventure where you discover something new with every page you explore. Although there probably isn't too much of this happening here, there are a few examples regarding this:

  • Torture in Misc
  • The console styling for the changelog

Tools used & Credits:

Software

• The static site generator "Jekyll"

  I ditch most functionality (theming, blog features like _posts, markdown file parsing) and primarily use jekyll just for it's layout feature where you can define a template page where things like the nav-bar and header are automatically generated based on data files and page metadata and added to every page using that layout.

  I also make use of two jekyll plug-ins:

  • jekyll-contentblocks which just opens up more options for the layout feature described above.
  • jekyll-last-modified-at which just adds a variable that contains the time a file was last modified at. I use it to display the date when a page was last updated on to the top-right of the nav-bar.
  (jekyll-contentblocks, jekyll-last-modified-at)
• The digital drawing program “Krita”
• 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.

  (GitHub for Aseprite to compile it yourself for free // Part in FaQ // LibreSprite)
• 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.

  Over time, however, I discovered some extensions that proved (and still prove) to be useful to me:

  • Todo Tree is an extension that compiles a list of all lines of code that begin with specific keywords such as TODO: or TOFIX:, making it easier to keep a todo list of all the things one needs to do.
    The need for this extension arose from the fact that I sometimes had all these racing thoughts about what to add/change/do that went by way too quickly and therefore mostly forgot about again - Things like fixing a typo on this page, adding a list item there, implementing a feature/fix I had for this page/css, or remembering an idea I had for something that I forgot.
  (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 1980x1080 monitor.. I also occassionally look through this site with "Ungoogled Chromium".

Other people's assets

• The font used for graphics (like the one on the splash screen) is called TSCu Comic

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.