index.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>薄荷苏 · AI 再热，也要来口薄荷</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&family=Noto+Sans+SC:wght@400;500;700&family=Fraunces:ital,wght@1,600&family=Caveat:wght@600&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
<style>
  :root {
    --mint: #6ED8C6; --teal: #2F9F97; --yellow: #FFD66E; --yellow-soft: #FFF6DC;
    --coral: #FF7E67; --mint-bg: #DDF8F3; --warm: #FFFDF8; --ink: #2E3435; --ink2: #4A5557;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--warm); font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif; color: var(--ink); font-size: 16px; line-height: 1.7; }
  ::selection { background: var(--yellow); color: var(--ink); }
  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
  .label-caps { font-family: 'Fraunces', serif; font-style: italic; font-size: .85rem; letter-spacing: 4px; color: var(--teal); }
  .hl { background: linear-gradient(transparent 62%, var(--yellow) 62%); padding: 0 3px; }
  .caveat { font-family: 'Caveat', cursive; color: var(--teal); }

  /* ===== Nav ===== */
  nav { position: sticky; top: 0; z-index: 50; background: rgba(255,253,248,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(46,52,53,.07); }
  nav .wrap { display: flex; align-items: center; gap: 14px; padding-top: 14px; padding-bottom: 14px; }
  nav img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--mint); }
  nav b { font-size: 1.05rem; }
  nav .links { margin-left: auto; display: flex; gap: clamp(14px, 3vw, 34px); font-size: .92rem; font-weight: 500; }
  nav a { color: var(--ink2); text-decoration: none; }
  nav a:hover { background: var(--yellow-soft); }

  /* ===== Hero ===== */
  .hero { min-height: 88vh; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(24px, 4vw, 60px); padding: clamp(48px, 8vh, 90px) 0 clamp(40px, 6vh, 70px); }
  .hero .kick { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
  .hero h1 { font-family: 'Noto Serif SC', serif; font-weight: 900; font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 1.22; }
  .hero p.sub { margin-top: 30px; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink2); max-width: 34em; }
  .hero .cta-row { margin-top: 42px; display: flex; gap: 16px; flex-wrap: wrap; }
  .btn { display: inline-block; padding: 14px 34px; border-radius: 100px; font-weight: 700; text-decoration: none; font-size: .98rem; }
  .btn.primary { background: var(--teal); color: var(--warm); }
  .btn.primary:hover { background: var(--ink); }
  .btn.ghost { border: 2px solid var(--mint); color: var(--teal); }
  .btn.ghost:hover { background: var(--mint-bg); }
  .hero-visual { position: relative; display: flex; justify-content: center; }
  .hero-visual::before { content: ''; position: absolute; inset: 6% -2% -4% 8%; background: radial-gradient(circle at 40% 35%, var(--mint-bg) 0%, transparent 68%); z-index: 0; }
  .hero-visual img { position: relative; z-index: 1; width: min(88%, 420px); border-radius: 28px; }
  .hero-visual .badge { position: absolute; z-index: 2; right: 4%; bottom: 10%; background: var(--warm); border: 2px solid var(--mint); border-radius: 18px; padding: 10px 20px; font-size: .88rem; font-weight: 700; box-shadow: 0 8px 24px rgba(46,52,53,.08); transform: rotate(2deg); }
  .bigword { position: absolute; z-index: 0; font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: clamp(6rem, 14vw, 11rem); color: var(--mint); opacity: .13; white-space: nowrap; pointer-events: none; user-select: none; }

  /* ===== Section shared ===== */
  section { padding: clamp(80px, 12vh, 150px) 0; position: relative; overflow: hidden; }
  .sec-head { margin-bottom: clamp(36px, 6vh, 64px); }
  .sec-head h2 { font-family: 'Noto Serif SC', serif; font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.7rem); margin-top: 10px; }

  /* ===== 板块一 AI：sticky 左栏 + 内容右栏 ===== */
  #ai { background: var(--warm); }
  .ai-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
  .ai-left { position: sticky; top: 110px; }
  .ai-left p { color: var(--ink2); margin-top: 18px; max-width: 30em; }
  .ai-left .slogan { margin-top: 26px; font-size: 1.5rem; }
  .ep { display: flex; gap: 20px; padding: 26px 28px; border-radius: 20px; margin-bottom: 18px; background: var(--mint-bg); align-items: flex-start; }
  .ep.alt { background: var(--yellow-soft); }
  .ep .n { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--teal); color: var(--warm); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
  .ep h3 { font-size: 1.06rem; margin-bottom: 4px; }
  .ep p { font-size: .9rem; color: var(--ink2); }
  .ep .tag { margin-left: auto; flex-shrink: 0; font-size: .75rem; font-weight: 700; color: var(--coral); border: 1.5px solid var(--coral); border-radius: 100px; padding: 3px 12px; align-self: center; }

  /* ===== 板块二 养自己：全宽色带 + 篇章横排 ===== */
  #grow { background: var(--mint-bg); }
  #grow .sec-head { text-align: center; }
  #grow .sec-head .caveat { font-size: 1.4rem; }
  .chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 20px; }
  .chapter { background: var(--warm); border-radius: 22px; padding: 30px 22px 26px; position: relative; }
  .chapter .m { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 2.2rem; color: var(--mint); }
  .chapter h3 { font-size: 1.02rem; margin: 10px 0 8px; line-height: 1.4; }
  .chapter p { font-size: .84rem; color: var(--ink2); }
  .grow-note { max-width: 620px; margin: 46px auto 0; text-align: center; color: var(--ink2); }
  .grow-note b { color: var(--ink); }

  /* ===== About ===== */
  #about .wrap { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); }
  #about img { width: clamp(120px, 16vw, 180px); height: clamp(120px, 16vw, 180px); border-radius: 50%; border: 6px solid var(--mint); flex-shrink: 0; }
  #about h2 { font-family: 'Noto Serif SC', serif; font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.1rem); }
  #about p { color: var(--ink2); margin-top: 14px; max-width: 44em; }

  footer { border-top: 1px solid rgba(46,52,53,.08); padding: 36px 0 46px; }
  footer .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: .88rem; color: var(--ink2); }
  footer .caveat { font-size: 1.2rem; margin-left: auto; }

  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; min-height: unset; }
    .hero-visual { order: -1; margin-top: 20px; }
    .ai-grid { grid-template-columns: 1fr; }
    .ai-left { position: static; }
    .chapters { grid-template-columns: repeat(2, 1fr); }
    #about .wrap { flex-direction: column; text-align: center; }
  }
  @media (max-width: 600px) { .chapters { grid-template-columns: 1fr; } }
