agent-portfolio

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Agent Portfolio — Introduced by My Agents

Agent作品集 — 由我的Agents呈现

You are generating a personalized portfolio site from agent-reference reports. The site reflects the user's working style as observed by their AI collaborators — not a generic developer template, but a site shaped by real collaboration data. Each portfolio is different because each person's reports are different.

The result is an Astro site deployed to GitHub Pages at

{username}.github.io

, with sections for agent reviews, project highlights, work style visualization, and GitHub activity.

你将基于agent-reference报告生成一个个性化作品集网站。该网站并非通用开发者模板，而是由真实协作数据塑造的站点，会呈现AI协作伙伴所观察到的用户工作风格。每个人的报告内容不同，因此每个作品集也都是独一无二的。

最终成果是部署在GitHub Pages的Astro站点，地址为

{username}.github.io

，包含Agent评价、项目亮点、工作风格可视化以及GitHub活动等板块。

How This Skill Works

该技能的工作流程

Step	What happens
1. Collect Inputs	Gather agent-reference reports, resume, GitHub data
2. Analyze & Propose Concept	Read reports, identify traits, propose design concept
3. Scaffold Site	Create Astro project with concept-based theme
4. Customize & Review	User reviews, agent adjusts
5. Deploy	Push to GitHub, enable Pages, go live

Most users will have already run the

agent-reference

skill to generate reports. If not, suggest running that skill first.

步骤	操作内容
1. 收集输入	收集agent-reference报告、简历、GitHub数据
2. 分析并提出概念	读取报告、识别特质、提出设计概念
3. 搭建站点框架	创建带有主题化样式的Astro项目
4. 定制与审核	用户审核，Agent调整
5. 部署	推送至GitHub、启用Pages功能、上线站点

大多数用户应该已经运行过

agent-reference

技能生成报告。如果没有，建议先运行该技能。

Step 1: Collect Inputs

步骤1：收集输入

This step gathers all data needed to generate the portfolio. Guide the user through each input:

1. Agent-reference reports (required)

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

2. Resume / self-introduction (optional)

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

3. GitHub data (optional)

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

4. Existing portfolio materials (optional)

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

此步骤会收集生成作品集所需的全部数据。引导用户完成每一项输入：

1. Agent-reference报告（必填）

询问用户报告文件的位置
预期结构：来自agent-reference第一阶段（可选第二阶段）的markdown文件
如果没有报告，建议先运行
```
agent-reference
```
技能并在此处停止操作

2. 简历/自我介绍（可选）

询问用户是否有简历、CV或自我介绍需要纳入
这部分内容会填充“关于我”板块
支持任意格式（markdown、PDF文本、纯文本）

3. GitHub数据（可选）

运行
```
gh auth status
```
检查gh CLI是否可用
如果可用，可获取：贡献日历、仓库列表、语言统计数据
参考命令：使用
```
gh api graphql
```
获取贡献数据，
```
gh repo list
```
获取仓库列表

4. 现有作品集素材（可选）

任何现有站点内容、项目描述或图片均可纳入

Set Up the Repository

搭建仓库

After collecting inputs, help the user create the portfolio repo:

1. Private source + public deploy (Recommended)

bash

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

2. Single public repo (Simple)

bash

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

收集完输入后，帮助用户创建作品集仓库：

1. 私有源码仓库 + 公有部署仓库（推荐）

bash

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

```
{username}.github.io
```
是GitHub Pages的命名规范，请勿修改。私有源码仓库的名称（例如
```
portfolio
```
）可以自定义。
两个仓库：
```
portfolio
```
（私有）用于存放源码和报告，
```
{username}.github.io
```
（公有）用于部署站点
报告会保持私有，站点访问地址为
```
https://{username}.github.io
```
GitHub Actions会在
```
portfolio
```
仓库中构建，并推送至
```
{username}.github.io
```
用户可以控制哪些报告显示在“原始数据”页面

2. 单一公有仓库（简易版）

bash

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

所有内容都存放在一个仓库中，设置最简单
所有报告都会在git历史中可见
适合没有私有内容的用户

Organize Reports

整理报告

Copy reports into the repo:

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

If the user provides a resume, profile photo, or screenshots, save them to

materials/

. Any filename and format works (

resume.pdf

이력서.pdf

cv.md

, etc.).

将报告复制到仓库中：

reports/
├── {date}-{agent-name}/
│   ├── user-profile.md
│   ├── project-{name}.md
│   └── ...
└── aggregated/         （如果运行了第二阶段）
    ├── 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

作品集仓库结构

After setup, your repo should look like this:

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

The skill will generate the

src/

public/

