Skip to content

0xShynn/frontendmentor-designo-website

Repository files navigation

Frontend Mentor - Designo agency website solution

This is a solution to the Designo agency website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

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 site
  • Receive an error message when the contact form is submitted if:
    • The Name, Email Address or Your Message fields are empty should show "Can't be empty"
    • The Email Address is not formatted correctly should show "Please use a valid email address"
  • Bonus: View actual locations on the locations page maps (we recommend Leaflet JS for this)

Screenshot

https://www.dropbox.com/s/t9x0sflzztv87ob/fm-designo-website.jpg?raw=1

Links

My process

Built with

What I learned

My main goal was to use this project as an opportunity to keep building projects with the jamstack approach. I used the combo Next.js, GraphCMS and Chakra UI. I'm more confident using those tools as I've learned many things (through practice, trials and documentation).

Continued development

Next topics that I'll dig into (and integrate) : TypeScript and React animation.

Useful resources

Author