Enhance visual hierarchy and hover interactions for portfolio cards

[JamesDeRaja]

Motivation

• The UI needed clearer visual hierarchy so less-important cards could appear subtler (dotted outlines), important cards could read stronger (thick outlines), and priority cards could use tint/shadow to stand out, plus shape variety and nicer hover feedback across pages.

Description

• Added new importance (low|normal|high|priority) and shape (rounded|soft|rect) props to BentoCard and an automatic default importance resolver via getDefaultImportance so variants map to sensible defaults.
• Introduced importanceMap and shapeMap and enhanced the class assembly in src/components/bento/BentoCard.tsx to emit dotted/thick/tinted styles and subtle lift/scale on hover.
• Added reusable global card utilities in src/index.css (.card-surface, .card-surface--low/--high/--priority) to provide dashed borders, stronger borders, and tinted/shadowed priority surfaces with light-mode variants.
• Applied the new importance/shape classes across the site where bento cards and shared card components are used, updating WorkCard, EvidenceCard, StoreMetricsCard, and the bento sections (Hero, CaseStudies, Contact, Evidence, Experience, Skills, TechFocus) for consistent treatment.

Testing

• Ran the production build with npm run build and the Vite build completed successfully (chunks built; CSS/JS assets emitted).

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
portfolio	Ready	Preview, Comment	Apr 26, 2026 7:09pm