Profile Card Component

Challenge Description

The Profile Card Component is a frontend coding challenge from FrontendPro. The goal is to design and implement a visually appealing and responsive profile card component using HTML, SCSS, and Bootstrap.

This component includes the following features:

• A user profile picture.
• User details such as name, job title, and a brief description.
• Information stats (Followers, Following, Projects).
• Interactive buttons for "Follow" and "View Profile" with hover effects.

---

Built With

• HTML5 - Markup for structuring the card layout.
• SCSS - Used for styling with mixins and modularity.
• Bootstrap 5 - Utilized for grid system, responsiveness, and utility classes.

---

Preview

Here’s how the Profile Card Component looks:

---

Features

• Fully Responsive: Adjusts seamlessly across different screen sizes.
• Modern Design: With gradient background, shadows, and a clean layout.
• Hover Effects: Interactive button animations.
• SCSS Integration: Easily customizable with modular SCSS.

---

Project Structure

project/
│
├── images/
│   ├── user-john.png   # Profile image of John Deo
│   ├── preview.png     # Screenshot of My Work
│   └── logo.svg        # Favicon
│
├── style.css            # Compiled CSS
├── style.scss           # Main SCSS file   
│
├── index.html          # Main HTML file
└── README.md           # Project documentation

---

Getting Started

To run this project locally, follow these steps:

Prerequisites

Ensure you have the following installed:

• A web browser (e.g., Chrome, Firefox, Safari).
• A text editor (e.g., VSCode).
• Node.js and npm (for SCSS compilation, if needed).

Installation

1. Clone the repository:

   git clone https://github.com/Yashi-Singh-9/Profile-Card-Component.git
   cd Profile-Card-Component

2. Open index.html in your browser to view the profile card.

Compiling SCSS

If you need to modify the SCSS file, you can compile it to CSS using any SCSS compiler. Here's how to do it with Node.js:

1. Install sass globally:

   npm install -g sass

2. Compile the SCSS file:

   sass styles/style.scss styles/style.css

---

Usage

1. Customize the images/user-john.png file to replace the profile image.
2. Update the user details (name, description, and stats) directly in the index.html.
3. Modify SCSS variables or mixins in style.scss for further customization.

---

Responsive Design

The component is optimized for devices of all sizes. Breakpoints have been added to ensure the layout adapts as follows:

• Large screens: Horizontal layout with a wide profile image.
• Smaller screens: Stacked layout for better readability.

---

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request with improvements.

---

License

This project is licensed under the MIT License.