nanonude-com
Portfolio with state-machine interactions
Astro portfolio site with sophisticated 2-state interaction system for case study exploration
The portfolio
A case study portfolio with a distinctive interaction model. Not just hover effects - a proper 2-state system that changes how you explore the work.
The interaction system
IDLE state: Grid of portfolio cards, standard hover behavior.
EXPLORING state: Click any card to enter. Now hovering reveals project descriptions in overlays. Click again or click outside to return to IDLE.
This creates two modes of engagement:
- Scanning - quick visual overview
- Exploring - deeper information on demand
Design system
- 8px base unit grid system
- Utopia fluid scales for typography and spacing
- Brand pink (#F171A3) as primary accent
- Dark mode via localStorage toggle
Typography:
- Hanken Grotesk (sans) for body
- Instrument Serif for display
Grid: Complex 3-column layout with alternating card sizes (512px medium, 240px small, 24px gap).
Technical implementation
Each case study in /src/data/portfolio.ts includes:
- Image positioning data for 3 breakpoints (sm/md/lg)
- Hover overlay configuration (description, hoverColor)
- Optional reference links
The state machine lives in PortfolioGrid.astro - vanilla JavaScript, no framework needed.
Responsive strategy
Mobile-first with breakpoints at 768px (tablet) and 1088px (desktop). The exploring state only activates above 1024px - on mobile, tapping goes directly to project pages.