Home Profiles

Profile Cards

Modern user profile layouts with reusable card structures, social links, glow effects, and interactive elements.

10 Components Pure HTML/CSS/JS Responsive
Available
AR

Ariana Reed

Frontend Developer

ReactCSSTypeScript

Developer Profile

Standard

Clean developer card featuring technology tags and availability status.

<div class="profile-card developer-card">
  <span class="status">Available</span>
  <div class="avatar">AR</div>
  <h2>Ariana Reed</h2>
  <p>Frontend Developer</p>
  <div class="skills">
    <span>React</span>
    <span>CSS</span>
    <span>TypeScript</span>
  </div>
  <button type="button">View Portfolio</button>
</div>

Social Creator Profile

Essential

Profile layout with circular media platform links and clean action buttons.

<div class="profile-card social-card">
  <div class="avatar">LM</div>
  <h2>Lena Moore</h2>
  <p>Content Creator</p>
  <div class="social-links">
    <a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
    <a href="#" aria-label="Twitter"><i class="fa-brands fa-x-twitter"></i></a>
    <a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
  </div>
  <button type="button">Follow</button>
</div>
NK

Noah Kim

Product Lead

12 Projects 8 Members

Team Member Card

Advanced

Compact layout designed for team directory listings and work metrics.

<div class="profile-card team-card">
  <div class="team-head">
    <div class="avatar">NK</div>
    <div>
      <h2>Noah Kim</h2>
      <p>Product Lead</p>
    </div>
  </div>
  <div class="team-meta">
    <span><strong>12</strong> Projects</span>
    <span><strong>8</strong> Members</span>
  </div>
  <button type="button">Message</button>
</div>
SP

Sofia Patel

Growth Analyst

248 Posts 14.2k Followers 682 Following

User Stats Card

Essential

Profile showing user stats grid including posts, followers, and followings.

<div class="profile-card stats-card">
  <div class="avatar">SP</div>
  <h2>Sofia Patel</h2>
  <p>Growth Analyst</p>
  <div class="stats">
    <span><strong>248</strong> Posts</span>
    <span><strong>14.2k</strong> Followers</span>
    <span><strong>682</strong> Following</span>
  </div>
</div>
EI

Elijah Stone

UI Designer

4.9 Rating 96 Reviews

Glassmorphic Profile

Modern

Beautiful profile with frosted blur backdrop and white contrast typography.

<div class="profile-card glass-card">
  <div class="avatar">EI</div>
  <h2>Elijah Stone</h2>
  <p>UI Designer</p>
  <div class="glass-row">
    <span>4.9 Rating</span>
    <span>96 Reviews</span>
  </div>
  <button type="button">Hire Me</button>
</div>
AR

Ariana Reed

Frontend Developer

Hover to Flip

Contact Info

ariana@example.com

@ariana-dev

3D Flip Profile

Brand New

Interactive profile card that rotates 180 degrees in 3D space on cursor hover.

<div class="flip-profile-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <div class="avatar">AR</div>
      <h2>Ariana Reed</h2>
      <p>Frontend Developer</p>
      <span class="status-flip">Hover to Flip</span>
    </div>
    <div class="flip-card-back">
      <h3>Contact Info</h3>
      <p><i class="fa-regular fa-envelope"></i> ariana@example.com</p>
      <p><i class="fa-brands fa-github"></i> @ariana-dev</p>
      <button type="button">Available</button>
    </div>
  </div>
</div>
NK
CLASS S

Noah Kim

Netrunner / Tech Lead

INT 99
TECH 84

Cyberpunk Netrunner

Brand New

Cyberpunk themed profile layout with tech grid backgrounds, laser scanning, and text glitches.

<div class="cyberpunk-card">
  <div class="cyberpunk-grid"></div>
  <div class="cyberpunk-header">
    <div class="avatar cyberpunk-avatar">NK</div>
    <span class="cyberpunk-badge">CLASS S</span>
  </div>
  <h2 class="cyber-glitch" data-text="Noah Kim">Noah Kim</h2>
  <p>Netrunner / Tech Lead</p>
  <div class="cyberpunk-stats">
    <div class="cyber-stat">
      <span class="stat-lbl">INT</span>
      <span class="stat-val">99</span>
    </div>
    <div class="cyber-stat">
      <span class="stat-lbl">TECH</span>
      <span class="stat-val">84</span>
    </div>
  </div>