</style>
</head>
<body>

<nav>
  <div class="wrap">
    <img src="assets/avatar.png" alt="薄荷苏"><b>薄荷苏</b>
    <div class="links">
      <a href="#ai">跟薄荷学AI</a>
      <a href="#grow">把自己养回来</a>
      <a href="#about">关于我</a>
    </div>
  </div>
</nav>

<!-- ===== Hero ===== -->
<header class="wrap">
  <div class="hero">
    <div>
      <span class="label-caps">MintSu · PERSONAL SITE</span>
      <div class="kick caveat" style="margin-top:18px;">你好呀，我是薄荷 🍃</div>
      <h1>AI 再热，<br>也要<span class="hl">来口薄荷</span></h1>
      <p class="sub">这里做两件事：陪普通人把 AI 实打实地用起来，不制造焦虑；以及分享我如何用五个月，把被耗空的自己重新养回来。</p>
      <div class="cta-row">
        <a class="btn primary" href="#ai">开始学实用 AI →</a>
        <a class="btn ghost" href="#grow">把自己养回来</a>
      </div>
    </div>
    <div class="hero-visual">
      <div class="bigword" style="top:-6%;left:-8%;">Mint&nbsp;Su</div>
      <img src="assets/character.png" alt="薄荷苏形象">
      <div class="badge">🐶 白色小狗发卡是本体</div>
    </div>
  </div>
</header>

