Redoing my ENTIRE personal website (again)

FINAL DEVLOG!!! I FINALLY FINISHED IT!! YIPPEE!!!! Not much actual development happened this time. Most of this was adding content to the pages, making a few goofy “shortcuts”, and making the contacts page. The minimize button (which doesn’t work yet) has been hidden. I’m pretty happy to finally finish this project for now.

Not as much happened this time (too many exams and working on a background: details below), but it feels like a whole ton. Pardon the artifacts on the video. I have no clue what caused them. Here are the new things:

• FANCY new background i made in blender after maybe 8 hours of sitting at my computer wondering why the mist pass was breaking (the compositor hates me so i just switched to using a transparent plane to make fake fog) but it’s cool and acts like a wallpaper. i turned off hdr for it bc snipping tool screws up the brightness when hdr is on but i think that’s what caused the color artifacting.
• i actually got to making some content to put in the pages, with a landing page and project gallery already up. i scrapped my old blog bc i couldn’t be bothered to update it. they’re just regular html pages that are shown in the iframes in each window. getting them to open other windows was a bit tricky considering the iframe content works in its own context, but i made it work by making a custom class that had a data attribute for its page link. the main page would select elements in the window with that class, then set their onclick to the the create window function so that it would run in the context of the main page, not the window.
• spicing up the main page and making it actually look like an operating system (definitely not windows 10) there are app shortcuts on the “desktop” now that open windows (i would have made this dynamically read the repo but i don’t think i can do that so i might give up on that idea and the file explorer) the taskbar has a “start button” that opens the landing page and a clock on the right that displays to seconds. fun fact: i mixed up setTimeout and setInterval so i accidentally had every single repeating time updater spawn another repeating time updater and it kept snowballing into a really big problem that i didn’t notice until it crashed my browser twice. it’s fixed now
• animations for opening and closing windows. not very complex.

that’s all the big stuff. i am SO CLOSE TO SHIPPING i can practically SMELL IT. now that the file explorer is really an afterthought, what’s left is to finish up the content pages and add some fun thingamajigs for users to play with. yay!

I added a couple of features this time and polished a few:

• Resizing windows is now possible. It’s controlled by two invisible divs on top of the bottom and right edges of the window, and works similarly to the drag function, but it only tracks the change in position of one axis and changes the width/height css attributes of the window accordingly. The resizing is also clamped so that the windows can’t be too small.
• Dragging and resizing windows are smoother thanks to setting pointer-events on the iframes to “none” when dragging, so that you won’t stop dragging when your cursor accidentally moves into them.
• I fixed that header thing last time by first making the function wait for the iframe to load before continuing, then using querySelector for the title. For the pages that I get security errors on, the page link is a fallback (the or operator is SO useful). As an added bonus, it automatically returns “Error” when there’s an https error that I can’t really figure out yet.
• There’s a right click context menu now. At the moment, it just opens a dialog to open another file, but it will expand as I add more features. It suppresses the regular context menu with event.preventDefault, which is a pretty neat function.
• The aforementioned file opener was added. It’s a bit goofy now, but it works and even handles errors when you leave the field blank.

After adding a file explorer, I should be ready to add content and actually put it online (the github pages is still set to my old website to keep it clean)

I got the windows to hold content through iframes, which was initially confusing because I couldn’t embed most websites. I initially wanted the window headers to have the title of the page instead of the link, but I couldn’t get it to work because it always returned null before the content loaded (I’m not going to use jQuery yet). The taskbar is active and syncs with the actual windows, so I’ll get the minimize button working and some resizing next, then I can start working on some pages to display.

I was initially thinking of a webOS-type thing, so now there’s a draggable window system in place. These are all div elements that have a couple of event listeners tied to them that start moving it once you start holding onto the header bar. (It’s mostly copied from w3schools with a few tweaks, so check out their tutorial.) The copiable windows come from cloning the contents of a template tag, which took a bit to figure out because it kept returning the document fragment (which was somewhat useless at the moment) until I had it return the document fragment’s first child instead, which was the window. The fullscreen system was one that I made up, which was adding windows to a div that made all children 100% viewport size and locked to the top left, but I’m thinking of changing that to just a class because the div idea was something I thought of earlier while eating lunch.