</div>
SP

Sofia Patel

Growth Analyst

Analytics 90%
SEO / Growth 75%

Progress & Stats

Brand New

Frosted glass profile layout featuring individual skill levels and animated metric bars.

<div class="skills-progress-card">
  <div class="progress-header">
    <div class="avatar">SP</div>
    <div class="progress-info">
      <h2>Sofia Patel</h2>
      <p>Growth Analyst</p>
    </div>
  </div>
  <div class="progress-section">
    <div class="progress-item">
      <span class="progress-label">Analytics <strong>90%</strong></span>
      <div class="progress-bar-v2">
        <div class="progress-fill-v2" style="width: 90%;"></div>
      </div>
    </div>
    <div class="progress-item">
      <span class="progress-label">SEO <strong>75%</strong></span>
      <div class="progress-bar-v2">
        <div class="progress-fill-v2" style="width: 75%;"></div>
      </div>
    </div>
  </div>
</div>
EI

Elijah Stone

UI Designer

Crafting beautiful interfaces with 5+ years of experience in product design.

FigmaUI/UXPrototyping

Tabbed Expandable

Brand New

Interactive profile containing click switches to swap between biographical details and skills.

<div class="expandable-card">
  <div class="expandable-header">
    <div class="avatar">EI</div>
    <div>
      <h2>Elijah Stone</h2>
      <p>UI Designer</p>
    </div>
  </div>
  <div class="card-tabs">
    <button class="tab-btn active" onclick="switchTab(this, 'bio')">Bio</button>
    <button class="tab-btn" onclick="switchTab(this, 'skills')">Skills</button>
  </div>
  <div class="tab-contents">
    <div class="tab-pane active" data-pane="bio">
      <p>Crafting beautiful interfaces...</p>
    </div>
    <div class="tab-pane" data-pane="skills">
      <div class="skills-mini">
        <span>Figma</span>
        <span>UI/UX</span>
      </div>
    </div>
  </div>
</div>

Creative Banner

Brand New

Cover photo style card with centered avatar overlap and high-impact reach numbers.

<div class="banner-card">
  <div class="banner-bg"></div>
  <div class="banner-avatar-wrap">
    <div class="avatar banner-avatar">LM</div>
  </div>
  <div class="banner-details">
    <h2>Lena Moore</h2>
    <p>Content Creator</p>
    <div class="banner-stats">
      <div>
        <strong>142K</strong>
        <span>Reach</span>
      </div>
      <div>
        <strong>48</strong>
        <span>Projects</span>
      </div>
    </div>
  </div>
</div>
MO

Max Owens

Software Engineer

Available Remote

Minimal Outline

Simple

Clean, minimal profile with subtle outline and meta chips for compact lists.

<div class="profile-card outline-card">
  <div class="avatar">MO</div>
  <h2>Max Owens</h2>
  <p>Software Engineer</p>
  <div class="outline-meta"><span>Available</span><span>Remote</span></div>
  <button>View</button>
</div>
CR

Casey Rivers

Developer Advocate

Email Call Connect

Contact Stack

Interactive

Vertical contact actions ideal for developer directories and quick outreach.

<div class="contact-card">
  <div class="avatar">CR</div>
  <h2>Casey Rivers</h2>
  <p>Developer Advocate</p>
  <div class="contact-list"><a href="#">Email</a><a href="#">Call</a></div>
</div>
PV

Priya Venk

Product Designer

Portfolio Showcase

Gallery

Small thumbnail gallery beneath profile for quick portfolio previews.

<div class="portfolio-card">
  <div class="avatar">PV</div>
  <h2>Priya Venk</h2>
  <p>Product Designer</p>
  <div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
BG
PRO

Brynn Gale

DevOps

Badge Circle

Compact

Compact circular badge overlay used to surface reputation or membership levels.

<div class="badge-card">
  <div class="badge-wrap"><div class="avatar">BG</div><div class="badge">PRO</div></div>
  <h2>Brynn Gale</h2>
  <p>DevOps</p>
</div>
CM

Cam Morin

Mobile Engineer

Compact Mini

List

Very small profile row suitable for lists, mentions, and compact UIs.

<div class="compact-card">
  <div class="avatar">CM</div>
  <div class="compact-info"><h3>Cam Morin</h3><p>Mobile Engineer</p></div>
</div>