# Myself

**Repository Path**: WeatherCore/Myself

## Basic Information

- **Project Name**: Myself
- **Description**: 使用 Trae 生成 HTML 页面并通过 Git 提交至 Gitee 仓库
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-18
- **Last Updated**: 2026-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

# 🌤️ WeatherCore 个人主页

**一个单文件、零依赖、双击即开的静态个人简介页，内容全部来自 GitHub 真实仓库数据**

*Single-file static portfolio, zero build, open-and-go*

[![HTML5](https://img.shields.io/badge/HTML5-语义化结构-E34F26?style=flat-square&logo=html5&logoColor=white)](https://developer.mozilla.org/zh-CN/docs/Web/HTML)
[![CSS3](https://img.shields.io/badge/CSS3-变量·Grid·动效-1572B6?style=flat-square&logo=css3&logoColor=white)](https://developer.mozilla.org/zh-CN/docs/Web/CSS)
[![零依赖](https://img.shields.io/badge/依赖-0-brightgreen?style=flat-square)]()
[![License](https://img.shields.io/badge/License-Apache--2.0-blue?style=flat-square)](./LICENSE)

[快速开始](#-快速开始) · [架构总览](#-架构总览) · [功能全景](#-功能全景) · [作业要求对照](#-作业要求对照表) · [项目结构](#-项目结构)

</div>

---

## 📖 项目简介

本仓库是网页课程作业：制作一个静态 HTML 个人简介页，并通过 Git 提交至 Gitee 仓库。页面主题取自我本人的 GitHub 主页 [@WeatherCore](https://github.com/WeatherCore)，展示的 7 个开源项目、star 数、技术栈均为实时抓取的真实数据，无一条编造。

页面是一个 **单 HTML 文件**：结构、样式、交互全部内联，不依赖任何框架、字体 CDN 或构建工具。下载后直接双击就能打开，断网时除 GitHub 头像外一切功能照常——这是刻意的设计取舍：作业页要的是"任何老师的任何机器上都不翻车"。

> 页面在 AI 辅助下生成与打磨，代码本身保持原生 HTML + CSS + 少量 vanilla JS，适合直接阅读学习。

## 🏗️ 架构总览

单文件，三层职责分离：

```mermaid
flowchart TB
    subgraph S1["📄 结构层 - 语义化 HTML"]
        NAV["nav 粘性导航"]
        HERO["hero 首屏"]
        PROJ["projects 项目区"]
        STACK["stack 技术栈"]
        ABOUT["about 关于我"]
        FOOT["footer 页脚"]
    end
    subgraph S2["🎨 样式层 - 内联 style 块"]
        T["CSS 变量设计系统<br/>:root 色板与圆角令牌"]
        R["响应式<br/>860px 单列断点"]
        M["动效<br/>入场 reveal + hover 微交互"]
    end
    subgraph S3["⚡ 行为层 - 原生脚本"]
        IO["IntersectionObserver<br/>滚动入场观察"]
        FD["无 JS 降级<br/>内容默认可见"]
    end
    NAV --> HERO --> PROJ --> STACK --> ABOUT --> FOOT
    T -.-> NAV
    IO -.-> PROJ
```

样式层由 `:root` 中的 CSS 变量统一驱动（暖纸底 + 琥珀色单强调色），换主题只改令牌不动组件；行为层只有一个约 20 行的 IIFE，用 `IntersectionObserver` 做入场动画，浏览器不支持 JS 或观察器时内容直接可见，不白屏。

## ✨ 功能全景

- 🧭 **粘性毛玻璃导航** — `backdrop-filter` 模糊吸顶，锚点平滑滚动到对应区块
- 🖼️ **真实头像展示** — 直链 `github.com/WeatherCore.png`，带呼吸状态点与等宽字体标注
- 🗂️ **项目双形态陈列** — 2 张特色大卡片（Cloud-1998 / 格物）+ 5 行编辑式 `<ol>` 清单，hover 行内变色
- 🏷️ **技术栈分组标签云** — AI 工程 / 后端高并发 / 前端交互三组 `<ul>`，统一圆角胶囊样式
- 📱 **全量响应式** — 860px 断点以下自动单列，手机宽度导航自动收窄
- 🎞️ **滚动入场动效** — `IntersectionObserver` + `transition`，逐区块淡入上浮，`prefers-reduced-motion` 时全自动关闭
- 🌗 **浅色暖纸主题** — 正文暖纸白 `#f7f6f2`，深琥珀强调色 `#a86405` 保证对比度达标

## 📋 作业要求对照表

| 作业要求 | 实现情况 | 位置 |
|---|---|---|
| `<title>` 标题 | WeatherCore - 个人简介 | `<head>` 内 |
| `<h1>` 一级标题 | "把大模型，做成真正能用的系统。" | 首屏 hero 区 |
| 至少 2 段 `<p>` | 首屏导语 1 段 + "关于我" 2 段，共 3 段 | hero / about 区 |
| 至少 1 张网络图片 | GitHub 头像直链（`github.com/WeatherCore.png`） | hero 右侧 `figure` |
| 至少 1 个列表 | `<ol>` 项目清单 + 3 组 `<ul>` 技术栈，双超额完成 | projects / stack 区 |
| 结构完整可直接打开 | 单文件零依赖，双击即开 | 整个文件 |
| 加分项：CSS 美化 | 变量驱动的完整设计系统 + 响应式 + 动效 | `<style>` 块 |

## 🧰 技术栈

| 类别 | 技术 |
|---|---|
| 结构 | 原生 HTML5（语义化标签 nav / section / figure / ol / ul） |
| 样式 | 原生 CSS3（自定义属性、Grid、flex、媒体查询、transition） |
| 行为 | 原生 JavaScript（仅 IntersectionObserver，约 20 行） |
| 字体 | 系统字体栈（Segoe UI / 微软雅黑 / Cascadia Code），不引外部字体 |
| 构建 | 无。零依赖，零构建，直接打开 |

## 📁 项目结构

```
.
├── 个人简介.html    # 全部页面：结构 + 样式 + 交互（单文件）
├── README.md        # 本文件
├── LICENSE          # Apache-2.0
└── .gitignore
```

<details><summary><b>🔎 页面内部区块一览（点击展开）</b></summary>

```
个人简介.html
├── <head>
│   ├── <title> 与 <meta> 视口/描述
│   ├── 内联 <style>（设计令牌 → 组件样式 → 响应式 → 动效降级）
│   └── 一行脚本：给 <html> 打 .js 类，供"有 JS 才启用入场动效"用
├── <header class="nav">          # 粘性毛玻璃导航
├── <section class="hero">        # 首屏：标题 + 导语 + CTA + 头像卡
├── <section id="projects">       # 2 张特色卡片 + <ol> 五行项目清单
├── <section id="stack">          # 3 组技术栈 <ul> 标签云
├── <section id="about">          # 两段自我介绍
├── <footer>                      # 页脚导航 + 手写声明
└── <script>                      # IntersectionObserver 入场观察（IIFE）
```

</details>

单文件项目，无 ZHIDAO.md 导航文档；要读代码直接打开 HTML 文件即可，样式与结构按上述顺序排列。

## 🚀 快速开始

**0️⃣ 环境要求**

| 组件 | 要求 | 说明 |
|---|---|---|
| 浏览器 | Chrome / Edge / Firefox / Safari 任意现代版本 | 唯一依赖 |
| 网络 | 可选 | 仅 GitHub 头像一张图需要联网，断网时该位置显示占位背景，其余不受影响 |
| Node / Python / 构建工具 | 不需要 | 零依赖 |

**1️⃣ 直接打开（推荐）**

在资源管理器中双击 `个人简介.html`，或拖进任意浏览器窗口。

**2️⃣ 本地服务器方式（可选）**

```bash
# 任选其一，在本目录下执行
python -m http.server 8000      # Windows 下若未关联 python 命令，改用：py -m http.server 8000
npx serve .                      # 有 Node 环境时
```

然后浏览器访问 `http://localhost:8000/个人简介.html`。

**3️⃣ 体验要点**

1. 向下滚动，观察各区块依次淡入上浮；
2. 鼠标悬停项目卡片与清单行，观察边框与文字变色；
3. 把窗口缩到手机宽度，观察布局自动变单列；
4. 点击导航的"项目 / 技术栈 / 关于"体验锚点平滑滚动。

## 🎨 定制指南

<details><summary><b>🛠️ 改成你自己的主页（点击展开）</b></summary>

- **换头像**：搜索 `github.com/WeatherCore.png`，替换为你自己的头像直链（GitHub 用户均可 `github.com/<用户名>.png` 引用）；
- **换文案**：`<h1>`、`.lede`、"关于我"两段 `<p>` 直接改中文即可；
- **换项目数据**：`<ol class="repo-list">` 每个 `<li>` 一个项目，名称、描述、标签均为纯文本；
- **换主题色**：只需改 `:root` 里的 CSS 变量。当前浅色暖纸 + 琥珀主题的令牌如下，想换风格整体替换即可：

```css
/* 当前：浅色暖纸主题 */
:root {
  --bg: #f7f6f2;        /* 页面底色 */
  --surface: #ffffff;    /* 卡片面 */
  --line: #e7e3d7;       /* 分隔线 */
  --text: #211f1c;       /* 主文字 */
  --body: #52504a;       /* 正文 */
  --muted: #6f6c64;      /* 次要文字 */
  --accent: #a86405;     /* 强调色（浅色下加深保证对比度） */
  --accent-bright: #8a5206;
  --accent-ink: #ffffff; /* 强调色上的文字 */
}
```

</details>

## 🗺️ Roadmap

- [x] 语义化结构与完整设计系统
- [x] 响应式适配移动端
- [x] 滚动入场动效 + `prefers-reduced-motion` 降级
- [x] 无 JS / 断网双降级保障
- [ ] 深浅双主题一键切换按钮
- [ ] 项目数据改为 GitHub API 动态拉取

---

<div align="center">

**📖 课程作业仓库** · 页面由 AI 辅助生成与打磨，代码保持原生可读

[![License](https://img.shields.io/badge/License-Apache--2.0-blue?style=flat-square)](./LICENSE) · [@WeatherCore on GitHub](https://github.com/WeatherCore)

</div>