SuperAPI AI Directory

reader-first-portfolio-architecture

Frontend & websites

View repository

Updated 10-15 17:19

About this skill

Reader-First Portfolio Architecture Skill

Purpose

Design personal websites, portfolios, landing pages, and README hubs around what the reader can gain, not around generic sections like "Blog," "Projects," and "Resume."

Principle

A visitor does not primarily care that you have projects, posts, or a resume. They care about:

  • What can I learn?
  • What can I use?
  • Why should I trust this person?
  • How can I work with or contact them?

Replace Generic Sections

Generic Section Reader-First Section
Blog Guides from real accomplishments
Projects Tools you can use
Resume Results & track record
Contact Ways to get in touch
About Operating principles / beyond work / how I think

Recommended Homepage Layout

  1. Hero
    • One authority-backed line.
    • Explain what you do, what proof exists, and what the reader can use.
  2. Guides
    • List actual guide titles immediately.
    • Include status labels: published, in progress, planned.
    • Do not hide everything behind "Read the blog."
  3. Tools
    • List the most relevant tools directly.
    • Include benefit-focused one-liners.
    • Link to setup guides or repositories.
  4. Results & Track Record
    • Show proof so the reader can judge whether the methods lead to outcomes they want.
    • Add organization context before bullets.
    • Bullets should focus on outcomes, not responsibilities.
  5. Testimonials / What Others Say
    • Use concise quotes in callout blocks.
    • Include attribution and role when relevant.
  6. Ways to Get in Touch
    • Explain what kind of problems are appropriate to reach out about.

Layout Pattern

Use a wide layout and reduce unnecessary vertical stacking.

Good:

  • 2x2 grid for top-level categories
  • Full-width proof section
  • Cards for tools/guides
  • One-column track record if entries are dense

Avoid:

  • Narrow centered column for everything
  • Empty "Explore more" cards with no visible content
  • Navigation tabs that hide the core value

Checklist

  • Are the actual guide/tool titles visible without clicking?
  • Does every section answer "what can the reader do with this?"
  • Are project descriptions framed as usable tools?
  • Is proof used to support trust, not to brag?
  • Does the page avoid negative framing such as "not toy projects"?