Agent Portfolio — Introduced by My Agents

{username}.github.io

How This Skill Works

agent-reference

Step 1: Collect Inputs

• Ask the user where their report files are
• Expected structure: markdown files from agent-reference Phase 1 and optionally Phase 2
• If no reports exist, suggest running the

  agent-reference

  skill first and stop here

• Ask if they have a resume, CV, or self-intro to include
• This populates the "About" section
• Any format (markdown, PDF text, plain text)

• Check

  gh auth status

  to see if gh CLI is available
• If available, offer to pull: contribution calendar, repo list, language stats
• Reference:

  gh api graphql

  for contribution data,

  gh repo list

  for repos

• Any existing site content, project descriptions, or images to incorporate

Set Up the Repository

gh repo create {username}/portfolio --private --clone
cd portfolio
gh repo create {username}/{username}.github.io --public

• The

  {username}.github.io

  name is a GitHub Pages convention and must not be changed. The private source repo name (e.g.,

  portfolio

  ) can be anything.
• Two repos:

  portfolio

  (private) for source/reports,

  {username}.github.io

  (public) for deployed site
• Reports stay private, clean URL:

  https://{username}.github.io

• GitHub Actions builds in

  portfolio

  and pushes to

  {username}.github.io

• User controls which reports appear on the Raw Data page

gh repo create {username}/{username}.github.io --public --clone
cd {username}.github.io

• One repo for everything — simplest setup
• All reports visible in git history
• Fine if user has no private content

Organize Reports

reports/
├── {date}-{agent-name}/
│   ├── user-profile.md
│   ├── project-{name}.md
│   └── ...
└── aggregated/          (if Phase 2 was run)
    ├── aggregated-profile.md
    ├── references-multi-perspective.md
    ├── introduced-by-agents.md
    ├── faq.md
    └── blog-topics.md

materials/

resume.pdf

이력서.pdf

cv.md

Portfolio Repo Structure

portfolio/
├── reports/                    # Agent-reference reports (required)
│   ├── 2026-03-claude-code/
│   │   ├── user-profile.md
│   │   └── project-*.md
│   └── aggregated/             # Phase 2 outputs (if available)
│       ├── aggregated-profile.md
│       ├── references-multi-perspective.md
│       ├── faq.md
│       └── blog-topics.md
├── materials/                  # User-provided materials (optional)
│   ├── resume.pdf              # Resume/CV (any format and filename)
│   └── profile.jpg             # Profile photo, screenshots
└── README.md                   # Will be auto-generated

src/

public/

Step 2: Analyze & Propose Concept

references/concept-generation-guide.md

What You Do

1. Read all reports in the

   reports/

   directory — user profiles, project reports, aggregated outputs
2. Identify dominant traits — work style signals, communication patterns, technical identity
3. Map to a design concept — each concept has a color palette, typography, and layout direction
4. Present the concept to the user for approval

Available Concepts

Step 3: Scaffold Site

references/site-structure-guide.md

Initialize Astro

npm create astro@latest -- --template minimal --no-install
npm install
npm install tailwindcss @tailwindcss/vite

Warning: Do NOT use

npx astro add tailwind

— it installs

@astrojs/tailwind

(Tailwind 3 integration) which conflicts with Tailwind 4. Install

@tailwindcss/vite

directly instead.

Generate Components

Apply Concept Theme

@theme

tailwind.config.mjs

site-structure-guide.md

Layout.astro

Process Report Data

src/lib/parse-reports.ts

Step 4: Customize & Review

Preview Locally

npm run dev

http://localhost:4321

Review Checklist

• Hero — Does the summary line capture who they are?
• Agent Reviews — Are the persona voices distinct and accurate?
• Projects — Are the right projects highlighted? Any to add/remove?
• Work Style — Does the visualization feel accurate?
• Overall feel — Does the concept match their identity?

Adjust

• Content changes — update report excerpts, rewrite summaries
• Design changes — adjust colors, fonts, section order in Tailwind config
• Section changes — add/remove optional sections
• Concept change — if the whole direction feels wrong, go back to Step 2

Step 5: Deploy

• Option 1 (private source + public deploy):

  references/deployment-private.md

• Option 2 (single public repo):

  references/deployment-public.md

Quick Deploy

references/deployment-private.md

git add -A
git commit -m "Initial portfolio site — Introduced by My Agents"
git push -u origin main

portfolio

{username}.github.io

https://{username}.github.io

Verify

• Check the Actions tab in the source repo for build status
• Visit

  https://{username}.github.io

  once deployment completes
• Test on mobile (responsive check)

GitHub Profile README (Optional)

Updating the Site

1. Run

   agent-reference

   skill again → new report files
2. Copy new reports to

   reports/

   in the portfolio repo
3. Run this skill again or just

   npm run build

   to regenerate
4. Push → GitHub Actions rebuilds automatically

Important Principles