public-blog/portfolio-site-research-report-v2.md

# Portfolio Site Research Report v2

Date: 2026-07-06  
Prepared for: Lord Deus  
Purpose: a thorough research-backed design report for a personal portfolio site that feels **dark, high-taste, technical, serious, and color-popping** — not generic portfolio-template sludge.

## 0. Executive verdict

The strongest direction is not “developer portfolio.” It is:

> **A dark personal command center: part Palantir-style operational system, part portfolio OS, part research archive, part proof dossier.**

Working concept name:

> **Signal Blacksite Portfolio**

Core principles:

1. **Dark base, vivid signal.** Near-black surfaces; popping cyan/orange/green used as operational signal, not decoration.
2. **Work as evidence.** Projects should appear as dossiers, artifacts, tables, and proof links — not generic cards.
3. **Interface as proof.** If the portfolio claims agentic systems/interface skill, the UI should demonstrate it: command palette, status strip, project index, metadata, keyboard navigation.
4. **High taste through restraint.** Every site researched succeeds by doing fewer things with stronger intent.
5. **Motion must earn its keep.** Motion should clarify state, reveal relationships, or show craft. No idle carnival.

The best combined model:

- **Palantir** for seriousness, dark institutional systems language, technical blueprint cards, numbered rows, big CTAs.
- **Brittany Chiang** for dark accessible engineering structure, sticky identity, experience/project proof entries.
- **Olivier Larose** for motion-first work index and black-stage restraint.
- **Rauno Freiberg** for modular index, cropped typography, manifesto tile, strong personal world.
- **Paco Coursey / Emil Kowalski** for editorial reduction, artifact-based copy, writing-as-proof.
- **Josh Comeau** for personal brand system, content architecture, site utilities, and approachable depth.
- **Bruno Simon** for memorable world-building and optional 3D/spatial intro — only if performance-safe.
- **Linear/Vercel/Resend-like product sites** for product UI hero framing, tight typography, and proof-first product presentation.

---

## 1. Research set

### 1.1 Portfolio / personal sites visually inspected

| Site | URL | Why it matters |
|---|---|---|
| Palantir | https://www.palantir.com/ | Dark institutional systems language, giant hero type, technical cards, numbered capability rows, CTA architecture. |
| Brittany Chiang | https://brittanychiang.com/ | Dark navy accessible developer portfolio, sticky intro/sidebar, structured experience and project entries. |
| Rauno Freiberg | https://rauno.me/ | Horizontal index, huge cropped typography, tiny editorial labels, one bold gesture per tile, manifesto panel. |
| Paco Coursey | https://paco.me/ | Quiet text-first personal index, high-taste copy, underlined links, proof through selected artifacts. |
| Josh W. Comeau | https://www.joshwcomeau.com/ | Strong personal technical brand, content discovery, category architecture, theme/search/audio utility controls. |
| Olivier Larose | https://www.olivierlarose.com/ | Black stage, motion-first table-style work index, project/category/client/year grid. |
| Bruno Simon | https://bruno-simon.com/ | Immersive WebGL/spatial portfolio as world; perspective grid and neon focal motion. |
| Emil Kowalski | https://emilkowal.ski/ | Extreme text-first restraint, projects/writing as proof, taste/animation philosophy, no visual noise. |
| Lee Robinson | https://leerob.com/ | Developer/writer positioning and modern personal site reference; inspected by live fetch. |

### 1.2 Design/inspiration resources checked

| Resource | URL | Use |
|---|---|---|
| Awwwards Portfolio Gallery | https://www.awwwards.com/websites/portfolio/ | Taste bar and contemporary portfolio examples. |
| CSS Design Awards | https://www.cssdesignawards.com/ | Award-level interaction and visual craft references. |
| GSAP Showcase | https://gsap.com/showcase/ | High-end scroll/motion implementation examples. |
| Awesome Web Desktops | https://github.com/syxanash/awesome-web-desktops | Personal site as OS/desktop/cockpit. |
| Magic UI | https://magicui.design/ | Animated React/Tailwind components. |
| React Bits | https://www.reactbits.dev/ | Animated React components and interaction ideas. |
| Aceternity UI | https://ui.aceternity.com/ | Tailwind/Framer Motion sections, spotlights, beams, cards. |
| Mobbin | https://mobbin.com/discover/apps/web | Product UI patterns and web-app screenshot research. |
| Recent / Godly redirect | http://recent.design/?ref=godly | Broad web-design inspiration stream. |