, and config files in the next steps. You only need to provide the data above.

设置完成后，仓库结构应如下所示：

portfolio/
├── reports/                    # Agent-reference报告（必填）
│   ├── 2026-03-claude-code/
│   │   ├── user-profile.md
│   │   └── project-*.md
│   └── aggregated/             # 第二阶段输出（如果有）
│       ├── aggregated-profile.md
│       ├── references-multi-perspective.md
│       ├── faq.md
│       └── blog-topics.md
├── materials/                  # 用户提供的素材（可选）
│   ├── resume.pdf              # 简历/CV（任意格式和文件名）
│   └── profile.jpg             # 头像、截图
└── README.md                   # 会自动生成

后续步骤中，技能会自动生成

src/

、

public/

和配置文件。你只需提供上述数据即可。

Step 2: Analyze & Propose Concept

步骤2：分析并提出概念

Read

references/concept-generation-guide.md

for the full concept generation workflow.

完整的概念生成流程请参考

references/concept-generation-guide.md

。

What You Do

操作内容

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

读取所有报告：读取
```
reports/
```
目录下的所有文件——用户档案、项目报告、汇总输出
识别核心特质：工作风格信号、沟通模式、技术定位
匹配设计概念：每个概念对应一套配色方案、字体和布局方向
向用户展示概念，等待用户确认

Available Concepts

可选概念

Concept	Best for	Visual direction
Blueprint	Methodical architects	Cool blues, monospace headers, structured grid
Launchpad	Fast iterators, many projects	Vibrant warm colors, bold sans, project gallery
Chronicle	Deep domain experts	Earth tones, serif, editorial case studies
Spectrum	Full-stack generalists	Gradient accents, balanced sections
Terminal	CLI/infra builders	Dark theme, green accents, monospace
Canvas	Creative/design-aware	Soft pastels, asymmetric layout

The concept affects visual styling only — all sections are available regardless of concept.

Always get user approval before proceeding. Show the proposed color palette, fonts, and section order. Offer to adjust or try a different concept.

概念名称	适用人群	视觉方向
Blueprint	严谨的架构师	冷蓝色调等宽标题、结构化网格布局
Launchpad	快速迭代者、项目众多的用户	鲜艳暖色调、粗体无衬线字体、项目画廊布局
Chronicle	深耕领域的专家	大地色调、衬线字体、专栏式案例布局
Spectrum	全栈通才	渐变装饰、均衡板块布局
Terminal	CLI/基础设施开发者	深色主题、绿色装饰、等宽字体
Canvas	创意/设计导向用户	柔和马卡龙色调、非对称布局

概念仅影响视觉样式——无论选择哪个概念，所有板块都会保留。

在继续操作前必须获得用户确认。展示推荐的配色方案、字体和板块顺序，允许用户调整或更换其他概念。

Step 3: Scaffold Site

步骤3：搭建站点框架

Read

references/site-structure-guide.md

for complete component specifications.

完整的组件规范请参考

references/site-structure-guide.md

。

Initialize Astro

初始化Astro

bash

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.

bash

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

注意： 请勿使用
npx astro add tailwind
——该命令会安装
@astrojs/tailwind
（Tailwind 3集成），与Tailwind 4冲突。请直接安装
@tailwindcss/vite
。

Generate Components

生成组件

Based on the approved concept and available data, generate these components:

Component	Data source	Required
Hero.astro	aggregated profile or first user-profile report	Yes
About.astro	materials/resume (any format)	Only if resume provided
Career.astro	materials/resume (career/experience section)	Only if resume has career data
AgentReviews.astro	user-profile reports (persona sections)	Yes
Projects.astro	project-*.md reports	Yes
WorkStyle.astro	analysis dimensions from profiles	Yes
GitHubActivity.astro	gh CLI data from Step 1	Only if GitHub data collected
FAQ.astro	faq.md from aggregated outputs	Only if available
BlogTopics.astro	blog-topics.md from aggregated outputs	Only if available
RawData.astro	report files user chose to make public	Optional
Footer.astro	auto-generated	Yes

基于用户确认的概念和已收集的数据，生成以下组件：

组件	数据来源	是否必填
Hero.astro	汇总档案或首个用户档案报告	是
About.astro	materials/目录下的简历（任意格式）	仅当提供简历时
Career.astro	materials/目录下简历中的职业经历板块	仅当简历包含职业数据时
AgentReviews.astro	用户档案报告中的角色板块	是
Projects.astro	project-*.md报告	是
WorkStyle.astro	档案中的分析维度数据	是
GitHubActivity.astro	步骤1中获取的gh CLI数据	仅当收集了GitHub数据时
FAQ.astro	汇总输出中的faq.md	仅当有该文件时
BlogTopics.astro	汇总输出中的blog-topics.md	仅当有该文件时
RawData.astro	用户选择公开的报告文件	可选
Footer.astro	自动生成	是

