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.


  • 💰 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.

coded with in Córdoba, Argentina