ProfileCard

profilecard-1779378412607.tsx

'use client'
import { useState } from 'react'

const skills = ['React', 'TypeScript', 'Tailwind', 'Node.js', 'Prisma', 'Next.js']

export default function ProfileCard() {
  const [following, setFollowing] = useState(false)

  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 48, background: '#0A0A0A' }}>
      <div style={{
        background: '#111', border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: 20, padding: '32px 28px', width: 280, textAlign: 'center',
        position: 'relative',
      }}>
        {/* Background banner */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 80,
          background: 'linear-gradient(135deg, rgba(201,168,76,0.15), rgba(99,102,241,0.15))',
          borderRadius: '20px 20px 0 0',
        }} />

        {/* Avatar */}
        <div style={{ position: 'relative', display: 'inline-block', marginBottom: 12 }}>
          <div style={{
            width: 80, height: 80, borderRadius: '50%',
            background: 'linear-gradient(135deg, #C9A84C, #6366f1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 32, border: '3px solid #111',
            position: 'relative', zIndex: 1,
          }}>👨‍💻</div>
          <div style={{
            position: 'absolute', bottom: 2, right: 2, zIndex: 2,
            width: 14, height: 14, borderRadius: '50%',
            background: '#22c55e', border: '2px solid #111',
          }} />
        </div>

        <div style={{ color: '#F5F5F0', fontSize: 18, fontWeight: 700, marginBottom: 2 }}>Alex Johnson</div>
        <div style={{ color: '#C9A84C', fontSize: 13, marginBottom: 4 }}>@alexj</div>
        <div style={{ color: '#666', fontSize: 13, marginBottom: 20, lineHeight: 1.5 }}>
          Full-stack developer building the future of UI.
        </div>

        {/* Stats */}
        <div style={{ display: 'flex', justifyContent: 'space-around', marginBottom: 20, padding: '16px 0', borderTop: '1px solid rgba(255,255,255,0.06)', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
          {[['2.4k', 'Following'], ['18.2k', 'Followers'], ['142', 'Projects']].map(([val, label]) => (
            <div key={label} style={{ textAlign: 'center' }}>
              <div style={{ color: '#F5F5F0', fontWeight: 700, fontSize: 16 }}>{val}</div>
              <div style={{ color: '#555', fontSize: 11 }}>{label}</div>
            </div>
          ))}
        </div>

        {/* Skills */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, justifyContent: 'center', marginBottom: 20 }}>
          {skills.map(s => (
            <span key={s} style={{
              background: 'rgba(201,168,76,0.08)', border: '1px solid rgba(201,168,76,0.2)',
              color: '#C9A84C', fontSize: 11, padding: '3px 10px', borderRadius: 20, fontWeight: 500,
            }}>{s}</span>
          ))}
        </div>

        {/* Follow button */}
        <button
          onClick={() => setFollowing(f => !f)}
          style={{
            width: '100%', padding: '11px', borderRadius: 10, border: 'none',
            cursor: 'pointer', fontWeight: 700, fontSize: 14, transition: 'all 0.2s',
            background: following ? 'rgba(255,255,255,0.06)' : '#C9A84C',
            color: following ? '#aaa' : '#0A0A0A',
          }}
        >{following ? 'Following ✓' : 'Follow'}</button>
      </div>
    </div>
  )
}

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

User profile card with avatar, social stats, skills badges, and follow button

More from Cards

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProp

StatsCard

Cards

import React from 'react';
import { useEffect, useState } from 'react';

interface NoisyCardProps {
  children: React.ReactNode;
  className?: string;
}

const NoisyCard: React.FC<NoisyCardProps> = ({ children, className }) => {
  const [noise, setNo

NoisyCard

Cards

import React, { useState, useEffect } from 'react';

interface HolographicCardProps {
  children: React.ReactNode;
}

const HolographicCard: React.FC<HolographicCardProps> = ({ children }) => {
  const [mousePosition, setMousePosition] = useState({ x

HolographicCard

Cards

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeho

NotificationCard

Cards