Personal Website Used AI

Another giant update! Firstly, hot swapping between light and dark mode now works perfectly, and doesn't break when you spam the button! Secondly, and more obviously, we have colorful text!!! Firstly, there's the header text with a gradient, which itself is stacked upon a blurred version of itself to have the background coloring. But more time consumingly, there's now a gradient border! Seriously, it took forever to set it up and it only works >2px in width, but I think it looks.... actually after spending a couple hours on it I don't like it. I think (hope) it's just because it has no transparency effects yet, and once I add those it'll look great. My backup, though, is to try and make the borders and text hyper-saturate what's behind them so the text also shifts color with the background. I'm afraid it may look too busy though, especially since only the header portions are going to have gradients on my side (all the sub-items will be color coded).

A BUNCH of changes to align with my new aesthetics (which I'm liking a lot more than the plain colors already). Firstly, there's a constant gradient animation in the background, with all the windows and panels translucent. Secondly, there's a new background loader script and .html file for a reusable system. Lastly, there's now a light mode! It's not perfect yet, and the toggle has some issues (it works 50% of the time, don't ask me why) so for now it can only be changed in code, but it's quite a bit done! I won't commit this one yet because it has some fatal bugs I re-introduced and I don't want them interfering with the ship that's still open, but after the ship is approved I'll patch them and put the code on spaces.

Ok so I kinda went crazy and decided to reconsider all my aesthetic choices with the transition box. I decided to go for a box with background blur, which swipes in, connecting to the sidebar, then swipes out. I have the full transition functionality for the redirection from the main page to the about me page, and am working on both getting it to intercept <a> links to play the animation on page switch, and integrating the code into the sidebar.html code (since it will be a constant along with the sidebar, and exclusively controlled by the sidebar).
I also added a randomized quote that displays on enter into the webpage. I really like how it is right now, though I am thinking of ways a new quote could be displayed on every page change, without ruining the aesthetics, delaying animations, or making everything look too busy.

Ok so after discovering I should have been shipping small updates all along, I decided to wrap up this section and get it shipped. I extracted the sidebar into it's own .html file and created a builder .js file that lets you easily add the sidebar to any page. I also made the page switching actually work, with the title bar changing based on the web page, fixed some other minor bugs and issues, and cleaned up the code a lot (no more relative paths, I learned my lesson).

OH MY GOSH I DID IT AND I DIDN'T EVEN VIBE CODE IT!!!!!!
I got a sweeping box animation playing whenever you change the page! It doesn't look like much now bc... there's only one page, but when I link it up to the sidebar, I can have it play mid-page-transition. Yippeeeeeeeeeeeeee! (Also, minor adjustments were made to the sidebar opening speed, icon rotation animation speed, and the positioning of the contact me button

Ok so! A lot of tiny changes that took me a long time because I did the majority of it at 2:30am when I couldn't sleep. Firstly, I removed the spinning animation on the subelements because it was just overstimulating. I kept it on the parent element so you still have that spin-out spin-in effect, but made the child elements just move to indicate selection. I think I like it and I will probably try and rearrange a few things to also have that movement indicator on the parent svg. I also gave the open area rounded corners to make it fall more in line with the very round svgs within it. I also fixed the bottom contact button so that the icon is aligned at all times, both when closed and when open, by manually tweaking its position as it closes to ensure it doesn't go off-screen (which is what happens when you try and center the icon-text div as a whole)

Not a huge update, but a pretty manual one: I added a base delay to every animated element in the website. I felt like it was really jumpy and reacted at the slightest touch, so a 150ms delay helps cool things down a bit. Now you don't trigger the sidebar every time your cursor comes even close, and you can move your cursor away in time.

More sidebar fun! This time I used justify-between to add a bottom section. So far it's just a button that says contact me (actually it's not even a button I prototype with <div> and add <a> later but close enough), but I will be adding more later. I also updated the rotation to rotate LEFT on open and RIGHT on close because it felt more natural (lefty loosy righty tighty and all that).
Also hackatime is losing its marbles a little because it says I've been working for 48 minutes and I know for a fact it hasn't been that long since my last devlog sooooo

Ok, reeeeeeeally happy with how this turned out! We have spinning animations now (still not sure about the parent item holding its spin state until fully deselected but not holding its color state, but maybe someone can give feedback on that?). Other than that, I have all the other svgs working! The only slight problem is with some of them rendering their fills weirdly (see the code logo) but that should be an easy fix (e.g. find a new svg). Other than that, I'm quite happy with how this turned out! it's also more compact now, which is going to give me the ability to put controls on the bottom of the sidebar (light/dark mode, accessibility stuff, easter eggs, etc.)

