chepark / galleria

Responsive website to get information about master pieces around the world.

Home Page:https://soft-pothos-04baa8.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Galleria

⚙️ Features

  • Play the slide show, checking the flow with progress bar on the downside.
  • View a large image of a painting with a modal.
  • Responsive design for mobile, table, and PC.

📌 Lessons from the project

  • Different usage of Flex and Grid in CSS.
  • Building own hooks in React.
  • Using Portals in React to create Modals.
  • Using Framer Motion for animation effects.
  • Deploying the project with Netlify

👩🏻‍🔧 Future Improvement

  • Improve the image loading speed in the slide page.
  • Change css media query code into scss.
  • Edit some styles on the slide page for a large screen (width > 1300px). Lower the progress bar Y position.

💻 Technologies

  • React
  • Netlify
  • HTML
  • CSS
  • Sass

🔨 Set up

  • Download and install Git
  • > git clone https://github.com/chepark/galleria.git
  • > cd galleria
  • > npm install
  • > npm start

🔗 Link

https://soft-pothos-04baa8.netlify.app

About

Responsive website to get information about master pieces around the world.

https://soft-pothos-04baa8.netlify.app


Languages

Language:JavaScript 70.0%Language:SCSS 25.7%Language:HTML 4.3%