Portfolio Publishing
There were many aspects of my site that were acceptable; was time to perfect them!
The first was my accessability, primarily with the contrast between text and the background which was easy to fix. Next was a few images or content missing appropriate labels and roles, and finally missing styles when elements were focused.
Finally were changes around certain resolutions, additional grid configurations, improved spacing.
My footer was also quite lacking, so I duplicated my social links into it with more appropriate icons, additionally ensuring it existed on all my pages - work views, blog, etc.
While my site looked thematically similar on Firefox, on Chrome however my scrollbars were extremely out of place - so I added custom styling for both.
As I was performing manual router manipulation whenever a Work modal was opened, this created a bug in which users could hit the Back button on their device and they would not be taken back to the portfolio home page, yet the URL would update accordingly with the Work modal being kept open.
Animations
I had zero animations, and it was time to fix that by animating everything that could be reasonably animated.
First was the header, by making my name match the colors of the colored ring, and also follow the curvature of the ring itself. My approach for the curvature was using a little bit of math and degree rotation, while my hue rotation for the text used no such trick - it used a 437-line keyframe animation transitioning through each hue of the color one point at a time. Of course this was not written by hand, but rather was generated, but still it's both overkill and likely a performance drain, yet it passes all tests thus far.
Just to add extra to it, I made the letters of my name come out from within the ring itself.
There was one remaining issue with my header: it was too high quality. The solution was to create two lower quality versions for my mobile users and tablet users, having the lowest quality loaded first, and swap it out with the medium and finally high quality versions after the device has finished
A simple opacity & scaling animation for all my section made the text pop quite easily, along with slide-in animations for my social links.
The skills and past work were where the animations really came out, first with the skills spinning and scaling in - but staggered for each additional skill. Then the work sections animated in from the cross axis - vertically when on desktop, and horizontally on mobile. Finally the primary technology & concept for each past work would animate in from the cross axes when scrolled into view.
While I do have experience in all the skills I've listed, I don't have public work to show for all of them, so I filtered out all the skills that didn't have at least one piece of work using it.
I am a dark-theme user, but I'm not about to alienate those who use light mode, so after grabbing this dark/light mode toggle, I hooked up the JavaScript to give a <body data-theme="light"> when the user chose light theme, and added a whopping 25 global CSS Properties to make everything look good in both themes.
Testing that your website works on Mobile is something nobody can forget, but the opposite is commonly forgotten: testing that your website works on extremely wide device, such as ultrawide monitors.
With this brought to my attention, I added a maximum with to my contact form, which was the only component that did not properly scale to such a high width.
When I wrote the dynamic pages for both my blog and work paths, I simply returned null when the content was missing. Of course this is undesired behavior, you'd want to display the user a error and/or redirect them to the most relevant page - so that's exactly what I did.
Finally I disabled all my animations when the @media (prefers-reduced-motion) media query was active, and finally my site was ready for visitors!