handoff · v1
portfolio · tran le · README direction · wireframes for build

tranle.dev — the whole site is a repo.

A portfolio that looks like a github README. File-tree on the left, markdown doc on the right. Clicking a file in the tree swaps the doc. The whole thing is recruiter-scannable in 8 seconds and rewards a closer read. Moss-green accent on cream paper. Mono + sans. No gradients.

Audience
Recruiters · engineers
Vibe
Engineer's notebook,
but warm
Frame count
4 wireframes + specs
Build target
Next.js or Vite + MD

The big idea

The site IS a repo. Markdown files (about, projects, now, contact) are real .md files in the repo and render through MDX. The file tree on the left is the table of contents. The URL reflects the open file (/projects/milestone). This makes the site "clearly an engineer" without being cosplay — it's an actual structure devs use.

What this is NOT

Not a terminal. Not a fake IDE. Not a code editor cosplay. The chrome is minimal — a subtle file tree and a clean markdown reader. The novelty is the structure, not the UI gimmicks. Treat it as a high-quality docs site for one person.
01

Routes & file map

required

The URL reflects the file open in the right pane. Linkable, shareable, bookmarkable. Browser back/forward works. The tree on the left stays the same across all routes; only the right pane changes.

URLSource fileWhat it isPriority
/content/README.mdLanding — intro, badges, TOC, project list, stack, experience, now, offline, contact.P0
/aboutcontent/about.mdLonger "about me" — story, what I care about, how I work.P0
/projects/milestonecontent/projects/milestone.mdMilestone case study — the big one. Links to the existing case study site.P0
/projects/[slug]content/projects/[slug].mdSecond featured project (slug TBD). Lighter than milestone.P0
/experiencecontent/experience.mdFull work history. Above the resume.pdf.P1
/skillscontent/skills.json → pageTech stack table. Could be JSON-driven so it's easy to update.P1
/nowcontent/now.md/now page. Updated weekly-ish. Garden, current sprint, finn.P1
/contactcontent/contact.yml → pageContact methods. YAML so it renders as a fake yaml block.P1
/resume.pdfpublic/resume.pdfStatic file. Linked from header + contact + nav.P0

File tree groups (left rail)

  • 📄 README.md  ·  📄 about.md
  • 📁 projects/ → milestone.md, [project-02].md
  • 📁 experience/ → expands to job list (or one file)
  • ⚙ skills.json  ·  📄 now.md
  • 📁 photos/ → polaroids of pottery, garden, finn
  • 🔑 contact.yml  ·  📄 resume.pdf
02

Main view — README.md

required

The landing experience. Tree on the left, doc on the right. Annotated 1–11 below; specs follow.