### 1.3 Product sites checked for adjacent product-design language

| Site | URL | Use |
|---|---|---|
| Linear | https://linear.app/ | Product UI hero, agentic/productivity language, dark polished interface presentation. |
| Vercel | https://vercel.com/ | Infrastructure/agentic positioning and premium technical product voice. |
| Resend | https://resend.com/ | Developer-tool clarity, minimal proof-first messaging. |
| Stripe | https://stripe.com/ | Infrastructure credibility, copy hierarchy, product/business clarity. |

---

## 2. Site-by-site findings

## 2.1 Palantir — institutional systems language

### What works

Palantir’s homepage carries a high-stakes operational tone:

- dark hero;
- huge centered thin/regular white headline;
- minimal utility nav;
- product/system imagery dimmed behind text;
- technical topic chips;
- massive feature cards with blueprint/industrial visuals;
- giant manifesto statement;
- numbered capability rows;
- oversized two-tile CTA close.

The page does not feel like a friendly SaaS page. It feels like infrastructure, defense, and decision systems.

### Borrow

1. **Dark cinematic hero**
   - Full-screen or near-full-screen.
   - Background is product/system imagery or abstract operational UI.
   - Heavy overlay so type dominates.

2. **Technical blueprint dossier card**
   - Deep charcoal card.
   - Small uppercase label.
   - Large title.
   - Schematic/line-art/wireframe visual.
   - Oversized cropped title as texture.
   - Thin dividers and metadata.

3. **Numbered rows**
   - Capability/service rows with `/.01`, `/.02`, etc.
   - Thin dividers.
   - Right-aligned index.

4. **Big CTA tiles**
   - Two huge rectangular blocks.
   - Example: `View Selected Work →` and `Start a Project →`.

### Avoid

- Corporate monotone without personality.
- Copying Palantir’s defense aesthetic too literally.
- Making the site feel like a fake enterprise company instead of a personal portfolio.

### Adaptation

Use Palantir’s seriousness and structure, but inject personal signal with:

- electric cyan/orange accents;
- command palette;
- personal field notes;
- project artifacts;
- proof links;
- a less corporate, more operator-like voice.

---

## 2.2 Brittany Chiang — structured dark engineering portfolio

### What works

Brittany Chiang’s portfolio is a mature dark engineering site:

- sticky left identity/sidebar;
- right scrolling content column;
- clear sections: About, Experience, Projects, Writing;
- experience entries with date, title, description, links, tech tags;
- project entries with thumbnail, description, stats, tags;
- dark navy palette with teal accent;
- semantic/accessibility-conscious structure.

### Borrow

1. **Sticky identity rail**
   - Name, role, one-line value proposition, section nav, social links.
   - Works well on desktop.

2. **Experience entry pattern**

```txt
DATE RANGE
Role at Company ↗
Concise outcome-oriented description.
Tags: React / TypeScript / Accessibility / Design Systems
```

3. **Project proof pattern**
   - Project title.
   - One-line description.
   - Credibility stat if available: stars, installs, users, usage.
   - Tech tags.

4. **Section nav with active indicator**
   - Useful for long one-page portfolios.

### Avoid

- Too-muted text contrast.
- Empty or invisible thumbnails.
- Pushing selected work too far down if the site is supposed to sell projects quickly.

### Adaptation

Use Brittany’s structure inside a darker, more visual Palantir-like shell. Keep the proof-entry clarity, but make featured work more dramatic.

---

## 2.3 Rauno Freiberg — horizontal index and manifesto

### What works

Rauno’s site is a gallery-like horizontal index:

