Task 1 Solution - Climate Science Software Skill Trial

Task 1 of this skill trial involves building a UI component with CSS animations with NextJS.

Project Description

In this project, a figma file was provided by Climate Science. A frame from the Figma file was to be designed. Specifications to me me include:

1. Setting Up the NextJS project on Vercel.
2. Deploying the project to the default NextJS domain provided by Vercel.
3. Coding a CSS animation of the specified Frame 13.
4. Adding i18n support to the project.
5. Using TypeScript and SCSS.
6. Looping on the animation.
7. Providing a link to the public repo and a link to the deployed page with vercel's default domain

Live Project Repo

Installation

1. Clone this repo

   git clone https://github.com/winpeed/task1-climate-science-trial.git

2. Install all NPM packages

   npm install

3. In the project directory, you can run:

npm run dev

to start the development server on http://localhost:3000. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

5. Run

npm run build

This will build and run your project locally 🚀

Usage

1. Enter the Live/Production URL https://task1-climate-science-trial.vercel.app/ or development URL http://localhost:3000/ into your browser.

Built with

• Next.js
• React.js

Author

Praise Obende

• Github Profile
• Email
• Website