Frontend Mentor - Single-page developer portfolio solution

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

Overview

The challenge

Users should be able to:

• Receive an error message when the form is submitted if:
  • Any field is empty
  • The email address is not formatted correctly
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Bonus: Hook the form up so it sends and stores the user's enquiry (you can use a spreadsheet or Airtable to save the enquiries)
• Bonus: Add your own details (image, skills, projects) to replace the ones in the design

Screenshot

Links

• Solution URL: The Solution
• Live Site URL: The Live Project

My process

Built with

• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• TypeScript - Programming language
• TailwindCSS - CSS framework
• PostCSS - JavaScript tool for css

What I learned

I learned How to create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resized:

<div class="container"> 
  <div class="text">Some text</div> <!-- If you want text inside the container -->
</div>

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  position: relative; /* If you want text inside of it */
}

/* If you want text inside of the container */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Above code belongs to w3schools.

Useful resources

• How TO - Aspect Ratio - This w3schools howto helped me to learn how to maintain the aspect ratio of an element with CSS.
• Example resource 2 - This tutorial showes the usage of the filter: hue-rotate in css.

Author

• GitHub - @Artin-GH
• Frontend Mentor - @Artin-GH
• Telegram - @RTn_GH

Please like and star the project on the GitHub and Frontend Mentor if you like it. ✨💛