So I mostly just did aesthetics on this one.
First, I added an info icon, which will serve as a bio app for me
Then, what took up most if this time was making a fade animation. Now, when you click on the profile in the login page, a spinner appears, then the desktop slowly fades in from a black image. The reason this took so long is because I had to go through so many ways of doing it. At first I tried to set the opacity of the entire object, which made the desktop canvas and top bar fade in, but not the background picture. Then I tried to wrap the into a div and fade that div, but that didn’t work, then I tried to wrap everything INSIDE of into a div, which also didn’t work, but after a while (including spending like 15 minutes debugging because I misspelled “getElementById” as “getElementsById”), I made a div that ACTUALLY is overlayed on top of everything, made the JS opacity fading, and disabled interaction. Also, I made it so that if anything on the desktop is clicked while the fading is still happening, then it just snaps to 0 opacity so it’s not too obstructive.
Next, I basically copy-pasted some code to make a loader animation on the login page, then wrote the JS to make it appear when login is clicked.
This was my first use of AI so far: Claude telling me that opacity can’t be changed for an animation because CSS keeps it opaque.
That’s it for now, I’m actually gonna get started on functionality now :D
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.