Skip to content

Commit 974f478

Browse files
xxnjdlysxxnjdlys
committed
feat: use avatar in v3 header
1 parent 656c2b2 commit 974f478

6 files changed

Lines changed: 1779 additions & 8 deletions

File tree

‎avatar.jpeg‎

26.3 KB
Loading

‎homepage/v3/index.html‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
<!doctype html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta
7+
name="description"
8+
content="Arthur Yu / xxnjdlys，全栈开发工程师，用 AI 改变生活。"
9+
/>
10+
<title>Arthur Yu | 全栈开发工程师</title>
11+
<link rel="preconnect" href="https://fonts.googleapis.com" />
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13+
<link
14+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&family=Oswald:wght@700&display=swap"
15+
rel="stylesheet"
16+
/>
17+
<link rel="stylesheet" href="styles.css" />
18+
</head>
19+
<body>
20+
<canvas class="starfield" id="starfield" aria-hidden="true"></canvas>
21+
<div class="page-glow" aria-hidden="true"></div>
22+
23+
<header class="site-header">
24+
<a class="brand" href="#top" aria-label="Arthur Yu home">
25+
<img class="brand-mark" src="/avatar.jpeg" alt="Arthur Yu avatar" />
26+
<span class="brand-pulse"></span>
27+
</a>
28+
29+
<button class="menu-toggle" type="button" aria-label="打开导航" aria-expanded="false">
30+
<i data-lucide="menu"></i>
31+
</button>
32+
33+
<nav class="site-nav" aria-label="主导航">
34+
<a href="#focus">Focus</a>
35+
<a href="#ai">AI</a>
36+
<a href="#stack">Stack</a>
37+
<a href="#principles">Principles</a>
38+
<a href="#about">About</a>
39+
<a href="#contact">Contact</a>
40+
</nav>
41+
42+
<a class="header-github" href="https://github.com/xxnjdlys" target="_blank" rel="noreferrer" aria-label="GitHub">
43+
<i data-lucide="git-branch"></i>
44+
</a>
45+
</header>
46+
47+
<main id="top">
48+
<section class="hero section-panel" id="hero" aria-label="Arthur Yu profile">
49+
<div class="hero-copy" data-parallax="-0.12">
50+
<p class="eyebrow">
51+
<i data-lucide="orbit"></i>
52+
Hello, I'm Arthur
53+
</p>
54+
<h1>Arthur Yu</h1>
55+
<h2>全栈开发工程师</h2>
56+
<p class="hero-statement">用 AI 改变生活</p>
57+
<p class="hero-subtitle">Build tools for a better life with AI</p>
58+
<p class="hero-description">
59+
我关注全栈产品、AI 应用与自动化工具，用代码与智能系统解决真实问题，让生活更高效、更美好。
60+
</p>
61+
62+
<dl class="metric-row" aria-label="GitHub metrics">
63+
<div>
64+
<dt>93</dt>
65+
<dd>Public Repos</dd>
66+
</div>
67+
<div>
68+
<dt>59</dt>
69+
<dd>Gists</dd>
70+
</div>
71+
<div>
72+
<dt>13+</dt>
73+
<dd>Years on GitHub</dd>
74+
</div>
75+
<div>
76+
<dt>25</dt>
77+
<dd>Followers</dd>
78+
</div>
79+
</dl>
80+
81+
<p class="location">
82+
<i data-lucide="map-pin"></i>
83+
China · Beijing
84+
</p>
85+
86+
<div class="hero-actions">
87+
<a class="button button-primary" href="https://github.com/xxnjdlys" target="_blank" rel="noreferrer">
88+
<i data-lucide="git-branch"></i>
89+
View on GitHub
90+
</a>
91+
<a class="button button-secondary" href="#contact">
92+
<i data-lucide="send"></i>
93+
Get in Touch
94+
</a>
95+
</div>
96+
</div>
97+
98+
<div class="constellation" aria-hidden="true" data-parallax="0.2">
99+
<div class="orbit orbit-one"></div>
100+
<div class="orbit orbit-two"></div>
101+
<div class="orbit orbit-three"></div>
102+
<div class="orbit-dot dot-a"></div>
103+
<div class="orbit-dot dot-b"></div>
104+
<div class="orbit-dot dot-c"></div>
105+
<div class="ai-core">
106+
<span>AI</span>
107+
</div>
108+
109+
<article class="device-card device-web">
110+
<span class="window-dots"></span>
111+
<code>
112+
<span>const life = build()</span>
113+
<span>await ai.assist(life)</span>
114+
<span>ship(betterTools)</span>
115+
</code>
116+
<strong>Web Frontend</strong>
117+
</article>
118+
119+
<article class="device-card device-mobile">
120+
<span class="phone-top"></span>
121+
<span class="app-line wide"></span>
122+
<span class="app-line"></span>
123+
<span class="app-line short"></span>
124+
<strong>Mobile &amp; Client</strong>
125+
</article>
126+
127+
<article class="device-card device-server">
128+
<span class="server-block"></span>
129+
<span class="server-block small"></span>
130+
<strong>Backend Services</strong>
131+
</article>
132+
133+
<article class="device-card device-tools">
134+
<span class="terminal-line"></span>
135+
<span class="terminal-cursor"></span>
136+
<strong>Automation &amp; Tools</strong>
137+
</article>
138+
139+
<article class="device-card device-open">
140+
<i data-lucide="braces"></i>
141+
<strong>Open Source</strong>
142+
</article>
143+
</div>
144+
145+
<div class="side-dots" aria-hidden="true">
146+
<span class="active"></span>
147+
<span></span>
148+
<span></span>
149+
<span></span>
150+
<span></span>
151+
</div>
152+
</section>
153+
154+
<section class="focus-strip" id="focus" aria-label="关注方向">
155+
<article class="focus-card" style="--accent: #9cff5b; --i: 0">
156+
<i data-lucide="code-2"></i>
157+
<div>
158+
<h3>全栈产品开发</h3>
159+
<p>从前端到后端，打造稳定、可扩展的产品体验。</p>
160+
</div>
161+
<span class="card-arrow">→</span>
162+
</article>
163+
<article class="focus-card" style="--accent: #b777ff; --i: 1">
164+
<i data-lucide="brain-circuit"></i>
165+
<div>
166+
<h3>AI 应用与工具</h3>
167+
<p>探索与落地 AI 技术，让智能真正服务生活。</p>
168+
</div>
169+
<span class="card-arrow">→</span>
170+
</article>
171+
<article class="focus-card" style="--accent: #82b7ff; --i: 2">
172+
<i data-lucide="square-terminal"></i>
173+
<div>
174+
<h3>自动化与效率</h3>
175+
<p>把重复流程交给系统，把注意力留给创造。</p>
176+
</div>
177+
<span class="card-arrow">→</span>
178+
</article>
179+
<article class="focus-card" style="--accent: #ffca57; --i: 3">
180+
<i data-lucide="braces"></i>
181+
<div>
182+
<h3>开源与分享</h3>
183+
<p>保持开放、真实、长期主义，和社区共同成长。</p>
184+
</div>
185+
<span class="card-arrow">→</span>
186+
</article>
187+
</section>
188+
189+
<section class="content-grid section-panel" id="ai">
190+
<div class="section-copy">
191+
<p class="section-kicker">AI</p>
192+
<h2>把智能放进日常工具里</h2>
193+
<p>
194+
AI 不只是模型能力，而是被认真嵌入真实工作流后的效率、判断与体验提升。
195+
我更关注可用、可靠、能持续演进的智能工具。
196+
</p>
197+
</div>
198+
<div class="signal-board" aria-label="AI capability signals">
199+
<span>Prompt Systems</span>
200+
<span>Agent Workflow</span>
201+
<span>Data Flow</span>
202+
<span>Human Review</span>
203+
</div>
204+
</section>
205+
206+
<section class="content-grid section-panel stack-section" id="stack">
207+
<div class="radar" aria-hidden="true">
208+
<span class="radar-core"></span>
209+
<span class="radar-label label-ai">AI</span>
210+
<span class="radar-label label-product">Product</span>
211+
<span class="radar-label label-automation">Automation</span>
212+
<span class="radar-label label-open">Open Source</span>
213+
</div>
214+
<div class="section-copy">
215+
<p class="section-kicker">Stack</p>
216+
<h2>从界面、服务到自动化的完整链路</h2>
217+
<p>
218+
以产品目标为中心组织技术栈：清晰的界面、可靠的服务、顺手的工具链，
219+
再用 AI 把每个环节连接得更聪明。
220+
</p>
221+
</div>
222+
</section>
223+
224+
<section class="principles section-panel" id="principles">
225+
<div class="section-copy">
226+
<p class="section-kicker">Principles</p>
227+
<h2>我的原则</h2>
228+
<ul class="principle-list">
229+
<li><span></span>以用户价值为先</li>
230+
<li><span></span>简洁即力量</li>
231+
<li><span></span>持续学习与迭代</li>
232+
<li><span></span>开放、真实、长期主义</li>
233+
</ul>
234+
</div>
235+
<blockquote>
236+
<i data-lucide="quote"></i>
237+
<p>技术的意义在于让复杂的世界，变得更简单一点。</p>
238+
<cite>Arthur Yu</cite>
239+
</blockquote>
240+
</section>
241+
242+
<section class="contact-section section-panel" id="contact">
243+
<div class="section-copy" id="about">
244+
<p class="section-kicker">Contact</p>
245+
<h2>联系我</h2>
246+
<p>期待交流、合作与有趣的想法。最直接的入口，是在 GitHub 上找到我。</p>
247+
<div class="contact-links">
248+
<a href="https://github.com/xxnjdlys" target="_blank" rel="noreferrer">
249+
<i data-lucide="git-branch"></i>
250+
github.com/xxnjdlys
251+
</a>
252+
<span>
253+
<i data-lucide="map-pin"></i>
254+
Beijing, China
255+
</span>
256+
</div>
257+
</div>
258+
<div class="globe" aria-hidden="true">
259+
<span class="globe-ring ring-one"></span>
260+
<span class="globe-ring ring-two"></span>
261+
<span class="globe-core"></span>
262+
<span class="globe-dot dot-one"></span>
263+
<span class="globe-dot dot-two"></span>
264+
</div>
265+
</section>
266+
</main>
267+
268+
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
269+
<script src="script.js"></script>
270+
</body>
271+
</html>

0 commit comments

Comments
 (0)