🎨 React Glitch Card

⚡ A stylish, animated glitch profile card for developers, designers, and creators.

✨ Features

• 🎭 Glitch animation effect
• ⌨️ Typewriter text for roles
• 🖼️ Profile image support
• 🔗 Social links integration
• 📄 Download CV button
• 📬 Contact button

📦 Installation

npm install react-glitch-card

🚀 Usage

import { GlitchCard } from 'react-glitch-card';

export default function App() {
  return (
    <GlitchCard
      src="/photo.jpg"
      name="Jane Doe"
      titles={["Developer", "Designer"]}
      downloadCvHref="/cv.pdf"
      contactHref="mailto:[email protected]"
    />
  );
}

⚙️ Props

| Prop | Type | Description | | ---------------- | ------------ | --------------------------------------------- | | src | string | Portrait image URL | | name | string | Full name (typed once on mount) | | titles | string[] | Roles — cycles forever with typewriter effect | | socialLinks | SocialLink[] | Optional social links { label, href, icon } | | downloadCvHref | string | CV download link | | contactHref | string | Contact link (mailto: or page URL) | | typeSpeed | number | Typing speed in ms (default: 55) | | deleteSpeed | number | Deleting speed in ms (default: 28) | | pauseMs | number | Pause before deleting (default: 1600) | | accentColor | string | CSS color (default: #39d353) | | width | number | Card width in px (default: 320) | | photoHeight | number | Image height in px (default: 380) |

🧩 Example with Social Links

<GlitchCard
  src="/photo.jpg"
  name="Jane Doe"
  titles={["Full-Stack Developer", "UI Designer"]}
  socialLinks={[
    { label: "GitHub", href: "https://github.com/jane", icon: "github" },
    { label: "LinkedIn", href: "https://linkedin.com/in/jane", icon: "linkedin" }
  ]}
  downloadCvHref="/cv.pdf"
  contactHref="mailto:[email protected]"
  accentColor="#00ffcc"
/>

🎯 Use Cases

• 💼 Portfolio websites
• 👨‍💻 Developer landing pages
• 🧑‍🎨 Designer profiles
• 🚀 SaaS dashboards

📄 License

ISC License