- modular cards;
- tiny editorial labels;
- oversized cropped typography;
- one strong visual gesture per tile;
- massive negative space;
- personal manifesto tile;
- strong typographic personality without conventional portfolio cards.

The important insight: the site is not a landing page. It is an index into a world.

### Borrow

1. **Homepage as index**
   - Use tiles for Work, Systems, Lab, Field Notes, Contact, Principles.

2. **Cropped type as graphic material**
   - Use giant words like `WORK`, `LAB`, `AGENTS`, `SYSTEMS` clipped inside panels.

3. **One visual gesture per module**
   - One tile gets a diagram.
   - One gets a glowing cursor.
   - One gets handwriting.
   - One gets a manifesto.

4. **Manifesto/principles tile**
   - A compact “what I believe” panel is stronger than a fluffy About section.

### Avoid

- Hidden horizontal scroll without affordance.
- Too much abstraction without context.
- Cropping important text so users do not understand navigation.

### Adaptation

A dark version could use a **dark horizontal archive strip** after the hero:

```txt
[WORK] [AGENTS] [SYSTEMS] [FIELD NOTES] [CONTACT] [PRINCIPLES]
```

Each card gets one electric accent gesture.

---

## 2.4 Paco Coursey — editorial reduction

### What works

Paco’s site is a narrow, text-first personal index:

- no large hero;
- no cards;
- no screenshots;
- no nav bar;
- strong concise copy;
- underlined links;
- compact columns for Building / Projects / Writing;
- “Now” section for personal/current context;
- direct contact.

This demonstrates confidence through omission.

### Borrow

1. **Sharp intro copy**

```txt
Crafting interfaces. Building polished software and web experiences.
```

For this portfolio:

```txt
Building agentic systems, command interfaces, and operational tools.
```

2. **Compact index columns**

```txt
Building        Work             Writing
Current tool    Project A        Field note
Experiment      Project B        Essay
```

3. **Underlined links**
   - Mature, accessible, non-gimmicky.

4. **Now section**
   - Current focus and taste without autobiography sprawl.

### Avoid

- Being too sparse if your name-brand proof is not immediately obvious.
- Vague “craft” language without artifacts.
- Over-minimalism that hides what you can do.

### Adaptation

Use Paco’s editorial writing style inside the About/Now sections, not as the entire site. Since Lord Deus wants dark + popping colors, the total site should have more visual presence.

---

## 2.5 Josh Comeau — content architecture and personal brand system

### What works

Josh Comeau’s site is a deep technical content world:

- playful illustrated environment;
- strong brand system;
- article archive with excerpts;
- browse-by-category chips;
- popular content list;
- search, audio, theme, RSS/social utilities;
- strategic footer with newsletter and navigation.

It proves expertise through content and interaction.

### Borrow

1. **Content discovery**
   - Lab/notes should not be a dump. Include categories and recommended entries.

2. **Utility controls**
   - Search / command palette.
   - Theme or intensity toggle.
   - RSS or updates if writing exists.

3. **Footer as navigation hub**
   - Not an afterthought. Use it for Work, Lab, Systems, Contact.

4. **Personality in system, not random decoration**
   - Josh has clouds/rainbow/pink labels. For this portfolio, use dossier/terminal/signal motifs consistently.

### Avoid

- Borrowing whimsy that conflicts with Palantir seriousness.
- Too many categories if content is thin.
- Cute illustration if the desired feel is dark/operator.

### Adaptation

Use Josh’s **content architecture**, not his visual style. The equivalent visual language should be dark terminal/cyber-institutional, not friendly clouds.

---

## 2.6 Olivier Larose — motion-first work index

### What works

Olivier’s visible page is extremely minimal:

- black canvas;
- tiny all-caps nav;
- huge empty stage;
- project table headers: Project / Category / Client / Year;
- likely hover previews and motion-led reveal.

This is useful because it turns the work list into an interaction surface.

### Borrow

1. **Project index table**

```txt
PROJECT              TYPE              STATUS            YEAR
Browser Console      AI Interface      Shipped           2026
Signal Archive       Research Tool     Prototype         2026
```

