# Sam IoT & Electronics

**An IoT and electronics portfolio — showcasing hardware projects, sensor networks, and embedded systems built for the home and beyond.**

An interactive React showcase of 35+ IoT and electronics projects: ESP32 sensor networks, Zigbee devices, GPS vehicle tracking, home automation hardware, and electronics tinkering — each with dedicated project pages.

## What it is

A portfolio site that documents my IoT and electronics work: what was built, how it works, the hardware involved, and links to source repositories. Structured as a browsable project catalog with categories for IoT, pure electronics, and in-progress work.

## Tech stack

| Layer | Technology |
|-------|-----------|
| Framework | React 19 |
| Build | Vite 6 |
| Styling | Tailwind CSS 4 (via `@tailwindcss/vite`) |
| Animation | Motion 12 |
| Routing | React Router 7 |
| Icons | lucide-react |
| Language | TypeScript |

## Architecture & design patterns

- **Data-driven catalog** — all projects defined in typed `projectsData.ts`; adding a project is pure data entry
- **Project page template** — `ProjectPage` renders any project from structured data (overview, specs, hardware, links)
- **Reusable content blocks** — `ContentBlocks` handles heterogeneous content sections
- **Category navigation** — `HorizontalTabs` + route groups for IoT / Electronics / In-Progress
- **MySites component** — cross-links to related portfolio sites
- **Shared layout shell** — consistent `Layout` + `PageHeader` + nav from `navItems.ts`
- **AI chat box** — embedded assistant for engagement
- **Route-based pages** — multi-page SPA via React Router

## Pages

| Route | Purpose |
|-------|---------|
| `/` | Home — project overview |
| `/iot` | IoT projects (ESP32, sensors, automation) |
| `/electronics` | Electronics projects |
| `/project/:id` | Individual project deep-dive |
| `/in-progress` | Active/upcoming builds |
| `/ai-chat` | Interactive AI assistant |
| `/contact` | Contact + links |

## Standards

- TypeScript strict mode
- Semantic HTML, accessible landmarks
- Tailwind utility-first styling
- Fully responsive
- Content separated from presentation (data-driven pages)

## Getting started

```bash
npm install
npm run dev      # development server
npm run build    # production build
```

## Structure

```
src/
├── components/    # ProjectCard, MySites, ContentBlocks, HorizontalTabs,
│                  # ExternalLinkCard, Layout, PageHeader, AiChatBox
├── data/          # projectsData.ts, navItems.ts
├── pages/         # Home, IoT, Electronics, ProjectPage, InProgress, AiChat, Contact
├── App.tsx        # Router + app shell
└── main.tsx       # Entry point
```

---

*Part of the Sam Rolfe portfolio family — see [sam-pursuits](https://gitea.lab.audasmedia.com.au/sam/sam-pursuits) and [sam-devops](https://gitea.lab.audasmedia.com.au/sam/sam-devops).*