browser chrome —
real URL bar
repo header,
branch pill
file tree —
persistent
breadcrumb /
file path
status badges
(github style)
big h1 — name,
# prefix shown
TOC — sticky
(see #09)
featured project
block · 240px thumb
milestone =
live badge
⌗tranle.dev/
trnle / README.md
rolefull-stack engineer
status● open to chat
basedseattle, WA
stackts · react · node
last commit2d ago

# tran le

full-stack software engineer · designs and ships web products end-to-end · based in the pacific northwest 🌲

table of contents
  1. about
  2. featured projects
  3. tech stack
  4. experience
  5. now
  6. offline
  7. contact

## about

I'm a full-stack engineer who treats "design" and "ship" as the same job. I like the part where you go from a fuzzy idea to a working product, and I'm comfortable owning the whole loop — wireframes, schema, API, UI, deploy, iterate.

Right now I'm deepest in typescript / react / node, picking up supabase on milestone (see below). → more in about.md

## featured projects

milestone hero screenshot

📌 milestone ● in progress

typescript react node supabase design-led

Full-stack side project taken from design to development. Case study walks through the schema decisions, the supabase auth model, and the things I'd do differently.

→ read the case study  ·  live site ↗  ·  repo ↗
project 02 screenshot

📌 [project 02 title]

react node postgres

Placeholder for your second featured piece. one-paragraph summary, the gnarly problem you solved, the metric or outcome.

→ details  ·  repo ↗

## tech stack

areatoolscomfort
languagetypescript, javascript, sqldaily
frontendreact, next, tailwind, css griddaily
backendnode, express, rest, authdaily
datapostgres, supabase, prismaweekly · learning
infravercel, git, github actionsweekly
designfigma, design tokens, copypart of the job

## experience

  • 202X — present [current title]one line of impact, what you owned [company]
  • 202X — 202X [prior title]one line of impact [company]

full résumé → resume.pdf ↓

## now

🌱 may 2026 — six weeks into milestone. learning supabase RLS the hard way.

🌧 reading: [book placeholder] · planted tomatoes & squash · finn is currently asleep on my notes.

## offline

things I make with my hands when I'm not making things with pixels:

pottery
throwing bowls
embroidery
stitching
PNW garden
spring '26
finn 🐕
my dog

## contact

# contact.yml
email:    hello@tranle.dev
github:   github.com/trnle
linkedin: linkedin.com/in/tranle
resume:   resume.pdf
location: seattle, wa
status:   open to interesting conversations
ⓘ deployed on vercel view source ↗ last commit: 2d ago made with care · 2026

Layout grid

  • Sidebar: 280px fixed, full height, sticky.
  • Doc: max-width 820px, padding 40px 56px.
  • Section gap: 40px between h2's. h1 has a bottom rule, h2's have a bottom rule.
  • Scroll: independent — sidebar & doc each scroll on their own.

Why this works for recruiters

  • Status badges at top = scannable like a github repo.
  • TOC = jump straight to projects.
  • "last commit" badge = the site looks alive.
  • Resume.pdf is a literal file in the tree — they don't have to hunt.
03

Project view — milestone.md

required

What renders when the user clicks milestone.md in the tree. Reuses the same chrome; the right pane becomes a case study layout with a meta header, TL;DR, screenshots, and a CTA to the existing case study site.

same tree —
active = milestone.md
case-study meta —
4 cells in a strip
TL;DR
(green callout)
big hero screenshot
"read the full
case study" CTA
⌗tranle.dev/projects/milestone
trnle / projects / milestone.md

# milestone

a full-stack side project, taken from design to ship. typescript · react · node · supabase.

rolesolo · design + dev
timelineapr — present, 2026
stackTS · React · Node · Supabase
status● in progress

TL;DR

One-paragraph summary of what milestone is, who it's for, and why it's interesting. End on the most concrete outcome (shipped feature, metric, lesson learned).

## what it is

2–3 paragraphs on the problem, the audience, and what makes the project worth looking at. Reference the public case study for the deep design dive.

hero screenshot — milestone app, current state
fig 1 · the dashboard, may 2026

## my role

Solo — design + engineering, end to end. What I owned: schema, API, UI, auth flow, deploy. What I'd hand off if I could: an icon set, marketing copy, the QA grind.

## three decisions worth talking about

  • decision 01 [schema decision]why I picked X over Y, the tradeoff, what I'd do next time data
  • decision 02 supabase auth + RLSthe model I landed on after fighting RLS for a week auth
  • decision 03 [ui decision]a UX call that took a few rounds ui

## the design case study

The full design walkthrough — wireframes, decisions, and screenshots — lives at trnle.github.io/milestone-public ↗. This page is the engineering companion.

links

→ live site ↗
→ github repo ↗
→ design case study ↗

← back to README next: project-02.md →

Case study layout — reusable for any project

  • Hero: h1 + lead paragraph. No borders.
  • Meta strip: 4 cells — role · timeline · stack · status. Status uses a colored dot.
  • TL;DR: green callout, always 1 paragraph max.
  • Body sections: alternate prose and figures. Figures = 16:9, captions in mono.
  • Decisions list: 3 items, structured like commits. This is the "show your thinking" moment.
  • Links callout: grey callout (matching TL;DR shape) with live / repo / case study links.
  • Footer: prev/next file links for keyboard navigation.
04

About view — about.md

nice to have

The "about me" deep cut. Same chrome; the right pane is mostly prose with a couple of personal touches (pet photo, hobbies). This is where personality lives.

⌗tranle.dev/about
trnle / about.md

# about

the longer version. who I am, how I work, what I'm into.

## tl;dr

Full-stack engineer in the PNW. I design and ship products end-to-end. Currently building milestone. Comfortable with TS / React / Node, learning supabase.

## how I work

Three or four short paragraphs on the work style:

  • I treat design and engineering as one job.
  • I write the wireframe, the schema, the tests, the copy.
  • I'd rather ship a small, opinionated thing than a big committee-shaped thing.
  • I take notes by hand and code in the morning.

## outside the screen

The hands-on stuff: pottery, embroidery, sewing, the garden, snowboarding when the PNW lets me.

pottery wheel
throwing bowls
garden bed
tomatoes & squash, '26
finn 🐕
finn, the office manager

## what I'm reading

  • now — [book placeholder]
  • 2026 list — on github
  • 2025 — [count] books, [favorite]

## say hi

hello@tranle.dev · the door is open.

← back to README see also: now.md
05

Mobile layout

required

File tree collapses into a hamburger drawer. Top bar shows the file breadcrumb. Everything else flows linearly — same content, single column.

9:41 ●●● ⌶ 100%
trnle / README.md
main
role · full-stack ● open to chat seattle, wa

# tran le

full-stack software engineer · designs & ships web products · pnw 🌲

## projects

milestone hero

📌 milestone ● live

tsreactnodesupabase

design → ship, full stack. case study walks through the schema, auth, and what hurt.

→ read case study · ↗ live

project 02

📌 [project 02]

reactnodepostgres

one-line summary.

→ details · ↗ repo

## now

🌱 may '26 — six weeks into milestone. supabase RLS. tomatoes in the garden. finn napping.

9:41 ●●● ⌶ 100%
trnle / README.md
role · full-stack

# tran le

full-stack…

✕
📁 trnle main
  • 📄 README.md
  • 📄 about.md
  • projects
  • 📄 milestone.md
  • 📄 project-02.md
  • career
  • ⚙ skills.json
  • 📄 resume.pdf

Mobile rules

  • Breakpoint: 768px. Below = drawer.
  • Hamburger = top-left. Tap → drawer slides in from left, 70% width.
  • Tapping a file → drawer closes, doc swaps.
  • TOC becomes a sticky select (or collapsible) at top of long pages.
  • Project thumbnails stay 16:9 (full width).
  • Drawer should have a subtle scrim behind it (blur OK).

Touch targets

File tree rows: 44px tall minimum. Anchor links in TOC: same. Footer links: 40px.
system & specs ↓
06

Design tokens

required

Use CSS custom properties at the :root. Tailwind config maps to these. No gradients anywhere — solid fills only.

Colors

#f6f4ee
paper
--paper
page background · cream
#ede9da
paper-2
--paper-2
cards, hover states
#16140f
ink
--ink
primary text
#4b463d
ink-2
--ink-2
secondary text
#8a847a
ink-3
--ink-3
muted · captions · paths
#d8d3c4
rule
--rule
hairlines, borders
#3a6e44
accent
--accent
moss green · links, status
#cfddc4
accent-soft
--accent-soft
badges, chip backgrounds

Spacing & radius

Spacing scale

  • --s-1 = 4px
  • --s-2 = 8px
  • --s-3 = 12px
  • --s-4 = 16px
  • --s-6 = 24px
  • --s-8 = 32px
  • --s-10 = 40px
  • --s-14 = 56px

Radius

  • --r-sm = 2px (badges)
  • --r-md = 4px (cards, callouts)
  • --r-pill = 999px (chips, status dots)
  • No large rounded radii. Keep it crisp.
07

Typography

required

Two families. Inter for prose & headings. JetBrains Mono for metadata, code, file paths, and chrome. That's it. No display serif.

family: Inter weight: 700 size: 44px line: 1.05 tracking: -0.02em

# tran le

family: Inter weight: 600 size: 22px line: 1.2

## featured projects

family: Inter weight: 400 size: 14px line: 1.6

Body copy lives at 14/22. Lead paragraphs are 15/24, italic, ink-2 color. Keep lines under 70 characters by capping the doc width at 820px.

family: JetBrains Mono weight: 400 size: 12px tracking: 0.02em

trnle / projects / milestone.md  ·  status: ● open to chat

Headings get a # prefix

The literal # and ## characters before headings are decorative — they render in --ink-4 (muted). This is the most recognizable "I'm a markdown doc" signal and the strongest visual moment in the design.
08

Components

required

Eight components do most of the work. Each is small, composable, and reusable across files.

StatusBadge <StatusBadge label="status" value="open" tone="green" />

github-style two-half badge. label is dark, value is light. used in the header strip.
rolefull-stack
status● open to chat
stackts · react · node
  • propslabel, value, tone?
  • tonesdefault, green, yellow
  • height22px
  • typemono 10px / 0.03em
  • radius3px
  • a11yrenders as <span>, not interactive

FileTree <FileTree items={tree} active={path} />

left rail. groups separated by uppercase labels. active row tinted green. ⌘K opens "go to file".
📁 trnlemain
  • 📄 README.md
  • 📄 about.md
  • 📁 projects/
  • 📄 milestone.md
  • width280px
  • behaviorclick row → push route → load .md → swap doc
  • activematch against router path
  • a11yrender as <nav> + <ul/li>, keyboard arrow navigation
  • groupslabels as aria-hidden heading rows
  • shortcut⌘K opens search / "go to file"

ProjectCard <ProjectCard project={p} />

240px thumb left, title + tags + summary + actions right. lives inside README.md and the projects directory listing.
project thumb

📌 milestone ● live

tsreactsupabase

design → ship, full stack.

  • grid240px 1fr · gap 24px
  • thumbaspect 4/3 · dashed border placeholder until image set
  • livepulse-dot pill if status === "live" or "in progress"
  • tagslast chip = primary stack, uses accent tone
  • hoverwhole card → slight bg darken; thumb gets subtle scale
  • linkclick anywhere on card → project route

TOC <TableOfContents headings={hs} />

sticky on desktop, top of doc. auto-generated from h2's. green left border.
table of contents
  1. about
  2. featured projects
  3. tech stack
  • sourcescan rendered MDX for h2 nodes
  • linkanchor id = slugified heading
  • stickyon long docs only (> 4 h2s), top: 24px
  • activehighlight current section as user scrolls

StackTable <StackTable rows={skills} />

three columns: area, tools, comfort. mono in a markdown-table style.
areatoolscomfort
frontendreact, nextdaily
datasupabaselearning
  • sourcecontent/skills.json
  • colsarea / tools / comfort
  • typemono 12px
  • borders1px --rule on every cell

NowCallout <Blockquote tone="now" />

soft green blockquote. lives on README and stands alone on /now.
🌱 may 2026 — six weeks into milestone. learning supabase RLS.
🌧 reading: [book]. tomatoes & squash. finn napping.
  • tonegreen left border, faint green bg
  • emojioptional, leads each line
  • updateuser updates now.md directly
  • stampshow last-modified date subtly above

PhotoStrip <PhotoStrip photos={ps} />

4-up grid of square photos w/ captions. understated polaroid (no rotation in this direction).
pottery
bowls
garden
spring
finn
my dog
snow
stevens
  • grid4 cols desktop · 2 cols mobile
  • aspect1:1 square
  • captionmono 10px --ink-3
  • clicklightbox optional — not P0

CodeBlock (contact) <pre> rendered as yaml-styled</pre>

contact section is rendered as a faux yaml file. dark ink background, mono.
# contact.yml
email:    hello@tranle.dev
github:   /trnle
  • sourcecontent/contact.yml rendered with syntax highlighting
  • typemono 12px, line 1.7
  • colorskey = soft green, value = paper, comment = grey/italic
  • clickemail value = click-to-copy w/ toast
09

Interactions

required

Restraint. Subtle states, no flashy motion, but the file-tree interaction is the centerpiece — make it feel snappy.

File tree

  • Click row → router push → fetch (or import) .md → swap doc with a 120ms fade.
  • Active row gets bg: --accent-faint + color: --accent-2 + bold.
  • Folder rows expand/collapse with caret rotation.
  • Hover row: bg: --paper (lighter than the sidebar's --paper-2).
  • Keyboard: ↑/↓ moves selection, Enter opens.

⌘K / Cmd+K

  • Opens a centered command palette: "Go to file".
  • Fuzzy match against file names + section headings.
  • Arrow + Enter to navigate, Esc closes.
  • Optional commands: resume.pdf, email, copy email.

Status pulse

  • The "open to chat" badge has a 2s pulse on the dot — very subtle, no fast pulses.
  • Disable when prefers-reduced-motion.

Copy email

  • Clicking the email value in the YAML block → navigator.clipboard.writeText + a small toast ("copied").
  • Toast: mono, 11px, fades after 1.5s.

"Last commit" badge

  • Calculate from git log at build time, display as "Xd ago".
  • Makes the site feel maintained.
  • If the value drifts past 90 days, badge stays — don't blow up.

Things NOT to add

  • No page transitions / Framer Motion sweeps.
  • No cursor effects, no spotlight, no parallax.
  • No dark mode toggle (per dealbreaker).
  • No gradients anywhere (per dealbreaker).
  • No autoplay video, no sound.
10

Content & copy notes

required

What goes in each file. Lowercase voice. Short sentences. Specific over clever. Personal but not cute.

README.md · the landing

~300 words total. Should be readable in 60 seconds.
# tran le
one-line tagline. concrete. who, what, where.

## about — 2 paragraphs
## featured projects — milestone + 1 other
## tech stack — table from skills.json
## experience — 3 most recent roles, 1 line each
## now — pull from now.md
## offline — 4 photos
## contact — yaml block
  • tagline"full-stack software engineer · designs and ships web products end-to-end · pacific northwest"
  • voicelowercase, mostly. Capitalize proper nouns & sentence starts.
  • linksprefer → link text with an arrow over bare URLs

about.md · the deep cut

~500 words. The "longer story" version. Personality lives here.
# about
## tl;dr — 1 paragraph
## how I work — 4 bullets, voice-y
## outside the screen — pottery, garden, snowboard, finn
## what I'm reading — current + recent list
## say hi — 1 line CTA
  • tonewarmer than README. small jokes ok. no caps lock.
  • finnmention finn (the dog). this is mandatory.
  • images3 squares — pottery, garden, finn

milestone.md · the case study companion

Engineering-side companion to the existing design case study at trnle.github.io/milestone-public.
# milestone
meta strip · TL;DR · what it is · my role ·
three decisions worth talking about ·
the design case study (link out) · links

~600 words + 3 figures
  • linkagelink to trnle.github.io/milestone-public from "design case study" section
  • decisions3 numbered, each with tradeoff + retro
  • figuresat least 1 hero shot, 1 schema/architecture sketch ok if placeholder

now.md · updated weekly

/now page in the spirit of nownownow.com. inspired by the green callout. Mix work + life.
# now
last updated: may '26

## building
- milestone · auth + invite flow

## learning
- supabase RLS

## life
- garden · tomatoes vs squash, 2026
- finn · asleep
- reading · [book]
  • updateedit weekly · this is the "alive" signal
  • stampshow the last-updated date prominently
11

Stack & build checklist

required

Pick the stack that's easiest to maintain. The whole point is fast iteration on markdown files.

Recommended stack

  • Framework: Next.js 15 (app router) — file-based routing maps 1:1 to the metaphor.
  • Content: .md & .mdx files in /content. Loaded with next-mdx-remote.
  • Styling: Tailwind v4 + the design tokens from §06.
  • Type: next/font for Inter + JetBrains Mono. Self-host.
  • Deploy: Vercel.
  • Domain: point tranle.dev at it. keep trnle.github.io as a 301 redirect.

Why MDX, not a CMS

  • You're a dev — editing markdown in vscode is faster than any CMS UI.
  • It IS a repo. Commit history = a real changelog.
  • Search engines parse it fine.
  • No login required to update — push to main, vercel rebuilds.

Build checklist for Claude Code

Setup
Scaffold Next.js 15 with app router. TypeScript strict.
Install tailwindcss, next-mdx-remote, gray-matter, rehype-slug, rehype-autolink-headings.
Set up design tokens in app/globals.css per §06.
Configure next/font with Inter + JetBrains Mono.
Layout
Build RootLayout with 280px sidebar + main area. Sticky scroll on both.
Build FileTree component — driven by a typed config in lib/tree.ts.
Build StatusBadge, ProjectCard, TOC, NowCallout, PhotoStrip, CodeBlock.
Build mobile drawer — slides from left, hamburger trigger, scrim.
Content
Create /content directory with README.md, about.md, now.md, projects/milestone.md, projects/[slug].md.
Use frontmatter for title, summary, tags, status, thumbnail.
Add content/skills.json and render via the StackTable component.
Add content/contact.yml and render with syntax highlighting.
Drop public/resume.pdf.
Interaction
Build ⌘K command palette (component + listener).
Wire click-to-copy on email value.
Compute "last commit: Xd ago" at build time from git log.
Respect prefers-reduced-motion: disable pulse animation.
Polish & ship
OG image: render the README h1 + status badges on a paper background.
Favicon: a small 📁 or moss-green dot.
Meta tags: title, description, twitter card.
Lighthouse: 95+ on all four scores.
Deploy to Vercel · point tranle.dev · 301 from trnle.github.io.
end of handoff · ship it

tranle.dev · README direction · v1.0 · may 2026 · made for handoff to Claude Code