Frontend Mentor - Minimalist portfolio website solution

This is a solution to the Minimalist portfolio 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
  • Useful resources
• Author

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
• Click the "About Me" call-to-action on the homepage and have the screen scroll down to the next section
• Receive an error message when the contact form is submitted if:
  • The Name, Email Address or Message fields are empty should show "This field is required"

Screenshot

Links

• Solution URL: Solution
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React TypeScript - JS library
• CSS modules
• React Router
• React Responsive

What I learned

In this project I used a different approach to style componen with CSS modules instead of plain CSS to avoid name collitions. I used React Router to route each page and project and React Responsive to change with React the behaviour of some page, this was specially usefull in creating the NavBar for example.

Continued development

In the next project I may use Styled Components in order to have a better idea of all the styling methods that exist with React and choose the one that I think is better based on my experience.

Useful resources

• W3 School - This website is an excellent reference, specially the How To section.
• React TypeScript - This site provides a reference for React TypeScript projects, on how to type props, hooks, etc.

Author

• GitHub - Rodrigo Villalobos
• Frontend Mentor - @Rravg