avatarHow I worked on my design 🥐

80; 12022 H.E.

This website has gone through many different iterations, looks, tools, and contents. I thought it would be a nice exercise to quickly, yet cleanly outline some of the inspirations I took from other blogs/websites and where does the current style comes from.

The beginning

I looked up sandyuraz.com on the Wayback Machine and there are a couple of snapshots saved up! I picked the ones that clearly show some changes and updates that were made over time. This is the oldest snapshot found in the archive. It’s a plain website built with asciidoctor. It was very nice in the beginning! I wrote a couple of markdown documents, and boom, I have a website.

The oldest snapshot
The oldest snapshot

Later on, I wanted to write my website files in org-mode instead of markdown-like asciidoc text files. That’s when I came up with this wicked structure of having a huge makefile that will call pandoc on each file, converting org to asciidoc, and finally piping it to asciidoctor for a final build. It was fun until it wasn’t.

The pipeline of org->asciidoc->HTML had a flaw of losing information, simply because some features were not supported or translated poorly. I had to write many additional sed/awk scripts to patch them up. Yet, there was no superb control of the output. I was okay with that. It worked, duh

NOTE
You can notice that I still used keybase in that first snapshot

Bookshelf

Adding the bookshelf page to my website was a grand addition I came up with sometime in the summer of 2020? I remember I was reading some blog from hacker news. Unfortunately, couldn’t find the link to the source. She had a nice navigation button that just read Books. "Interesting," I thought.

They had a list of books they’ve read that link to their respective reviews. Another list on top had the "currently reading" books. I thought it was such a nice section for a website. I like to read. Though, I wanted to add a little bit of a spice to it. Around that time I also discovered Artist Mode for emacs.

Why can’t I just make ASCII drawings of books stacked on top of each other, just like my current library? Here is the snapshot that recorded that moment. I still want to add a review section to my bookshelf, but anime came first.

The bookshelf hasn't changed that much
The bookshelf hasn’t changed that much

Fortunes

Donald Ray Burger with his famous burger.com has a separate page for Quote of the Week, which he’s been upkeeping since 2010 (oldest I could find, maybe goes even deeper). In my mind, it was such a cool idea to post a quote or a saying you liked and can look back on it. I used to do that in my notebook, but a whole website page sounds generational.

Here is the earliest snapshot I could find for it.

First fortunes
First fortunes

Foundation time

I like the Human Era calendar and I love Asimov, wherein one of his Foundation books he used a Galactic timestamp format. Why not combine the two? I made a quick webpage that shows you the current Human Era time in Foundation format. Why not add it to the main website? But how...

The New York Times website and app have a nice timestamp that shows what day it is today. Let me do a similar thing, but show the human era in foundation style. That’s how this script came to life, which updates the current time every second on every page. Added sometime in 12021 H.E.

Toddler-friendly

One of my friends told me, "Hey Sandy, I opened your website, but it was hard to navigate and read stuff, so much on it." To which I replied promptly, "Okay, I’ll make it so simple that even toddlers can navigate through it." This was a good (great) change.

I coupled up all pages, interests, movies, habits, projects, and posts into their separate subsections and made the main page a collection of links that leads users to the section they’re interested in. Compared to now, it looks bland. Humble beginnings.

Links-only style
Links-only style

Mahjong

Donald Knuth has a weird symbol on every section link, so that’s why I have mahjong Unicode characters in the sections’ titles.

My face

Another inspiration I yoinked from Donald Knuth is having a profile picture on the top left content corner of your website. "That looks good! I’m not face-shy anymore. I think I had a good selfie somewhere..."

👋 hi
👋 hi

Serif fonts

Wow, this was one of the best essays I have ever read. Not only it’s a fantastic study of Dostoyevsky’s life, but also the reading experience was simply pleasant. Something about the font and wide margins...

The non-commercial license for nybooks’ font costs €440. This is a bit much for a 20-year old, who just wants to write his musings on his website. I went on digging and found the amazing Lora, which was a match made in heavens. A gorgeous serif font, it’s thick, bold, and confident. Let me adjust my margins and everything font-related to make it look sexier.

Najimi Colors

I still have the default asciidoctor colors, mainly just the links and orange titles. I live for Najimi and they have more of a purple/pink-ish appearance, which looks so good. Time to change the palette to have the pink shade of my duvet cover.

Najimi's color palette
Najimi’s color palette

Darkness

All of the above was leading up to this point. I observed there is no longer a reason for me to have my face sticking out, it does nothing. I want to express myself better and have fun, live consciously. A full revamp was comparable to a fresh spring air in the morning. New previews, new emojis, new building pipeline, new interests, new people, and new adventures! Life is indeed grand.

I love Darkness
I love Darkness

NOTE
The website went through a small but significant design update, like a fully re-written CSS, reader-friendly DOM layout, simpler HTML structure, and more!

New links

I loved the website and link design of Asterisk journal. Moving away from a full block-ish links, the links now are nice to look an click at.

Galleries

One of the biggest features that landed in Darkness were native galleries. Through some ~ spread around the page. This is heavily inspired by itorr’s pvc page.

Let it snow!

December 22nd was the Day of Reckoning here in Kansas. Literally -32C in the afternoon like it’s nothing. I misread my weather forecast, thinking it’s only -5C outside. I went to the office (walked lmao) and in couple of minutes all I could do was scream and yell until I got to the building.

So... enjoy some snow on the website using Scott Schiller’s snowstorm.

Let it snow! (we are running a modified version of the snowstorm)
Let it snow! (we are running a modified version of the snowstorm)

Tighter design

Around the beginning of August, 2023, I decided to give the website’s design a bit more discipline and love. It’s been a hot second since I had a time or really, energg to sit down and do something for myself. (I’m good, I promise.)

First thing I thought—I love the color scheme, but over the years, they kind of washed out on me and it feels a bit too bright, especially bg of #fffff4. After a tiny bit of exploring and soul-searching, I found the new perfect background color—#f1ded1.

It’s softer than the previous one, has a bit more tone to it, a bit more warmth, yet not too dark or distractingly “sepia”.

The homepage with the new color scheme
The homepage with the new color scheme

The font got a bit bigger (1.3rem -> 1.32rem) and the spacing between lines went down from 2.2rem to 2rem. It feels more organized and “newspaper-like,” but in a good way. I hope.

Also! Each image on the website got a bit wider, but it really breaks square images or vertical proportions, as those become a screen-scrolling adventure for the user, which is not desired. Instead, Darkness now allows to resize any image on the page without the need for anything special or clevel. Adding an option tag above the image,

#+html_tags: style="width:44rem";
[[website_august_2023.webp][The homepage with the new color scheme]]

will size it up exactly as you need it.

We’re going Barbie

Yeah, how about we forget that whole “I found the new perfect background color?” f1ded1 is no longer my best friend. fbebef is my new best friend.

It's this super soft pink-ish background
It’s this super soft pink-ish background

I am Kenough.

Discord avatars

I like to drop some of my discord convos (with all involved parties’ consent). Now, with some clever CSS and Darkness’ html export, we get cool avatars that immerse you a bit more, into what originally happened.

I love the 3AM version of peopleHonest, vulnerable, real.
I love the 3AM version of people
Honest, vulnerable, real.