The history of my website

2/5/2023 (updated 7/10/2023) #meta

What my website looked like overtime.

A robot in a computer...so digitalized digital?

At school, someone was playing around with inspect element. They have gone further than any non-developer soul could do: changed the background of a webpage to blue. I wanted in.

So, I started to fiddle around with it. I started creating calculators in JavaScript that did the impossible (showing work) to quickly complete my math homework. I found a way to unblock YouTube. It was nice.

Later on, I was messing around with those chrome:// URLs, and on one of the pages I found out that my school attempted to block inspect element. However, it had an error that I don't remember, so it ended up not blocking it.

Then COVID-19 hit.

If they did block inspect element, or if COVID-19 hit a bit earlier, I probably wouldn't be making this website right now. Maybe I would've been a failed YouTuber.

Anyway, I had this in my Obsidian vault. I guess it would be a nice first actual blog post. I've always liked seeing stuff be developed, so maybe you will too?

Version 1

The very start. No source control. 2019 to late 2021.

Hey

Back then, my username was "klypank". Horrible name. The only only two things left of it online are a dead Hotline Webring link that I have no idea how to remove, and a StackExchange answer where I was wrong:

"klypank" on DuckDuckGo. The search results show Hotline Webring and the StackExchange Arqade question "Limit Player height in Minecraft 1.15.2" — I guess this page will now be here too.

Anyways, my homepage looked like this. The rectangles and "Hey" text rotated and changed colors overtime and as you scrolled, neat.

My old homepage. It's bland and dark, with a header saying "hey", "klypank", and a random message. — Here's some more random messages: "not mobile friendly", "i think i'm a bit stupid", "feeling sad idk why", "aaa"

Windows

Later on, I made myself my own windowing system. I then made it my homepage:

The said homepage It has a black background with bright rainbow colors.

I'm still quite proud of this. I definitely felt that at the time, but looking back at it, I kinda did a lot when I was just getting started with programming. I was still doing crap like y * 1 > 0.

Here's some of the features it had:

Draggable windows, of course.
Opening and closing animations.
Loading apps from an HTML file (for example, the main window in the screenshot is loaded from mainwindow.html).
- Preloads them too.

I'm currently remaking this system (still in vanilla JavaScript) and planning on having it be available for download. Would be a fun little project to step away from frameworks once-in-a-while.

Here's my links and button "page":

The links and buttons window. Has two of my buttons at the top, and other people's buttons and links at the bottom. — Googol, Encounters LTD, Wac, 2Bit, Mr. Doob, and Robot and human webcomic. All pretty surface-level on Neocities (except for robot and human).

Version 2

Wanting to expand in the world of ✨frameworks✨, I went and tried to learn some React. I heard some people talking crap about React, so I tried Svelte, and really easily learned it due to its interactive tutorial, which they've recently improved a hella lot.

Screw a window manager, we're using components now!!!!!!! But uh, how do you make a website with this? Luckily Svelte has something called SvelteKit. It wasn't finished at that time and wouldn't be for another 1.5 years, but I went and used it anyways! My website only broke once.

2021-09-26

The initial commit.

The SvelteKit starter template. — What a nicely designed website.

2021-09-29

A very simple homepage. There's a navigation, and the content simply says "hello". The icon is a robot. — Oh, nevermind.

A very simple homepage. The colors are a tad bit more saturated, and the content now says "hello. i code, sometimes. this website isn't really finished. if you want out, look here.". The icon is a slightly different robot. — Not sure how to design? Copy Discord!

A very simple homepage. The content now says "hello (under construction). nothings really here yet". Below the text is an image of two robots.

In the tabs there, you'll see "redsearch". It was supposed to sit between you and your search engine to basically give a more customizable DuckDuckGo bangs (hence redsearch, redirect search), but I never got to finishing it.

Also, the Multibots. At this point in time, I haven't really standardized how they looked yet. Here's a comparison:

A comparison of the three old robots and the current one. — The current one (right) is so much more pixel-efficient(?) that I had to make it 3 times bigger for it to line up.

