This is a solution to the Profile card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Build out the project to the designs provided
- Solution URL: https://github.com/DarrickFauvel/fem08-profile-card-component
- Live Site URL: [https://fem08-profile-card-component-drrck.netlify.app)
- Mobile-first workflow
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Vite - Superfast bundling tool
The positioning of the two circles in the background was more challenging than I thought. I used a few media queries at first which were not ideal. But, fellow Frontend Mentor @hcxweb shared a better solution with me of using background positioning with vw & vh units.
- Getting started with Vite - This will help with scaffolding a new Vite project
- CSS background - Info on using the CSS
background
property
- Website - Darrick Fauvel
- Frontend Mentor - @DarrickFauvel
- @hcxweb for their background positioning solution
- @Crazimonk for noting my missing font color