A resume profile with a sticky card holding the person, availability, summary and animated skill bars, beside an experience timeline whose line draws down and whose current role pulses, plus education.
Pallet · Remote
Brightwave · Copenhagen
Ticketfly · Berlin
npx shadcn@latest add https://hyperblur.dev/r/profile-resume-timeline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/profile-resume-timeline.tsx.
import { ProfileResumeTimeline } from "@/components/hyperblur/profile-resume-timeline"
<ProfileResumeTimeline name="Rasmus Holt" headline="Staff Frontend Engineer" />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Rasmus Holt" | Full name. |
| headline | string | "Staff Frontend Engineer" | Title under the name. |
| location | string | "Copenhagen, Denmark" | Location tag. |
| available | boolean | true | Show the Open to work tag. |
| summary | string | Short bio in the card. | |
| roles | { role; company; period; location; points: string[]; stack?: string[]; current?: boolean }[] | 3 roles | Experience entries, newest first. current pulses the node. |
| skills | { name: string; level: number }[] | 5 skills | Skill bars, level from 0 to 100. |
| education | { degree: string; school: string; period: string }[] | 1 entry | Education rows under the timeline. |
| links | { label: string; href: string }[] | GitHub, Email | Links beside the CV button. |
| cv | { label: string; href: string } | { label: "Download CV", href: "#cv" } | Primary download link. |
| accent | string | "#f59e0b" | Avatar, bars and timeline color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |