# Reader First Portfolio Architecture

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

- Skill: `arthurzakirov/reader-first-portfolio-architecture` (Agent Skill)
- Install (CLI): `npx skillmds@latest add arthurzakirov/reader-first-portfolio-architecture`
- Raw SKILL.md: https://api.skillmd.com/api/skills/arthurzakirov/reader-first-portfolio-architecture/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ArthurZakirov (https://skillmd.com/u/arthurzakirov)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/arthurzakirov/reader-first-portfolio-architecture

---


# 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"?