WOOOOOOOOOOOO I GOT IT WORKINGGGGG!
Now for a little tutorial for others because this may have been the singular most painful experience I've ever gone through:
Firstly, if you want the icons to change color, you have to use the <svg> tag instead of the <img> tag. The issue with that is that <svg> takes in a path string, not a proper .svg file which is likely what you have at the moment. You can either compile all of the svgs into path strings yourself, or do what I did which is (with much assistance from copilot to be transparent) create JavaScript code that will take in the svg-path attribute of the <svg>, and convert it into the proper string and set that as the attribute on website load. It's actually quite fast and works really well.
Now for detecting mouse cursor interaction: you'll need 4 groups: 1 for the sidebar (group/bar) to keep the sidebar open as long as you're hovered ANYWHERE in the area, 1 for the container item you're selecting (group/container) to keep the container open as long as you're hovered on it (without it, you can see the expanded list but once you go to click on items, the container will collapse since it thought you left the area). Then you need 1 for the main container item (group/item) so you can click and interact with the header, then 1 for each subitem (group/subitem) so those can be clicked as well (each group routes to its parent, so you don't have to worry about the subitems conflicting). If you ALSO want, you can restructure it so that your main item is not a parent of your subitems, but instead are all controlled by a parent div, so that you don't need group/subitem and can just make them all group/item, which is IMO cleaner. Have fun!

Sooooooooooooo glad I changed it to a dropdown because I looooooove how this looks! Had some original issues with transition delays (the opacity delay for the scrolling out look was interfering with the color changing animation and making it seem slow and unresponsive) but I think it looks great! In fact, I may add a small delay back into the color changes since it looked a little more gentle and calm IMO.

Ok so I had to break half the website to do it, but I did it!
The main issue I had with my site was that I had a lot of sub-things (things that fit in one category but I still wanted displayed in some way) I wanted to put on the website. After a while, I realized having STEM, CS, and Robotics as 3 separate tabs was a bad idea; however, I still wanted to display all of them. This is where I started on the marquee animation, to hopefully show all of them. Unfortunately, while it was supposed to be an attempt to save space over a traditional list dropdown, I don't like it and feel like it's old-looking and clunky, so I will be replacing it. However, it's still a devlog because, hey, I worked a looooong time on it.
Oh, also!!!!!! --> The icon now spins! I was able to figure out how to trigger the spin while hovering over the entire section, instead of just the icon. Lottie animations may be on the table again (though there's still the inconsistent looks to be worried about).

I'm back after Undercity! With a thoroughly broken VSCode after installing Linux on a partition WINDOWS DOESN'T EVEN OCCUPY HOW.
On a more serious note, to whoever is reviewing this, please discount the last 37 minutes because it was all troubleshooting broken links, improper webserves, etc. I am not trying to fraud hackclub I promise I'm just really bad at getting things working ;(

Ok so it doesn't LOOK like much but there's actually a LOT of change made between this and the last devlog. Firstly, I fixed all the files from being haphazardly chucked into my project to actually being in folders. More importantly, however, I made it so that my urls actually work. localhost:3000 takes the place of the domain, the pages are listed after it, there is no weird /src/ in front of each page, localhost:3000/about-me and localhost:3000/about-me/ (the difference being the / at the end) go to the same place and don't break the CSS (which previously broke because it was using relative file locations which were different for /about-me and /about-me/), and just typing in localhost:3000 (as a substitute for the future domain name) redirects to the about-me page instead of displaying all the pages and content of my website in text format.

Switched out all the animated Lottie icons for static SVGs because I thought Lottie was too inconsistent -- the right choice I think! I also implemented a 3D view with a .blend model I created a while back and exported it as a .glb. Unfortunately, .glb doesn't support the heavily procedural textures I used, so I opted to remove them entirely rather than have 1000 errors thrown at me. Baking the textures to images seems to be an effective solution for straight-light objects (e.g. light goes straight in, bounces straight out), but definitely not for more complicated glass or refraction shaders. Overall, I think it looks good though! I also changed the color of the pane ring to change between the rosepine rose and rosepine love colors when the sidebar is drawn out, though I'm not sure if it's a change I'm keeping.

Welp after way too much time troubleshooting why Lottie animations were refusing to play on hover, I finally got a working prototype! I'm considering switching out the animations for plain SVGs because the variation in free .json animations (in my opinion) harms the overall look, but that's a future thing!

Soooooooooooo I'm going to be honest here the last hour and a half were troubleshooting tailwind for the most part. I wanted my site to be in the rosepine theme, but tailwind wouldn't recognize the @theme notation and therefore wouldn't compile the theme into output.css and I had to basically reinstall tailwind and reconfigure some VSCode settings BUT it's working now and there's a side menu that pulls out on hover! (Yippee)

Finally got tailwind installed and configured! (Oh my goodness that took so much time)