-```
-
-**Fix:** Use `@unpic/react` for optimized images:
-
-```tsx
-import { Image } from "@unpic/react";
-
-
-
- {/* content */}
-
;
-```
-
-For non-hero images, use `loading="lazy"`:
-
-```tsx
-
-```
-
-**Impact:** Slow initial page load, poor Lighthouse scores, wasted bandwidth.
-
----
-
-### 7. Performance - Header Media Query Runs on Every Render
-
-**File:** `src/components/Header/header.tsx:9`
-
-**Issue:** `useMediaQuery` hook re-evaluates on every render and returns completely different JSX.
-
-```tsx
-const isMoblie = useMediaQuery("screen and (max-width: 768px)"); // β Typo + re-renders
-
-if (isMoblie) {
- return
...
; // Different component tree
-}
-return
...
; // Different component tree
-```
-
-**Problems:**
-
-1. Typo: `isMoblie` should be `isMobile`
-2. Causes unnecessary re-renders
-3. Returns completely different components instead of using CSS
-
-**Fix:** Use CSS for responsive behavior:
-
-```tsx
-export default function Header() {
- const [menuOpen, setMenuOpen] = useState(false);
- const ref = useClickAway
(() => setMenuOpen(false));
-
- return (
-
- );
-}
-```
-
-**Impact:** Poor performance on mobile, inconsistent component tree causes React to unmount/remount.
-
----
-
-### 8. Performance - Framer Motion Animations May Cause Layout Shifts
-
-**File:** `src/components/Header/header.tsx:70-76`
-
-**Issue:** Animating `height: auto` can cause reflows and janky animations.
-
-```tsx
-
-```
-
-**Fix:** Use `maxHeight` or `transform: scaleY()` instead:
-
-```tsx
-
-```
-
-Or use transform for better performance:
-
-```tsx
-
-```
-
-**Impact:** Janky animations, poor performance on low-end devices.
-
----
-
-### 9. Button Component - className Prop Not Spread Correctly
-
-**File:** `src/components/Button/button.tsx:40`
-
-**Issue:** `className` is passed as array element instead of string:
-
-```tsx
-className={cn(
- "...",
- { /* variants */ },
- size === "small" && "...",
- ...className, // β Spreads string as array
-)}
-```
-
-**Fix:**
-
-```tsx
-className={cn(
- "cursor-pointer rounded-xl px-8 py-3...",
- {
- "border border-green-800...": variant === "primary",
- // ... other variants
- },
- size === "small" && "px-4 py-3 text-xs",
- className // β
Just pass it directly
-)}
-```
-
-The `cn` function (via `clsx`) already handles strings correctly. Spreading strings creates issues.
-
-**Impact:** Custom classNames may not apply correctly, potential runtime errors.
-
----
-
-### 10. Missing Error Boundaries
-
-**Files:** No error boundaries found
-
-**Issue:** No error boundaries to catch runtime errors in components.
-
-**Fix:** Add error boundary in root route:
-
-```tsx
-// src/components/ErrorBoundary/error-boundary.tsx
-import { Component, type ReactNode } from "react";
-
-interface Props {
- children: ReactNode;
- fallback?: ReactNode;
-}
-
-interface State {
- hasError: boolean;
- error?: Error;
-}
-
-export class ErrorBoundary extends Component {
- constructor(props: Props) {
- super(props);
- this.state = { hasError: false };
- }
-
- static getDerivedStateFromError(error: Error): State {
- return { hasError: true, error };
- }
-
- componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
- console.error("Error caught by boundary:", error, errorInfo);
- }
-
- render() {
- if (this.state.hasError) {
- return (
- this.props.fallback || (
-
-
-
Something went wrong
-
Please refresh the page
-
-
-
-// Good - explicit dimensions
-
-```
-
-#### 2. Use CSS Aspect Ratio
-
-```css
-.hero-image {
- aspect-ratio: 16 / 9;
- width: 100%;
-}
-
-.event-thumbnail {
- aspect-ratio: 4 / 3;
- width: 100%;
-}
-```
-
-#### 3. Reserve Space for Dynamic Content
-
-```typescript
-// For TanStack Devtools or other dynamic UI
-.devtools-container {
- min-height: 56px; /* Reserve space before load */
-}
-```
-
-#### 4. Optimize Font Loading (Prevents FOIT/FOUT)
-
-See "Priority 3" below for font optimization details.
-
-### Expected Improvement
-
-**+10-15 points** to performance score
-
----
-
-## Priority 2: Implement Responsive Images πΌοΈ
-
-**Impact:** Est. savings of 327 KiB
-
-### Problem
-
-Images are served at larger sizes than needed for the viewport:
-
-- `festival.webp` - 146 KB wasted
-- `recreation.webp` - 103 KB wasted
-- `get_involved.webp` - 85 KB wasted
-
-### Solution 1: Use @unpic/react (Already in dependencies!)
-
-```typescript
-import { Image } from '@unpic/react';
-
-
-```
-
-### Solution 2: Native Picture Element
-
-```tsx
-
-
-
-
-```
-
-### Solution 3: Generate Multiple Image Sizes
-
-Add a build step to generate responsive images:
-
-```bash
-npm install -D sharp
-```
-
-Create a script `scripts/generate-images.js`:
-
-```javascript
-import sharp from "sharp";
-import { readdir } from "fs/promises";
-import path from "path";
-
-const sizes = [640, 768, 1024, 1280, 1536];
-const inputDir = "./public";
-const images = ["festival.webp", "recreation.webp", "get_involved.webp"];
-
-for (const image of images) {
- const baseName = path.parse(image).name;
-
- for (const size of sizes) {
- await sharp(path.join(inputDir, image))
- .resize(size, null, { withoutEnlargement: true })
- .webp({ quality: 85 })
- .toFile(path.join(inputDir, `${baseName}-${size}.webp`));
- }
-}
-```
-
-Add to package.json:
-
-```json
-{
- "scripts": {
- "generate-images": "node scripts/generate-images.js",
- "prebuild": "npm run generate-images"
- }
-}
-```
-
-### Expected Improvement
-
-**+3-5 points** to performance score
-
----
-
-## Priority 3: Optimize Font Loading π€
-
-**Impact:** Est. savings of 386ms render blocking time
-
-### Current Problem
-
-Google Fonts CSS is blocking render.
-
-### Solution 1: Async Load External Fonts (Quick Fix)
-
-Update font loading in `src/routes/__root.tsx`:
-
-```html
-
-
-
-
-
-
-
-```
-
-### Solution 2: Self-Host Fonts (Best Practice)
-
-```bash
-npm install @fontsource/inter @fontsource/libre-baskerville @fontsource/montserrat @fontsource/vollkorn-sc
-```
-
-In `src/routes/__root.tsx` or `src/styles.css`:
-
-```typescript
-// Import only the weights you need
-import "@fontsource/inter/400.css";
-import "@fontsource/inter/700.css";
-import "@fontsource/libre-baskerville/400.css";
-import "@fontsource/libre-baskerville/700.css";
-import "@fontsource/montserrat/400.css";
-import "@fontsource/montserrat/700.css";
-import "@fontsource/vollkorn-sc/400.css";
-import "@fontsource/vollkorn-sc/700.css";
-```
-
-Then update `src/styles.css` to use local fonts:
-
-```css
-/* Remove or comment out @import statements for Google Fonts */
-/* @import url('https://fonts.googleapis.com/...'); */
-
-/* Font families remain the same */
-:root {
- --font-display: "Vollkorn SC", serif;
- --font-body: "Inter", sans-serif;
-}
-```
-
-### Expected Improvement
-
-**+2-3 points** to performance score
-
----
-
-## Priority 4: Reduce Unused JavaScript π¦
-
-**Impact:** Est. savings of 422 KiB (75 KB from main bundle)
-
-### Problem
-
-Main application bundle contains ~75 KB of unused JavaScript code.
-
-### Solutions
-
-#### 1. Lazy Load Routes
-
-TanStack Router already supports code splitting. Use lazy loading for non-critical routes:
-
-```typescript
-// src/routes/media.tsx
-import { createFileRoute, lazyRouteComponent } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/media")({
- component: lazyRouteComponent(() => import("../components/MediaGallery/media-gallery")),
-});
-```
-
-#### 2. Lazy Load Heavy Components
-
-```typescript
-import { lazy, Suspense } from 'react';
-
-// Lazy load non-critical components
-const EventCard = lazy(() => import('@/components/Event/event-card'));
-
-function EventList() {
- return (
- Loading...