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/itemvariants (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
Layoutshell - 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
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, sam-iot-electronics, and sam-pursuits.