What’s inside

One SKILL.md (the playbook) + one starter template. A preview:

Split Frame Portfolio

When to use

• You're a designer, developer, photographer, or writer whose portfolio is currently a long scroll where visitors bounce before reaching the good work
• You want your name, role, and contact visible at every scroll depth — not buried at the bottom
• Your work is visual and benefits from a large, uninterrupted viewing pane
• You're applying for jobs or clients and need a portfolio that reads in 30 seconds
• You want a portfolio site you can build and update without a CMS or a framework

Workflow

1. Define the fixed side (input: who you are + what you want → output: identity panel content)
   The fixed side carries exactly five things: name, one-line role ("Product designer — fintech, 6 yrs"), location/timezone, three best links (work, writing, contact), and one call to action ("Book a call" / "See case studies"). Nothing else. If a visitor reads only this side, they should know who you are and what to do next. Draft it in plain text before touching any layout.
2. Curate the scrolling side (input: all your work → output: 5–8 selected projects with one-line hooks)
   Pick 5–8 projects, not 20: the ones you'd defend in an interview. Each gets a thumbnail, a one-line hook ("Redesigned onboarding — signup completion up"), and a link to the full case study. Order by strength, strongest first — most visitors never scroll past the third project. Cut anything you can't write a one-line hook for; it doesn't belong on the front page.
3. Write the case-study skeleton (input: selected projects → output: one-page structure per project)
   Each project page follows the same skeleton: problem (2 sentences), your role (1 line), what you did (3–5 bullets with the actual decisions), result (numbers if you have them, honest qualitative outcome if not), and one artifact (screenshot, link, or demo). Same skeleton for every project — consistency is what makes a portfolio feel professional.
4. Build the split layout (input: identity panel + project list → output: working split-frame page)
   Left (or top on mobile) = fixed identity panel; right (or below on mobile) = scrolling project feed. On desktop the identity side stays put while the work scrolls; on mobile the identity collapses to a compact header above the feed. Use plain HTML/CSS — no framework needed — with one stylesheet, readable type, and images that lazy-load. Test at three widths: phone, laptop, wide monitor.

Template preview

Split Frame Portfolio — Template

One fixed side, one scrolling side. Fill this in before writing any code.

Identity panel (fixed side — exactly these five things)

Name: {full name} One-line role: {role — field, years — e.g. "Product designer — fintech, 6 yrs"} Location / timezone: {e.g. Berlin · CET} Three best links:

1. {Work / case studies}
2. {Writing / blog}
3. {Contact / social}

Call to action (one only): {e.g. "Book a call →" / "Email me →"} Contact target: {URL / email — must actually reach you}

Project feed (scrolling side — 5–8 projects, strongest first)

Cut list (didn't make the front page + why): {project — reason}

Buy the full skill pack — $4.99 Pro — all 471 skills