Terminal-Style Portfolio Used AI

Finished up my first complete blog! Should be about ready to ship for the first time.

I added a ton of stuff, basically finished the first draft of the site. I added a secondary color, the about and projects pages, and started on a bunch of features for the next version. Also did more funnies with the font including straight up modifying the font file lmao

I did a ton of stuff over the past couple days. Mainly, I did a couple reworks to the font, switched to JetBrains Mono, improved static generation, added a list of blogs, generalized ASCII font generation for use on the front page, started on my first blog, and got started on a text-based gif thing much like my project Terminal Velocity.

Did much more work to make the 11ty static generation work consistently on GitHub Pages. I also added a footer to all pages and got started on a home page.

Switched the blogs from using manually written html to statically generated html from markdown. The markdown is much simpler to write, and it automatically colors code, deals with text styling and all of that (using 11ty for anyone wondering). This is a much more maintainable way to create the website without nearly as much hassle.

I spent a lot of time collecting cute small ASCII art, which I planned to display on either side of my username header, but that plan ultimately didn't work out. It just didn't look purposeful or as clean as the rest of the page, even though it was theoretically a really good idea I think... hopefully I can find somewhere else to use all of the art I compiled, because it really was a lot. I also started working on page stubs and the organization of the rest of the website, as well as working more on modifications to the ASCII font for readability.

Got the site automatically resizing pretty well, with the main thing I implemented being word wrapping for the title text. Remember, the title text consists of multiple smaller box-drawing characters for each glyph, so automatic wrapping like with normal text wasn't an option. So, I had to manually code a word wrapping algorithm, which was actually not super bad once I got down to it (just took a bit of thinking). Also I don't think I made it clear before, but the horizontal bars above and below the navbar are also box-drawing characters that resize.

Spent so much time turning old C++ code into functional JS code for ASCII font generation. Thankfully it does finally work, and I made a few modifications to the original font to better suit the site's aesthetic. It's surprisingly tricky to handle Unicode multiple-byte characters and such, and more work is needed later to have it wrap properly and so on

Did a couple of notable things with the site. I added the horizontal bar below the SUGO14 logo and centered some things. I also added some placeholder text that is an example of a blog (taken from int0x80.ca) to test out fonts. I settled on this ASCII title font after some messing around as it was a stylistic match and not super big. I do definitely want to make some adjustments to how it looks though, and I need to actually implement dynamic generation of it.

Got started on the site after lots of planning. It was surprisingly easy to create a very close match to a terminal in vanilla HTML/CSS/JS, as shown in the image. I created some figma designs as well to see what the site could look like as it progresses as well. The font is chosen, the general aesthetic has started, and overall I'm excited to see where this goes.