49 lines
4.4 KiB
Markdown
49 lines
4.4 KiB
Markdown
# Product
|
||
|
||
## Register
|
||
|
||
brand
|
||
|
||
## Users
|
||
|
||
A mixed audience finding the site through different routes: recruiters and hiring managers vetting credibility, peers in the industry (engineers, designers, founders) skimming for substance, and occasional drive-by readers landing on a piece of writing. They arrive expecting either to *evaluate* the owner or to *read* something. Both jobs should be one click away from the home page; nobody should have to dig for either the work index or the writing.
|
||
|
||
## Product Purpose
|
||
|
||
A personal site for Owen — work, writing, and a credible point of view in one place. Success is that a skeptical visitor (peer or recruiter) closes the tab knowing this person builds things carefully and writes about them clearly. The site itself is part of the proof: if it reads as well-built, the case is already half made before they read a word of content.
|
||
|
||
## Brand Personality
|
||
|
||
**Confident, sharp, technical.** Voice is direct and specific. Plain nouns and verbs over adjectives. No hedging, no humblebrag, no "passionate about X". The site sounds like someone who has done the work and is comfortable showing it without dressing it up. Emotionally, it should evoke the same feeling as opening a well-organized tool: things are where you'd expect, the grid is respected, nothing is wasted.
|
||
|
||
## Anti-references
|
||
|
||
The site should explicitly not resemble any of these:
|
||
|
||
- **Generic SaaS landing page.** Hero metric, gradient accent, identical card grid, tiny tracked uppercase eyebrows above every section. The saturated AI default of 2026. If a section starts to drift this way, rewrite the structure.
|
||
- **Bootcamp-grad portfolio.** Three project screenshots in identical cards, big gradient name, a generic "About me" with a stock illustration and a list of icons for skills. Generic in shape and generic in voice.
|
||
- **Designer-tryhard maximalism.** Scroll-jacked, motion-heavy, hard to navigate, "look at me" design. Motion is fine; performance art is not.
|
||
- **Resume-as-a-webpage.** A linear text dump of jobs and skills with no point of view. If the site could be replaced by a PDF without losing anything, it has failed.
|
||
|
||
**Second-order trap to dodge:** "confident, sharp, technical" + dark mode is a one-step trip to the terminal-native / Linear-clone monoculture (monospace everywhere, near-black surface, single neon accent, changelog grid). Engineering-precise is the *reference*, not the *outfit*. Borrow the grid discipline and the metadata typography; don't borrow the look wholesale.
|
||
|
||
## Design Principles
|
||
|
||
1. **The site is the proof.** Construction quality is part of the argument. Everything that ships — alignment, type scale, motion, copy — is evidence the owner builds carefully. No "good enough for a personal site" shortcuts.
|
||
2. **Density over decoration.** Real content (work, writing) outranks chrome. Whitespace serves the content; it isn't a substitute for having something to say. If a section has nothing in it, it doesn't exist yet — don't fill it with a decorative placeholder.
|
||
3. **Sharpness is commitment.** Pick a type scale, a grid, an accent, an interaction grammar — and respect them everywhere. Inconsistency reads as carelessness; consistency at this level reads as taste.
|
||
4. **Don't perform "developer".** Dark mode, monospace, and terminal motifs earn their place by doing a job (metadata, code, hierarchy). They are not the brand. If a choice is justified only by "developer sites look like this", remove it.
|
||
5. **Quiet motion, never silent.** Motion is part of the build, not a layer on top. Reveals enhance an already-visible default. Each transition fits what it reveals; nothing reaches for stock entrance animations. Respects `prefers-reduced-motion` everywhere.
|
||
|
||
## Accessibility & Inclusion
|
||
|
||
Target: **WCAG 2.2 AA**, with these non-negotiables:
|
||
|
||
- Body contrast ≥4.5:1, large/bold ≥3:1. Placeholder text held to body contrast, not the muted-gray default.
|
||
- Full keyboard navigation, with visible, non-default focus states that match the brand (not the browser ring).
|
||
- `prefers-reduced-motion` honored on every animation — crossfade or instant alternative, never "just disable JS motion".
|
||
- Light theme available alongside the dark default; the toggle persists and respects `prefers-color-scheme` on first load.
|
||
- All interactive controls hit a 24×24 minimum touch target.
|
||
|
||
Color choices are checked against a deuteranopia simulation before shipping; meaning never carried by hue alone.
|