# Sam Developer

**A full-stack developer portfolio — career overview, AI systems, portfolio work, and a showcase of engineering craft.**

A polished React portfolio presenting a 30+ year coding career across 22 agencies and 20+ clients, with 35+ IoT projects. Includes a career overview, portfolio gallery, resume, AI systems showcase, image generation work, and the human side of engineering.

## What it is

The flagship portfolio site for employment outreach. It presents experience, skills, and projects in a motion-rich, editorial interface designed to make an impression — while demonstrating the front-end architecture and design patterns used to build it.

## Tech stack

| Layer | Technology |
|-------|-----------|
| Framework | React 19 |
| Build | Vite 6 |
| Styling | Tailwind CSS 4 (via `@tailwindcss/vite`) |
| Animation | Motion 12 (staggered fade/slide variants) |
| Routing | React Router 7 |
| Icons | lucide-react |
| AI | @google/genai (Gemini integrations) |
| Backend bits | Express + dotenv (API support) |
| Language | TypeScript |

## Architecture & design patterns

- **Motion design system** — shared `container`/`item` variants (fade-up, staggered children, ease-out timing) for consistent page animation
- **Stats-driven storytelling** — animated stat blocks (years coding, agencies, clients, IoT projects)
- **Domain pages** — AI Systems, Image Generation, and Beyond Code give depth beyond the resume
- **Route-based SPA** — React Router with shared `Layout` shell
- **Semantic hero** — editorial headline + tagline hierarchy
- **Accessible, responsive** — semantic HTML, full mobile support

## Pages

| Route | Purpose |
|-------|---------|
| `/` | Home — hero, stats, career overview |
| `/portfolio` | Portfolio gallery of key projects |
| `/resume` | Detailed resume / experience |
| `/ai-systems` | AI systems & agentic development |
| `/image-gen` | AI image generation work |
| `/beyond-code` | Interests & the human side |
| `/contact` | Contact + links |

## Standards

- TypeScript strict mode
- Semantic HTML, accessible landmarks
- Tailwind utility-first styling with design tokens
- Motion 12 animation patterns (variants, stagger, easing)
- Fully responsive

## Getting started

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

## Structure

```
src/
├── components/    # Layout shell
├── pages/         # Home, Portfolio, Resume, AISystems, ImageGen, BeyondCode, Contact
├── App.tsx        # Router + app shell
└── main.tsx       # Entry point
```

---

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