Design system
Components
Everything here ships somewhere. Nothing on this page was built for this page. Each row names the live URL you can go and check it on.
01
Design components
Built on the Framer canvas, with variants and property controls.
Brand Logo
3 variants: H 24px / H 20px / H 16px
used in Navigation
Profile Rail
2 variants: Rail / Wide
ships on /profile, /profile/activity
Tabs
1 variant · 9 props: four labels, four links, and Active
ships on /profile, /system
Pane CTA
3 variants: Download / Mail / Calendar · 2 props
ships on /profile/activity, /profile/connections
Navigation
2 variants: Default / Mobile · 4 props
ships on /, /about-me
Footer
2 variants: Default / Mobile · 2 props
ships on /, /about-me
Call Out
1 variant: Default
ships on /, /about-me
Hero Header
3 variants: Default / Tablet / Mobile · 4 props
ships on /archives, /bookmarks
Chip
1 variant: Default, plus a hover state · 3 props
not currently placed
Tag
1 variant: Default · 1 prop
used in Navigation
Card Archive
1 variant: Default · 2 props
ships on /archives
Card Review
1 variant: Default · 3 props
ships on /about-me
Card Note
2 variants: Default / Tablet · 6 props
not currently placed
Card Project
1 variant: Default
ships on /work
Dock
8 variants: Default / Hover · Home / Hover · Notes / Hover · Bookmarks / Hover · Archive / Hover · Shhhcribble / Hover · Hendri / Mobile · 4 props
ships on /, /about-me
Dock Icon
1 variant: small · 8 props
used in Dock
Button
5 variants: Default / Loading / Disabled / Success / Error · 2 props
used in Navigation, Profile Rail
Notification
2 variants: Default / Expanded
ships on /, /about-me
Accordion
4 variants: All closed / Q1 open / Q2 open / Q3 open · 7 props
ships on /, /shhhcribble
Question
2 variants: Open / Closed · 4 props
used in Accordion
Sticky Note
1 variant: Note · 1 prop
ships on /
Link Card
1 variant: Card · 5 props
ships on /
Project Intro
1 variant: Default · 2 props
ships on /ghostdraft-icons
02
Code components
Written in TypeScript against Framer’s runtime. This is the half most portfolios do not have.
TypewriterEffect.tsx
7 KB
not currently placed
Favicon.tsx
1 KB
ships on /bookmarks
ThemeToggle.tsx
9 KB
not currently placed
CanvasRulers.tsx
22 KB
ships on /, /about-me
AgentTerminal.tsx
29 KB
ships on /
RadioKnob.tsx
30 KB
not currently placed
ThingCardArt.tsx
46 KB
ships on /about-me, /profile
StickerBoard.tsx
106 KB
ships on /bettr-stickers
ArticleEnhancer.tsx
67 KB
ships on /notes/:Articles
IconAtlas.tsx
64 KB
ships on /ghostdraft-icons
ArticleTOC.tsx
49 KB
ships on /notes/:Articles
ScaleLogoMobile.tsx
2 KB
not currently placed
ProfileCopy.tsx
7 KB
not currently placed