ArthurZakirov 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
- Hero
- One authority-backed line.
- Explain what you do, what proof exists, and what the reader can use.
- Guides
- List actual guide titles immediately.
- Include status labels: published, in progress, planned.
- Do not hide everything behind "Read the blog."
- Tools
- List the most relevant tools directly.
- Include benefit-focused one-liners.
- Link to setup guides or repositories.
- 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.
- Testimonials / What Others Say
- Use concise quotes in callout blocks.
- Include attribution and role when relevant.
- 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"?