https://github.com/0xabdulkhaliq/profile-card-component

Profile card component solution for Frontend mentor Challenge
https://github.com/0xabdulkhaliq/profile-card-component

bem css3 frontend-mentor html5 semantic-web

Last synced: about 1 month ago
JSON representation

Profile card component solution for Frontend mentor Challenge

• Host: GitHub
• URL: https://github.com/0xabdulkhaliq/profile-card-component
• Owner: 0xabdulkhaliq
• Created: 2023-02-01T13:58:37.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-20T15:16:18.000Z (almost 2 years ago)
• Last Synced: 2024-08-14T03:38:16.208Z (4 months ago)
• Topics: bem, css3, frontend-mentor, html5, semantic-web
• Language: CSS
• Homepage: https://0xabdulkhalid.github.io/profile-card-component/
• Size: 1.14 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  
Profile Card Component Solution

  


    Frontend Mentor Challenge

    


    


    View Demo

     · 

    Report Bug

     · 

    Request Feature

  





  

  

    

      


  

  

    

      

  

  

    

  












## **Preview**










## **Links**

- |||

  | :----- | :----- |

  | Solution URL: | [Profile Card Component 🎯 [ SEMANTIC MARKUP - VANILLA CSS3 - BEM ]](https://www.frontendmentor.io/solutions/profile-card-component-carbon-copy-vanilla-css3-bem-mT_Hr2hv1o) |

  | Live Site URL: | [https://0xabdulkhalid.github.io/profile-card-component/](https://0xabdulkhalid.github.io/profile-card-component/) |

  | Remastered Version: | [https://github.com/0xabdulkhalid/profile-card-component-remastered](https://github.com/0xabdulkhalid/profile-card-component-remastered) |

  |||




## Pagespeed Insights Score:

- | Scored 100% for Both Mobile & Desktop |

  | :-----: |

  |  |

  |  |

  | Check out [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-0xabdulkhalid-github-io-profile-card-component/m4477fbl1h?form_factor=mobile) to get live score |

  |||




## **Built With**

- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   

- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   




## **Tools Used**

- ![Google](https://img.shields.io/badge/google-DA4437?style=for-the-badge&logo=google&logoColor=white)

- ![GitHub](https://img.shields.io/badge/github-0D1117.svg?style=for-the-badge&logo=github&logoColor=white)  

- ![Arch](https://img.shields.io/badge/Arch%20Linux-1793D1?logo=arch-linux&logoColor=fff&style=for-the-badge)

- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)   




## **Outcome**

* Used HTML5 **semantic elements** for better accessability

* Used **Git** and **GitHub** for project management

* Tried to maintain **clean code**, especially **CSS** with **BEM Methodology**

* Used **media queries** for responsive design, built with **Mobile first workflow**

* Scored **100%** on [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-0xabdulkhalid-github-io-profile-card-component/m4477fbl1h?form_factor=mobile)

* **Cross tested** on Firefox and Chromium based browsers




## **What I learned**

* Usage of **Semantic elements** to improve accessability for screen readers

* Utilization of `position: absolute` property of css to move profile avatar over it's container

* Usage of **GRID** & **FLEX** layouts in css

* A lot of minor things




## **Acknowledgment**

* Challenge was provided by [Frontend Mentor](https://www.frontendmentor.io)




## **Let's Connect 👋**