weisonx.github.io/index.html at main · weisonx/weisonx.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weisonx | Developer</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>

<!-- 液态流体背景 -->
<div class="ambient-background">
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    <div class="blob blob-3"></div>
</div>

<!-- 导航 -->
<nav class="glass nav-bar">
    <div class="logo">Weisonx</div>
    <div class="nav-actions">
        <button id="theme-toggle" aria-label="Toggle Theme">
            <i class="fas fa-sun" id="theme-icon"></i>
        </button>
        <a href="https://github.com/weisonx" target="_blank" class="nav-link"><i class="fab fa-github"></i></a>
        <a href="mailto:your-email@example.com" class="nav-link"><i class="fas fa-envelope"></i></a>
    </div>
</nav>

<main class="container">
    <!-- 个人简介卡片 -->
    <section class="hero glass-card">
        <div class="avatar-wrapper">
            <img id="avatar" src="https://github.com/github.png" alt="Avatar">
        </div>
        <h1 id="username">Loading...</h1>
        <div class="tagline-container">
            <span id="typing-text"></span><span class="cursor">|</span>
        </div>
        <p class="bio" id="bio">Connecting to GitHub...</p>

        <div class="stats-row" id="stats">
            <!-- JS 填充 -->
        </div>
    </section>

    <!-- 项目展示区 -->
    <section class="projects-section">
        <h2 class="section-title">Selected Works</h2>
        <div class="projects-grid" id="repos-container">
            <div class="card glass-card skeleton"></div>
            <div class="card glass-card skeleton"></div>
            <div class="card glass-card skeleton"></div>
        </div>
    </section>

    <!-- Home Show 文件展示区 -->
    <section class="home-show-section">
        <div class="home-show-header">
            <h2 class="section-title">Home Show</h2>
            <!-- 控制组合容器 -->
            <div class="home-show-controls">
                <div class="search-container">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" id="file-search" placeholder="搜索文件..." class="search-input">
                </div>
                <button id="generate-cards" class="generate-btn">
                    <i class="fas fa-sync-alt" id="sync-icon"></i>
                    <span>重新生成</span>
                </button>
            </div>
        </div>
        <div class="home-show-grid" id="file-cards-container">
            <!-- JS 填充文件卡片 -->
        </div>
    </section>
</main>

<footer class="glass-footer">
    <p>© 2026 Weisonx. Designed with Liquid Glass UI.</p>
</footer>

<script src="script.js"></script>
</body>
</html>