🚀 TheCruzat : Renaissance FED

A curated portfolio and component laboratory spanning React, Vue, Svelte, PHP, WordPress, and advanced WCAG accessibility patterns.

🛠 The Architectural Challenge

This project demonstrates a "Multi-Framework Island" architecture using Astro. The goal is to maintain a unified design system where components from different frameworks coexist, share a global Tailwind/CSS variable state, and pass a rigorous, unified testing suite.

Key Engineering Wins:

• DRY Source Display: Components live once in the codebase; the getComponentCode() utility reads their source at build time for syntax-highlighted demos.
• Cross-Framework Testing: A unified Vitest environment that handles JSDOM mounting for Vue, Svelte, and React simultaneously.
• WCAG 2.1 AA Compliance: Deeply audited components featuring semantic ARIA live regions and a high-contrast palette.

📂 Project Structure

src/
├── pages/                 # Astro page routes (CSS, Frameworks, PHP, etc.)
├── components/           # Framework-specific "Islands" (React, Vue, Svelte)
├── utils/                # Build-time utilities like getComponentCode.ts
└── styles/               # Tailwind + Design System variables

📦 Component Gallery

1. AudioPlayer (Vue 3)

• A11y: Implements aria-live="polite" for track changes and aria-current="track" for playlist sync.
• Logic: Manages async audio states and Internet Archive API streaming.

2. Animated Carousel (Svelte 4)

• Logic: Lean reactivity for autoplay and pause-on-interaction.
• Testing: Solved JSDOM mounting issues to ensure 100% test coverage.

3. Feedback Engine (React)

• UX: Sophisticated async feedback loops and managed focus transitions.

🧪 Testing & Validation

The project maintains a 100% green status across all framework islands.

# Run the multi-framework validation suite
npm test

🎨 Design System

The UI is governed by a strict accessibility-first system:

• Contrast: 4.5:1 ratio for text and 3:1 for UI components.
• Focus: Global :focus-visible implementation with 3px high-contrast indicators.
• Motion: Full support for prefers-reduced-motion.

🚀 Local Setup

This portfolio is designed to be self-contained and easy to review:

1. Run npm install
2. Run npm run dev
3. Open http://localhost:3000

Lead Engineer: Dan Cruzat Senior Front-End Engineer & UI Architect