About Design System

Breakpoint

Portfolio Design System

Operational component, token, layout, media, and rule catalog for the Portfolio site. It is built for live UI review by humans and for repeatable implementation by agents.

v0.40.1 @portfolio/design-system Astro

Changelog

v0.18.0

Simplified page-template navigation and activity-based featuring

  • Collapsed the duplicate Page Template navigation levels into one clickable and expandable top-level entry while preserving the existing documentation route.
  • Changed Project Hero data selection so the most recently updated public project becomes the featured tile automatically, with exported_at as the fallback date.
  • Updated Project Hero, Project Item, and Home Page documentation and Essences to replace the manually selected crown-project rule with the activity-based contract.

Git tag: design-system/v0.18.0

Commit range: design-system/v0.17.0 -> design-system/v0.18.0

  1. db4f4e6 Clean up Design System navigation and project featuring
  2. design-system/v0.18.0 Update Design System changelog for v0.18.0
v0.17.0

SQVL-MESH topographic animation media

  • Added SQVL-MESH as a public Project with a Portfolio-owned topographic mesh visual.
  • Added reusable realtime SVG animation, source scene, retained draft, and responsive MP4/WebM wrapper documentation under Media / Animations.
  • Extended the standard animation renderer with mobile, tablet, desktop, and ultra-wide 30 fps outputs that preserve one composition scale across resolutions.

Git tag: design-system/v0.17.0

Commit range: design-system/v0.16.1 -> design-system/v0.17.0

  1. 356364f Add SQVL-MESH project visual
  2. design-system/v0.17.0 Update Design System changelog for v0.17.0
v0.16.1

Header middle-part motion refinement

  • Raised the continuous downward-scroll threshold for hiding Header Middle Part from 256px to 360px.
  • Slowed only the hide transition to 220ms for movement and 180ms for opacity while preserving the existing reveal timing.
  • Updated the live Header documentation and essence to match the released interaction rule.

Git tag: design-system/v0.16.1

Commit range: design-system/v0.16.0 -> design-system/v0.16.1

  1. 4ccdce0 Refine header middle part hide motion
  2. design-system/v0.16.1 Update Design System changelog for v0.16.1
v0.16.0

Projects taxonomy and mobile shell stability

  • Renamed the public Use Cases model and project-specific Design System components to Projects, with compatibility redirects for existing routes.
  • Aligned Project Card, Project Hero, Project Header, Project Item, Project Landing Page, Project Story Page, Projects Index Page, and Related Projects across code, registry, documentation, and essences.
  • Made Header Bottom Part presence explicit and added a stable expanded Header offset so mobile Homepage Hero height no longer changes while Header collapses.

Git tag: design-system/v0.16.0

Commit range: design-system/v0.15.0 -> design-system/v0.16.0

  1. 3e27aa6 Rename use cases to projects and fix mobile layout
  2. design-system/v0.16.0 Update Design System changelog for v0.16.0
v0.15.0

Agent Resource scaffolding media and shared use-case visuals

  • Added Scaffolding Animation and its responsive MP4/WebM wrapper as the canonical Agent Resource visual, with the realtime SVG retained as source and fallback.
  • Centralized use-case visual selection so cards, items, and headers consume the same assigned animation without parent-level visual overrides.
  • Updated the mobile Use Case Hero crown tile to use the full small viewport height while preserving the compact gallery tiles that follow it.

Git tag: design-system/v0.15.0

Commit range: design-system/v0.14.0 -> design-system/v0.15.0

  1. e40a26e Add Agent Resource scaffolding visual
  2. design-system/v0.15.0 Update Design System changelog for v0.15.0
v0.14.0

Agent-ready use-case context and source-authored stories

  • Replaced the legacy Use Case Page with separate Use Case Landing Page and Use Case Story Page templates.
  • Added Agent Ready Project Brief as the canonical human-and-machine context block with Markdown, JSON-LD, prototype/demo, and contact behavior.
  • Removed obsolete use-case experiments and synthetic article body headings so long-form pages preserve the Wiki-authored structure.

