Juliet Zhuang's portfolio site, made with React JS and ♡.

References:

Position arrangement:

• CSS @media breakpoints
• CSS flexbox
• CSS sticky element
• CSS position
• CSS absolute text over image
• CSS image object-fit
• CSS trick to preserve media ratio
• CSS usage of inline-
• CSS usage of min/max/clamp
• HTML no space between spans
• JS+CSS popup modal
• cursor position 1px-off trick
• React viewport dimension

Animation:

• CSS animations
• HTML+CSS page load
• CSS transition
• CSS animated background
• HTML+CSS hover-to-play gif
• CSS trigger A with B
• HTML+CSS details element
• CSS hide scrollbar
• smooth scroll
• Siema slides effect
• CSS customize cursor

Color:

• Adobe color wheel
• CSS customize selection color

Text:

• CSS font family overview
• CSS font stack - Helvetica
• CSS font stack - Georgia
• HTML sub- & super-script
• HTML+CSS text with image filling

Icon:

• fontawesome
• fontawesome icon code example
• Google material symbols
• unicode

Logics:

• JS forEach
• JS addEventListener
• CSS disable selection
• MouseEvent.buttons
• JS detect mouse-down when hovering
• JS detect sticky active
• JS detect scroll direction
• React ref list detect scroll direction
• jQuery detect scroll position
• React HashLink
• JS+CSS prevent scroll below modal
• react-device-detect
• localStorage for dark/light mode
• NN/g long hover display principle

Experience:

• React lazy loading
• React preload large images
• RegEx require all images

Deploy:

• react-gh-pages
• change favicon
• Git large file storage
• meta tag

Library:

• react-image-magnifiers
• p5*js

Content:

• embed bilibili