https://github.com/deri-kurniawan/positivus

Slicing the Positivus Landing Page Design from olgaaverchenko on figma's design community into a web application using React.js + CSS3.
https://github.com/deri-kurniawan/positivus

css css3 frontend react reactjs web webapp website

Last synced: 5 days ago
JSON representation

Slicing the Positivus Landing Page Design from olgaaverchenko on figma's design community into a web application using React.js + CSS3.

• Host: GitHub
• URL: https://github.com/deri-kurniawan/positivus
• Owner: Deri-Kurniawan
• License: mit
• Created: 2024-07-26T13:45:43.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-28T23:16:29.000Z (5 months ago)
• Last Synced: 2024-11-25T07:42:52.496Z (2 months ago)
• Topics: css, css3, frontend, react, reactjs, web, webapp, website
• Language: TypeScript
• Homepage: https://www.deri.my.id/showcase/positivus-landing-page
• Size: 658 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Positivus Landing Page

![Tech Stack](https://skillicons.dev/icons?i=html,css,react,typescript,vite,jest,storybook)

This project involves slicing the Positivus Landing Page design from [@olgaaverchenko](https://www.figma.com/@olgaaverchenko) on Figma's [community design](https://www.figma.com/community/file/1230604708032389430) into a fully functional web application using **React.js** and **CSS3**.

![Positivus Mockup](/public/mockup.webp)

## Tech Stack

- **HTML5**: Structuring the content of the webpage.

- **CSS3**: Styling and layout, including responsiveness and animations.

- **React.js**: Building dynamic and reusable UI components.

- **TypeScript**: Enhancing JavaScript with static typing for improved developer experience.

- **Vite**: Fast build tool and development server for modern web projects.

- **Storybook**: Developing and documenting UI components in isolation.

- **Chromatic**: Automated visual testing to ensure UI consistency across changes.

- **Jest**: Unit testing framework to ensure component functionality and integrity.

## Features

For developing, documenting, and testing UI components, we utilized:

- **Storybook**: To build and showcase components in isolation.

- **Chromatic**: For automated visual regression testing to maintain UI consistency.

- **Jest**: For unit testing to ensure the components work as expected.

## Live Demo

Experience the live version of the Positivus Landing Page here:  

[https://positivus.deri.my.id](https://positivus.deri.my.id)

## Component Library

Explore the component library developed with Storybook and tested with Chromatic:  

[https://development--66aea6f354f5805b7d1f6c3f.chromatic.com](https://development--66aea6f354f5805b7d1f6c3f.chromatic.com)

## More Information

For more details about this project and others, visit my portfolio website:  

[https://www.deri.my.id](https://www.deri.my.id)