→ Jordan McKenzie
→ Personal Profile Card with Bio Introduct...

Personal Profile Card with Bio Introduction

This Example is contributed by Jordan McKenzie, on 27-Feb-2025. It is responsive. similar terms for this example are Profile Cards,User Profile,Profile,Author box,User information,Bio Component

Profile Card User Info Personal Introduction Bio

Author Jordan McKenzie

Fork Fullscreen

<div class="about-card">
  <div class="about-card-header">
    <div class="profile-image">
      <img src="https://source.unsplash.com/300x300/?portrait" alt="Emma Rodriguez">
    </div>
    <div class="profile-info">
      <h2>Emma Rodriguez</h2>
      <p class="username">@emma_creative</p>
      <div class="social-links">
        <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
      </div>
    </div>
  </div>
  <div class="about-card-body">
    <p class="bio">UI/UX Designer and Front-end Developer with a passion for creating intuitive digital experiences. I combine creative design thinking with technical skills to build user-centered solutions that make an impact.</p>
    <div class="skills">
      <span class="skill-tag">UI Design</span>
      <span class="skill-tag">HTML/CSS</span>
      <span class="skill-tag">JavaScript</span>
      <span class="skill-tag">Figma</span>
    </div>
  </div>
  <div class="about-card-footer">
    <a href="#" class="contact-button">Contact Me</a>
    <a href="#" class="portfolio-button">View Portfolio</a>
  </div>
</div>

Related Examples