This is a solution to the Photosnap Website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- Solution URL: https://github.com/anhek/frontendmentor-photosnap-website
- Live Site URL: https://frontendmentor-photosnap-website-anhek.vercel.app
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- GraphCMS - Headless CMS
- Vercel - Cloud platform for serverless deployment
- Chakra UI - UI framework
- Sizzy - For the responsive web design
For this project I wanted to try GraphCMS as a headless CMS to integrate content (text, images, icons, logos etc). It took me more time to finish the challenge but I learned a lot about how to structure the content, build the graphql queries and use the data during the development part. It was a good experience and I'm planning to keep learning about the JAMstack and headless CMS.
- https://day.js.org - A lightweight package to format dates
- https://cssgradient.io - A super useful tool to visualize and generate css gradient quickly
- https://boredhumans.com/faces - A tool to generate fake humans avatar images. I end up not using but it's still something that can be handy for future projects
- Website - Antonin Nhek
- Frontend Mentor - @anhek