Add professional README showcasing project, stack, and patterns

This commit is contained in:
2026-08-26 13:31:29 +10:00
parent 797efd3760
commit 640b0df107

78
README.md Normal file
View File

@@ -0,0 +1,78 @@
# Sam Pursuits
**A personal pursuits portfolio — a React showcase of interests, projects, and the work outside the day job.**
An interactive single-page application that presents personal pursuits — gardening, electronics, tinkering, and life projects — as a curated, editorial experience. Built to demonstrate front-end architecture, component design, and modern React patterns.
## What it is
A portfolio site that showcases what I build and explore beyond professional work. Each pursuit gets a dedicated page with rich content blocks, stats, and links, presented in a clean, motion-rich interface.
## Tech stack
| Layer | Technology |
|-------|-----------|
| Framework | React 19 |
| Build | Vite 6 |
| Styling | Tailwind CSS 4 (via `@tailwindcss/vite`) |
| Animation | Motion 12 (framer-motion successor) |
| Routing | React Router 7 |
| Icons | lucide-react |
| Language | TypeScript |
## Architecture & design patterns
- **Component-driven design** — small, focused components (`PursuitCard`, `PursuitHero`, `SectionCard`, `StatBadge`, `ExternalLinkCard`) composed into pages
- **Data-driven content** — all content lives in typed data modules (`pursuitsData.ts`, `navItems.ts`), so adding a pursuit is pure data entry, no new components
- **Reusable layout shell** — shared `Layout` + `PageHeader` provide consistent page chrome
- **Reusable content blocks** — `ContentBlocks` renders heterogeneous content (prose, stats, media, links) from structured data
- **Horizontal tabs** — `HorizontalTabs` for sub-navigation within a page
- **AI chat box** — embedded assistant interface (`AiChatBox`) for interactive engagement
- **Fade/slide animation patterns** — motion variants (`hidden` → `show` with staggered children) for consistent page transitions
- **Route-based pages** — React Router for multi-page feel within an SPA
## Pages
| Route | Purpose |
|-------|---------|
| `/` | Home — hero + pursuit index |
| `/interests` | Interest areas overview |
| `/pursuits/:id` | Individual pursuit deep-dive |
| `/ai-chat` | Interactive AI assistant |
| `/contact` | Contact + links |
## Standards
- TypeScript strict mode
- Semantic HTML with accessible landmarks
- Tailwind utility-first styling with design tokens
- Fully responsive (mobile → desktop)
- Performance-minded (Vite code-splitting, no heavy dependencies)
## Getting started
```bash
npm install
npm run dev # development server
npm run build # production build
npm run preview # preview production build
```
## Structure
```
src/
├── components/ # Reusable UI components
│ ├── Layout.tsx / PageHeader.tsx / SectionCard.tsx
│ ├── PursuitCard.tsx / PursuitHero.tsx / StatBadge.tsx
│ ├── ContentBlocks.tsx / HorizontalTabs.tsx / ExternalLinkCard.tsx
│ └── AiChatBox.tsx
├── data/ # Typed content (pursuitsData.ts, navItems.ts)
├── pages/ # Route components (Home, Interests, PursuitPage, AiChat, Contact)
├── App.tsx # Router + app shell
└── main.tsx # Entry point
```
---
*One of several portfolio sites in the Sam Rolfe showcase family — see [sam-developer](https://gitea.lab.audasmedia.com.au/sam/sam-developer), [sam-devops](https://gitea.lab.audasmedia.com.au/sam/sam-devops), and [sam-iot-electronics](https://gitea.lab.audasmedia.com.au/sam/sam-iot-electronics).*