Portfolio Hero

Heroes 56

About

Mobile-first portfolio hero: physics keyword badges (Matter.js) fall, pile up and can be grabbed and thrown. Avatar, bio, social links and a swipeable case carousel with autoplay. Container queries, light/dark, empty states, fully prop-driven. React + Tailwind v4.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Portfolio Hero to your project and fits it to your theme.

Code

How Portfolio Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { PortfolioTemplate, DEFAULT_BADGES } from "@/components/ui/portfolio-hero";

/* Live controls (21st Demo Controls). Any change drops the badges again. */
const settings = {
  /* on: phone frame · off: desktop browser frame */
  mobileView: true,
  darkMode: true,
  dragHint: true,
  badgeCount: 22,
  autoplaySeconds: 6,
};

export default function PortfolioHeroDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const dark = s.darkMode;
  const theme = dark ? "dark" : "light";
  const count = Math.max(1, Math.min(DEFAULT_BADGES.length, Math.round(s.badgeCount)));
  const badges = React.useMemo(() => DEFAULT_BADGES.slice(0, count), [count]);
  const dropKey = React.useMemo(() => Math.random(), [s.mobileView, dark, s.dragHint, count, s.autoplaySeconds]);

  const template = (
    <PortfolioTemplate
      theme={theme}
      dropKey={dropKey}
      dragHint={s.dragHint}
      badges={badges}
      autoplay={Math.max(0, s.autoplaySeconds) * 1000}
    />
  );

  return (
    <div
      className="flex min-h-screen w-full flex-col items-center justify-center py-8"
      style={{
        /* dot grid from the "work with AI" block of vasnev.art */
        backgroundColor: dark ? "#121212" : "#ececea",
        backgroundImage: `radial-gradient(circle, ${dark ? "rgba(255,255,255,.035)" : "rgba(0,0,0,.06)"} 0 1px, transparent 1.4px)`,
        backgroundSize: "20px 13px",
        backgroundPosition: "-6px -1px",
      }}
    >
      {s.mobileView ? (
        <div
          className={`relative w-[390px] max-w-[calc(100%-16px)] rounded-[47px] border-[5px] shadow-2xl ${
            dark ? "border-[#1c1c1c] bg-[#060606]" : "border-[#d4d4d2] bg-[#f7f7f5]"
          }`}
        >
          <div className="h-[820px] overflow-y-auto overflow-x-hidden rounded-[42px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
            {template}
          </div>
        </div>
      ) : (
        <div
          className={`w-[min(1200px,calc(100%-32px))] overflow-hidden rounded-2xl border shadow-2xl ${
            dark ? "border-[#242424] bg-[#060606]" : "border-[#d4d4d2] bg-[#f7f7f5]"
          }`}
        >
          <div className={`flex h-10 items-center gap-2 border-b px-4 ${dark ? "border-[#1c1c1c] bg-[#141414]" : "border-[#e2e2e0] bg-[#ebebe9]"}`}>
            <i className="h-3 w-3 rounded-full bg-[#ff5f57]" />
            <i className="h-3 w-3 rounded-full bg-[#febc2e]" />
            <i className="h-3 w-3 rounded-full bg-[#28c840]" />
            <span
              className={`mx-auto flex h-6 w-[min(320px,50%)] items-center justify-center rounded-md text-xs ${
                dark ? "bg-[#0c0c0c] text-[#767676]" : "bg-white text-[#8a8a8a]"
              }`}
            >
              yourname.design
            </span>
            <span className="w-[52px]" />
          </div>
          <div className="h-[760px] overflow-y-auto overflow-x-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">{template}</div>
        </div>
      )}
    </div>
  );
}