Git tag: design-system/v0.14.0

Commit range: design-system/v0.13.0 -> design-system/v0.14.0

  1. 8818240 Rebuild use-case pages around agent-ready context
  2. design-system/v0.14.0 Update Design System changelog for v0.14.0
v0.13.0

Route-scoped documentation and persistent navigation

  • Split the operational Design System into registry-backed documentation routes so each page loads only its own document and preview dependencies.
  • Added Astro client navigation with one persistent Menu Container, preserved menu state across routes, and adapted interactive previews to the page lifecycle.
  • Added the canonical `Loading Spinner` and a destination-aware loading state for Design System route transitions.

Git tag: design-system/v0.13.0

Commit range: design-system/v0.12.0 -> design-system/v0.13.0

  1. a410423 Split design system documentation into routes
  2. design-system/v0.13.0 Update Design System changelog for v0.13.0
v0.12.0

Use-case composition and responsive animation media

  • Added `Use Case Header` and `Rich Text Summary`, unified public use-case title/summary fields, and removed superseded article body wrappers.
  • Consolidated use-case visuals around Network Path and Debug Square while removing the three retired animation families.
  • Added native responsive MP4/WebM rendering through 4K with container-aware selection, reduced-motion posters, and runtime source-animation fallback.

Git tag: design-system/v0.12.0

Commit range: design-system/v0.11.0 -> design-system/v0.12.0

  1. 7a22b43 Add responsive animation media and refine use-case pages
  2. design-system/v0.12.0 Update Design System changelog for v0.12.0
v0.11.0

Git-backed Design System changelog

  • Added `About Design System` as the first orientation page above Tokens.
  • Moved changelog data into a dedicated module with latest-first rendering and git evidence per version.
  • Added top-level Menu item support so direct navigation items can exist without collapsible sections.

Git tag: design-system/v0.11.0

Commit range: design-system/v0.10.0 -> design-system/v0.11.0

  1. design-system/v0.11.0 Add git-backed design system changelog
v0.10.0

Pre-renderable animation wrappers

  • Added video-wrapper components for every use-case animation family.
  • Kept runtime animations as source/fallback children under their matching video wrappers.
  • Routed Use Case Card visual keys through wrappers so WebM/MP4 loops can replace runtime motion without parent overrides.

Git tag: design-system/v0.10.0

Commit range: c7f1e8c

  1. c7f1e8c Add pre-renderable animation wrappers
v0.9.0

Animation system and use-case visual polish

  • Moved animation components under Media / Animations and renamed `Use Case Hero Item` to reusable `Use Case Item`.
  • Promoted the clustered Network Path Animation direction and added depth parallax with endpoint-safe path recalculation.
  • Added use-case tile arrow affordance, mobile height guards, and crisp black shadow for inverse tile text/icons.

Git tag: design-system/v0.9.0

Commit range: b49f8a9 -> 490f20b

  1. b49f8a9 Promote OpCon Graph use-case visuals
  2. 490f20b Refine use-case visuals and content
v0.8.0

Page Template footer and real route alignment

  • Added Footer as a Page Template child.
  • Aligned the real `/design-system/` route with Generic Page Template inheritance while keeping Component Page footer-free as an exception.
  • Fixed missing use-case visuals to default to the explicit stub animation.

Git tag: design-system/v0.8.0

Commit range: 4450345 -> 6b32c43

  1. 4450345 Normalize page shell and portfolio content
  2. 6b32c43 Route design system through generic page template
v0.7.0

Rich Text and content body contracts

  • Added Rich Text and subcomponents for headings, subheadings, paragraphs, lists, quotes, images, and code blocks.
  • Migrated Article Page and Use Case Page body rendering toward shared Rich Text behavior.
  • Moved use-case visual key mapping into Portfolio data instead of guessing from content strings.

Git tag: design-system/v0.7.0

Commit range: d8ff877 -> 8e43625

  1. d8ff877 Render use-case markdown body
  2. 33f96cb Use medium markdown headings
  3. 8e43625 Add rich text content blocks
