index.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Pinklemon · Home</title>
  <meta name="description" content="Pinklemon 的个人站 · 项目、笔记与正在折腾的东西" />
  <!-- Open Graph -->
  <meta property="og:title" content="Pinklemon · Home" />
  <meta property="og:description" content="项目、笔记与正在折腾的东西" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="https://pinklemon123.github.io/og.png" />
  <meta name="color-scheme" content="light dark" />

  <style>
    :root{
      --bg: #0b0c10;
      --panel: #111218;
      --text: #e9eef4;
      --muted: #aab3bf;
      --line: #1a1c25;
      --accent: #7dd3fc;   /* 天蓝 */
      --accent-2:#f472b6;  /* 粉紫 */
      --shadow: rgba(0,0,0,.35);
      --radius: 18px;
      --radius-sm: 12px;
      --maxw: 1080px;
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg: #f7fafc;
        --panel:#ffffff;
        --text:#1a1f2b;
        --muted:#5b6472;
        --line:#e8edf3;
        --shadow: rgba(2,6,23,.08);
      }
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font:16px/1.7 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
      background: radial-gradient(1200px 600px at 10% -10%, rgba(125,211,252,.15), transparent 60%),
                  radial-gradient(1000px 600px at 110% 0%, rgba(244,114,182,.14), transparent 60%),
                  var(--bg);
      color:var(--text);
    }
    a{color:inherit;text-decoration:none}
    .wrap{max-width:var(--maxw);margin:0 auto;padding:24px 20px 56px}

    /* header */
    .nav{
      display:flex;align-items:center;justify-content:space-between;
      gap:12px;margin-bottom:16px;
    }
    .brand{font-weight:800;letter-spacing:.2px}
    .navlinks{display:flex;gap:12px;flex-wrap:wrap}
    .chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:9px 12px;border:1px solid var(--line);border-radius:999px;
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02));
      transition:.25s ease transform, box-shadow .25s ease, border-color .2s ease;
    }
    .chip:hover{transform:translateY(-2px);box-shadow:0 10px 24px var(--shadow);border-color:transparent}
    .chip.badge{background:linear-gradient(135deg, rgba(125,211,252,.2), rgba(244,114,182,.2));border:none}

    /* hero */
    .hero{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1.1fr .9fr;gap:22px;
      padding:28px;border-radius:var(--radius);
      background:
        radial-gradient(600px 160px at 0% 0%, rgba(125,211,252,.18), transparent 60%),
        radial-gradient(600px 160px at 100% 100%, rgba(244,114,182,.18), transparent 60%),
        var(--panel);
      border:1px solid var(--line);
      box-shadow:0 20px 50px var(--shadow);
    }
    @media (max-width:880px){.hero{grid-template-columns:1fr}}
    .hero h1{margin:6px 0 6px;font-size:clamp(24px,4vw,36px);line-height:1.2}
    .muted{color:var(--muted)}
    .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

    /* cards */
    .section{margin-top:34px}
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    @media (max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:640px){.cards{grid-template-columns:1fr}}
    .card{
      position:relative;overflow:hidden;
      border:1px solid var(--line);border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.03)), var(--panel);
      padding:18px;min-height:140px;
      transition:transform .25s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
      will-change:transform;
    }
    .card:hover{transform:translateY(-6px);box-shadow:0 24px 40px var(--shadow);border-color:transparent}
    .card h3{margin:2px 0 6px;font-size:18px}
    .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .tag{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
    .more{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:600}
    .more .chev{transition:transform .2s ease}
    .card:hover .chev{transform:translateX(4px)}

    /* shiny sweep on hover */
    .card::after{
      content:"";position:absolute;inset:-30%;
      background:conic-gradient(from 180deg at 50% 50%,
        transparent 0 70%, rgba(255,255,255,.2) 72%, transparent 75% 100%);
      transform:translateX(-60%) rotate(10deg);
      transition:transform .8s ease;
      pointer-events:none;
    }
    .card:hover::after{transform:translateX(20%) rotate(10deg)}
    @media (prefers-reduced-motion: reduce){
      .card,.chip,.card::after{transition:none}
      .card:hover{transform:none}
      .card:hover::after{transform:none}
    }

    /* footer */
    footer{margin-top:40px;padding:24px;color:var(--muted);text-align:center}
    .hr{height:1px;background:linear-gradient(90deg, transparent, var(--line), transparent);margin:28px 0}
  </style>
</head>
<body>
  <div class="wrap">
    <header class="nav">
      <div class="brand">🍋 Pinklemon</div>
      <nav class="navlinks">
        <a class="chip" href="/projects.html">Projects</a>
        <a class="chip" href="https://github.com/pinklemon123" target="_blank" rel="noopener">GitHub</a>
        <a class="chip" href="/about.html">About</a>
        <a class="chip" href="/guestbook.html">Guestbook</a>
      </nav>
    </header>

    <section class="hero">
      <div>
        <h1>Hi, 我是 Pinklemon</h1>
        <p class="muted">
          喜欢把点子做成小玩具：可视化、前端模板、自动化小工具，也在折腾单细胞建模、
          PDF 可视化翻译、论坛 + Open Design 以及 Blender × AI 建模小助手。
        </p>
        <div class="badges">
          <a class="chip badge" href="/projects.html#pink-mood-garden">Pink Mood Garden</a>
          <a class="chip badge" href="/projects.html#open-design">Open Design &amp; Forum</a>
          <a class="chip badge" href="/projects.html#pdf-translator">PDF Visual Translator</a>
          <a class="chip" href="mailto:">联系我</a>
        </div>
      </div>
      <div class="muted">
        <p>🔎 本站是纯静态页面，支持暗色模式。</p>
        <p>🧪 卡片动效在低性能设备会自动降低或遵循系统“减少动态”设置。</p>
        <p>🛠️ 代码开源在 GitHub，最近主要活跃在论坛 / PDF 翻译 / 单细胞模型和 Blender 插件这几块。</p>
      </div>
    </section>

    <!-- Now / 最近在做 -->
    <section class="section" id="now">
      <h2>Now / 最近在做 <span class="muted" style="font-size:0.9em">（最后更新：<span id="now-updated">加载中…</span>）</span></h2>
      <ul id="now-list" class="muted" style="padding-left:18px;margin:8px 0 0">
        <li><strong>Open Design &amp; Forum</strong> — 轻量论坛 + 设计作品上传展示，支持用户页、关注、开放设计画廊。</li>
        <li><strong>PDF Visual Translator</strong> — 一页式 PDF 可视化翻译工具，做版面解析 + 英汉互译。</li>
        <li><strong>Single-cell Modeling</strong> — 在 GPU 上跑 scGPT / scMTNI / CellNEST，做聚类、扰动预测与细胞通讯分析。</li>
        <li><strong>Blender × AI Modeling Helper</strong> — 把 LLM 接入 Blender，尝试用自然语言控制建模和场景微调。</li>
      </ul>
    </section>

    <div class="hr"></div>

    <!-- 精选项目预览 -->
    <section class="section">
      <h2>精选 Projects</h2>
      <div class="cards">
        <a class="card" href="/projects.html#pink-mood-garden" id="c1">
          <h3>Pink Mood Garden</h3>
          <p class="muted">把心情种成一片花园，交互式可视化。</p>
          <div class="tags"><span class="tag">JavaScript</span><span class="tag">Canvas</span></div>
          <div class="more">看看它 <span class="chev">→</span></div>
        </a>

        <a class="card" href="/projects.html#chat-on-vercel" id="c2">
          <h3>Chat on Vercel</h3>
          <p class="muted">开箱即用的聊天前端模板，易于接不同后端/模型。</p>
          <div class="tags"><span class="tag">Vercel</span><span class="tag">Template</span></div>
          <div class="more">看看它 <span class="chev">→</span></div>
        </a>

        <a class="card" href="/projects.html#daily-news-generator" id="c3">
          <h3>Daily News Generator</h3>
          <p class="muted">爬虫 + LLM 自动生成每日新闻页面。</p>
          <div class="tags"><span class="tag">LLM</span><span class="tag">Automation</span></div>
          <div class="more">看看它 <span class="chev">→</span></div>
        </a>

        <a class="card" href="/projects.html#open-design" id="c4">
          <h3>Open Design &amp; Forum</h3>
          <p class="muted">轻量论坛 + 设计作品展示区，支持开放上传和在线预览。</p>
          <div class="tags"><span class="tag">Vercel</span><span class="tag">Neon</span></div>
          <div class="more">看看它 <span class="chev">→</span></div>
        </a>

        <a class="card" href="/projects.html#pdf-translator" id="c5">
          <h3>PDF Visual Translator</h3>
          <p class="muted">一页一页翻译 PDF，保留版面结构的可视化翻译器。</p>
          <div class="tags"><span class="tag">OCR</span><span class="tag">LLM</span></div>
          <div class="more">看看它 <span class="chev">→</span></div>
        </a>
      </div>
    </section>

    <footer>© <span id="y"></span> Pinklemon · Built with 🍋</footer>
  </div>

  <script>
    // 年份
    document.getElementById('y').textContent = new Date().getFullYear();

    // Now Section：从 GitHub 拉最近活跃仓库（回退到静态列表）
    (async function () {
      const updatedEl = document.getElementById('now-updated');
      const listEl = document.getElementById('now-list');
      try {
        const resp = await fetch('https://api.github.com/users/pinklemon123/repos?sort=updated&per_page=12');
        if (!resp.ok) throw new Error('GitHub API rate limited');
        const targetNames = new Set([
          'pink-mood-garden',
          'chat-on-vercel',
          'news-creat','news-1-creat','news-00-creat',
          'chatpage_app',
          'fluffy-octo-palm-tree',
          'upgraded-octo-parakeet'
        ]);
        const repos = (await resp.json()).filter(r => targetNames.has(r.name));
        if (repos.length) {
          listEl.innerHTML = '';
          repos
            .sort((a,b)=> new Date(b.pushed_at)-new Date(a.pushed_at))
            .forEach(r=>{
              const li = document.createElement('li');
              const updated = new Date(r.pushed_at).toISOString().slice(0,10);
              li.innerHTML = `<strong><a href="${r.html_url}" target="_blank" rel="noopener">${r.name}</a></strong>
                — ${r.description || '近期更新的项目'}（最近推送：${updated}）`;
              listEl.appendChild(li);
            });
          updatedEl.textContent = new Date(repos[0].pushed_at).toISOString().slice(0,10);
        } else {
          updatedEl.textContent = new Date().toISOString().slice(0,10);
        }
      } catch (e) {
        updatedEl.textContent = new Date().toISOString().slice(0,10);
      }
    })();
  </script>
</body>
</html>