Introduction

I've been designing websites since 2007. I remember going onto sites like InvisionFree and designing my own forums. We got to go to the IF Skin Zone and use custom themes that people made and everything. After that, I would use free hosting services, write my own HTML/CSS/JS, and host my own website as a subdomain under their own service. I used Zymic back in the day. My point being, I've been around the block when it comes to "surfing the web". Back when we capitalised the "I" in "Internet". Though I did miss the 90s era, as I was born in 1996.

That last paragraph was my personal trip back to the past. Now on to real business. Recently I've noticed a resurgence of the old Internet coming back in the form of the "Indie Web". Everything is there just like how I remember it. Affiliates/Neighbours, Webrings, Shoutboxes, sites poorly designed for mobile, etc. Design trends of the 90s and early 2000s coming back. I am a huge fan of Frutiger Aero designs. And some Indie Web sites have it. But, looking at my site, it's modern and bland. And sure, it captures the eye of the modern world. But I want something more personal. So now it's my turn.

In usual CN_Blog fashion, this post will be a bit more technical and less personal. I will write a more informal diary-version of this post in my "diary" on my website. Feel free to check it out. Also, this is not a programming tutorial. I won't have sample code posted. Also, no, this blog will not be themed in the same style as the site I am about to show you. I mean, unless you want it to. This blog's main page already looks 2007-ish.

Checklist

I am a programmer. And my preference when coding is to write every single line completely from scratch. No libraries. No external code. Nothing (You will see this age very poorly). To make my life easier, I will use PHP. I have my own domain which this blog is a part of. So I will use that to my advantage and host directly and be in full control of my data. Neocities was tempting, but I already pay for this. As such, I am thinking about a site with the following details:

• Dynamic 3 and 2 column layouts. The main page shall be 3 columns. But it needs to be adjustable. Tables will be used like how sites were programmed in the 90s and 2000s.
• Universal navigation bar. This is the main reason I chose PHP. I can have the navigation pane be on the left of every page by writing a "template" page, and require_once'ing it on every single page. Meaning I only have to write the code once.
• A bit of gloss. I like Frutiger Aero. I do not plan to dominate my site entirely with it. But I want at least one element to be glossy just like the old forums of my time.
• A button. 88x31. Enough said.
• Pixel fonts and design. The 5×5 font is good here. Back in the day, GFX artists would use blocky fonts like this all the time in banners, buttons, avatars, and signatures. Additionally, I need the background to have some pixel art as well, even if barely.
• No AI. I refuse to "vibe-code" or whatever the kids call it. I joined the No AI Webring. My site has no AI-written code or art. And it never will.
• Shrines. I have a few ideas. But let's keep it simple for now and make something where the pages can be generated with JavaScript and data is populated by external JSON files. A bit modern, but it's easier to update.
• A proper "About Me" page. The basics.
• A Guestbook. Anything will do here. I don't care if I write it or if I use a service. As long as there are no ads.
• Good scaling support. We have modern displays in higher resolutions. For pixel art, make those pixels crunchy. For glossy textures, vectorise it. For fonts, well, they scale automatically.

Can we check all of these boxes? Well, yes. Let's break it down.

Design

Back in the day, I would design my websites purely in HTML and CSS. And I still do. However, I figured, before I actually write any HTML and CSS, I should try just sketching and designing my page in software first. A rough draft just to see what I could come up with. This way, I can have a colour palette, a basic idea of what the hell I'm doing, and a design goal I can directly code for rather than going in blind.

Version 1

I decided to use Figma to design a concept home page. Here is the design concept I came up with, as well as an actual page example:

Concept

HTML/CSS Prototype

This obviously way different than the final version of the webpage that you see now. But it was a start. The elements were in place. I wanted the portions of the website to have a "Windows XP" kind of feel to them. Hence the buttons at the top-right. The background is temporary but it is a recolouring of some artwork, which was then pixelated.

It is important to note that the concept image above is a vectorised image. The assets in Figma are all vectorised. This means I can export the individual parts into their own SVG files and have my site work on high resolution monitors without any problems.

After the original Figma concept was complete, it was up to me to code the entire page up completely from scratch in HTML/CSS. During the course of development, I had a few changes that took place. But overall, the structure stayed the same. You can see that up above.

88x31 Button

Before I got to finalising a design, I wanted an 88x31 button that my site could identify with. Internally, the codename for this project is "CN_Web". Most things I program have "CN_" in the name. This site is no exception. So, the original concept of the 88x31 button was to feature the text "CN_Web". However, I later changed that to my username: iDestyKK. It fit better.

Here is the asset sheet that includes the 2 buttons, vectorised:

Ultimately, I went with "iDestyKK" for the page.

Version 2

After some careful consideration, I actually wanted my page to express me more personally. I felt like the cloud background still felt a little professional rather than personal. So I decided to opt for a tiling background like how the old sites worked back in the day. If you read above, you'll notice an "X" with a heart image in the asset sheet. That is our new background for the page. My bestie helped me pick a good pink for it.

The goal was to keep the image vectorised so when the user scales it up, the "pixel" effect isn't anti-aliased. It is sharp and crisp. This gets around having to do CSS to make the background pixelated. However, I did use CSS to ensure other page elements are pixelated. Don't worry. I'm aware it exists.

Here the page is after a second go!

Notice the image isn't vectorised this time. After the original concept, everything else was done solely in HTML/PHP/CSS. We are done with the design step. The page banner kind of reminds me of phpBB for some reason?

Other Additions

But wait, there's more.

Guestbook/Shoutbox

I had a few options here. I could write it entirely from scratch. But I bit my tongue on this and cheated. I opted for Atabook/新book as it had no ads on it and I could simply iframe it into the site. It works.

Other options would have been to get a Chatango chatbox set up on the site, use CBox, or code one up manually and host it. We are coding in PHP so accessing a database is pretty simple. But then we'd have to deal with security. I'd rather not when I just wanted a site up and running.

Site Counter & Bluesky

Site hits counters were another thing I used to have. I used to host a blog on Blogspot which had one powered by EasyCounter. However, unfortuantely uBlock Origin blocks EasyCounter now? So, I had to opt for one of those alternative services and eventually found one that worked. Google Analytics are another matter.

Bluesky timeline embedding is powered by embedbsky. The code is copy-and-pasted actually from this blog's homepage since it also has the Bluesky embed.

Conclusion

Well, I realised I went through the entire post not linking to the site at all. The URL is https://claranguyen.me. I hope you enjoy your visit. Feel free to leave a message in my guestbook while on there. I am glad I have a project to keep me busy in my spare time now. As of writing this blog post, I am updating that website just about daily. And it's quite fun to do. I recommend anyone to give making a personal website a go. Whether it's on Neocities, Nekoweb, or somewhere else.

If you own a website and would like to be neighbours/affiliates, feel free to let me know via email or by posting in my guestbook. I'll gladly link your site on my own. Just be sure to have an 88x31 button. We're doing this like it's the early 2000s.