Case study / Personal project
Work Experience
Portfolio of my software development projects
josephpickering.co.uk
01 / Problem
Originally built as a personal tool to search projects by technology, it's now a full portfolio with AI search, company timelines, and a CMS for managing content.
02 / How it's built
- BrowserInstallable PWA with offline support
- Nuxt 4SSR, Vue 3, Pinia stores
- .NET 8 APIProjects, companies, technologies
- Vertex AINatural-language project search
Auth0Bearer token attached to every API request; CMS pages gated by route middleware
OpenAPI codegenTypes and client generated from the backend Swagger spec
DeployGitHub Actions on push to main → Digital Ocean droplet, run with PM2
03 / Decisions
The API contract is generated, never hand-written
API types and the HTTP client are auto-generated from the backend's Swagger spec. A backend change surfaces as TypeScript errors in the stores and components that consume it.
Server-side renderingNuxt 4 SSR for fast load times and SEO.
All API calls go through Pinia storesComponents never call the API directly; state is persisted where it helps.
URL-persisted filtersSearch and filter by technology type, and share the exact view by link.
04 / Stack
- Framework Nuxt 4, Vue 3
- Language TypeScript
- Backend .NET 8
- AI Vertex AI
- State Pinia
- Auth Auth0
- Styling Tailwind CSS v4
- Rich text Tiptap
- Unit tests Vitest
- E2E tests Playwright
- PWA @vite-pwa/nuxt
- Hosting Digital Ocean, PM2