Personal Hero

1const CONTENT = {
2  name: "Your Name",
3  tagline: "Designer-engineer building calm software.",
4  location: "Somewhere on Earth",
5  status: "shipping" as const,
6  /** Set to your portrait path (e.g. `/me.jpg`) after install. */
7  imageSrc: "",
8  imageAlt: "",
9  ledeLinks: [
10    { label: "studio", href: "https://example.com" },
11    { label: "writing", href: "/writing" },
12  ],
13  ledeBefore: "Shipping at ",
14  ledeBetween: ", writing at ",
15  ledeAfter: ".",
16}
17 
18type StatusKind = "shipping" | "working" | "dormant"
19 
20const statusCopy: Record<StatusKind, string> = {
21  shipping: "shipping",
22  working: "working",
23  dormant: "dormant",
24}
25 
26const statusDot: Record<StatusKind, string> = {
27  shipping: "bg-emerald-500",
28  working: "bg-muted-foreground",
29  dormant: "bg-muted-foreground/50",
30}
31 
32export function PersonalHero({
33  name = CONTENT.name,
34  tagline = CONTENT.tagline,
35  location = CONTENT.location,
36  status = CONTENT.status,
37  imageSrc = CONTENT.imageSrc,
38  imageAlt = CONTENT.imageAlt,
39  ledeLinks = CONTENT.ledeLinks,
40  ledeBefore = CONTENT.ledeBefore,
41  ledeBetween = CONTENT.ledeBetween,
42  ledeAfter = CONTENT.ledeAfter,
43  className,
44}: {
45  name?: string
46  tagline?: string
47  location?: string
48  status?: StatusKind | null
49  imageSrc?: string
50  imageAlt?: string
51  ledeLinks?: Array<{ label: string; href: string; external?: boolean }>
52  ledeBefore?: string
53  ledeBetween?: string
54  ledeAfter?: string
55  className?: string
56} = {}) {
57  const portrait = imageSrc.trim()
58 
59  return (
60    <section
61      className={className ?? "mx-auto max-w-[640px] pt-14 sm:pt-20"}
62    >
63      <div className="flex items-start justify-between gap-4">
64        <div className="flex min-w-0 items-start gap-4">
65          {portrait ? (
66            <img
67              src={portrait}
68              alt={imageAlt.trim() || name}
69              width={72}
70              height={72}
71              className="mt-1 size-18 shrink-0 rounded-full border border-border-subtle bg-muted object-cover"
72            />
73          ) : null}
74          <h1 className="min-w-0 pt-1 text-[2rem] font-medium tracking-tight text-foreground sm:text-[2.5rem]">
75            {name}
76          </h1>
77        </div>
78        {status ? <StatusDot status={status} /> : null}
79      </div>
80 
81      <p className="mt-5 max-w-[36ch] text-[15px] leading-[1.65] text-foreground">
82        {tagline}
83      </p>
84 
85      {ledeLinks.length > 0 ? (
86        <p className="mt-1.5 max-w-[42ch] text-[14px] leading-[1.65] text-muted-foreground">
87          {ledeBefore}
88// … truncated