w1nterxt.github.io

个人主页 & 小玩具合集 — CS 在读，写代码、搭东西。

功能特性

🎨 视觉 & 交互

• 三幕加载动画 — 巨环浮现 → 名字移动 → 水波展开，叙事式入场
• 星系指针 — 自定义光标，悬停时全星系展开变形动画
• 彗星拖尾 — 光线暂留拖尾效果，全屏 canvas 渐变消退
• 星空背景 — 动态星空 + 点击涟漪 + Konami Code 流星雨彩蛋
• 滚动进度条 — 渐变色进度指示，带安全区适配
• 滚动入场动画 — 区块 reveal + 导航自动高亮
• 暖冷双色系 — CSS 变量驱动的柔和紫 / 暖金 / 青 / 玫红配色

📦 内容模块

• Hero — 背景弹幕 + 轮播随机诗句 + 状态徽章
• 技能树 — 技能标签展示
• 项目展示 — 做过的东西卡片
• 书架 — 书单收藏管理器（CRUD）
• 片单 — 影视收藏管理器（CRUD）
• 番单 — 番剧收藏管理器（CRUD）
• Steam 游戏库 — 游戏列表渲染 + 统计面板
• 联系 — 社交链接

🥚 彩蛋

• 头像双击翻转
• Konami Code（↑↑↓↓←→←→BA）触发流星雨

结构

index.html       — 主页面（单文件，样式脚本内联）
fetch_steam.py   — Steam 游戏库数据拉取脚本
steam_data.json  — Steam 游戏缓存数据
avatar.svg       — 头像
README.md        — 本文件

本地预览

直接用浏览器打开 index.html，或者：

npx serve .

修改指南

主题色在 :root 下的 CSS 变量：

--accent: #9382ff;         /* 柔和紫 */
--accent-warm: #e8a850;    /* 暖金 */
--teal: #5ec4b8;           /* 柔和青 */
--bg-deep: #100f18;        /* 深色背景 */

各区块按 HTML 注释标记找到对应 <section>，按格式增删即可。