2. **Hover previews**
   - On hover, preview appears near cursor or in fixed panel.
   - Row changes accent color.
   - Metadata dims.

3. **Black stage restraint**
   - Keep static layout minimal; let interaction reveal richness.

### Avoid

- Page looking empty if animation fails.
- Hover-only content inaccessible on touch/keyboard.
- Tiny uppercase labels with poor contrast.

### Adaptation

Use the project table as a section after the featured dossiers. Provide visible first rows and static preview fallback.

---

## 2.7 Bruno Simon — portfolio as world

### What works

The visible Bruno Simon state shows:

- dark immersive 3D/perspective grid;
- neon purple/pink glow;
- spatial “entering a digital world” feel;
- memorable world-building.

This is the most experimental reference.

### Borrow

1. **Spatial hero layer**
   - Dark grid / field / perspective plane.
   - Cursor-reactive glow.
   - Optional animated trace.

2. **World-building**
   - The site should feel like a place, not just a page.

3. **High contrast neon focal point**
   - One glow, one energy source, not neon everywhere.

### Avoid

- Heavy WebGL that blocks content.
- Loader ambiguity.
- Accessibility/performance failure.
- Turning a portfolio into a game when the goal is proof and conversion.

### Adaptation

Use a lightweight spatial background or static fallback. The portfolio should not depend on WebGL for basic usability.

---

## 2.8 Emil Kowalski — taste through reduction

### What works

Emil’s site is radically plain:

- centered text column;
- identity + current work;
- Projects list;
- Writing list;
- Newsletter;
- More links;
- almost no visual decoration.

It works because the artifacts are strong and coherent: animations.dev, Sonner, Vaul, articles about taste/animation/components.

### Borrow

1. **Artifact-first project list**

```txt
Project Name
One-sentence explanation.
```

2. **Writing as proof of taste**
   - Article titles can communicate positioning better than self-description.

3. **Plain copy**
   - No hype, no fake polish.

4. **Animation philosophy**
   - “You Don’t Need Animations” is an important lesson: animation restraint itself signals taste.

### Avoid

- Too plain if the work does not already carry reputation.
- No images at all if visual/interface craft is the selling point.

### Adaptation

Use Emil’s reduction for the Lab/Notes and maybe About sections. The whole site should still have the dark/popping visual identity Lord Deus prefers.

---

## 2.9 Linear / Vercel / Resend / Stripe — product-site lessons

These are not personal portfolios, but they inform the target aesthetic:

### Borrow

- crisp product positioning;
- product UI screenshots as hero artifacts;
- minimal but confident copy;
- dark or refined neutral surfaces;
- infrastructure language;
- proof-first structure;
- strong CTA clarity;
- responsive high-performance layout.

### Avoid

- sounding like a company instead of a person;
- generic “premium SaaS” gradients;
- vague agentic/AI claims without proof;
- over-polishing weak content.

---

## 3. Cross-reference: patterns worth building

| Pattern | Sources | Final use |
|---|---|---|
| Dark cinematic hero | Palantir, Linear, Bruno | First impression: command deck. |
| Technical blueprint dossier | Palantir | Featured project cards. |
| Sticky identity/sidebar | Brittany | Desktop navigation option. |
| Project table/index | Olivier | Work archive and hover previews. |
| Horizontal archive strip | Rauno | Optional above-fold index/modules. |
| Editorial text-first copy | Paco, Emil | About, Now, Lab intros. |
| Writing/lab as proof | Josh, Emil, Paco | Field notes section. |
| Command/search utility | Josh, product apps | Cmd/Ctrl+K palette. |
| Numbered capability rows | Palantir | Services/capability proof. |
| Clipped-corner proof cards | Palantir-like dossier motif | Metrics/testimonials/artifacts. |
| Popping accent gestures | Bruno, Rauno + user preference | Cyan/orange/green signal system. |
| Footer as index | Palantir, Josh | Dense final navigation hub. |

---

## 4. Final concept: Signal Blacksite Portfolio

