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

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 and sam-devops.