I also already had three buttons with these robots. Never got rid of them; they're still on my about page under "Old and Ugly".

2021-10-16

A simple homepage like before. Reads "dabric. yep.. that's me. under construction". Below the text are two robots, one wearing a construction hat and the other turned off.

A simple page like before. The about page is selected. Reads "nothing is here. nice 404. try going back?" — If you couldn't tell, the page was under construction.

2022-01-18

A simple homepage like before, but darker. The robot icon has been replaced with the slightly older Dabric robot. Reads "dabric. yep.. that's me. under construction". Below the text are same two robots, one wearing a construction hat and the other turned off. — Look, it's the actual Dabric instead of some random robot with red eyes.

The homepage. Now reads "stuff's wip", with a robot drawn in Paint going woo.

There's a post from this era.

2022-01-22

The homepage. Above the "stuff's still wip" is now a picture of a 3D model of Dabric, with a tooltip saying "that's dabric. the feet are slightly outdated, just in case you care." There's a title again just saying "dabric", and the navigation is now at the bottom.

2022-04-10

The homepage. The 3D model of dabric is now actually an interactive 3D model, with the tooltip now simply saying "dabric". — Now real.

Now whenever you clicked on Dabric, they would just spin around and give some remarks through the tooltip. Nothing much, but hey it's 3D.

The model was very rigid at this time. It was made in Blockbench, and the only moveable limbs were the feet and the head. You may think that that's pretty much how it still is right now, and you would be sorta right; the feet and the head in the current model are connected to some bendy bits. But this older model isn't like that. The feet and the head would just clip into the torso.

2022-04-14

The homepage. The title is now in its own section at the top, reading "dabric: stuff". The 3D model is now in fullscreen, with the text under it gone. The tooltip reads "again". — Now closer.

2022-08-??

The homepage. The title now reads "dabric: whatever". The background is a dark green, and the Dabric model now has bendy bits. The tooltip reads "you left me hanging".

This is pretty much right before the major redesign.

You can actually see how my website looked like during this period. Go here, and with the power of client-side routing, you can still click on pages while staying be in that old version. Just don't refresh.

2022-08-26

The homepage. Drastically different: everything is mostly made out of a glass-like material, the Dabric model is now is now in a proper room instead of just floating with a different face, and there's no tooltip. — God, the difference.

Instead of spinning around for no reason when you consistently click, they'll now fly into the air. Also, no tooltip.

Another feature that was added to the model was the face. It obviously looks different now, but it's also dynamically rendered instead of just being a never changing texture. Now they look even more alive!!!!

Here's the things page, which are now my posts. Glassy.

The things page, which are just my blog posts and projects. Everything's a glassy aesthetic, with glass cards on top of a single glass sheet that contains the page content.

Version 3

Version 2's internals was getting a little unbearable for me, so I decided to rewrite everything. Also, almost everything having a blurred background kinda hit low end devices. At least, it seemed to.

2023-01-18

Entirely different homepage. The navigation is made up of four gradient buttons, and the content simply reads "Hello." — Quite the improvement.

A long time ago I made this app called caudiop, which was an mp3 player in Electron. It was pretty basic, but it had a some features (mostly focused towards being a great miniplayer) that I liked so I stuck with it until I started to use Spotify. Here's a screenshot:

caudiop. It has a gradient title bar, showed the progress also on the taskbar, and is playing a song with a simple bar visualizer. The song is "Yamaha Action" by zinger and bacter. — Tried to make it as compact as possible. Controls appeared only when you hovered over the metadata, and you change the volume by scrolling over the seek bar.

I made this when I was just getting into programming, so of course the code sucked. I heard about React, so I wanted to give it a try by remaking it. I did not get far:

caudiop. The title bar is pretty much identical to my current website's navigation (but with a different gradient), while the media player part of it just says hello twice.

As you can maybe see, the navigation bar for my website is based on the title bar from here. I literally just copy and pasted the code (later adapting it for Tailwind and optimizing it a little).