### 4.1 Visual thesis

A near-black portfolio that behaves like an operational system:

- the hero is a command deck;
- projects are dossiers;
- capabilities are indexed rows;
- notes are field reports;
- contact is a terminal dispatch;
- color appears only as signal.

### 4.2 Mood board in words

- Palantir’s seriousness.
- Linear’s product precision.
- Olivier’s black stage.
- Brittany’s engineering clarity.
- Rauno’s graphic indexing.
- Paco/Emil’s editorial restraint.
- Bruno’s electric spatial energy.

### 4.3 Anti-mood

- No cheerful startup colors.
- No generic SaaS hero with blob gradient.
- No “Hi, I’m passionate…” copy.
- No random 3D cube.
- No fake terminal with meaningless commands.
- No overanimated scroll hijack.
- No hidden content that only exists on hover.

---

## 5. Visual system

### 5.1 Palette

```css
:root {
  --bg: #030506;
  --bg-2: #07090a;
  --surface: #101517;
  --surface-2: #171d21;
  --surface-3: #20282d;

  --text: #f4f7f8;
  --text-warm: #f2eee7;
  --muted: #8b949a;
  --faint: #5f696f;
  --line: #2c353a;

  --cyan: #00f0ff;
  --orange: #ff5a1f;
  --green: #b6ff00;
  --violet: #805dff;
  --magenta: #ff2e88;
}
```

### 5.2 Accent rules

Use dark base 85–90% of the time.

- **Cyan**: active state, command palette, arrows, diagram nodes, selected chip.
- **Orange**: warning/hot artifact/project emphasis, CTA edge, hover spark.
- **Green**: status only: online/available/shipped.
- **Violet/magenta**: rare experimental project-specific accent.

Never use all colors at once. A page section should generally use one accent.

### 5.3 Typography

Recommended:

- Display/body: Inter, Söhne, Suisse Intl, ABC Diatype, Space Grotesk.
- Metadata: JetBrains Mono, Geist Mono, IBM Plex Mono.
- Optional editorial italic: a refined serif for one or two human phrases.

Scale:

```css
.hero-title {
  font-size: clamp(64px, 10vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.06em;
  font-weight: 500;
}

.section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.body-copy {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--muted);
}
```

---

## 6. Page architecture

### 6.1 Announcement/status bar

```txt
STATUS: AVAILABLE FOR SELECT BUILDS — View current focus →
```

- Thin, dark, utility style.
- One status dot in green.
- One link with underlined/arrow affordance.

### 6.2 Floating nav

```txt
DEUS / SIGNAL BLACKSITE          WORK  CAPABILITIES  LAB  CONTACT  [⌘K]
```

- Translucent charcoal.
- Backdrop blur.
- Square or low-radius buttons.
- Keyboard-accessible.

### 6.3 Hero / command deck

```txt
[STATUS: ONLINE]
Builder of agentic systems, interfaces, and operational tools.
I turn ambiguity into working software.
[View Work] [Open Command Palette]
Scroll to Explore ↓
```

Visual:

- Dark product/system background, grid, or abstract command interface.
- Heavy overlay.
- Giant centered headline.
- Cyan cursor/status marker.
- Optional subtle animated grid.

### 6.4 Category chips

```txt
AI Systems / Interfaces / Automation / Research / Infra / Motion / Selected Work
```

- Dark chips with muted text.
- Active chip cyan border or fill.
- Hover glow.

### 6.5 Featured project dossier

```txt
[AI SYSTEMS]                         STATUS: SHIPPED
Project Name ↗

MISSION      one sentence
CONSTRAINT   one sentence
SYSTEM       one sentence
RESULT       one sentence

ROLE / YEAR / STACK / PROOF
```

Visual:

- Large charcoal card.
- Technical diagram/wireframe.
- Oversized cropped project title.
- Thin rules.
- Cyan nodes/orange markers.

### 6.6 Work index

```txt
PROJECT                 TYPE             STATUS        YEAR
Browser Agent Console   AI Interface     Shipped       2026
Signal Archive          Research Tool    Prototype     2026
Portfolio OS            Web Experience   Building      2026
```

