Back to Projects
Portfolio

Profile Card

It's an example Profile Card page with social links and avatar. It is developed using HTML, CSS, JavaScript

HTMLCSSJavaScript
View Demo GitHub

Project Overview

A sleek profile card component featuring an avatar, name, bio, stats, and social media links. The card design uses modern CSS techniques including glassmorphism effects, gradient borders, and smooth hover animations. This reusable component pattern is commonly used in social platforms, team pages, and user dashboards.

Key Features

  • Avatar with circular crop and border effect
  • User stats display (followers, posts, etc.)
  • Social media link icons with hover effects
  • Glassmorphism card background effect
  • Gradient border animation
  • Responsive card sizing

Technical Highlights

CSS backdrop-filter creates the glassmorphism frosted-glass effect. CSS border-image with linear-gradient produces the animated gradient border. Flexbox centers the card content perfectly. The social icons use CSS hover transforms for interactive feedback.