<!-- ===== 板块一：AI 学习 ===== -->
<section id="ai">
  <div class="wrap ai-grid">
    <div class="ai-left">
      <span class="label-caps">PART 01 · PRACTICAL AI</span>
      <div class="sec-head" style="margin-bottom:0;">
        <h2>跟薄荷一起<br>学<span class="hl">实用 AI</span></h2>
      </div>
      <p>我是个不会写代码的普通人，两个月前连终端是什么都不知道。现在每天早上九点，有个 AI 自动帮我刷小红书、把爆款存进表格。</p>
      <p style="margin-top:12px;">这个系列专治"看不懂其他博主的教程"——零术语，每期只教一个能立刻上手的动作。</p>
      <div class="slogan caveat">学 AI 别死磕，来找薄荷 ✦</div>
      <div class="cta-row" style="margin-top:30px;">
        <a class="btn primary" href="https://www.xiaohongshu.com/user/profile/64ae0083000000000b0167fe" target="_blank" rel="noopener">在小红书追更 →</a>
      </div>
    </div>
    <div>
      <div class="ep">
        <span class="n">EP1</span>
        <div><h3>让 AI 替你打一份工</h3><p>Codex 零基础上手：10 分钟让 AI 第一次真正替你干活</p></div>
        <span class="tag">拍摄中</span>
      </div>
      <div class="ep alt">
        <span class="n">EP2</span>
        <div><h3>三个不写代码的日常用法</h3><p>包括我怎么让它每天自动帮我刷小红书的</p></div>
        <span class="tag">写稿中</span>
      </div>
      <div class="ep">
        <span class="n">EP3</span>
        <div><h3>敬请期待</h3><p>零基础系列持续更新，每周两条</p></div>
        <span class="tag">规划中</span>
      </div>
      <div class="ep alt">
        <span class="n">✦</span>
        <div><h3>AI 工作流实战</h3><p>素材采集 → 写稿 → 图文 → 发布，我的全自动内容流水线拆解</p></div>
        <span class="tag">规划中</span>
      </div>
    </div>
  </div>
</section>

<!-- ===== 板块二：把自己养回来 ===== -->
<section id="grow">
  <div class="wrap">
    <div class="sec-head">
      <span class="label-caps">PART 02 · GROW MYSELF BACK</span>
      <h2>五个月，<span class="hl">把自己养回来</span></h2>
      <div class="caveat" style="margin-top:12px;">优秀不能自动保护身心健康 · 但照顾自己是可以学会的</div>
    </div>
    <div class="chapters">
      <div class="chapter"><div class="m">M1</div><h3>心理健康与抑郁的黑色能量</h3><p>识别把人拖下去的黑色能量，一点点把自己捞回来</p></div>
      <div class="chapter"><div class="m">M2</div><h3>身体健康、运动与补剂</h3><p>睡眠、力量训练、肌酸和补剂，把身体底盘养起来</p></div>
      <div class="chapter"><div class="m">M3</div><h3>女性身体使用指南</h3><p>激素周期、PMS、身体工具——补上缺失的身体教育</p></div>
      <div class="chapter"><div class="m">M4</div><h3>亲密关系与情感健康</h3><p>边界、NPD 识别、失恋恢复，在关系里不丢掉自己</p></div>
      <div class="chapter"><div class="m">M5</div><h3>现实生活中的爱自己</h3><p>金钱、事业、奥德赛时期的安全感</p></div>
    </div>
    <div class="grow-note">
      <p>这是一套 <b>39 个主题</b>的系列内容，来自 100+ 次心理咨询、三年健身和一路自救的真实经验。<br>在小红书 <b>@薄荷苏</b> 连载中。</p>
      <div class="cta-row" style="justify-content:center; margin-top:28px;">
        <a class="btn primary" href="https://www.xiaohongshu.com/user/profile/5c2aea900000000007033d88" target="_blank" rel="noopener">去看这个系列 →</a>
      </div>
    </div>
  </div>
</section>

<!-- ===== About ===== -->
<section id="about">
  <div class="wrap">
    <img src="assets/avatar.png" alt="薄荷苏头像">
    <div>
      <span class="label-caps">ABOUT</span>
      <h2>关于薄荷</h2>
      <p>港中文硕士，前投行人。抑郁过，自救好了——淋过大雨，所以尽力帮别人撑伞。现在用 AI 把自己的工作和生活重新搭了一遍，也想陪你把这两件事做成：<b>把 AI 用起来，把自己养回来。</b></p>
      <p style="margin-top:10px;" class="caveat">有事找我：小红书 @薄荷苏 / 苏一下就来 ✉️</p>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <span>© 2026 薄荷苏 MintSu</span>
    <span>·</span>
    <span>Made with Claude & 一杯薄荷茶</span>
    <span class="caveat">AI 再热，也要来口薄荷 🍃</span>
  </div>
</footer>

</body>
</html>