New post: projects/fkfdme

14 files changed, 200 insertions, 0 deletions

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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2020-04-23.png
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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2022-01-07.png
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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2022-01-09.png
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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2022-04-11.png
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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2022-05-07.png
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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2022-12-28.png
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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2023-01-15.png
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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2023-01-17.png
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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2023-09-03.png
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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2023-11-05.png
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
--- /dev/null
+++ b/docs/projects/img/fkfdme/2023-11-27.png
diff --git a/docs/projects/img/fkfdme/icons.png b/docs/projects/img/fkfdme/icons.png
new file mode 100644
index 0000000..15b6986
--- /dev/null
+++ b/docs/projects/img/fkfdme/icons.png
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)