From ada167a4f1944b99103ca42aae9d9ddb12ab8739 Mon Sep 17 00:00:00 2001
From: Sam Rolfe <samuelrolfe@gmail.com>
Date: Wed, 26 Aug 2026 13:31:30 +1000
Subject: [PATCH] Add professional README showcasing project, stack, and
 patterns

---
 README.md | 76 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..010f379
--- /dev/null
+++ b/README.md
@@ -0,0 +1,76 @@
+# 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).*