USF Portfolio
Personal engineering platform — design, architecture, development, and deployment owned end-to-end.
Overview
A personal engineering platform that positions product outcomes — not a template list of projects.
Project story
I owned the design system through deployment so recruiters feel production craft in the first viewport.
Problem
Recruiters and collaborators needed a credible signal of how I think about product, systems, and craft — not a template portfolio.
Solution
Next.js App Router, TypeScript, Tailwind, Framer Motion, Lenis, structured content, and SEO foundations.
Features
- Design system
- Case studies
- Command palette
- Theme + motion
Architecture
Next.js App Router · TypeScript · Tailwind · Framer Motion · Lenis · structured content layer · SSR/SEO foundations.
Frontend
App Router with motion and design tokens.
Content
Typed project content model.
Data
Static content with SSG case studies.
Privacy
No secret leakage in client bundles.
Hosting
Deployable to Vercel / Node hosts.
SEO
Sitemap, robots, JSON-LD, OG.
Security
Clean contact surfaces.
Narrative
AI engineering story as product signal.
Security
- Static/asset hygiene
- No secret leakage in client bundles
- Secure contact surfaces
Performance
- SSR + optimized images
- Code splitting
- Motion that respects reduced-motion
Accessibility
- AA+ targets
- Keyboard command palette
- Reduced-motion support
Challenges
- Saying more with less — recruiter clarity in under 20 seconds
- Premium motion without hurting performance
- Credible positioning without inflated titles
Results
- Owned the full stack from design system to deployment
- Positioned engineering work as product outcomes
- SEO, performance, and accessibility treated as product requirements
100%
Owner
Next.js
Stack
Clarity
Goal
Lessons learned
- Credibility beats title inflation
- Motion should explain hierarchy
- SEO is part of engineering brand
Tech stack
Core
Motion
SEO
Timeline
2024 — Present
4 min read
My role
Scalability
Content-driven project model so case studies grow without redesigning the system.
Video walkthrough
Product walkthrough placeholder — add a Loom or demo reel here when ready.