[FEATURE] Add Profile Card Component

[aparna24bce11388]

Feature Name

Profile Card Component

---

Description

Introduce a reusable Profile Card Component that displays a user's profile picture, name, designation, short bio, and social media icons in a clean and modern card layout. The component is responsive, lightweight, and suitable for team sections, portfolio websites, company pages, and personal profiles.

---

Why is this useful for EaseMotion CSS?

This component aligns with EaseMotion CSS's philosophy by providing a reusable, human-readable, and customizable UI element built entirely with HTML and CSS. It helps developers quickly add attractive profile cards without writing repetitive styling from scratch.

---

HTML Snippet

<div class="profile-card">
    <img src="avatar.jpg" alt="Profile">
    <h2>John Doe</h2>
    <p class="role">Frontend Developer</p>
    <p class="bio">
        Passionate about creating responsive and user-friendly web experiences.
    </p>

    <div class="social-links">
        <a href="#">GitHub</a>
        <a href="#">LinkedIn</a>
        <a href="#">Twitter</a>
    </div>
</div>

---

CSS Snippet

.profile-card {
    width: 300px;
    padding: 24px;
    text-align: center;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.profile-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.profile-card h2 {
    margin-bottom: 8px;
}

.profile-card .role {
    color: #2563eb;
    font-weight: 600;
    margin-bottom: 12px;
}

.profile-card .bio {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.social-links a {
    margin: 0 8px;
    text-decoration: none;
    color: #2563eb;
    font-weight: 500;
}

---

Visual Reference (optional)

Similar to the profile cards commonly used in portfolio websites, team sections, company pages, and developer portfolios.

---

Checklist

• This feature does not duplicate an existing EaseMotion CSS class
• I understand my naming will be standardized by the maintainer
• I will submit code inside submissions/ only — not in core/ or components/

---

Tip: You can discuss your feature ideas and get feedback from other developers on our official Discord Server before submitting an issue.

[github-actions]

Hey @aparna24bce11388! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside the submissions/ directory (e.g., submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/)
• Include demo.html · style.css · README.md in your folder
• Max 25 active issues per contributor — unassign others before taking new ones
• Join our official Discord Server (Optional - for general developer chat and support; official issues belong on GitHub!)

🕑 Inactivity rule: Issues with no progress for 24 hours (1 day) will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