Interaction:

- Hover/focus reveals preview.
- Keyboard focus opens same preview region.
- Touch devices show static thumbnail row.

### 6.7 Manifesto

```txt
I build interfaces for complex systems — turning vague intent into tools operators can trust.
```

- Huge text.
- Muted gray.
- Key words in cyan/orange.
- Massive whitespace.

### 6.8 Numbered capability rows

```txt
Orchestrate browser-using agents                                  /.01
Build AI-native product workflows                                 /.02
Design command-center interfaces                                  /.03
Ship automation with real verification                            /.04
Turn research into operator-grade briefs                          /.05
```

### 6.9 Operator profile

Use compact paragraphs + matrix:

```md
| Domain | Capabilities | Proof |
|---|---|---|
| AI Agents | tool orchestration, browser control, eval loops | links |
| Interfaces | command UIs, dashboards, design systems | links |
| Research | synthesis, citation-backed briefs | links |
| Automation | Linux, scripts, workflows, integrations | links |
```

### 6.10 Lab / field notes

Each item:

```txt
FIELD NOTE / 2026-07
Title
One-line description.
Tags: AI, UX, systems
```

### 6.11 Proof cards

Use clipped-corner dossier cards for:

- metrics;
- testimonials;
- project artifacts;
- screenshots;
- demo/repo/writeup links.

### 6.12 Contact terminal

```txt
> open contact.channel
email: your@email.com
github: github.com/yourname
status: available for serious builds
```

### 6.13 Final CTA tiles

```txt
View Selected Work       →
Start a Project          →
```

### 6.14 Footer index

Columns:

- Work
- Lab
- Systems
- Contact

Include build stack, year, social links, and command palette hint.

---

## 7. Interaction requirements

### 7.1 Command palette

Mandatory.

Shortcut: `Cmd/Ctrl + K`

Actions:

- Go to Work
- Go to Capabilities
- Go to Lab
- Go to Contact
- Copy Email
- Open GitHub
- Toggle Theme / Intensity

Style:

- Dark modal.
- Thin border.
- Accent active row.
- Mono shortcut labels.
- No rounded bubbly SaaS modal.

### 7.2 Project hover/focus previews

On project row hover/focus:

- preview image/video appears;
- row title becomes accent;
- metadata dims;
- arrow slides;
- background gains soft radial glow.

Reduced motion:

- no cursor-following preview;
- static preview panel appears below or right.

### 7.3 Motion rules

Good:

- 120–220ms hover transitions;
- 500–900ms section reveals;
- subtle parallax only in hero;
- arrow slide;
- command palette blur/scale.

Bad:

- bouncing icons;
- confetti;
- infinite neon pulse;
- scroll hijacking;
- animations that hide text.

---

## 8. Content model

### 8.1 Project dossier fields

Every serious project should have:

- Title
- Type
- Year
- Status
- Role
- Stack
- Mission
- Constraint
- System
- Result
- Artifacts: demo/repo/screenshots/writeup
- Proof: metric, usage, before/after, user quote, or technical validation

### 8.2 Writing / lab fields

Each note:

- Date
- Type: Field Note / Research / Build Log / Essay
- Title
- One-line summary
- Tags
- Link

### 8.3 Voice

Use precise, unsentimental copy.

Good:

- “I build interfaces for complex systems.”
- “Selected work, field-tested.”
- “Agent workflows, command interfaces, research tools.”
- “Proof over promises.”

Bad:

- “Passionate about creating delightful experiences.”
- “I make beautiful websites.”
- “Welcome to my portfolio.”
- “Cutting-edge innovative solutions.”

---

## 9. Implementation recommendation

Stack:

- Next.js App Router
- TypeScript
- Tailwind CSS
- Framer Motion
- MDX for lab/case studies
- Optional GSAP for scroll scenes
- Optional React Three Fiber only for meaningful/lazy-loaded hero layer

Required engineering quality:

