把一段时间里做过的项目，长成一棵可以拖动、缩放、点开的树 · Grow your projects into a tree you can pan, zoom and open
Translation pending
ProductivityJavaScript · HTMLGitHub @Electro-DigOnlineOwner unconfirmed
Have you tried it? One tap is enough. No sign-in needed.
No updates detected yet. GitHub releases will appear here.
GitHub star growth between the latest completed 8-hour observations
DeepSeek Harness Remote can securely connect a phone or another computer to the computer where you run DeepSeek Harness, so you can continue your work anytime and anywhere, check progress anytime, and continue working.
AI translation
Hide the menu bar icons you don't need behind a chevron and bring them back the instant you ask. Native, private, free for macOS.
You hold the pen. AI keeps your ink flowing. Textus is a free, open-source, next-generation Markdown editor for macOS, Windows and Linux, with a writing assistant built in.
Dictate into any app on macOS or Windows. Arion recognizes Chinese, English and both mixed on your device, works offline, and is open source under AGPL-3.0.
Owners of public repositories under a personal GitHub account can sign in to verify ownership and manage the introduction themselves. No administrator approval is needed.
Sign in, generate a verification file, and commit it to this repository’s default branch within 30 minutes. Files on other branches or forks do not count. Then check the file below to manage the project without administrator approval. Keep the file to retain your access.
If needed, you will go to sign-in. After signing in, return here and press your chosen verification button again.
Run /nomorevibe verify in your project folder to verify ownership and manage the introduction yourself.
Verify in one minuteAsk about other verification options
The maker's introduction consists of the line above. Read the repository README for more details. Repository README ↗
Loading the full README.
Read the full README ↗把一段时间里做过的项目，长成一张可以拖动、缩放、点开的图。同一份内容，两种排法，页面左上角随时切换：
纯静态网页，不需要构建，不需要后端。在线示例：https://electro-dig.github.io/portfolio-tree/（树形：?mode=tree）
生长图 map | 树形 tree |
|---|---|
仓库里的示例内容全部是虚构的，图片和视频由 tools/make_demo_media.py 生成。
python tools/serve.py
打开 http://localhost:8080/ 。也可以直接双击 index.html（本地文件也能看，只是视频进度条可能不能拖）。
把图片、视频放进 content/media/。建议宽度不超过 1280 像素；视频用 mp4（H.264），每段几秒到二十秒就够。
编辑 content/content.js：标题、时间范围、大枝 → 小枝 → 作品、活动、海报。文件里每个字段都有注释。
运行素材扫描（需要 ffmpeg）：
python tools/scan_media.py
它会记下每个文件的尺寸、时长、有没有声音，写进 content/media.js，并给视频截一张封面图。每次增删素材后都要跑一次。
刷新网页。
一件作品的写法：
{ title: "口袋鼓机", date: "2024.02", tier: "F", media: ["clip01.mp4"],
note: "八个格子，点一下就是一段节奏", stamp: "精选",
play: [["在线试玩", "https://example.com/"]], link: "https://example.com/post" }
tier："F" 重点（大卡片，流动观看时镜头会停留）、"N" 一般（默认）、"P" 路过（小卡片）。media 可以放多个文件，会排成一个小网格。play 是“去体验”按钮，可以有多个；link 是“原文链接”。stamp 是卡片右上角的小印章，比如“精选”“展出”。大枝 → 小枝 → 作品：生长图把一个大枝下所有小枝的作品按时间排成一条线，树形把每个小枝画成单独的分杈。大枝上还可以写 color（生长图里的颜色）、treeColor（树形里的颜色）、angle（生长图里朝哪个方向长，单位是度，0 是正右，顺时针），不写就用默认的。
想放背景音乐或者一支录好的视频：在 site 里填 music: "content/music.mp3"、film: "content/film.mp4"。没填的话，对应的按钮和设置会自动隐藏。
map 生长图：暖黄点阵纸，手绘墨线（默认）。tree 树形：浅绿点阵纸，枝条是实心色带。页面左上角的「生长图 / 树形」按钮切换，浏览器会记住上次选的。content/content.js 里的 site.mode 决定第一次打开时显示哪种，网址后加 ?mode=tree 可以直接打开树形。颜色和字体在 assets/themes.css 里。
python tools/make_cover.py # covers/ 下出 4 张：横版 4:3、竖版 3:4，各有带标题和不带标题
python tools/make_cover.py --mode tree # 树形的封面
需要本机装有 Chrome 或 Edge（找不到时用环境变量 CHROME 指定路径）。标题来自 site.coverTitle 和 site.subtitle。
| 参数 | 作用 |
|---|---|
?mode=tree / ?mode=map | 打开树形 / 生长图 |
?content=NAME | 读取 content-NAME/ 而不是 content/（比如一份不想放进仓库的私人内容，content-private/ 已在 .gitignore 里） |
?view=x,y,z | 从指定位置和缩放开始 |
?at=60 | 停在流动观看的第 60 秒 |
?wall | 打开时直接显示海报墙 |
?cover / ?cover=title / ?cover=title-v | 封面模式（隐藏界面、高清线条、横版 / 竖版标题） |
index.html 页面
assets/engine/map.js 生长图：布局、生长动画、绘制
assets/engine/tree.js 树形：布局、生长动画、绘制
assets/engine/site.js 交互：拖动缩放、点开、视频、设置、海报墙、封面
assets/themes.css 两种模式的配色
assets/fonts/ 得意黑 Smiley Sans（SIL OFL 1.1，见 OFL.txt）
content/ 你的内容（示例为虚构）
tools/ scan_media.py / make_cover.py / make_demo_media.py / serve.py
docs/ 预览图
Portfolio Tree grows your projects into a map you can pan, zoom and open, in two layouts you can switch between on the page. Growth map (default): your first work is a ring in the middle, each field grows out of it as a line with its works in time order, and events sit on a hand-drawn timeline on top. Tree: the trunk is time, big branches are fields that sprout in the month they started, sub-branches are themes, works hang at the twig ends and events ripen as fruit beside the trunk. "流动观看" (Watch it grow) replays the whole thing growing.
content/media/, edit content/content.js (every field is commented).python tools/scan_media.py (needs ffmpeg) to record media sizes into content/media.js.python tools/serve.py → http://localhost:8080/.Layouts: map (default) and tree — switch on the page, set site.mode, or add ?mode=tree.
Covers: python tools/make_cover.py [--mode tree] (needs Chrome or Edge). Static files only; no build step, no backend. Live demo: https://electro-dig.github.io/portfolio-tree/
Code is MIT; the bundled font Smiley Sans is SIL OFL 1.1. All demo content is fictional and generated by tools/make_demo_media.py.