Inspiration

My father made a website a few years ago, and I criticised it for being incredibly boring, to which he responded “it’s sooo~ easy to criticise”. And of course what he means is: but it is so much harder to actually do.

Anyway, I have a strange cockiness in my character / personality, and so I was convinced that I could make a nicer website. One that isn’t so generic, mundane, and boring. But I didn’t actually know how to do any real programming, I mean I had done a few LeetCode problems but I hadn’t built anything and I was pretty severely addicted to computer games. I could have flipped a switch and tried properly learning to make something cool like a 3d model or some kind of game or whatever. Yet I didn’t (even though I knew I would have loved it). A fact that I am quite honestly ashamed of now.

That was a few years ago now, and while struggling to sleep one night, I went out to make this website to prove myself from back then right. In the sense that yes indeed, I can absolutely make something cool, be it a website or whatever. This entire project is ultimately just petty evidence that I wanted to produce for my younger and current self as strange as that may sound. Hasn’t even been that many years yet I talk about this as if I were an old man.

In the end, however, I realise that my father’s “uninspiring, stale, and shit” website was ultimately the greatest inspiration behind the creation of my own website… . How hilariously ironic!

Photos

All the images (backgrounds) where taken by me with my wonderfully amazing unreliable phone camera. I use a Acquos Sense 9 btw. This piece of shit, I mean incredibly artistic piece of kit has transformed so many of my photos that i’ve almost come to embrace this “feature”. You see, at certain, seemingly random times when I wish to take a picture, the phone will show that the photo has been taken (with the thumbnail in the corner and everything), while hiding the fact that the sensor is still exposed. So when I go to check the photo, moving the camera the photo takes a couple of seconds to “load” (shutting the apeture) and I see a complete mess that looks nothing like the thumbnail I was shown! What an absolute nightmare.

Here are the photos I used (unedited):

Process

As can be seen from my Arch Dotfiles (I am very proud of them, please take a look), I love the clean, somewhat minimalist aesthetic. Now this website was initially made with that in mind, but as it is a a gift to me (of a few years ago), I thought that it should be styled and themed to specifically appeal to myself from back then. And it’s not like i’ve grown up that much either, I still love minimalistic aesthetics, I am still completely in love with the aesthetic of Arknights. The gritty, apocaliptic yet sleak technological aesthetic is just so fucking cool I can’t help it. My favourite website in terms of styling is the monster siren records website arknights Hypergryph made for their discolesium. The music produced for this mobile game is so good and fit so well with the whole atmosphere, I’ve come to visit this website very often. I used to play Arknights back then and was absolutely addicted to the game, though it was a source of frustration back then, I am now grateful that it limits how much you can play with the sanity system otherwise my hours would have been drained.

Since then, the game Zenless Zone Zero (ZZZ) came out, and while I thought the gameplay is generic slop, the aesthetic was really cool. Specifically, the crt monitor navigation? with the bangboo? The bangboo in generally are so whimsically spunky and vibrant that they overshadow the rest of the game for me. Thus ZZZ inspired the whole crt styling I have going on, I realise that my website lacks the spunk of ZZZ, but seriously I have no idea how to achieve that with my skills without just copy-pasting Reactbits components. Like the Fuzzy text would have been perfect since it looks straight out of the game but I feel reluctant.

I started with this brainstorm I made in the Sandefjord Library:

(So you can see I was originally planning on using many cool reactbits components to give most of the character.)

And from that brainstorm, I started with this “initialisation” of a website (following after some tutorials): So I already new that I was going to steal as many elements from the Hypergryph Monster Siren website as I could, so it started out as a black background with side-scrolling. On the Hypergryph website, they somehow made it seem like the input of scrolling with the mouse is jacked and it actually scrolls to the side and in my attempt to copy this I wasted many, many hours. I also wanted to have an audio visualiser on the top left (but I had no idea what I was doing) so I drew a dotted line.

From here, I got the huggingface Deepsite AI to make me a website styled like the Hypergryph Monster Siren but as a personal porfolio. And the website it produced was really cool though not really what I was looking for, so I just salvaged it, stealing the scan-line, crosshair cursor, menu-items, and the logic behind the wobble for the “Hello Friend” text.

But these menu items were just so corporate feeling which I hated, so while messing about with them, I accidentally created the flicker effect that it has now when hovered over with a really nice and simple solution:

As you can see, it’s just changing the opacity from 1 to 0.1 with a transition time of 0.01s. infinitely repeating.

I tried with Huggingface again for a loading-screen (like the one Hypergryph has), which failed but it did give me a template for the “Scroll >>>” animation I have playing in the bottom-right. And it also gave me a really nice static noise overlay. And then I ran out of Tokens… shit.

I finally gave up trying to get scrolling to translate into horizontal swiping. I know it’s possible to jack the scrolling input into horizontal scrolling, but I also wanted it to scroll side-ways when I swiped horizontally and on top of that I wanted the nice “snap” all at the same time. So now that I just had vertical scrolling I finally made the menu-items actually functional, making the “Blogs”, “Projects” and “Contact” sections.

So I knew from before hand that I wanted to use this blurry stairway picture I took for the blogs section. The original idea was to just edit out the walls, skew them, and apply an opacity gradient on them to make it look like they go on forever, fading out, leaving a middle section 1/2rd the width of the viewport to have the blog portals. But it just kept on looking weird, I have so little experience with GIMP. Anyway, that’s the reason you can see I have the picture split into 3 in the transition animation:

The other crt effects like the noise, flicker and shitty chromatic aberration were pretty much the last thing I did to the styling of the website by recommendation of ChatGPT. But ChatGPT’s implementations completely sucked (and it tried adding the fish-eye effect of CRT monitors and so on), so I deleted all the difficult elements including the chromatic aberration to keep it simple.

For the Home section, I was originally planning on having a wireframe of some buildings in Osaka, or a Arknights Stylised picture of the Osaka Castle, and I even tried getting Gemini Nano Banana to produce something. So I gave up, and wrote this kind of introductory paragraph. And then, only after moving it to the side did I realise that a clean Osaka castle picture taken by me would probably look best anyway. The typewriter effect was shockingly simple thankfully.