richardcyrus / fm-minimalist-portfolio-website

This is a solution to the Minimalist portfolio website challenge on Frontend Mentor

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
  • Useful resources
• Author

Overview

The challenge

Build out a multi-page portfolio website and get it looking as close to the reference design as possible.

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

Desktop Screenshots

• Home
• Portfolio
• Contact
• Portfolio: Manage
• Portfolio: Bookmark
• Portfolio: Insure
• Portfolio: Fylo

Tablet Screenshots

• Home
• Portfolio
• Contact
• Portfolio: Manage
• Portfolio: Bookmark
• Portfolio: Insure
• Portfolio: Fylo

Mobile Screenshots

• Home
• Portfolio
• Contact
• Portfolio: Manage
• Portfolio: Bookmark
• Portfolio: Insure
• Portfolio: Fylo

Links

• Solution URL
• Repository URL
• Live Site URL

My process

I first completed the design in plain HTML and SASS. Once those designs were complete, I translated them for React and Next.js.

This is my first Next.js application and haven't written anything in React in just under two years. While this was mostly just a translation of the HTML designs to React, the navigation and form were areas that provided challenges.

I originally had plans to use CSS/SCSS modules when moving to Next.js, but it would make more sense to start the design in Next than to try to translate what I had already completed for the HTML/SASS version of this project. AS a result, I just used a global stylesheet instead of SCSS modules.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework

Useful resources

• A Modern CSS Reset
• A Complete Guide to Grid
• A Complete Guide to Flexbox
• CSS Button Styling Guide
• 5 ways to use background image and color together in css
• Build a fully-responsive, progressively enhanced burger menu
• Solved with CSS! Colorizing SVG Backgrounds
• Custom CSS Styles for Form Inputs and Textareas
• Target Active Link when the route is active in Next.js
• activeClassName example
• Next.js (useStaticProps, useStaticPaths) + Static JSON Data
• How To Build Forms in React
• Form validation in React using the useReducer Hook

Author

• Website - www.richardcyrus.com
• Frontend Mentor - @richardcyrus