Skip to content

Latest commit

 

History

History

profile-card

README.md

Frontend Mentor - Profile Card Component Solution

This is my solution to the Profile card component challenge on Frontend Mentor. I'm super thankful to have found Frontend Mentor as a great way to confidently grow in my coding skills with real-life projects.

Table of contents

Overview

Project Brief

Your challenge is to build out this profile card component and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Want some support on the challenge? Join our Slack community and ask questions in the #help channel.

Mobile View

Desktop View

Links

My process

Built with

  • React - JS library
  • Next.js - React framework
  • HTML5
  • CSS
  • SASS - CSS extension language
  • Bootstrap
  • Mobile-first workflow
  • VS Code

What I learned

I really enjoy how each of these frontend projects not only let you practice with whichever tools you choose, but also to push yourself and accomplish design challenges you may not have faced before. This profile card was great for me to practice some absolute positioning with the main profile image on the front - I tackled this one first by building the card elements and then positioning as needed - and then went for the background. I first tried putting both background images on the same

tag, but was having issues getting the positioning right, so I decided to try having two
layers for the background. That's what worked for me to give flexibility in positioning each one how I wanted depending on screen size. Really happy with how this one turned out!

Here are a few code samples from this project:

<!-- HTML for the profile image section on the card -->
<div className="row">
  <div className="profile-wrapper">
    <Image
      src={Avatar}
      alt="Profile-Image"
      layout='fill'
      objectFit='contain'
    />
  </div>
</div>
/* CSS for the dual-layered background images and the profile image positioning */
#home-page {
  align-items: center;
	background-image: url(../../public/bg-pattern-top.svg);
	background-position: -80vh -110vh;
	background-repeat: no-repeat;
	background-size: cover;
	justify-content: center;
	min-height: 90vh;
	padding: 8%;
	text-align: center;
}

#home-page-behind {
  background-color: $darkCyan;
	background-image: url(../../public/bg-pattern-bottom.svg);
	background-position: 80vh 30vh;
	background-repeat: no-repeat;
	background-size: cover;
}

.profile-wrapper {
  border: 4px solid $white !important;
	border-radius: 50% !important;
	height: 13vh !important;
	left: 0px;
	margin: auto;
	overflow: hidden;
	position: absolute;
	right: 0px;
	text-align: center;
	top: 80px;
	width: 13vh !important;
}
// Loading in Bootstrap JS
const [loading, setLoading] = useState(true);

useEffect(() => {
  import ('bootstrap/dist/js/bootstrap.min.js');
  setLoading(false);
}, []);

if (loading) {
  return <LoadingPage />
}

Continued development

As a starter developer, I want to keep growing in working as a team and learning how to deliver smaller packages of code at a time, such as components like this one. I thought this project was a good way to get back into Next.js and begin doing just that!

Useful resources

  • CSS Formatter - I found this helpful site when I'm feeling lazy and don't want to format my CSS code, I can have this do it for me, especially putting everything in alphabetical order.
  • SASS Tutorial and Setup - This was a helpful quick tutorial I watched to help me get started with SASS and the live compiler in VS Code.

Author

Acknowledgments

Thank you to the Frontend Mentor team for providing all of these fantastic projects to build, and for our getting to help each other grow!