Getting there... ATProtoKit +ATIdentityTools + OAuthenticator + Jot (Context: made a tiny macOS app that can log into your account using OAuth.)

"With regards to" is the term that haunts me, ever since I was... maybe 11 or 12, I don't remember. The worst part is that the grammar checker tells me this is a terrible term and makes me feel like an idiot...

What I have so far. Yes, I know that it looks confusing as hell. I'm going to try to solve that by inserting a crap ton of documentation for each declaration, as needed.

This feels... very, very intimidating, don't you think?

I am going to scream. 🫠

The vast majority of bug fixes are thanks to community contributors like you. Thank you!

I forgot to share the molecules. Sorry: here's what I've made.

Well, this is what I have so far, but there's a lot more molecules to make. Such as: - Button groups (both the normal way and the groups for a navigation bar) - Social link group - Simple input field group - Tooltip - Breadcrumbs - Banners - Share Sheet (will need to add a Copy Link icon) ...

Okay, so... I've set the colour of the copy code button to one that I can live with for now (since I can feel the analysis paralysis kicking in). As for WCAG, it passed Level AAA. This is what it's going to look like for now. Obviously, I'll tweak it post-launch of the website. Next.

Ugh... I really don't know what exactly I want to have with respect to the button. Because the options I have are extremely limited due to my (admittedly, very stubborn mindset) boundary of making sure that I stay at WCAG Level AAA as much as possible. This doesn't even look like a button...

Hmm... WCAG-wise, it generally passes Level AAA. Design-wise, the button itself feels out of place... I suppose I can make it where the icon itself is the button, but I'll put a highlight ring around it for accessibility purposes.

Atoms are all done. The next thing now is to work on the molecules. I've (mostly) finished the code block molecule. ... yeah, the code block is very... um... uninspired. But I needed *something* and this was the best sample code I could come up with.

The new icons took me the whole night and I'm frustrated it didn't take a shorter timeframe...

It's not much, but it's honest work. I'll make some more icons (like one for privacy, one for terms, one for downloads (maybe...), icons for a comment system, and a couple of other icons), but for right now, this works for me.

Although...

It would probably be a nightmare to recreate this in CSS.

This took five hours... 😑 I'm such a slow person. I wish I wasn't. Just want to clarify: the last two are icon buttons. I *could* make one with the icon and word, but... I don't expect to use that sort of thing for now (in my personal website).

For example, if you look at a forest, most people will see the whole forest, then will see the trees. I... will try to look at the individual freaking leaves before realizing there's a forest. 😑

I've started to deal with the Atomic Design stuff, and I'm adding and modifying the Design Tokens as I go on.

Design Token time!

... meh. Close enough to what I wanted. Kind of getting the hang of making CSS animations and transitions, but *man*... I wish there an application that would let me do things more cleanly and easily.

I do want to point out that I've adjusted the spacing of the characters. I did consider just typing things out and leaving it as-is. However, as you can see here, it's fairly awkward for a logo. The spacing is perfectly fine for normal text, but I paid extra attention to it for my logo.

My logo for my personal brand. Text is from Atkinson Hyperlegible Mono. There's still some tweaks that I'll be making overtime (especially the optical balance), but for now, this what I'm going to use. I'll be making an animation for it at some point in the future.

Oh, so THAT'S why the sun's rays are on the moon on an icon like this. I get it now. Lesson learned. (I should re-do some graphic design lessons; I'm so damn rusty...)

So... Pixel-wise, they're fine. Optically-wise, they SUCK. Also, I completely forgotten that the sun is on the right side, which means the rays should be on the... right side (for the last icon).

Okay: I got the mobile navigation bar fully working. And the desktop version is okay as well. Design is not final. Colours aren't final, either (obviously).

"You're so indecisive!" "I know. 🫠" Yes, this is the colour palette I've chosen. Now I *hope* that my brain doesn't look at this and thinks this is amateur-ish...

*sigh... I couldn't help myself. I looked at my previous colour scheme and I felt like I'm being an amateur graphic designer for just leaving it like it is now, so I went ahead and created a better colour palette (+ added orange to the mix). NOW I feel comfortable.

Okay: this looks *much* better now. I *might* do a slight tweak in the navigation, but overall, I think this is the colour contrast that I want.

Oh, cool! This combination is Level AAA compliant. I suspect that the even darker variant will also be compliant. Nice!