Photosnap multi-page marketing website

This is a solution to the Photosnap multi-page website challenge on Frontend Mentor.

Check out my other solutions on Frontend Mentor at @kaseyvee or frontend-mentor-challenges.

The challenge

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 sitenear the quote

Screenshots

Desktop View

Mobile View

Built with

• React
• React Router
• Framer Motion - React animation library
• Sass
• Flexbox
• Grid
• Mobile-first workflow

What I learned

I came across Frontend Mentor just over 2 months ago and feel like I've greatly improved my frontend and general coding skills. From modularization and file management, the ins and outs of CSS, accessibility, and refactoring.

All of the challenges I've done prior have helped me gain the skills to allow this project to go as smooth as possible- going from a "just wanna get this done and refactor later" attitude to "how can I make this not a nightmare for future me" throughout the entire process.

Getting more comfortable with TypeScript was also one of the main goals and after this, will probably now be the default for all my future projects!

I still have some code to refactor, mostly with the pricing table. I've avoided using tables up until now, so this was probably one of the most challenging parts of this project, in both implementation and styling. I'm also still looking into ways for the table to be more legible for screen readers. If anyone has any insight or good resources for this, please let me know!

Continued development

Would like to add more animations for seamless transitions. Refactor pricing table for accessibility and cleaner code.