sariodesign / arch-studio

Frontend mentor challenge

Frontend Mentor - Arch Studio multi-page website

This is a solution to the Arch Studio multi-page website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

1. View the optimal layout for each page depending on their device's screen size
2. See hover states for all interactive elements throughout the site
3. 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

Links

• Solution URL: Github repository
• Live Site URL: Vercel live app

My process

Built with

• Flexbox
• CSS Variables
• Mobile-first workflow
• Nuxt - Vue framework
• Formkit - For form
• Leftlet - For map

What I learned

I improved the knowledges about Nuxt 3 and vue 3

Continued development

Add some animations Improve content (maybe with a CMS headless) Improve validation form

Author

• Website - SarioDesign
• Frontend Mentor - @sariodesign
• Twitter - @sariodesign
• Linkedin - @sariodesign
• Github - @sariodesign