Hugging Face's logo

Spaces:
Yukuii
/
coding
Paused

App Files Community
coding
File size: 6,624 Bytes 
6641e60
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
924de6c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的编程世界 | Coding Space</title>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        /* 基础样式变量 */
        :root {
            --primary-color: #00d2ff;
            --secondary-color: #3a7bd5;
            --bg-dark: #0f172a;
            --card-bg: #1e293b;
            --text-main: #f8fafc;
            --text-dim: #94a3b8;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-main);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* 导航栏 */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 10%;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(10px);
            position: fixed;
            width: 100%;
            z-index: 1000;
        }

        .logo {
            font-family: 'Fira Code', monospace;
            font-weight: bold;
            font-size: 1.5rem;
            color: var(--primary-color);
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li { margin-left: 2rem; }
        .nav-links a {
            text-decoration: none;
            color: var(--text-main);
            transition: color 0.3s;
        }
        .nav-links a:hover { color: var(--primary-color); }

        /* 英雄版块 (Hero Section) */
        header {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
        }

        header h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            background: linear-gradient(to right, #00d2ff, #3a7bd5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .typing-text {
            font-family: 'Fira Code', monospace;
            font-size: 1.2rem;
            color: var(--text-dim);
        }

        /* 技能版块 */
        .section { padding: 5rem 10%; }
        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 2rem;
            text-align: center;
        }

        .skill-item {
            background: var(--card-bg);
            padding: 1.5rem;
            border-radius: 12px;
            border: 1px solid #334155;
            transition: transform 0.3s;
        }

        .skill-item:hover {
            transform: translateY(-10px);
            border-color: var(--primary-color);
        }

        /* 项目卡片 */
        .project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .project-card {
            background: var(--card-bg);
            border-radius: 15px;
            overflow: hidden;
            transition: scale 0.3s;
        }

        .project-card:hover { scale: 1.02; }

        .project-info { padding: 1.5rem; }
        .project-info h3 { margin-bottom: 0.5rem; color: var(--primary-color); }
        .tags { margin-top: 1rem; }
        .tag {
            font-size: 0.8rem;
            background: #334155;
            padding: 2px 8px;
            border-radius: 4px;
            margin-right: 5px;
        }

        footer {
            text-align: center;
            padding: 3rem;
            background: #0b1120;
            color: var(--text-dim);
            font-size: 0.9rem;
        }

        /* 简单的动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate { animation: fadeIn 1s ease forwards; }

    </style>
</head>
<body>

    <nav>
        <div class="logo">&lt;HELLO WORLD /&gt;</div>
        <ul class="nav-links">
            <li><a href="#home">首页</a></li>
            <li><a href="#skills">技能</a></li>
            <li><a href="#projects">项目</a></li>
        </ul>
    </nav>

    <header id="home">
        <h1 class="animate">你好，我是 开发者</h1>
        <p class="typing-text animate">热爱代码 • 专注构建 • 持续学习</p>
    </header>

    <section class="section" id="skills">
        <h2 class="section-title">我的技术栈</h2>
        <div class="skills-grid">
            <div class="skill-item">HTML5</div>
            <div class="skill-item">CSS3</div>
            <div class="skill-item">JavaScript</div>
            <div class="skill-item">Python</div>
            <div class="skill-item">React</div>
            <div class="skill-item">Node.js</div>
        </div>
    </section>

    <section class="section" id="projects">
        <h2 class="section-title">近期项目</h2>
        <div class="project-grid">
            <div class="project-card">
                <div class="project-info">
                    <h3>智能天气应用</h3>
                    <p>使用 API 获取实时天气数据，并根据天气自动切换背景主题。</p>
                    <div class="tags">
                        <span class="tag">JavaScript</span>
                        <span class="tag">RestAPI</span>
                    </div>
                </div>
            </div>
            <div class="project-card">
                <div class="project-info">
                    <h3>在线协作编辑器</h3>
                    <p>支持多人实时编辑代码的 Web 平台，集成了语法高亮功能。</p>
                    <div class="tags">
                        <span class="tag">Socket.io</span>
                        <span class="tag">React</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <p>© 2026 由 yukuii 构建 | 保持好奇心</p>
    </footer>

</body>
</html>