< Back to portfolio

100 Days CSS

Tech stack: HTML, CSS, JavaScript, React (Gatsby)

My attempt at recreating some of the 100 Days CSS frames, with some extra features.

Code repository | Visit project

100 days css

My attempt at recreating some of the 100 Days CSS frames, with additional features.

Features

  • Responsiveness: These have been made almost 100% responsive, meaning that if you resize the frame width and height, it will be as though you zoomed in / out. The notable exceptions are the frames which contain text, as text can’t be sized relative to its container with CSS.
  • Easy changes to each frame: Every frame has several variables which can be changed to affect how the image looks. Some math was used to make this work.
  • Animations pause if the frame is not visible on the screen: This is because slower devices such as mobile were experiencing significant slowdown as more frames were added.
  • Page is pre-rendered.
  • Lazy loading of CSS frames further down the page.

< Back to portfolio

^