initial firstboot animation

[Arc-blroth]

https://github.com/uclaacm/acmcyber.com/assets/45273859/00287a7a-ed14-4046-b96e-0168f3711e69

[r2dev2]

gonna try to make a simpler version of this: just have a diamond loader that runs when u land on the page and doesn't block page load.

Also gonna use svg with path offset as it seems simpler than the css shenanigans here

[r2dev2]

I can try to do the version wehre you just have an svg that uses the path prop and css animations to do a quick loading effect but at the moment I am very busy. I will see when I have time for that. Also, my change would mainly be an implementation detail so it is not needed to wait for me before improving this pr.

This pr needs to make it such that the entire page isn't blocked by the animation because that part is very annoying to users if they have to sit through an animation to see the page. In summary:

My issues

• code is very complex - do not want to create a situation where there is an expert on the website, website code should be accessible to all future devs who come after us (remember the hexagons)
• animation too long - no one wants to sit through that whenever they want to access info, think about someone quickly opening this in a priv window to go check events for info or opens on their phone

Fixes

• [ ] remove blocking of rest of page during animation
• [ ] speed up animation (esp the typewriter part)
• [ ] comment css code for now on what is going on (like "this is the first rectangle" and also high-level description of the css like "so we first make a rectangle around the logo and then use css keyframes ... to animate it when ... class is applied") - can change into a simpler svg path animation later

[Arc-blroth]

like a quarter later i honestly think this animation isn't all that needed so closing for now