View project

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

• Features
• Getting started
  • Prerequisites
  • Installation
• Usage
  • Starting the project
  • Building the project
  • Code formatting
• Built with
• License

• 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.

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

• NPM

Installation requires NPM which is included with Node. You can install Node by downloading the installer from the website.

To update NPM to the latest version:

npm install -g npm@latest

1. Clone the repo

git clone https://github.com/sargalias/100-days-css.git

2. Install NPM packages

npm install

npm start

• Start the project for development: npm start
• Serve the production build of your site: npm run serve

• Build the project for production: npm run build

• Format code with Prettier code formatter: npm run format

• Gatsby - Static site generator based on React.
• React - The JavaScript framework used.
• Prettier - Code formatting
• react-intersection-visible - Package for easy notification of when a component is visible on-screen.
• react-lazyload - Package for lazy-loading React components.
• react-helmet - Document head manager for React.
• And some others, including Gatsby plugins.

This project is licensed under the MIT License - see the LICENSE.md file for details.