From ede956e8aee55be7d1fadb32ad32cfc62ac5d513 Mon Sep 17 00:00:00 2001 From: Frederick Yin Date: Mon, 27 Nov 2023 23:17:27 -0500 Subject: New post: projects/fkfdme --- docs/projects/fkfdme.md | 191 ++++++++++++++++++++++++++++++++ docs/projects/img/fkfdme/2020-04-23.png | Bin 0 -> 165483 bytes docs/projects/img/fkfdme/2022-01-07.png | Bin 0 -> 40093 bytes docs/projects/img/fkfdme/2022-01-09.png | Bin 0 -> 140287 bytes docs/projects/img/fkfdme/2022-04-11.png | Bin 0 -> 132432 bytes docs/projects/img/fkfdme/2022-05-07.png | Bin 0 -> 126390 bytes docs/projects/img/fkfdme/2022-12-28.png | Bin 0 -> 190342 bytes docs/projects/img/fkfdme/2023-01-15.png | Bin 0 -> 173981 bytes docs/projects/img/fkfdme/2023-01-17.png | Bin 0 -> 187447 bytes docs/projects/img/fkfdme/2023-09-03.png | Bin 0 -> 224296 bytes docs/projects/img/fkfdme/2023-11-05.png | Bin 0 -> 213628 bytes docs/projects/img/fkfdme/2023-11-27.png | Bin 0 -> 185333 bytes docs/projects/img/fkfdme/icons.png | Bin 0 -> 160351 bytes docs/projects/index.md | 9 ++ 14 files changed, 200 insertions(+) create mode 100644 docs/projects/fkfdme.md create mode 100644 docs/projects/img/fkfdme/2020-04-23.png create mode 100644 docs/projects/img/fkfdme/2022-01-07.png create mode 100644 docs/projects/img/fkfdme/2022-01-09.png create mode 100644 docs/projects/img/fkfdme/2022-04-11.png create mode 100644 docs/projects/img/fkfdme/2022-05-07.png create mode 100644 docs/projects/img/fkfdme/2022-12-28.png create mode 100644 docs/projects/img/fkfdme/2023-01-15.png create mode 100644 docs/projects/img/fkfdme/2023-01-17.png create mode 100644 docs/projects/img/fkfdme/2023-09-03.png create mode 100644 docs/projects/img/fkfdme/2023-11-05.png create mode 100644 docs/projects/img/fkfdme/2023-11-27.png create mode 100644 docs/projects/img/fkfdme/icons.png diff --git a/docs/projects/fkfdme.md b/docs/projects/fkfdme.md new file mode 100644 index 0000000..39b2865 --- /dev/null +++ b/docs/projects/fkfdme.md @@ -0,0 +1,191 @@ +# fkfd.me + +First published 2023-11-27 + +Latest version 2023-11-27 + +Yes — the inevitable "How I built my blog" blogpost! Except it's like the +44th post, and hey, at least it's not Jekyll or Hexo or WordPress (no +offense). + +## Early history (2020) + +### fkfd.me + +I bought the domain fkfd.me on 2020-02-14 for 20.98 USD, after my previous +domain, [autometalogolex](https://xkcd.com/1932/).me expired. + +fkfd.me was for my comics initially; my blog was hosted on blog.fkfd.me. + +### The meaning behind fkfd + +fkfd is a contraction of fakefred. + +fakefred, which happens to be my GitHub username, stems from the facts +that (a) I go by the English name Frederick and (b) there was an "X might +be fake" internet meme in mainland China. + +In retrospect, fkfd is a genuinely high-quality name. All four letters are +in the QWERTY home row. And I'm glad I didn't go for fakefred.me because +that would be cringe. + +### First design + +The first git commit was made on 2020-04-23. + +I opted for MkDocs as the static site generator, forked the +[alabaster](https://mkdocs-alabaster.ale.sh/) theme, and called it +alabaster-lite. I disabled all JavaScript, kicked out all the clutter, and +left this masterpiece: + +![Website titled "You are in the wrong place. Leave." followed by +a condescending paragraph demanding the reader to leave my +blog](img/fkfdme/2020-04-23.png) + +### Background color + +If you are reading in dark theme, you'll notice that the background color +hasn't changed at all. It is `#19202b`. + +Why this particular color? I don't know. Probably forgot. No comment in +the CSS either. This kind of shit is why I keep a blog, to archive my +motivations. + +## Then it was like this for one year and a half (2022) + +Per `git log`, the next big update was in 2022-01-07. I graduated high +school, and began to use fkfd.me as a legit blog, moving comics to +fkfd.me/comics. I also reorganized all past blogposts (like 7 at the time) +into categories (projects, random, shitpost). + +![Title "fkfd". Body: "Yes this is just a low effort blog why do you +ask"](img/fkfdme/2022-01-07.png) + +### Categories + +Two days later I did a major redesign on the homepage. + +![Title "fkfd". Headings: "Categories", "Non-blog Content", "Fun", "All +Blogposts"](img/fkfdme/2022-01-09.png) + +A few months later I joined [Fediring](https://fediring.net) and increased +the line spacing. But apart from that not so much changed. + +## Fast forward 7 months (2022-2023) + +### Bad design. Just no + +On 2022-12-28 I was at home with covid. It really messes with your head. +Which explains this absolute disaster of a design: + +![Every category is a solid colored block with a handdrawn icon. They form +a 2x3 grid.](img/fkfdme/2022-12-28.png) + +It would have looked great, if my theme was more vibrant, which it is not. + +Effort, however, is not wasted. The grid layout has been reused ever +since. + +### Much better + +Half a month later, 2023-01-15: + +![The solid color blocks are gone](img/fkfdme/2023-01-15.png) + +Two days later: + +![Updated icons for ham radio and shitpost, and new icons for +fediring](img/fkfdme/2023-01-17.png) + +### About Me + +I also included my About Me page in the heading, because I find it the +most useful page when I'm visiting someone else's blog. What's interesting +about you? What do you enjoy? What do we have in common? If it warrants +a whole ass page, it deserves a heading unto itself. + +## Another 7 months (2023) + +### New categories + +In summer 2023 I flew to the US to study at U of Michigan, thus the UMich +category. There was only one music post, initially in Projects (namely +[Early Sunsets Over +Monroeville](../music/early-sunsets-over-monroeville.md)), but I did +anticipate more coming in the future, so I made it a category of its own. +Turns out a great decision because of [This Song Will Uncure Your +Depression](../music/uncure-your-depression.md). + +![Categories section is now 2x4 grid](img/fkfdme/2023-09-03.png) + +### Blogposts I don't regret + +The "Blogposts I don't regret" section was actually added in Janurary too. +I didn't include it in my screenshot because then you won't be able to see +my Fediring icons 🪐🚀 + +It was a compromise between "Featured blogposts" (narcissist) and +"Blogposts that don't suck" (self-deprecating). I don't care about _your_ +opinion. _I_ find them representative of my style, and thus good "entry +points" for a new visitor. + +### Accessibility + +Around this time I grew more and more accessibility-aware. A few problems +were fixed, such as text contrast and heading levels. + +### This is not the right vibe + +I've visited dozens of personal websites, but few do I consider +"excellent". An "excellent" website is consistent in content and style, +but manages to surprise me. + +For example, [maia crimew](https://maia.crimew.gay/)'s website delivers +all its promises: + +- soft kitten +- disregard of authority +- gay + +It lowkey disappoints me when someone's website fails to capture their +energy. I feel like if you are gay, a furry, a pirate, or a gay furry +pirate, you most certainly deserve a decent website to show off that +energy. Not that techbro-style boilerplate. + +Unfortunately, my blog falls right into this category. As a remedy, +I would try to add an essential element of any good website: + +__Cat.__ + +Thus on 2023-11-05: + +![Three icons on top of page, including a contour of a cat +head](img/fkfdme/2023-11-05.png) + +It is a link to my About Me page, which does mention my affinity to cats. + +### A more subdued approach + +At this point, there are three sets of icons on my homepage: + +- header icons (about, x, links) +- categories +- fediring + +Categories are supposed to be the focus, and the other two are stealing +it. Also it looks terrible on mobile. Not good. I reverted the design only +one week later. + +But the assets were still there. Plus, I really liked the cat icon. +Meanwhile the sidebar is mostly empty. And there we go! + +![Four icons in sidebar: cat head (about me), radiating atom (atom feed), +balls and sticks (links), ascii tilde (~x). Below are fediring +icons](img/fkfdme/2023-11-27.png) + +### Hover + +I also made alternative icons for the categories that appear on hover. The +problem is that, the browser does not prefetch them, and they flicker for +a few milliseconds on the first hover. I can't find any non-hacky way to +fix it. diff --git a/docs/projects/img/fkfdme/2020-04-23.png b/docs/projects/img/fkfdme/2020-04-23.png new file mode 100644 index 0000000..1210be9 Binary files /dev/null and b/docs/projects/img/fkfdme/2020-04-23.png differ diff --git a/docs/projects/img/fkfdme/2022-01-07.png b/docs/projects/img/fkfdme/2022-01-07.png new file mode 100644 index 0000000..2877838 Binary files /dev/null and b/docs/projects/img/fkfdme/2022-01-07.png differ diff --git a/docs/projects/img/fkfdme/2022-01-09.png b/docs/projects/img/fkfdme/2022-01-09.png new file mode 100644 index 0000000..edfbc71 Binary files /dev/null and b/docs/projects/img/fkfdme/2022-01-09.png differ diff --git a/docs/projects/img/fkfdme/2022-04-11.png b/docs/projects/img/fkfdme/2022-04-11.png new file mode 100644 index 0000000..7c7d22e Binary files /dev/null and b/docs/projects/img/fkfdme/2022-04-11.png differ diff --git a/docs/projects/img/fkfdme/2022-05-07.png b/docs/projects/img/fkfdme/2022-05-07.png new file mode 100644 index 0000000..ad49a6f Binary files /dev/null and b/docs/projects/img/fkfdme/2022-05-07.png differ diff --git a/docs/projects/img/fkfdme/2022-12-28.png b/docs/projects/img/fkfdme/2022-12-28.png new file mode 100644 index 0000000..522eaa9 Binary files /dev/null and b/docs/projects/img/fkfdme/2022-12-28.png differ diff --git a/docs/projects/img/fkfdme/2023-01-15.png b/docs/projects/img/fkfdme/2023-01-15.png new file mode 100644 index 0000000..55521db Binary files /dev/null and b/docs/projects/img/fkfdme/2023-01-15.png differ diff --git a/docs/projects/img/fkfdme/2023-01-17.png b/docs/projects/img/fkfdme/2023-01-17.png new file mode 100644 index 0000000..d949d9b Binary files /dev/null and b/docs/projects/img/fkfdme/2023-01-17.png differ diff --git a/docs/projects/img/fkfdme/2023-09-03.png b/docs/projects/img/fkfdme/2023-09-03.png new file mode 100644 index 0000000..5939890 Binary files /dev/null and b/docs/projects/img/fkfdme/2023-09-03.png differ diff --git a/docs/projects/img/fkfdme/2023-11-05.png b/docs/projects/img/fkfdme/2023-11-05.png new file mode 100644 index 0000000..2bc9ed4 Binary files /dev/null and b/docs/projects/img/fkfdme/2023-11-05.png differ diff --git a/docs/projects/img/fkfdme/2023-11-27.png b/docs/projects/img/fkfdme/2023-11-27.png new file mode 100644 index 0000000..6b8d48c Binary files /dev/null and b/docs/projects/img/fkfdme/2023-11-27.png differ diff --git a/docs/projects/img/fkfdme/icons.png b/docs/projects/img/fkfdme/icons.png new file mode 100644 index 0000000..15b6986 Binary files /dev/null and b/docs/projects/img/fkfdme/icons.png differ diff --git a/docs/projects/index.md b/docs/projects/index.md index 44d4fc5..3da7848 100644 --- a/docs/projects/index.md +++ b/docs/projects/index.md @@ -104,6 +104,15 @@ I made all sorts of mistakes along the way, as I always do, and this blogpost has all that yelling-at-past-myself covered. It also covers _some_ actual project details. +## [fkfd.me](fkfdme.md) + +![Grid of icons used on homepage](img/fkfdme/icons.png) + +You're reading it right now! + +The blogpost is on the history and design of my blog — how it came into +being, what changed, and how it's going. + ## [Rickstodon](rickstodon.md) ![Demo](img/rickstodon/rickstodon.webp) -- cgit v1.2.3