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
• 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"
  • The Email Address is not formatted correctly should show "Please use a valid email address"

Screenshot

https://github.com/richard-torble/minimalist-portfolio-website/blob/main/screenshot.jpg

Links

• Solution URL: https://github.com/richard-torble/minimalist-portfolio-website
• Live Site URL: https://rt-minimalist-portfolio-website.netlify.app

My process

Built with

• Semantic HTML5 markup
• CSS
• Bootstrap
• SASS
• Flexbox
• Mobile-first workflow

What I learned

This is my first Frontend Mentor challenge. I used it to improve my knowledge of responsive design, specifically with the Bootstrap framework. I spent a good amount of time delving deep into Bootstrap variables and components to build the project within its system as much as possible.

This project was also a great way to reinforce the importance of good project planning to create clean code in a more efficient way.

Continued development

In the the next project I take on I hope to continue improving on what I have already learnt, with the addition of more JavaScript and likely working with an API.

Author

• Frontend Mentor - https://www.frontendmentor.io/profile/richard-torble