Photosnap website
Gatsby.js, Sanity CMS, Styled-components, deployed on vercel
see the code see the working project
a multi-page challenge from Frontend-Mentor: ⏲️ I had some time on my hands while waiting for the designers to finish the work for another website and decided to tackle this project.
Challenges
- 💰 Since his is a premium-project, I had access to the .sketch and .fig design files. It was the first time I worked with a real design file and it was amazing to be able to look up font-sizes, colors and heights of elements so easily.
- 📦 The design consists of lots of cards and reusable sections which forced me to think and create lots of components that could be adapted to every screen.
What I learned
- 📦 While it is written everywhere how important it is to think in reusable components, here I could really feel the advantage, when my project started coming together after using my components in different pages.
- ⌨️ I improved basics like css grid and :before and :after pseudoelements a lot with this project.
- 🔀 I learned styling svg image files with css.
- 💡 since his project, I understood a lot more about image optimization with Gatsby and wouldn't use Sanity again for image optimization except for the story-cards.
