-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
282 lines (275 loc) · 18.6 KB
/
Copy pathindex.html
File metadata and controls
282 lines (275 loc) · 18.6 KB
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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Yui | Portfolio</title>
<script>
(function() {
const html = document.documentElement;
html.setAttribute('data-ui-ready', 'false');
try {
const theme = localStorage.getItem('yui-portfolio-theme');
const lang = localStorage.getItem('yui-portfolio-lang');
const langMap = { zh: 'zh-CN', en: 'en', ja: 'ja' };
const resolvedTheme = theme === 'dark' ? 'dark' : 'light';
html.classList.toggle('dark', resolvedTheme === 'dark');
html.style.colorScheme = resolvedTheme;
html.style.backgroundColor = resolvedTheme === 'dark' ? '#0f0f0f' : '#ffffff';
html.lang = langMap[lang] || 'en';
} catch (error) {
html.style.colorScheme = 'light';
html.style.backgroundColor = '#ffffff';
html.lang = 'en';
}
})();
</script>
<style>
html { background-color: #ffffff; }
html.dark { background-color: #0f0f0f; }
html[data-ui-ready="false"] body { opacity: 0; }
html[data-ui-ready="true"] body { opacity: 1; transition: opacity 120ms ease-out; }
</style>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@300..600&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="/styles/site.css" rel="stylesheet"/>
<script src="/js/theme.js"></script>
<script src="/js/lang.js?v=20260419-2"></script>
<script src="/js/blog-data.js"></script>
<script src="/js/mobile-menu.js"></script>
</head>
<body class="bg-background-light dark:bg-dark-bg font-sans text-text-main dark:text-dark-text antialiased overflow-x-hidden selection:bg-secondary selection:text-primary transition-colors duration-300">
<div class="relative flex flex-col min-h-screen w-full">
<header class="sticky top-0 z-50 w-full border-b border-solid border-border-subtle bg-white/95 dark:bg-dark-bg/95 dark:border-dark-border backdrop-blur-sm">
<div class="px-6 md:px-12 py-6 flex items-center justify-between max-w-[1400px] mx-auto">
<div class="flex items-center gap-4">
<a class="text-2xl font-display font-semibold italic tracking-tight text-primary dark:text-dark-text hover:opacity-80 transition-opacity" href="/">
Portfolio.
</a>
</div>
<div class="flex items-center gap-10">
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/projects/">Projects</a>
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/blog/">Blog</a>
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/travel/">Travel</a>
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/music/">Music</a>
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/anime/">Anime</a>
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/shop/">Shop</a>
</nav>
<div class="flex gap-2">
<button id="langToggle" class="flex items-center justify-center size-10 text-primary dark:text-dark-text hover:text-text-muted dark:hover:text-dark-text-muted transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-dark-card" title="ZH/EN/JA">
<span class="text-xs font-bold">EN</span>
</button>
<button id="themeToggle" class="flex items-center justify-center size-10 text-primary dark:text-dark-text hover:text-text-muted dark:hover:text-dark-text-muted transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-dark-card" title="Toggle theme">
<span class="material-symbols-outlined font-light" style="font-size: 20px;">dark_mode</span>
</button>
<button id="mobileMenuToggle" class="md:hidden flex items-center justify-center size-10 text-primary dark:text-dark-text rounded-full hover:bg-gray-100 dark:hover:bg-dark-card transition-colors" type="button" aria-controls="mobileMenu" aria-expanded="false" aria-label="Open navigation menu">
<span class="material-symbols-outlined font-light" style="font-size: 24px;">menu</span>
</button>
</div>
</div>
</div>
<nav id="mobileMenu" class="hidden md:hidden border-t border-border-light dark:border-dark-border bg-white/95 dark:bg-dark-bg/95 px-6 py-4" aria-label="Mobile navigation">
<div class="flex flex-col gap-4 max-w-[1400px] mx-auto">
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/projects/">Projects</a>
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/blog/">Blog</a>
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/travel/">Travel</a>
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/music/">Music</a>
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/anime/">Anime</a>
<a class="text-sm uppercase tracking-widest text-text-muted dark:text-dark-text-muted hover:text-primary dark:hover:text-dark-text transition-colors" href="/shop/">Shop</a>
</div>
</nav>
</header>
<main class="flex-grow flex flex-col items-center w-full">
<section class="w-full px-6 md:px-12 py-16 md:py-28 max-w-7xl mx-auto">
<div class="flex flex-col-reverse lg:flex-row items-center gap-16 lg:gap-24">
<div class="flex flex-col gap-8 lg:w-1/2 text-center lg:text-left items-center lg:items-start">
<div class="space-y-4">
<span class="inline-block px-3 py-1 bg-surface-light dark:bg-dark-card text-text-muted dark:text-dark-text-muted text-[10px] font-bold tracking-[0.2em] uppercase border border-border-light dark:border-dark-border rounded-full" data-i18n="available">
Available for hire
</span>
<h1 class="font-serif text-5xl md:text-6xl lg:text-7xl leading-[1.1] text-text-main dark:text-dark-text">
<span data-i18n="hello">Hello, I'm</span> <span class="italic text-gray-500 dark:text-gray-400" data-i18n="name">Yui</span>.
</h1>
<p class="text-lg font-light text-text-muted dark:text-dark-text-muted max-w-lg mx-auto lg:mx-0 leading-relaxed">
<span data-i18n="intro">I focus on building clean digital products with excellent user experience.</span><br class="hidden md:block"/> <span data-i18n="role">Designer | Developer | Creator</span>
</p>
<p class="text-sm text-text-muted dark:text-dark-text-muted max-w-xl mx-auto lg:mx-0 leading-relaxed break-all">
<span data-i18n="agentInfoLabel">Send this URL to your agent to get my information:</span>
<a class="underline underline-offset-4 hover:text-primary dark:hover:text-dark-text transition-colors" href="https://aaccx.pw/SKILL.md" target="_blank" rel="noopener noreferrer">https://aaccx.pw/SKILL.md</a>
</p>
</div>
<div class="flex flex-wrap gap-4 justify-center lg:justify-start pt-2">
<a class="btn-primary" href="/resume/" data-i18n="resume">
Resume
</a>
<a class="btn-secondary dark:bg-dark-card dark:border-dark-border dark:text-dark-text dark:hover:border-gray-500" href="#contact" data-i18n="contactMe">
Contact Me
</a>
</div>
</div>
<div class="lg:w-1/2 flex justify-center lg:justify-end relative">
<div class="relative w-72 h-96 md:w-[400px] md:h-[500px]">
<div class="absolute -bottom-6 -left-6 w-full h-full border border-gray-200 dark:border-dark-border hidden md:block"></div>
<div class="relative z-10 w-full h-full rounded-none overflow-hidden bg-gray-100 dark:bg-dark-card shadow-soft dark:shadow-soft-dark" data-alt="Portrait of Yui" style='background-image: url("/images/profile/portrait-compressed.jpg"); background-size: cover; background-position: center;'>
</div>
</div>
</div>
</div>
</section>
<section class="w-full bg-surface-light dark:bg-dark-surface py-24 px-6 md:px-12" id="work">
<div class="max-w-7xl mx-auto flex flex-col gap-12">
<div class="flex flex-col md:flex-row justify-between items-end border-b border-gray-200 dark:border-dark-border pb-6 gap-4">
<div>
<span class="text-xs font-bold uppercase tracking-widest text-text-muted dark:text-dark-text-muted mb-2 block" data-i18n="portfolio">Portfolio</span>
<h2 class="section-title dark:text-dark-text" data-i18n="selectedWorks">Selected Works</h2>
</div>
<a class="text-text-main dark:text-dark-text font-medium text-sm flex items-center gap-2 hover:opacity-60 transition-opacity border-b border-black dark:border-dark-text pb-0.5" href="/projects/">
<span data-i18n="viewAll">View All Projects</span> <span class="material-symbols-outlined text-sm">arrow_forward</span>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
<div class="group flex flex-col">
<div class="aspect-[4/3] w-full bg-gray-200 dark:bg-dark-card overflow-hidden mb-5 rounded-sm relative">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" src="/images/hackathon/渝客松Google GDG赛道第一名.jpg" alt="Yukesong Google GDG 1st Place" loading="lazy" decoding="async"/>
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300"></div>
</div>
<div class="flex flex-col">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-serif font-medium text-text-main dark:text-dark-text">Yukesong Google GDG - 1st Place</h3>
<span class="text-[10px] font-bold border border-gray-200 dark:border-dark-border px-2 py-1 uppercase tracking-wider text-text-muted dark:text-dark-text-muted">Award</span>
</div>
<p class="text-sm text-text-muted dark:text-dark-text-muted font-light line-clamp-2 leading-relaxed">Won 1st place in the Google GDG track at the Yukesong Hackathon.</p>
</div>
</div>
<div class="group flex flex-col">
<div class="aspect-[4/3] w-full bg-gray-200 dark:bg-dark-card overflow-hidden mb-5 rounded-sm relative">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" src="/images/hackathon/trae-hackathon-08.jpg" alt="TRAE SOLO Hackathon Shanghai" loading="lazy" decoding="async"/>
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300"></div>
</div>
<div class="flex flex-col">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-serif font-medium text-text-main dark:text-dark-text">TRAE SOLO Hackathon Shanghai</h3>
<span class="text-[10px] font-bold border border-gray-200 dark:border-dark-border px-2 py-1 uppercase tracking-wider text-text-muted dark:text-dark-text-muted">Award</span>
</div>
<p class="text-sm text-text-muted dark:text-dark-text-muted font-light line-clamp-2 leading-relaxed">Won 2nd place at TRAE SOLO Hackathon Shanghai.</p>
</div>
</div>
<div class="group flex flex-col">
<div class="aspect-[4/3] w-full bg-gray-200 dark:bg-dark-card overflow-hidden mb-5 rounded-sm relative">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" src="/images/hackathon/无锡Rokid ARAI三等奖.jpg" alt="Wuxi Rokid AR AI" loading="lazy" decoding="async"/>
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300"></div>
</div>
<div class="flex flex-col">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-serif font-medium text-text-main dark:text-dark-text">Wuxi Rokid AR AI - 3rd Place</h3>
<span class="text-[10px] font-bold border border-gray-200 dark:border-dark-border px-2 py-1 uppercase tracking-wider text-text-muted dark:text-dark-text-muted">Award</span>
</div>
<p class="text-sm text-text-muted dark:text-dark-text-muted font-light line-clamp-2 leading-relaxed">Won 3rd place in the Wuxi Rokid AR AI competition.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="w-full px-6 md:px-12 py-24 bg-surface-light dark:bg-dark-surface" id="blog">
<div class="max-w-7xl mx-auto flex flex-col gap-12">
<div class="flex flex-col md:flex-row justify-between items-end border-b border-gray-200 dark:border-dark-border pb-6 gap-4">
<div>
<span class="text-xs font-bold uppercase tracking-widest text-text-muted dark:text-dark-text-muted mb-2 block" data-i18n="journal">日志</span>
<h2 class="section-title dark:text-dark-text" data-i18n="latestThoughts">最新想法</h2>
</div>
<a class="text-text-main dark:text-dark-text font-medium text-sm flex items-center gap-2 hover:opacity-60 transition-opacity border-b border-black dark:border-dark-text pb-0.5" href="/blog/">
<span data-i18n="viewAllArticles">查看全部文章</span> <span class="material-symbols-outlined text-sm">arrow_forward</span>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10" id="homeLatestPosts"></div>
</div>
</section>
</main>
<footer class="w-full bg-white dark:bg-dark-bg py-12 md:py-16 border-t border-gray-100 dark:border-dark-border" id="contact">
<div class="max-w-[1280px] mx-auto px-6 lg:px-12 flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex flex-col gap-1 text-center md:text-left">
<h2 class="text-primary dark:text-dark-text text-lg font-display font-semibold">Yui的作品集</h2>
<p class="text-text-tertiary dark:text-dark-text-muted text-xs" data-i18n="homeFooterCopyright">© 2026 个人主页.</p>
</div>
<div class="flex flex-col gap-1 text-right text-sm text-text-muted dark:text-dark-text-muted">
<a class="hover:text-primary dark:hover:text-dark-text transition-colors" href="mailto:xiaobianfuai@gmail.com">xiaobianfuai@gmail.com</a>
<span class="cursor-default">15951875192</span>
</div>
</div>
</footer>
</div>
<script>
const homeLocalizedContent = {
zh: {
featuredWorks: [
{ title: '渝客松 Google GDG - 第一名', type: '获奖', desc: '在渝客松黑客松 Google GDG 赛道获得第一名。' },
{ title: 'TRAE SOLO 黑客松上海站', type: '获奖', desc: '在 TRAE SOLO 黑客松上海站获得第二名。' },
{ title: '无锡 Rokid AR AI - 三等奖', type: '获奖', desc: '在无锡 Rokid AR AI 比赛中获得三等奖。' }
]
},
en: {
featuredWorks: [
{ title: 'Yukesong Google GDG - 1st Place', type: 'Award', desc: 'Won first place in the Google GDG track at Yukesong Hackathon.' },
{ title: 'TRAE SOLO Hackathon Shanghai', type: 'Award', desc: 'Won second place at the TRAE SOLO Hackathon Shanghai edition.' },
{ title: 'Wuxi Rokid AR AI - 3rd Place', type: 'Award', desc: 'Won third place at the Wuxi Rokid AR AI competition.' }
]
},
ja: {
featuredWorks: [
{ title: '渝客松 Google GDG トラック 優勝', type: '受賞', desc: '渝客松ハッカソンの Google GDG トラックで 1 位を獲得。' },
{ title: 'TRAE SOLO ハッカソン上海', type: '受賞', desc: 'TRAE SOLO ハッカソン上海大会で 2 位を獲得。' },
{ title: '無錫 Rokid AR AI 3 位', type: '受賞', desc: '無錫 Rokid AR AI コンテストで 3 位を受賞。' }
]
}
};
function applyHomeLocalizedContent(lang) {
const data = homeLocalizedContent[lang] || homeLocalizedContent.zh;
const workCards = document.querySelectorAll('#work .grid .group.flex.flex-col');
data.featuredWorks.forEach((item, index) => {
const card = workCards[index];
if (!card) return;
const title = card.querySelector('h3');
const type = card.querySelector('span.text-\\[10px\\]');
const desc = card.querySelector('p');
if (title) title.textContent = item.title;
if (type) type.textContent = item.type;
if (desc) desc.textContent = item.desc;
});
renderHomeLatestPosts(lang);
}
function getSortedLatestPosts(limit = 2) {
return [...(window.YuiBlogData || [])]
.sort((a, b) => new Date(b.publishedAt) - new Date(a.publishedAt))
.slice(0, limit);
}
function renderHomeLatestPosts(lang) {
const container = document.getElementById('homeLatestPosts');
if (!container) return;
const posts = getSortedLatestPosts(2);
container.innerHTML = posts.map((post) => {
const title = post.title[lang] || post.title.zh;
const excerpt = post.excerpt[lang] || post.excerpt.zh;
const shortDate = post.shortDate?.[lang] || post.date[lang] || post.date.zh;
return `
<a class="group flex gap-6 items-start" href="${post.link}">
<div class="w-32 h-24 md:w-40 md:h-28 bg-gray-200 dark:bg-dark-card shrink-0 overflow-hidden rounded-md" style='background-image: url("${post.image}"); background-size: cover; background-position: center;'></div>
<div class="flex flex-col gap-2">
<span class="text-xs text-text-muted dark:text-dark-text-muted uppercase tracking-wider">${post.category} — ${shortDate}</span>
<h3 class="text-xl font-serif font-medium leading-tight group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors text-text-main dark:text-dark-text">${title}</h3>
<p class="text-sm text-text-muted dark:text-dark-text-muted font-light line-clamp-2 leading-relaxed">${excerpt}</p>
</div>
</a>
`;
}).join('');
}
window.addEventListener('languageChanged', (event) => {
if (event.detail.page === 'index') {
applyHomeLocalizedContent(event.detail.lang);
}
});
applyHomeLocalizedContent(window.YuiLang ? window.YuiLang.getCurrentLang() : 'zh');
</script>
</body></html>