77 lines
2.9 KiB
Markdown
77 lines
2.9 KiB
Markdown
# 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).*
|