CSS Enhancements

[vientang]

Running list of CSS optimizations and tricks:

• Optimize fonts with font smoothing
• Subtle animation on hero photos with rAF - when not scrolling
• More accurate scrollspy positioning
• Use picture and sourceset tags for images for responsive optimizations
• Play with removing the hover underline and replacing with changes in text - scale, color, etc.
• Remove white background on favicon
• Skill level UI treatment: use icons or progress bar visual

[vientang]

• Page transitions and animations

https://css-tricks.com/animating-between-views-in-react/?utm_campaign=Alligator.io&utm_medium=email&utm_source=Revue%20newsletter

[vientang]

Completed:

• Optimize fonts with font smoothing: Used system fonts instead. font-smoothing isn't fully compatible on all major browsers
• Play with removing the hover underline and replacing with changes in text - scale, color, etc.: Scaled text, move underline right below text, change underline to blue

[vientang]

Skill level UI treatment: use icons or progress bar visual: Ended up using a progress bar with gradient background. Also added a tooltip to describe the challenges of each level.