## Overview Migrate tomny.dev from Material UI (MUI v7) to [**@tomny-dev/uzi**](https://github.com/tomny-dev/uzi), a lightweight React component library. The migrated site should also serve as a **live showcase** of the uzi framework. --- ## Current Stack | Category | Technology | |---|---| | UI Framework | React 19 + Material UI v7 | | Bundler | Vite 6.3+ | | Language | TypeScript ~5.7 | | Styling | Emotion + styled-components | | Icons | @mui/icons-material | ## Target Stack | Category | Technology | |---|---| | UI Framework | React 19 + **@tomny-dev/uzi** (~20 components) | | Bundler | Vite (unchanged) | | Language | TypeScript ~5.7 (unchanged) | | Styling | uzi's CSS modules internally | | Icons | lucide-react or Heroicons | --- ## Dependencies to Remove - `@mui/material` - `@emotion/react`, `@emotion/styled` - `@mui/icons-material` - `styled-components` - `@mui/styled-engine-sc` ## New Dependency ```bash pnpm add @tomny-dev/uzi lucide-react ``` --- ## Component Replacement Map | MUI | uzi Equivalent | |---|---| | `AppBar` | `TopBar` or native `<nav>` | | `Avatar` | `<Avatar>` | | `Chip` / `Badge` | `<Pill>` | | `Card` / `CardContent` | `<Card>` | | `Button` | `<Button>` (primary/secondary/outline/ghost) | | `Modal` / `Dialog` | `<Modal>` | | `TextField` | `<Input>` + `<Label>` | | `Select` | `<Select>` | | `Checkbox` | `<Checkbox>` | | `ThemeProvider` + `createTheme()` | `<ThemeProvider defaultTheme="system" defaultAccent="blue">` | --- ## Migration Checklist ### Core Migration (8 steps) - [ ] **Step 1** — Add `@tomny-dev/uzi` dependency and remove MUI packages - [ ] **Step 2** — Replace icon library (`@mui/icons-material` → `lucide-react`) - [ ] **Step 3** — Update app entry point: add uzi CSS import + ThemeProvider wrapper in `src/main.tsx` - [ ] **Step 4** — Migrate NavBar component (AppBar → TopBar) - [ ] **Step 5** — Migrate About section (Avatar + Pill for tech chips) - [ ] **Step 6** — Migrate Projects section (Card grid + Button CTAs) - [ ] **Step 7** — Simplify/remove custom `theme.ts` (uzi has built-in theming with accent palettes) - [ ] **Step 8** — Update App.tsx root component (remove CssBaseline, clean up MUI imports) ### uzi Showcase (4 steps) - [ ] **Step 9** — Update About section: introduce yourself as creator of `@tomny-dev/uzi`; update tech chips to highlight React, Radix UI, CSS modules, TypeScript, Vite - [ ] **Step 10** — Transform Projects section into a Features showcase with component preview cards (Button variants, Card tones, Pill colors, Modal, Toast), quick-start code snippet (`pnpm add @tomny-dev/uzi`), and links to GitHub/npm - [ ] **Step 11** — Add new Components Showcase page: interactive playground with live previews of all 20+ uzi components + copyable code snippets for each - [ ] **Step 12** — Build, verify production output, check bundle size reduction vs. MUI baseline --- ## Expected Benefits - **Smaller bundle**: ~6 Radix UI deps vs. MUI's larger footprint - **Cleaner API**: CSS modules instead of styled-components/Emotion - **Live demo**: The portfolio site itself showcases what uzi can build - **Simpler theming**: Built-in light/dark/system + accent palettes (blue, cyan, violet, emerald, amber, rose) --- ## Key Risks / Notes 1. MUI `sx` props and styled-component patterns → must be replaced with uzi's CSS module approach 2. No direct icon library equivalent in uzi — need to choose a replacement 3. Theming API is completely different (MUI tokens vs. uzi accent palettes) 4. Current site is a simple portfolio (~6 source files), so the ~20 component limit of uzi should be sufficient --- ## Reference Files - `src/main.tsx` — App entry point, ThemeProvider wrapper - `src/App.tsx` — Root component (NavBar + About + Projects) - `src/theme.ts` — MUI theme config (remove or simplify) - `src/components/NavBar.tsx` — AppBar → TopBar - `src/components/About.tsx` — Avatar + tech chips - `src/components/Projects.tsx` — Card grid showcase