Profile Card

A reusable profile card component displaying a user's image, name, bio, skills, and social links with interactive animations.

Ahdeetai
Drag →
Animated reusable profile card component

Installation

npx scrollx-ui@latest add profilecard

Usage

import CenteredImageCard from "@/components/ui/profilecard";
<CenteredImageCard
      img="https://github.com/Adityakishore0.png"
      name="Ahdeetai"
      bio="Creator of ScrolIX UI, a modern component library built for speed and scalability."
      skills={[
        { name: "TypeScript", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" },
        { name: "Next.js", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" },
        { name: "Node.js", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" },
        { name: "JavaScript", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" },
        { name: "TailwindCSS", iconUrl: "https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg" },
        { name: "GitHub", iconUrl: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" }
      ]}
      githubUrl="https://github.com/Adityakishore0"
      twitterUrl="https://x.com/Ahdeetai"
      position="Senior Software Engineer"
    />

API Reference

ProfileCard

The ProfileCard component is used to create an interactive profile card with user image, name, role, bio, skills, and social links.

img – Profile image URL or path.

name – User’s name shown on reveal.

position – Job title or role.

bio – Short description or bio.

skills – Array of skill names shown as badges.

githubUrl – Optional GitHub profile link.

twitterUrl – Optional Twitter/X profile link.