v0.6.0

Use-case portfolio surface

  • Added public use-case pages and homepage use-case gallery patterns.
  • Connected LifeGraph and later use-case snapshots from Wiki/Portfolio content data.
  • Introduced use-case-specific visual keys while keeping presentation owned by the Design System.

Git tag: design-system/v0.6.0

Commit range: 5a9f00c -> 0d62df1

  1. 5a9f00c Add public use-cases and homepage contact CTA
  2. d7a622b Generalize portfolio content blocks
  3. 0d62df1 Update LifeGraph use-case snapshot
v0.5.0

Homepage and article visual system

  • Captured owner-led article visual direction and homepage section boundaries.
  • Added Article Card, Article Hero, related reading, tags, gradients, shadows, and floating contact button refinements.
  • Cleaned token pages for gradients, shadows, corner radius, and floating button ownership.

Git tag: design-system/v0.5.0

Commit range: 99540b1 -> dfee265

  1. 99540b1 Refine homepage article visual system
  2. 2d029d9 Refine header home button gradient treatment
  3. a03a911 Refine notes article UI and animated accents
  4. d5c9c8f Close article path backlog batch
  5. dfee265 Refine design system tokens and floating button
v0.4.0

Interaction, content, surface, header, and menu spacing

  • Added semantic spacing tokens and migrated interactive components to shared spacing contracts.
  • Scoped preview breakpoint switching to preview frames instead of the real viewport.
  • Finalized Header and side-menu spacing ownership, including compact menu rhythm.

Git tag: design-system/v0.4.0

Commit range: f8a45a7 -> 5394e11

  1. f8a45a7 Polish header and interaction design system
  2. de0b728 Refine header subnavigation
  3. 6777988 Refine design system header and menu layout
  4. d332992 Fix design system header scroll behavior
  5. bf13e4d Align interactive controls with semantic spacing
  6. 7257296 Migrate content containers to semantic spacing
  7. b23144b Fix design system preview and spacing regressions
  8. c40ec3d Apply surface spacing tokens
  9. 6a9dfc3 Fix touch breakpoint switcher
  10. eee8141 Isolate preview breakpoint state
  11. b19db89 Fix design system menu state and mobile overlay
  12. 5394e11 Finalize header and menu spacing contracts
v0.3.0

Shell composition and essence documentation

  • Introduced the Design System master page template and Header/Page Template composition.
  • Seeded local Design System agents and essence artifacts.
  • Added mandatory essence handoff and foundation rules for component work.

Git tag: design-system/v0.3.0

Commit range: 0528f68 -> bc159cf

  1. 0528f68 Refine design system page template composition
  2. 8b45a15 Refine clickable design system menu
  3. 9e6b7c9 Refine design system template controls
  4. 5216caa Refine design system composition list
  5. 2ef9a13 Spawn portfolio design system agents
  6. e28cc1f Fix design system essence handoff
  7. 3f560a1 Expand design system essence catalog
  8. bc159cf Add design system component page header
v0.2.0

Tokens, previews, and component page shell

  • Defined breakpoint tokens and connected them to site and preview behavior.
  • Added `Component Page Template` and simplified it into a preview-first flow.
  • Introduced `Component Preview` with prop switchers and reusable preview framing.

Git tag: design-system/v0.2.0

Commit range: a248412 -> 60f3209

  1. a248412 Define design system breakpoint tokens
  2. c2ce80a Apply breakpoint tokens across site
  3. 8629a6b Add design system component page template
  4. 60f3209 Refine design system preview primitives
v0.1.0

Local package and operational catalog

  • Started `@portfolio/design-system` as the shared package for Portfolio UI.
  • Built the first operational Design System page with live component documentation.
  • Refined Design System navigation into a component catalog instead of a static docs page.

Git tag: design-system/v0.1.0

Commit range: 1c55ed4 -> 9e6fd05

  1. 1c55ed4 Build Astro MVP skeleton
  2. 22f7dc7 Build operational design system page
  3. 9e6fd05 Refine design system navigation