ChraKIs/personal-vibe-coding-road
0
1<!DOCTYPE html>2<html lang="zh-CN">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Fynn · Vibe Coding Road</title>7<link rel="preconnect" href="https://fonts.googleapis.com">8<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>9<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600&family=Noto+Sans+SC:wght@200;300;400;500;700;900&display=swap" rel="stylesheet">10<style>11:root {12 --bg: #0a0a0a;13 --paper: #141414;14 --paper2: #1a1a1a;15 --ink: #f0f0f0;16 --ink2: rgba(255,255,255,.62);17 --ink3: rgba(255,255,255,.35);18 --accent: #ff3b3b;19 --accent2: #3b82f6;20 --border: rgba(255,255,255,.08);21 --border2: rgba(255,255,255,.14);22 --radius: 16px;23 --sans: "Inter","Noto Sans SC","PingFang SC",system-ui,-apple-system,sans-serif;24 --mono: "JetBrains Mono","SF Mono","Consolas",ui-monospace,monospace;25}26*{box-sizing:border-box;margin:0;padding:0}27html,body{width:100%;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}28body{display:flex;flex-direction:column;align-items:center;padding:6vh 5vw 10vh}29 30/* Hero */31.hero{text-align:center;margin-bottom:8vh;max-width:700px}32.hero .tag{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--ink3);margin-bottom:2vh;text-transform:uppercase}33.hero h1{font-weight:200;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:1.5vh}34.hero h1 span{font-weight:600;background:linear-gradient(135deg,var(--accent2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}35.hero p{font-weight:300;color:var(--ink2);font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.6;max-width:560px;margin:0 auto}36 37/* Stats row */38.stats{display:flex;gap:3vw;justify-content:center;margin-bottom:8vh;flex-wrap:wrap}39.stats .st{text-align:center}40.stats .st .num{font-family:var(--mono);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:200;color:var(--ink)}41.stats .st .lbl{font-size:13px;color:var(--ink3);letter-spacing:.12em;margin-top:.4vh}42 43/* Projects grid */44.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2vh 1.5vw;max-width:1100px;width:100%}45.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:3.5vh 2.5vw;transition:border-color .25s,transform .25s;display:flex;flex-direction:column;gap:2vh;position:relative;overflow:hidden}46.card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;opacity:0;transition:opacity .25s}47.card:hover{border-color:var(--border2);transform:translateY(-2px)}48.card:hover::before{opacity:1}49.card.c-youtube::before{background:var(--accent)}50.card.c-amazon::before{background:#FF9900}51.card.c-showcase::before{background:var(--accent2)}52.card.c-ppt::before{background:linear-gradient(90deg,var(--accent2),var(--accent))}53.card .icon{font-size:2rem;line-height:1}54.card .title{font-weight:500;font-size:1.15rem;letter-spacing:-.01em}55.card .desc{font-weight:300;color:var(--ink);font-size:.92rem;line-height:1.55;flex:1}56.card .tags{display:flex;gap:8px;flex-wrap:wrap}57.card .tags span{font-family:var(--mono);font-size:11px;padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--ink3)}58.card .link{font-family:var(--mono);font-size:13px;color:var(--accent2);text-decoration:none;border-bottom:1px dashed rgba(59,130,246,.3);align-self:flex-start;transition:border-color .2s}59.card .link:hover{border-color:var(--accent2)}60 61/* Timeline */62.section-title{font-family:var(--mono);font-size:13px;letter-spacing:.18em;color:var(--ink3);text-transform:uppercase;margin-bottom:3vh;margin-top:8vh;text-align:center}63.timeline{max-width:700px;width:100%;margin:0 auto}64.timeline-item{display:flex;gap:2vw;padding:2vh 0;border-left:1px solid var(--border);padding-left:2vw;margin-left:1vw;position:relative}65.timeline-item::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);position:absolute;left:-4.5px;top:2.8vh}66.timeline-item .date{font-family:var(--mono);font-size:12px;color:var(--ink3);min-width:80px;padding-top:2px}67.timeline-item .content{font-weight:300;font-size:.92rem;color:var(--ink2);line-height:1.5}68.timeline-item .content strong{color:var(--ink);font-weight:500}69 70/* Footer */71.footer{text-align:center;margin-top:10vh;color:var(--ink3);font-family:var(--mono);font-size:12px;letter-spacing:.1em}72 73@media(max-width:600px){74 .grid{grid-template-columns:1fr}75 .stats{gap:5vw}76 .hero h1{font-size:1.8rem}77}78</style>79</head>80<body>81 82<div class="hero">83 <div class="tag">Personal Vibe Coding Road</div>84 <h1>一个亚马逊运营的<br/><span>Vibe Coding 作品记录</span></h1>85 <p>不写一行代码，用自然语言和 AI Agent 对话，从业务需求出发，把工具一个个做出来。</p>86</div>87 88<div class="stats">89 <div class="st"><div class="num">4</div><div class="lbl">项目</div></div>90 <div class="st"><div class="num">2</div><div class="lbl">平台</div></div>91 <div class="st"><div class="num">∞</div><div class="lbl">迭代中</div></div>92</div>93 94<div class="grid">95 96 <!-- YouTube Comment Research -->97 <div class="card c-youtube">98 <div class="icon">💬</div>99 <div class="title">Comment Research · YouTube 评论导出</div>100 <div class="desc">输入关键词搜索 YouTube 视频，批量导出评论与字幕数据。支持 CSV / Excel / JSON 多格式，含筛选排序、暗色模式、API Key 自定义配置。</div>101 <div class="tags">102 <span>YouTube API v3</span>103 <span>Flask</span>104 <span>Railway</span>105 </div>106 <a href="https://youtube-comment-export-production.up.railway.app/" target="_blank" class="link">🔗 在线使用 →</a>107 </div>108 109 <!-- Amazon Review Scraper -->110 <div class="card c-amazon">111 <div class="icon">📦</div>112 <div class="title">Amazon Review Scraper · 评论抓取</div>113 <div class="desc">输入 ASIN 批量抓取亚马逊真实评论，去重筛选导出 CSV。支持多 ASIN 批量、反检测机制和许可证管理。</div>114 <div class="tags">115 <span>Amazon Scraper</span>116 <span>Flask</span>117 <span>HF Space</span>118 </div>119 <a href="https://chrakis-amz-scraper-demo.hf.space/" target="_blank" class="link">🔗 在线使用 →</a>120 </div>121 122 <!-- AI Sharing PPT -->123 <div class="card c-ppt">124 <div class="icon">🎙️</div>125 <div class="title">亚马逊平台技能分享 · Vibe Coding PPT</div>126 <div class="desc">面向亚马逊运营团队的 28 页技术分享 PPT，从 Vibe Coding 概念到真实工具落地，全 HTML 呈现，支持键盘翻页、暗色主题。</div>127 <div class="tags">128 <span>HTML PPT</span>129 <span>Swiss Design</span>130 <span>HF Space</span>131 </div>132 <a href="https://chrakis-ai-sharing.hf.space/" target="_blank" class="link">🔗 查看 PPT →</a>133 </div>134 135 <!-- Showcase -->136 <div class="card c-showcase">137 <div class="icon">🖼️</div>138 <div class="title">Showcase · 项目展示页</div>139 <div class="desc">社交媒体对话风格的 Vibe Coding 协作历程展示，从 0 到成品的故事。</div>140 <div class="tags">141 <span>Showcase</span>142 <span>Static HTML</span>143 <span>HF Space</span>144 </div>145 <a href="https://huggingface.co/spaces/ChraKIs/showcase" target="_blank" class="link">🔗 查看 Showcase →</a>146 </div>147 148</div>149 150<div class="section-title">Vibe Coding 时间线</div>151<div class="timeline">152 <div class="timeline-item">153 <div class="date">2026.05</div>154 <div class="content"><strong>YouTube Comment Research</strong> — 从 ZFORCE Z10 调研需求出发，搭建关键词搜索 → 评论导出完整链路，部署到 Railway。</div>155 </div>156 <div class="timeline-item">157 <div class="date">2026.05</div>158 <div class="content"><strong>前端重构</strong> — Spatial UI 玻璃质感设计，暗色/亮色双主题，红蓝双色方案。加入字幕导出、筛选排序、激活码管理。</div>159 </div>160 <div class="timeline-item">161 <div class="date">2026.06</div>162 <div class="content"><strong>Amazon Review Scraper</strong> — 同一套 Vibe Coding 方法论，切换到亚马逊评论抓取场景。多 ASIN 批量、CSV 导出。</div>163 </div>164 <div class="timeline-item">165 <div class="date">2026.06</div>166 <div class="content"><strong>PPTx 项目展示</strong> — 将网站和经历整理为可演示的 HTML PPT + Showcase 展示页，用于团队分享。</div>167 </div>168</div>169 170<div class="footer">💬 Comment Research by Fynn · A Vibe Coding Project :P</div>171 172</body>173</html>174