Frontend Mentor - Profile card component

This is a solution to the Profile card component coding challenge on Frontend Mentor.

Frontend Mentor challenges help improve skills by building realistic projects.

Table of contents:

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author
• Acknowledgments
• Personal Notes

Overview:

The challenge:

Users should be able to:

• View the optimal layout depending on their device's screen size
• Get it looking as close to the design as possible.

Preview of initial design:

Screenshots:

Fullscreen View (Desktop)

Animated Preview

**Note: This is a Mobile-First Approach & Wait for the GIF to load **

All viewports were included (except for the 4k view), in case the observer wishes to see the minor changes.

Desktop View (1440px)	Laptop View (1024px)	Tablet View (768px)

Mobile L (430px)	Mobile M (375px)

Links:

• Live Site URL: Website Link - Click Me
• Solution URL: FrontEndMentor - Click Me

My process:

Built with:

• HTML5, CSS3
• Mobile-First Approach

What I learned:

Recap over some of the major learnings while working through this project:

General things I've learned:

• Review of Semantic HTML & CSS, CSS Flex Layout
• Writing DRY code by combining similar styles
• Box Model & Responsive Design
• Implement BEM (Block Element Modifier) naming convention for classes, enhancing code readability and maintainability.

---

Author:

• Github - @Iron-Mark
• Github - @Mark-Siazon
• Frontend Mentor - @Iron-Mark
  • (The Assets used in this project is originally from FrontendMentor)

Acknowledgments:

• I would like to acknowledge the hard work and dedication I put into this project while injured, yet I'm building this project with a right wrist sprain.
• I am grateful for my friends and those who motivate me to push through and not settle for relaxation.
• Also to tutorial i watched on youtube that helped me solve the background styling.
• I hope that this website serves its intended purpose. Thank you!

Next Action (Soon):

• Add some Javascript Functionalities
• Create my own modified version of this project.
• TBA...

Notes:

• I would be happy to receive comments, criticism, and such that could improve the website:
  • Cleaner Code
  • Better Practice/Approach to making this website.
• Feel free to approach and contact me :>
  • Jul 2, 2024 (Initial Coding)
  • Jul 3, 2024 (Finalize Styles + Documentation)