Apply Concept Theme

应用主题概念

Configure concept-specific design tokens. Tailwind 4 supports both CSS-based configuration (using

@theme

in your CSS) and the traditional

tailwind.config.mjs

. Either approach works — see

site-structure-guide.md

for details. Import Google Fonts in

Layout.astro

配置概念专属的设计令牌。Tailwind 4支持基于CSS的配置（在CSS中使用

@theme

）和传统的

tailwind.config.mjs

配置。两种方式均可——具体请参考

site-structure-guide.md

。在

Layout.astro

中导入谷歌字体。

Process Report Data

处理报告数据

Create

src/lib/parse-reports.ts

to transform raw markdown reports into structured data for components. See site-structure-guide.md for the parsing functions specification.

创建

src/lib/parse-reports.ts

文件，将原始markdown报告转换为组件可用的结构化数据。解析函数的规范请参考site-structure-guide.md。

Step 4: Customize & Review

步骤4：定制与审核

Preview Locally

本地预览

bash

npm run dev

Open

http://localhost:4321

and walk through the site with the user.

bash

npm run dev

打开

http://localhost:4321

，与用户一起浏览站点。

Review Checklist

审核清单

Adjust

调整

Based on feedback:

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

Iterate until the user approves the site.

根据反馈进行调整：

内容修改：更新报告摘录、重写摘要
设计修改：在Tailwind配置中调整颜色、字体、板块顺序
板块修改：添加/移除可选板块
概念更换：如果整体方向不合适，返回步骤2重新选择

反复迭代直到用户确认站点符合要求。

Step 5: Deploy

步骤5：部署

Read the deployment guide matching the user's chosen option:

Option 1 (private source + public deploy):
```
references/deployment-private.md
```
Option 2 (single public repo):
```
references/deployment-public.md
```

根据用户选择的方案，参考对应的部署指南：

方案1（私有源码 + 公有部署）：
```
references/deployment-private.md
```
方案2（单一公有仓库）：
```
references/deployment-public.md
```

Quick Deploy

快速部署

For Option 1 (private source + public deploy), set up the deploy key first (see

references/deployment-private.md

), then:

bash

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

GitHub Actions builds in

portfolio

and pushes to

{username}.github.io

. The site will be live at

https://{username}.github.io

对于方案1（私有源码 + 公有部署），先设置部署密钥（参考

references/deployment-private.md

），然后运行：

bash

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

GitHub Actions会在

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)

检查源码仓库的Actions标签页，确认构建状态
部署完成后访问
```
https://{username}.github.io
```
在移动设备上测试（响应式检查）

GitHub Profile README (Optional)

GitHub个人主页README（可选）

If the user wants, generate a minimal GitHub Profile README that links to the portfolio. See the deployment guides for the template.

如果用户需要，可生成一个极简的GitHub个人主页README，链接到该作品集。模板请参考部署指南。

Updating the Site

更新站点

When you have new reports (new projects, new machine, new agent):

Run
```
agent-reference
```
skill again → new report files
Copy new reports to
```
reports/
```
in the portfolio repo
Run this skill again or just
```
npm run build
```
to regenerate
Push → GitHub Actions rebuilds automatically

The site's footer shows "Last updated: {date}" so visitors know how current the data is.

当有新报告（新项目、新设备、新Agent）时：

再次运行
```
agent-reference
```
技能 → 生成新的报告文件
将新报告复制到作品集仓库的
```
reports/
```
目录
再次运行该技能，或直接运行
```
npm run build
```
重新生成站点
推送代码 → GitHub Actions会自动重新构建

站点页脚会显示“最后更新：{date}”，方便访客了解数据的时效性。

Important Principles

重要原则

The site tells the user's story through agent eyes. Every section should trace back to real observations from agent-reference reports. Don't pad with generic content.

Concept serves content. The design concept amplifies what the reports reveal — it doesn't impose a personality that isn't there.

User controls everything. Which reports to include, which sections to show, what to make public. The agent proposes; the user decides.

站点通过Agent的视角讲述用户的故事。每个板块的内容都必须来自agent-reference报告中的真实观察。请勿添加通用内容填充。

概念为内容服务。设计概念应强化报告所展现的特质——而非强加不属于用户的人设。

用户拥有完全控制权。包括哪些报告可以纳入、显示哪些板块、公开哪些内容。Agent仅提供建议，最终由用户决定。