Projects

UXLab Digital Garden

On TrackSproutPublicFeatured
NuxtNuxt ContentTailwind

Outcome

A usable personal digital garden.

Notes

This project is intentionally iterative.

Snippet from Helium's Design System to convert to card style

<a href="" title="" class="group relative rounded-2xl border border-gray-200 bg-white p-4 shadow-sm hover:shadow-lg dark:border-gray-700 dark:bg-white/5 transition flex flex-col w-full h-full overflow-hidden" rel="noopener noreferrer"><div class="w-full flex flex-col items-start min-w-0 h-full"><div class="aspect-square w-20 max-w-full overflow-hidden rounded-lg bg-gray-100 dark:bg-white/10 flex items-center justify-center border border-gray-200 dark:border-white/10 shadow-sm mb-2 px-2"><img alt="callout Icon" class="h-16 w-16 object-contain p-1 group-hover:scale-105 transition-transform" src=""></div><h5 class="text-base font-semibold text-gray-900 dark:text-white truncate w-full text-left px-2">Callout</h5><p class="text-sm text-gray-500 dark:text-gray-400 mt-1 w-full text-left px-2">Callout component for highlighting important information or actions.</p><div class="text-xs text-gray-400 dark:text-gray-500 mt-1 font-mono w-full max-w-full px-2 block text-left path-break" title="">/​components/​content/​callout/​v2/​callout</div></div></a>

Screenshots

Next Actions

  • Build Today page with quick capture
  • Add collection filters to projects page
  • Create activity heatmap component
  • Configure Open Graph images
  • a: Appearance
  • ?: Keyboard shortcuts