Minimalist portfolio Template

You can use my emailer server for getting the form data to your email.

Table of contents

• Minimalist portfolio Template
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
      • Home Page
        • Home Mobile
        • Home Tablet
        • Home Desktop
      • Portfolio Page
        • Portfolio Mobile
        • Portfolio Tablet
        • Portfolio Desktop
      • A specific project Template Page
        • Mobile Project Template Page
        • Tablet Project Template Page
        • Desktop Project Template Page
      • Contact-me Page
        • Mobile Contact-me Page
        • Tablet Contact-me Page
        • Desktop Contact-me Page
      • Mobile Menu
      • Contact-me Form Error
    • Links
  • My process
    • Built with
    • What I learned
      • show the images depending on the sizes, and the px density
      • Open React Router At The Top Of Page With JavaScript
      • Cleaning Importing SVGs In React
      • Using CSS grid to handle white space instead of margin
    • 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 that the field is required.
  • The Email Address is not formatted correctly should show "Please use a valid email address"

Screenshot

Home Page

Home Mobile

Home Tablet

Home Desktop

Portfolio Page

Portfolio Mobile

Portfolio Tablet

Portfolio Desktop

A specific project Template Page

Mobile Project Template Page

Tablet Project Template Page

Desktop Project Template Page

Contact-me Page

Mobile Contact-me Page

Tablet Contact-me Page

Desktop Contact-me Page

Mobile Menu

Contact-me Form Error

Links

• Blog URL: Royer Adames Blog
• Live Site URL: Royer Adames Minimalist Portfolio

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• React - JS library
• Sass - For styles

What I learned

Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.

To see how you can add code snippets, see below:

show the images depending on the sizes, and the px density

<picture className="portfolio__img">
  <source
    srcSet={`${project.imgLinkDesktop} 1x, ${project.imgLinkDesktop2x} 2x`}
    media={mediaQueries.desktop}
  />
  <source
    srcSet={`${project.imgLinkTablet} 1x, ${project.imgLinkTablet2x} 2x`}
    media={mediaQueries.tablet}
  />
  <source
    srcSet={`${project.imgLinkMobile} 1x, ${project.imgLinkMobile2x}`}
  />
  <img
    src={project.imgLinkMobile}
    alt={`${project.title} project`}
  />
</picture>

}

Open React Router At The Top Of Page With JavaScript

/* Link to previous and next projects on the project list */
<Link
  to={`/projects/${previousProjectDetail.id}/${previousProjectDetail.title}`}
  className="other-project__previous-project-link"
  onClick={() => {
    window.scroll(0, 0);
  }}
>
</Link>
}

Cleaning Importing SVGs In React

// import SVGs
import { ReactComponent as LeftArrow } from "../images/icons/arrow-left.svg";
import { ReactComponent as RightArrow } from "../images/icons/arrow-right.svg";

// using the SVGs
<LeftArrow className="other-project__button-icon other-project__previous-project-icon" />
<RightArrow className="other-project__button-icon other-project__next-project-icon" />

Using CSS grid to handle white space instead of margin

grid-template:
  "hero hero" max-content
  ". ." 11.5rem //white space
  "manage background-article" min-content
  "manage ." 4rem //white space
  "manage previews" min-content
  ". previews" max-content
  ". ." 6.4rem // white space
  "others others" 1fr
  ". ." 6.4rem // white space
  "contact-me contact-me" max-content
  ;

Useful resources

• Responsive images in React: show images depending on windows size, and the px density - Show the images depending on the sizes, and the px density.
• Importing SVGs In React: The Clean Way - Clean way to import SVGs.
• Open React Router At The Top Of Page With JavaScript - Open React Router DOM s At The Top Of Page With JavaScript so that the user does not feel confuse when navigating the page.
• Responsive images - How to handle responsive images.
• What Img Srcset Does In HTML5: A Quick & Simple Guide - How to handle responsive images.
• Style child element when hover on parent - How to change the style of children's element when there is hover on the parent element.
• HTML Horizontal Line - How to decide between semantic line or visual line.
• set a className on custom react components - Passing props to add custom CSS classes to components.
• Dynamically import images in React - A way to dynamically render images in React.
• In ReactJS trying to get params but I get property 'id' does not exist on type '{}' - React TypeScript fix for params type error.

Author

• Blog - Medium
• LinkedIn - royeradames