- keyboard navigation;
- visible focus states;
- `prefers-reduced-motion` support;
- mobile layout;
- image/video lazy loading;
- no hover-only information;
- semantic HTML;
- Lighthouse 90+ performance target;
- lint/typecheck/build pass.

---

## 10. Anti-patterns

Reject these outputs:

- generic Tailwind/shadcn landing page;
- random gradient blob hero;
- fake terminal with meaningless commands;
- project cards without proof links;
- hidden navigation;
- hover-only content;
- tiny unreadable gray text;
- neon everywhere;
- heavy WebGL before content loads;
- “portfolio as résumé PDF pasted into HTML.”

---

## 11. Agent-ready prompt

```txt
Build a premium personal portfolio site using the Signal Blacksite Portfolio research report.

Design direction:
A dark, high-contrast personal command center: part Palantir-style operational system, part portfolio OS, part research archive, part proof dossier. The site should feel serious, technical, cinematic, and high-taste — not a generic portfolio template.

Research anchors to adapt, not clone:
- Palantir: dark institutional hero, blueprint cards, numbered rows, CTA tiles — https://www.palantir.com/
- Brittany Chiang: structured dark engineering portfolio, sticky identity, experience/project entries — https://brittanychiang.com/
- Rauno Freiberg: horizontal archive/index, cropped typography, manifesto tile — https://rauno.me/
- Paco Coursey: quiet text-first personal index, editorial copy, underlined links — https://paco.me/
- Josh Comeau: personal technical brand system, content architecture, search/theme utilities — https://www.joshwcomeau.com/
- Olivier Larose: black motion-first project index, project/category/client/year table — https://www.olivierlarose.com/
- Bruno Simon: immersive spatial/WebGL portfolio-as-world — https://bruno-simon.com/
- Emil Kowalski: artifact-first projects/writing, taste through reduction — https://emilkowal.ski/

Build with Next.js App Router, TypeScript, Tailwind CSS, and Framer Motion. Optional: GSAP for complex scroll; React Three Fiber only if meaningful and lazy-loaded.

Visual system:
- near-black/charcoal base;
- huge clean sans-serif typography;
- mono metadata labels;
- thin gray dividers;
- dossier cards;
- table-style project index;
- technical blueprint/wireframe motifs;
- electric cyan primary accent;
- infrared orange secondary accent;
- acid green only for status.

Required sections:
1. thin announcement/status bar,
2. floating translucent nav,
3. fullscreen dark hero / command deck,
4. project/category chips,
5. featured project dossier card,
6. motion-first project index table,
7. giant manifesto statement,
8. numbered capability rows using `/.01` style indexes,
9. compact operator-profile about section,
10. lab/field-notes section,
11. clipped-corner proof cards,
12. contact terminal,
13. oversized final CTA tiles,
14. dense footer index.

Required interactions:
- Cmd/Ctrl+K command palette;
- project hover/focus previews with reduced-motion fallback;
- category chips;
- copy email;
- visible keyboard focus states;
- optional theme/intensity toggle.

Content rules:
- Projects must be dossiers with mission, constraint, system, result, role, stack, year, status, and proof links.
- Lab notes must prove thinking, not fill space.
- Copy must be concise, concrete, and unsentimental.

Do not build:
- generic SaaS/Tailwind template;
- random gradient blob hero;
- meaningless 3D model;
- fake terminal noise;
- hover-only content;
- unreadable low-contrast text;
- overanimated scroll hijack.

Before claiming completion:
- run lint;
- run typecheck;
- run production build;
- verify keyboard navigation;
- verify mobile layout;
- verify reduced-motion mode;
- provide final desktop and mobile screenshots.
```

---

## 12. Final recommendation

Use **Palantir as the outer shell**, **Olivier as the work interaction**, **Brittany as the proof structure**, **Paco/Emil as the copy discipline**, **Rauno as the graphic/index personality**, **Josh as the content architecture**, and **Bruno only as a controlled optional spatial layer**.

That combination should produce a portfolio that is dark, sharp, memorable, and useful — not just visually cool, but credible.