diff --git a/app/favicon.ico b/app/favicon.ico index 718d6fe..e6eb777 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/icon.svg b/app/icon.svg new file mode 100644 index 0000000..05cdedc --- /dev/null +++ b/app/icon.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index ef4f35d..eab68b4 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -31,9 +31,20 @@ const plexMono = IBM_Plex_Mono({ variable: '--font-plex-mono', }) +const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://localhost:3000' + export const metadata: Metadata = { + metadataBase: new URL(siteUrl), title: { template: '%s | Krishna', default: 'Krishna' }, description: 'A sleek static journal with code and math.', + icons: { + icon: '/ouroboros.svg', + }, + openGraph: { + title: 'Krishna', + description: 'A sleek static journal with code and math.', + images: ['/og.png'], + }, } export default function RootLayout({ children }: { children: React.ReactNode }) { diff --git a/portfolio-site-research-report-v2.md b/portfolio-site-research-report-v2.md new file mode 100644 index 0000000..9865c55 --- /dev/null +++ b/portfolio-site-research-report-v2.md @@ -0,0 +1,1034 @@ +# 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. diff --git a/public/file.svg b/public/file.svg deleted file mode 100644 index 004145c..0000000 --- a/public/file.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/globe.svg b/public/globe.svg deleted file mode 100644 index 567f17b..0000000 --- a/public/globe.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/og-image.svg b/public/og-image.svg new file mode 100644 index 0000000..f559241 --- /dev/null +++ b/public/og-image.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Krishna + JOURNAL + + CODE & MATH + \ No newline at end of file diff --git a/public/og.png b/public/og.png new file mode 100644 index 0000000..b6f1057 Binary files /dev/null and b/public/og.png differ diff --git a/public/ouroboros.svg b/public/ouroboros.svg new file mode 100644 index 0000000..05cdedc --- /dev/null +++ b/public/ouroboros.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/starter-diagram.svg b/public/starter-diagram.svg deleted file mode 100644 index 105c0ed..0000000 --- a/public/starter-diagram.svg +++ /dev/null @@ -1,17 +0,0 @@ - - Starter design diagram - Three connected nodes labeled design, content, and build. - - - - - - Design - - Content - - Build - - Ship - - diff --git a/public/starter-showcase.svg b/public/starter-showcase.svg deleted file mode 100644 index 5df203e..0000000 --- a/public/starter-showcase.svg +++ /dev/null @@ -1,26 +0,0 @@ - - Starter MDX showcase cover - A small abstract gradient cover with cards representing math, code, and design. - - - - - - - - - - - - - - - - - - - MDX - $E=mc² - code · links · tables - - diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index 7705396..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/window.svg b/public/window.svg deleted file mode 100644 index b2b2a44..0000000 --- a/public/window.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file