# Portfolio

> Creative showcase with large imagery, minimal chrome, and work-first hierarchy.

- Skill: `jdsadminllc/portfolio` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/portfolio`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/portfolio/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/portfolio

---

# Portfolio
## Mission
Get out of the way and let the work speak — a frame so minimal and refined that attention flows entirely to the content.
## Brand
### Colors
- `#FAFAFA` — Background (near-white)
- `#111111` — Primary (near-black)
- `#666666` — Secondary (mid-gray)
- `#E5E5E5` — Surface (light gray)
- `#FFFFFF` — Card (pure white)
- `#000000` — Text (true black)
### Typography
- Headings: **DM Serif Display** (editorial, refined)
- Body: **Inter** (functional, clean)
- Scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.25rem / xl 1.5rem / 2xl 2.5rem / 3xl 4rem
### Spacing
- 4px baseline grid
- Section padding: 8rem vertical, 3rem horizontal
- Card/project gaps: 3rem
- Max content width: 90rem (wide for impact)
### Components
- **Buttons**: Outline style, transparent bg, 1px solid border, no radius, hover fills with #111111
- **Cards**: Full-bleed imagery, minimal overlay on hover (title only), no borders, no shadows
- **Nav**: Ultra-minimal, logo only or single-word link, fixed position, transparent bg, text only
- **Hero**: Full-viewport project image, video, or animation, optional small title overlayed bottom-left. No CTA — the work is the CTA.
- **Footer**: Almost invisible — thin 1px top rule, small gray text, max 3 links
### Accessibility
- Contrast ratio >= 4.5:1 (grayscale palette passes easily)
- Focus ring: 2px solid #111111 with 2px offset, no radius
- Reduced motion: disable image/video autoplay and any scroll animations
- Minimum font size: 0.875rem
- All project images require descriptive alt text — this is a portfolio
### Writing Tone
Confident, understated. Let the work do the talking. Minimal copy. Project titles only where possible. Fewer words = more impact. No exclamation points. No marketingese.
## Do / Don't
### Do
- Let images go full-bleed with zero padding
- Use generous whitespace (3rem+ between projects) to create breathing room
- Keep navigation to 1-3 items maximum — hide everything else
- Lazy-load images with lo-res placeholders to maintain layout
- Design for cursor hover — show project details only on mouseover
### Don't
- Add drop shadows, gradients, or decorative backgrounds
- Show more than one project or image above the fold
- Use more than 4 words in navigation
- Crowd the footer with links, sitemaps, or social grids
- Force autoplay video or audio without a visible pause button
## Quality Gates
- [ ] Navigation has 3 or fewer items
- [ ] At least one full-bleed image above the fold
- [ ] No drop shadows or gradients anywhere in CSS
- [ ] All images have alt text
- [ ] Page loads under 1.5 MB with lazy-loaded images
- [ ] Works at 320px with stacked project images