How I Made This Site

━━ 2025-08-06 ━━

Hi! This is my first blog, so I guess it figures that I would make it on the development of this site.

This site was made with one main gimmick in mind:

>>> This entire site could theoretically be faithfully rendered in a standard terminal emulator!

What does this mean? Well, standard terminals primarily render one thing: text. Only one font of one size, as well as bold, italic, and bold-italic versions of it. They can also render foreground and background colors, like what you see when you hover over this link. Margins also don't exist, as the entire terminal solely consists of lines of text, one after the other.

More importantly, this means I'm not allowed to render images, shapes, icons, different sized text, different fonts... basically every luxury of the modern web. I can't rely on headers or small margins for spacing, either, making this even more tricky.

Before I get started programming, I need to make sure that this is even feasible. Despite all of this, I'm not exactly an HTML purist: I want to have a header, large text, and spacing despite all of this.

# The Header

I figured that having my username, SUGO14, on the header would make sense. Just bolding or otherwise decorating reuglar text just wouldn't cut it--I needed something much more large and eye-catching.

My mind immediately went to ASCII art. After doing some digging, I found a great site to find a bunch of ASCII style fonts. You could find everything there, including fake 3D fonts, fire fonts, grafitti style fonts, darker or lighter fonts--I honestly had no idea that there was this much variety in ASCII art.

Despite that, none of them fit my criteria.

Why? Because of box drawing characters. These are specially chosen characters that connect with each other when placed adjacently, forming a continuous line unlike traditional ASCII art. However, very few of the fonts here utilized this subset of characters, making them look much more choppy than they had to be.

So, I had to do a little work myself.

I took a font that I thought would be easy enough to simplify:

 _____ _____ _____ _____ ___   ___ 
|   __|  |  |   __|     |_  | | | |
|__   |  |  |  |  |  |  |_| |_|_  |
|_____|_____|_____|_____|_____| |_|

and modified it to use box-drawing characters, also fixing up some spacing:

┏━━━━━┳━━┳━━┳━━━━━┳━━━━━┳━━━┳━┳━┓
┃   ━━┫  ┃  ┃  ┏━━┫  ╻  ┣━┓ ┃ ╹ ┃
┣━━   ┃     ┃  ╹  ┃  ╹  ┣━┛ ┗━┓ ┃
┗━━━━━┻━━━━━┻━━━━━┻━━━━━┻━━━━━┻━┛

And just like that, I have a good looking header!

# Larger Text

You might think that the previous solution would also apply for other text, and you wouldn't be wrong. Essentially, I'm doing the same thing, but with a different font.

The issue comes with the sizing. I need to use an even smaller font than the header for the sizing to make sense. And the header is only 4 characters tall.

What I didn't mention in the last section is that I needed to choose small fonts. On a regular page, title text might be twice as large as body text, but even an ASCII font that's three characters tall is three times as large as body text. To maintain this balance, we need to choose a font that's even smaller than the header: three characters or under.

There are only a couple semi-reasonable fonts on the page for this height:

┏┳┓┓ •   ┏     
 ┃ ┣┓┓┏  ╋┏┓┏┓╋
 ┻ ┛┗┗┛  ┛┗┛┛┗┗

┌─┐┌┐┌┌┬┐  ┌┬┐┬ ┬┬┌─┐  ┌─┐┌┐┌┌─┐
├─┤│││ ││   │ ├─┤│└─┐  │ ││││├┤ 
┴ ┴┘└┘─┴┘   ┴ ┴ ┴┴└─┘  └─┘┘└┘└─┘

To be frank, neither of these exactly fit my aesthetic. You know what that means...

Time to make more ASCII art!

I started with the second font, but removed serifs and other distracting elements. To clarify, there's nothing wrong with them, but my site is far too minimal for them to work.

I also had to rework the most egregiously complex glyphs, primarily N, K, D, and B. By mixing and matching glyphs from either font, I was able to come up with an actually decent character set--you can see the font file here, although it might not render properly.

With all of this thought out and some Figma testing done, I was confident that this site could work!

I've done crazier things with terminals before, so it's not exactly like I'm out of my comfort zone with this aesthetic. At the end of the day, this site is just meant to represent me, and I think it'll do a good job of that!

>>> Stay tuned for part 2, coming soon!