<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <title>赵不言</title>

    <link
      href="https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap"
      rel="stylesheet"
    />

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Inter", "Segoe UI", sans-serif;
        background: #0b0d15;
        color: #e8edf5;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        position: relative;
        overflow-x: hidden;
      }

      #particles-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
      }

      .card {
        position: relative;
        z-index: 1;
        max-width: 840px;
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(20px) saturate(1.4);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 48px;
        padding: 52px 48px;
        box-shadow:
          0 40px 80px -20px rgba(0, 0, 0, 0.8),
          inset 0 0 0 1px rgba(255, 255, 255, 0.02);
      }

      .avatar-wrapper {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-bottom: 28px;
        flex-wrap: wrap;
      }

      .avatar {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6c5ce7, #00b4d8);
        padding: 3px;
        flex-shrink: 0;
        box-shadow: 0 8px 28px rgba(108, 92, 231, 0.35);
      }

      .avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        background: #0b0d15;
      }

      .name-title h1 {
        font-size: 32px;
        font-weight: 700;
        background: linear-gradient(to right, #f0f4ff, #a0c4ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -0.5px;
      }

      .name-title .tagline {
        font-size: 16px;
        color: #8899bb;
        margin-top: 4px;
        font-weight: 400;
        letter-spacing: 0.2px;
      }

      .name-title .tagline span {
        color: #6c8cff;
        font-weight: 500;
      }

      .divider {
        width: 60px;
        height: 2px;
        background: linear-gradient(to right, #6c5ce7, transparent);
        margin: 24px 0 28px 0;
        border-radius: 4px;
      }

      .bio {
        font-size: 17px;
        line-height: 1.7;
        color: #cad2e6;
        margin-bottom: 32px;
        max-width: 90%;
      }

      .bio strong {
        color: #b8cdff;
        font-weight: 600;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 36px;
      }

      .tag {
        background: rgba(108, 92, 231, 0.12);
        border: 1px solid rgba(108, 92, 231, 0.18);
        padding: 6px 18px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 500;
        color: #bccdf5;
        backdrop-filter: blur(4px);
        transition: 0.2s;
      }

      .tag:hover {
        background: rgba(108, 92, 231, 0.22);
        border-color: #6c5ce7;
        color: #ffffff;
        transform: translateY(-2px);
      }

      .tag.highlight {
        background: linear-gradient(
          135deg,
          rgba(108, 92, 231, 0.25),
          rgba(0, 180, 216, 0.15)
        );
        border-color: #6c5ce7;
        color: #d6e0ff;
      }

      .section-title {
        margin-bottom: 16px;
      }

      .section-title h2 {
        font-size: 20px;
        font-weight: 600;
        color: #b8cdff;
      }

      .project-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 36px;
      }

      .project-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        padding: 18px 20px;
        transition: 0.25s ease;
        backdrop-filter: blur(4px);
        text-decoration: none;
        color: inherit;
        display: block;
      }

      .project-card:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(108, 92, 231, 0.3);
        transform: translateY(-3px);
        box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
      }

      .project-card .name {
        font-weight: 600;
        font-size: 16px;
        color: #e4ecff;
        margin-bottom: 4px;
      }

      .project-card .desc {
        font-size: 13px;
        color: #889bbd;
        line-height: 1.5;
      }

      .project-card .stack {
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .project-card .stack span {
        background: rgba(255, 255, 255, 0.04);
        border-radius: 20px;
        padding: 2px 12px;
        font-size: 11px;
        color: #7e92b5;
        border: 1px solid rgba(255, 255, 255, 0.04);
      }

      .project-card .link-hint {
        display: inline-block;
        margin-top: 10px;
        font-size: 13px;
        color: #6c8cff;
        font-weight: 500;
      }

      .project-card .link-hint::after {
        content: " →";
        transition: 0.2s;
      }

      .project-card:hover .link-hint::after {
        transform: translateX(4px);
      }

      .project-card .status-badge {
        display: inline-block;
        border-radius: 20px;
        padding: 2px 12px;
        font-size: 11px;
        margin-left: 8px;
        vertical-align: middle;
      }

      .socials {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 28px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
      }

      .socials a {
        color: #889bbd;
        text-decoration: none;
        font-size: 15px;
        font-weight: 450;
        transition: 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .socials a:hover {
        color: #b8cdff;
        transform: translateX(4px);
      }

      .socials .icon {
        font-size: 18px;
      }

      @media (max-width: 640px) {
        .card {
          padding: 32px 20px;
          border-radius: 32px;
        }

        .avatar-wrapper {
          gap: 16px;
        }

        .avatar {
          width: 72px;
          height: 72px;
        }

        .name-title h1 {
          font-size: 24px;
        }

        .bio {
          font-size: 15px;
          max-width: 100%;
        }

        .project-grid {
          grid-template-columns: 1fr;
        }

        .divider {
          width: 40px;
        }

        .socials {
          gap: 12px 20px;
        }
      }

      @media (max-width: 400px) {
        .card {
          padding: 24px 16px;
        }

        .avatar {
          width: 60px;
          height: 60px;
        }

        .name-title h1 {
          font-size: 20px;
        }

        .tags .tag {
          font-size: 12px;
          padding: 4px 14px;
        }
      }
    </style>
  </head>
  <body>
    <!-- ===== 粒子背景 ===== -->
    <canvas id="particles-canvas"></canvas>

    <!-- ===== 主卡片 ===== -->
    <div class="card">
      <!-- 头像 + 名字 -->
      <div class="avatar-wrapper">
        <div class="avatar">
          <!-- ✅ 头像文件放在同一目录，命名为 avatar.jpg -->
          <img src="avatar.jpg" alt="赵不言" />
        </div>
        <div class="name-title">
          <h1>赵不言</h1>
          <div class="tagline">
            嵌入式全栈 · <span>系统底层</span> · <span>AI 应用</span>
          </div>
        </div>
      </div>

      <div class="divider"></div>

      <!-- 简介 -->
      <div class="bio">
        软件工程大三 · 从全栈走向 <strong>嵌入式全栈</strong><br />
        感兴趣的方向：<strong>底层系统</strong> · <strong>实时通信</strong> ·
        <strong>AI 辅助工具</strong><br />
        Build things. Learn how they work. Share what you find.
      </div>

      <!-- 技术标签 -->
      <div class="tags">
        <span class="tag highlight">C · C++</span>
        <span class="tag">JavaScript / Node.js</span>
        <span class="tag">Python</span>
        <span class="tag">STM32 / ESP32</span>
        <span class="tag">Linux / OSTEP</span>
        <span class="tag">Docker / Redis</span>
        <span class="tag">WebSocket</span>
        <span class="tag">DeepSeek API</span>
      </div>

      <!-- 项目列表（动态渲染） -->
      <div class="section-title">
        <h2>📦 我的项目</h2>
      </div>
      <div class="project-grid" id="projectGrid">
        <!-- 由 JavaScript 动态渲染 -->
      </div>

      <!-- 社交链接 -->
      <div class="socials">
        <a href="https://github.com/ZhaoBuyan" target="_blank">
          <span class="icon">🐙</span> GitHub
        </a>
        <a href="mailto:zpq3329596696@foxmail.com">
          <span class="icon">✉️</span> Email
        </a>
        <a href="https://zhaobuyan.top" target="_blank">
          <span class="icon">🌐</span> zhaobuyan.top
        </a>
      </div>
    </div>

    <!-- ===== 粒子脚本 ===== -->
    <script>
      // ===== 星空背景 =====
      (function () {
        const canvas = document.getElementById("particles-canvas");
        const ctx = canvas.getContext("2d");

        let width, height;
        let stars = [];
        let shootingStars = [];
        const STAR_COUNT = 220;
        const SHOOTING_STAR_COUNT = 60; // ← 流星数量 60 颗

        function resize() {
          width = window.innerWidth;
          height = window.innerHeight;
          canvas.width = width;
          canvas.height = height;
        }

        function random(min, max) {
          return Math.random() * (max - min) + min;
        }

        function initStars() {
          stars = [];
          for (let i = 0; i < STAR_COUNT; i++) {
            stars.push({
              x: random(0, width),
              y: random(0, height),
              radius: random(0.3, 1.8),
              alpha: random(0.3, 1),
              twinkleSpeed: random(0.005, 0.025),
              twinklePhase: random(0, Math.PI * 2),
            });
          }
        }

        function initShootingStars() {
          shootingStars = [];
          for (let i = 0; i < SHOOTING_STAR_COUNT; i++) {
            shootingStars.push({
              // 从右上区域随机起始
              x: random(width * 0.6, width),
              y: random(0, height * 0.2),
              // 速度：向左下（vx负，vy正）
              vx: random(-6, -2),
              vy: random(2, 5),
              life: random(0.3, 0.7),
              maxLife: random(0.5, 0.9),
              trail: [],
            });
          }
        }

        function drawStars() {
          for (const star of stars) {
            const twinkle =
              0.5 +
              0.5 *
                Math.sin(
                  star.twinklePhase + performance.now() * star.twinkleSpeed,
                );
            const alpha = star.alpha * twinkle;
            ctx.beginPath();
            ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
            ctx.fill();
            if (star.radius > 1.2) {
              ctx.beginPath();
              ctx.arc(star.x, star.y, star.radius * 3, 0, Math.PI * 2);
              ctx.fillStyle = `rgba(180, 200, 255, ${alpha * 0.08})`;
              ctx.fill();
            }
          }
        }

        function drawShootingStars() {
          for (const ss of shootingStars) {
            ss.x += ss.vx;
            ss.y += ss.vy;
            ss.life -= 0.0015;
            ss.trail.push({ x: ss.x, y: ss.y });

            if (ss.trail.length > 60) {
              // ← 拖尾长度增加到 60
              ss.trail.shift();
            }

            if (ss.life <= 0) {
              // 重置到右上区域
              ss.x = random(width * 0.6, width);
              ss.y = random(0, height * 0.15);
              ss.vx = random(-6, -2);
              ss.vy = random(2, 5);
              ss.life = random(0.3, 0.8);
              ss.trail = [];
            }

            // 绘制拖尾（渐细）
            for (let i = 0; i < ss.trail.length; i++) {
              const progress = i / ss.trail.length;
              const alpha = progress * ss.life * 0.7;
              const radius = 0.6 * progress + 0.3;
              ctx.beginPath();
              ctx.arc(ss.trail[i].x, ss.trail[i].y, radius, 0, Math.PI * 2);
              ctx.fillStyle = `rgba(200, 220, 255, ${alpha})`;
              ctx.fill();
            }

            // 头部亮星
            ctx.beginPath();
            ctx.arc(ss.x, ss.y, 2.0, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(240, 245, 255, ${ss.life})`;
            ctx.fill();
          }
        }

        function draw() {
          ctx.clearRect(0, 0, width, height);
          drawStars();
          drawShootingStars();
          requestAnimationFrame(draw);
        }

        resize();
        initStars();
        initShootingStars();
        draw();

        window.addEventListener("resize", () => {
          resize();
          initStars();
          initShootingStars();
        });
      })();

      // ===== 加载 projects.json =====
      async function loadProjects() {
        try {
          const res = await fetch("projects.json");
          if (!res.ok) throw new Error("加载项目列表失败");
          const data = await res.json();
          const projects = data.projects || [];
          renderProjects(projects);
        } catch (err) {
          document.getElementById("projectGrid").innerHTML =
            `<div class="project-card" style="grid-column:1/-1; text-align:center; color:#667;">
                        项目列表加载失败，请稍后刷新
                    </div>`;
          console.warn("加载项目列表失败:", err.message);
        }
      }

      function renderProjects(projects) {
        const grid = document.getElementById("projectGrid");
        grid.innerHTML = "";

        const order = { done: 0, ongoing: 1, other: 2 };
        const sorted = [...projects].sort(
          (a, b) => (order[a.statusType] ?? 2) - (order[b.statusType] ?? 2),
        );

        for (const p of sorted) {
          const card = document.createElement("div");
          card.className = "project-card";

          const isLink = p.link && p.link.length > 0;

          let statusColor = "#a0b8ee";
          let statusBg = "rgba(108,92,231,0.15)";
          if (p.statusType === "done") {
            statusColor = "#6fcf97";
            statusBg = "rgba(46, 213, 115, 0.12)";
          } else if (p.statusType === "ongoing") {
            statusColor = "#f2c94a";
            statusBg = "rgba(242, 201, 74, 0.12)";
          }

          const stackHtml =
            p.stack && p.stack.length > 0
              ? `<div class="stack">${p.stack.map((s) => `<span>${s}</span>`).join("")}</div>`
              : "";

          const linkHtml = isLink
            ? `<div class="link-hint">查看项目 →</div>`
            : `<div style="margin-top:10px; font-size:13px; color:#556688;">正在学习中 · 项目陆续上线</div>`;

          card.innerHTML = `
                    <div class="name">
                        ${p.name}
                        <span class="status-badge" style="border-color:${statusColor}; color:${statusColor}; background:${statusBg};">${p.status}</span>
                    </div>
                    <div class="desc">${p.description}</div>
                    ${stackHtml}
                    ${linkHtml}
                `;

          if (isLink) {
            card.style.cursor = "pointer";
            card.addEventListener("click", () => window.open(p.link, "_blank"));
          }

          grid.appendChild(card);
        }
      }

      loadProjects();
    </script>
  </body>
</html>