Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chanda-abdul/modern-art-gallery-website
Frontend Mentor challenge to recreate the Modern Art Gallery Website using React, React Styled Components, Leaflet.js and Sass
https://github.com/chanda-abdul/modern-art-gallery-website
javascript leafletjs react responsive-design sass styled-components
Last synced: 2 days ago
JSON representation
Frontend Mentor challenge to recreate the Modern Art Gallery Website using React, React Styled Components, Leaflet.js and Sass
- Host: GitHub
- URL: https://github.com/chanda-abdul/modern-art-gallery-website
- Owner: Chanda-Abdul
- Created: 2022-02-11T21:47:20.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-23T04:50:33.000Z (over 2 years ago)
- Last Synced: 2023-03-04T21:31:44.072Z (over 1 year ago)
- Topics: javascript, leafletjs, react, responsive-design, sass, styled-components
- Language: JavaScript
- Homepage: https://friendly-benz-de5b74.netlify.app/
- Size: 26.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - [Modern Art Gallery Website Solution](https://www.frontendmentor.io/challenges/art-gallery-website)
## Summary
This is a solution to the [Frontend Mentor](https://www.frontendmentor.io) challenge to recreate the [Modern Art Gallery website challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/art-gallery-website). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
I built this project to practice my React skills.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### Users should be able to:
- [x] View the optimal layout for each page depending on their device's screen size
- [x] Mobile First
- [x] Tablet
- [x] Desktop
- [ ] See hover states for all interactive elements throughout the site
- [x] Buttons
- [ ] Social Media Icons
- [x] **Bonus**: Use [Leaflet JS](https://leafletjs.com/) to create an interactive location map with custom location pin
## Screenshots
### Desktop
### ``
### `` with [Leaflet JS](https://leafletjs.com/) Map
## Links
- Solution URL: [View Solution here](https://www.frontendmentor.io/solutions/modern-art-gallery-w-react-styled-components-leafletjs-and-sass-siAf_gMZ8)
- Live Site URL: [View live site here](https://friendly-benz-de5b74.netlify.app/)
## My process
### Built with
- [React](https://reactjs.org/) - JavaScript Framework
- [React Styled Components](https://styled-components.com/) - For styles
- [Leaflet JS](https://leafletjs.com/) - Interactive Map Library
- Sass/CSS
- Flexbox
- Mobile-first workflow
- Mobile breakpoint: 375px
- Tablet beakpoint: 768px
- Desktop breakpoint: 1275px
### What I learned
- This is my first project using [React Styled Components](https://styled-components.com/). I started building this project, and once I came to the `` I realized that the `background-color` and the font `color` of the footer would change depending on which page is being rendered. So I did some research and Styled Components are a great solution for this issue. Overall, I really enjoyed working with Styled Components because they helped me organize my CSS styles, and quickly incorporate responsive media queries.
- I used `props` to send `background-color` and font `color` to the ``. Also, figuring out how to conditionally change the color of an `` with `props` was extremely challenging😣.
in ``
````
````
in the parent component
````
````
and the styled component
````
background-color: ${({ bgcolor }) =>
bgcolor || "var(--almost-black)"};
color: ${({ color }) =>
color || "var(--white)"};
````
`` in the `` component
`` in the `` component
- This is also one of the first projects where I used Sass. Sass is great, because it allows you to create resuable variables for fonts, colors, etc.
The given Figma specs for colors
And the Sass/CSS I came up with
````
:root {
/* color palette */
--gold: hsl(24, 56%, 63%);
--almost-black: hsl(0, 0%, 8%);
--almost-grey: hsl(0, 0%, 27%);
--white: hsl(0, 0%, 100%);
}
````
and I incorporated these colors into the Styled Components using
````
color: var(--gold);
color: var(--almost-black);
color: var(--almost-grey);
color: var(--white);
````
The given Figma specs for fonts
And the Sass/CSS I came up with
````
/* fonts */
@mixin heading-xl {
font-family: "Big Shoulders Display", cursive;
font-size: 96px;
line-height: 88px;
text-transform: uppercase;
}
@mixin heading-l {
font-family: "Big Shoulders Display", cursive;
font-size: 70px;
line-height: 70px;
text-transform: uppercase;
}
@mixin heading-m {
font-family: "Big Shoulders Display", cursive;
font-size: 60px;
line-height: 50px;
text-transform: uppercase;
}
@mixin heading-s {
font-family: "Big Shoulders Display", cursive;
font-size: 36px;
line-height: 36px;
text-transform: uppercase;
}
@mixin body-m {
font-family: "Outfit", sans-serif;
font-weight: 300;
font-size: 22px;
line-height: 32px;
}
@mixin body-s {
font-family: "Outfit", sans-serif;
font-weight: 300;
font-size: 18px;
line-height: 28px;
}
/* mobile */
.title {
@include heading-m;
}
````
- I also played around with active states and stylings for the ``
Inactive
Active
## Continued development
- [ ] I would like to review the Social Media Icon active state color changes, they don't seem to be working at the moment.
- [ ] Maybe add some additional pages.
## Useful resources
- [StackOverflow](https://stackoverflow.com/) - This project would not be possible without StackOverflow. 🤣
- [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS) - MDN was a great reasource for whatever CSS issues I encountered.
## Author
- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)
- Website - [Chanda Codes](https://chandacodes.com/)
- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)