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.
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
orYour 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"
- The
- Bonus: View actual locations on the locations page maps (we recommend Leaflet JS for this)
- Solution URL: https://github.com/anhek/frontendmentor-designo-website
- Live Site URL: https://anhek-designo.vercel.app
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Vercel - Cloud platform for serverless deployment
- GraphCMS - Headless CMS
- React Hook Form - Forms
- Mapbox - Maps
- Chakra UI - For styles
- Sizzy - For the responsive web design
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).
Next topics that I'll dig into (and integrate) : TypeScript and React animation.
- Using Mapbox with Next.js (Instead of Google Maps) - This helped me implementing the office locations maps (I used mapbox instead of Leaflet)
- background-blend-mode on css-tricks - This article helps to visualize the different background blend mode options available
- Website - Antonin Nhek
- Twitter - @anhek_
- Frontend Mentor - @anhek