https://github.com/leandro-parice/frontend-challenge

Frontend generated through layouts suggested in an Instagram post, where I simulated real applications for ReactJS studies.
https://github.com/leandro-parice/frontend-challenge

animation animation-css animations css front-end front-end-development frontend frontend-web javascript js react reactjs sass study svg vite

Last synced: about 6 hours ago
JSON representation

Frontend generated through layouts suggested in an Instagram post, where I simulated real applications for ReactJS studies.

• Host: GitHub
• URL: https://github.com/leandro-parice/frontend-challenge
• Owner: leandro-parice
• Created: 2024-08-04T02:15:14.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-08-17T13:17:14.000Z (3 months ago)
• Last Synced: 2024-08-17T14:26:20.723Z (3 months ago)
• Topics: animation, animation-css, animations, css, front-end, front-end-development, frontend, frontend-web, javascript, js, react, reactjs, sass, study, svg, vite
• Language: JavaScript
• Homepage: https://leandroparice-frontend-challenge.netlify.app/
• Size: 111 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Challenge

[![Netlify Status](https://api.netlify.com/api/v1/badges/985f5fce-ee83-484d-993d-1822b14092ef/deploy-status)](https://app.netlify.com/sites/leandroparice-frontend-challenge/deploys)

For study purposes, I took advantage of an Instagram post [@coding*dev*](https://www.instagram.com/coding_dev_)

Called ["Practice Frontend with these Challenges"](https://www.instagram.com/p/C94inT1yL4X/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==).

The idea is to reproduce the frontend of each image shared in the post, and as I am studying ReactJS, bring to life the elements that indicate some application in real life.

As I don't have access to any Figma or open layout files, everything visual was based on the posted image.

## 1) Profile Card

I applied color buttons to simulate the template's color change. I used SVG to animate and change colors depending on the selected button.

https://leandroparice-frontend-challenge.netlify.app

- SVG Animations

- useState

- Flex grid

- SASS

- Send props between components