Files

kbot 9f6b22891f chore: commit in-progress metadata and asset updates

2026-07-06 19:49:42 -05:00

28 KiB

Raw Permalink Blame History

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:

Dark base, vivid signal. Near-black surfaces; popping cyan/orange/green used as operational signal, not decoration.
Work as evidence. Projects should appear as dossiers, artifacts, tables, and proof links — not generic cards.
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.
High taste through restraint. Every site researched succeeds by doing fewer things with stronger intent.
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

Dark cinematic hero
- Full-screen or near-full-screen.
- Background is product/system imagery or abstract operational UI.
- Heavy overlay so type dominates.
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.
Numbered rows
- Capability/service rows with /.01, /.02, etc.
- Thin dividers.
- Right-aligned index.
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

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

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

Project proof pattern
- Project title.
- One-line description.
- Credibility stat if available: stars, installs, users, usage.
- Tech tags.
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

Homepage as index
- Use tiles for Work, Systems, Lab, Field Notes, Contact, Principles.
Cropped type as graphic material
- Use giant words like WORK, LAB, AGENTS, SYSTEMS clipped inside panels.
One visual gesture per module
- One tile gets a diagram.
- One gets a glowing cursor.
- One gets handwriting.
- One gets a manifesto.
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:

[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

Sharp intro copy

Crafting interfaces. Building polished software and web experiences.

For this portfolio:

Building agentic systems, command interfaces, and operational tools.

Compact index columns

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

Underlined links
- Mature, accessible, non-gimmicky.
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

Content discovery
- Lab/notes should not be a dump. Include categories and recommended entries.
Utility controls
- Search / command palette.
- Theme or intensity toggle.
- RSS or updates if writing exists.
Footer as navigation hub
- Not an afterthought. Use it for Work, Lab, Systems, Contact.
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

Project index table

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

Hover previews
- On hover, preview appears near cursor or in fixed panel.
- Row changes accent color.
- Metadata dims.
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

Spatial hero layer
- Dark grid / field / perspective plane.
- Cursor-reactive glow.
- Optional animated trace.
World-building
- The site should feel like a place, not just a page.
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

Artifact-first project list

Project Name
One-sentence explanation.

Writing as proof of taste
- Article titles can communicate positioning better than self-description.
Plain copy
- No hype, no fake polish.
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

: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:

.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

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

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

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

6.3 Hero / command deck

[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

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

[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

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

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

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:

| 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:

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

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

6.13 Final CTA tiles

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

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.

28 KiB Raw Permalink Blame History Unescape Escape

Portfolio Site Research Report v2

0. Executive verdict

1. Research set

1.1 Portfolio / personal sites visually inspected

1.2 Design/inspiration resources checked

1.3 Product sites checked for adjacent product-design language

2. Site-by-site findings

2.1 Palantir — institutional systems language

What works

Borrow

Avoid

Adaptation

2.2 Brittany Chiang — structured dark engineering portfolio

What works

Borrow

Avoid

Adaptation

2.3 Rauno Freiberg — horizontal index and manifesto

What works

Borrow

Avoid

Adaptation

2.4 Paco Coursey — editorial reduction

What works

Borrow

Avoid

Adaptation

2.5 Josh Comeau — content architecture and personal brand system

What works

Borrow

Avoid

Adaptation

2.6 Olivier Larose — motion-first work index

What works

Borrow

Avoid

Adaptation

2.7 Bruno Simon — portfolio as world

What works

Borrow

Avoid

Adaptation

2.8 Emil Kowalski — taste through reduction

What works

Borrow

Avoid

Adaptation

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

Borrow

Avoid

3. Cross-reference: patterns worth building

4. Final concept: Signal Blacksite Portfolio

4.1 Visual thesis

4.2 Mood board in words

4.3 Anti-mood

5. Visual system

5.1 Palette

5.2 Accent rules

5.3 Typography

6. Page architecture

6.1 Announcement/status bar

6.2 Floating nav

6.3 Hero / command deck

6.4 Category chips

6.5 Featured project dossier

6.6 Work index

6.7 Manifesto

6.8 Numbered capability rows

6.9 Operator profile

6.10 Lab / field notes

6.11 Proof cards

6.12 Contact terminal

6.13 Final CTA tiles

6.14 Footer index

7. Interaction requirements

7.1 Command palette

7.2 Project hover/focus previews

7.3 Motion rules

8. Content model

28 KiB

Raw Permalink Blame History