湛兮
196 lines
8.1 KiB
HTML
196 lines
8.1 KiB
HTML
<!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" />
|
|
<meta
|
|
name="description"
|
|
content="王元有个人网站，前端工程师，7 年 Web 与跨端经验，近一年参与 SeaBuzz、SeaCloud 等 AI 产品前端，覆盖对话、内容流、计费、权限和国际化。"
|
|
/>
|
|
<script>
|
|
(() => {
|
|
const saved = localStorage.getItem("wy-fluid-theme");
|
|
if (saved) document.documentElement.dataset.theme = saved;
|
|
})();
|
|
</script>
|
|
<style>
|
|
:root {
|
|
background: #07080d;
|
|
color: #f5f7fb;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html[data-theme="light"] {
|
|
background: #f2f5f7;
|
|
color: #11131a;
|
|
color-scheme: light;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: inherit;
|
|
color: inherit;
|
|
font-family:
|
|
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
"Microsoft YaHei", sans-serif;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/src/styles.css" />
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
|
<title>王元有 - 前端工程师</title>
|
|
</head>
|
|
<body>
|
|
<div class="progress" id="scroll-progress"></div>
|
|
<canvas id="fluid-canvas" aria-hidden="true"></canvas>
|
|
<div class="scene-backdrop" id="scene-backdrop" aria-hidden="true"></div>
|
|
<div class="grain" aria-hidden="true"></div>
|
|
|
|
<header class="site-header">
|
|
<a class="brand-mark" href="#top" aria-label="王元有个人网站首页">
|
|
<span>WY</span>
|
|
<strong>王元有</strong>
|
|
</a>
|
|
<nav class="site-nav" aria-label="页面导航">
|
|
<a href="#ai-fit">方向</a>
|
|
<a href="#proof">证据</a>
|
|
<a href="#projects">项目</a>
|
|
<a href="#skills">能力</a>
|
|
<a href="#experience">经历</a>
|
|
<a href="#contact">联系</a>
|
|
</nav>
|
|
<div class="header-actions">
|
|
<a class="icon-link" href="https://github.com/zhanBoss" target="_blank" rel="noreferrer" aria-label="GitHub">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.7.5.1.68-.22.68-.5v-1.75c-2.78.62-3.37-1.37-3.37-1.37-.45-1.19-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.9 1.56 2.35 1.11 2.92.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.35 9.35 0 0 1 12 6.9c.85 0 1.71.12 2.51.34 1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.94-2.34 4.81-4.57 5.06.36.32.68.94.68 1.9v2.82c0 .28.18.6.69.5A10.08 10.08 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
<button class="icon-link" id="theme-toggle" type="button" aria-label="切换明暗主题">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path fill="currentColor" d="M12 2a10 10 0 1 0 0 20V2Zm2 2.29A8 8 0 0 1 14 19.71V4.29Z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="top">
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<div class="hero-meta reveal" data-drift="-24">
|
|
<p class="eyebrow">Frontend Engineer / Product UI / Cross-platform</p>
|
|
<h1 id="hero-title">王元有</h1>
|
|
<p class="hero-subtitle">前端工程师，近一年在 AI 产品团队做前端</p>
|
|
<p class="hero-lede">
|
|
做过 B 端供应链系统、小程序、微前端平台，也参与过 SeaBuzz 和 SeaCloud 这类 AI 产品。现在更擅长把对话流、
|
|
内容流、计费、权限、国际化这些复杂链路整理成稳定的前端界面。
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a class="button primary" href="#projects">看项目经历</a>
|
|
<a class="button" href="mailto:419021733@qq.com">419021733@qq.com</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="signal-board reveal" data-drift="28" aria-label="候选人摘要">
|
|
<div>
|
|
<span>前端经验</span>
|
|
<strong>7 年</strong>
|
|
</div>
|
|
<div>
|
|
<span>近一年方向</span>
|
|
<strong>对话与控制台</strong>
|
|
</div>
|
|
<div>
|
|
<span>主要场景</span>
|
|
<strong>对话 / 内容 / 控制台</strong>
|
|
</div>
|
|
<div>
|
|
<span>协作方式</span>
|
|
<strong>能独立推进模块</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="profile-panel reveal" data-drift="20" aria-label="工作方式摘要">
|
|
<div>
|
|
<span>最近职责</span>
|
|
<strong>SeaBuzz 跨端应用、SeaCloud 控制台</strong>
|
|
</div>
|
|
<div>
|
|
<span>更擅长</span>
|
|
<strong>把复杂状态、权限和数据边界梳理清楚</strong>
|
|
</div>
|
|
<div>
|
|
<span>常用技术</span>
|
|
<strong>React / Next.js / React Native / TypeScript</strong>
|
|
</div>
|
|
<div>
|
|
<span>工作习惯</span>
|
|
<strong>先对齐业务边界，再拆组件和状态模型</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="ai-fit" class="ai-fit-section reveal" data-drift="36" aria-labelledby="ai-fit-title">
|
|
<div class="section-heading">
|
|
<p>Current Direction</p>
|
|
<h2 id="ai-fit-title">AI 是最近一年的工作场景，不是拿来堆关键词的标签。</h2>
|
|
</div>
|
|
<div class="ai-focus-grid" id="ai-focus-grid"></div>
|
|
<div class="resume-signal-panel reveal" data-drift="-30">
|
|
<div>
|
|
<p>Resume Summary</p>
|
|
<h3>前端工程师｜AI 产品方向｜Web / React Native</h3>
|
|
</div>
|
|
<ul id="resume-signal-list"></ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="proof" class="proof-strip reveal" data-drift="-40" aria-labelledby="proof-title">
|
|
<div class="section-kicker">Evidence</div>
|
|
<h2 id="proof-title">一些可以核对的经历，先放在前面。</h2>
|
|
<div class="metric-row" id="metric-row"></div>
|
|
</section>
|
|
|
|
<section id="projects" class="work-section" aria-labelledby="projects-title">
|
|
<div class="section-heading reveal" data-drift="42">
|
|
<p>Selected Work</p>
|
|
<h2 id="projects-title">最近两段经历和 AI 产品相关，但履历底子仍然是前端工程交付。</h2>
|
|
</div>
|
|
<div class="project-stack" id="project-stack"></div>
|
|
</section>
|
|
|
|
<section id="skills" class="skills-section" aria-labelledby="skills-title">
|
|
<div class="section-heading reveal" data-drift="-42">
|
|
<p>Capabilities</p>
|
|
<h2 id="skills-title">按实际做过的工作来组织技能，而不是按热门词来分类。</h2>
|
|
</div>
|
|
<div class="skill-matrix" id="skill-matrix"></div>
|
|
</section>
|
|
|
|
<section id="experience" class="experience-section" aria-labelledby="experience-title">
|
|
<div class="section-heading reveal" data-drift="34">
|
|
<p>Experience</p>
|
|
<h2 id="experience-title">职责从核心交付演进到架构设计和团队规范建设。</h2>
|
|
</div>
|
|
<div class="timeline" id="timeline"></div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact-section reveal" data-drift="-26" aria-labelledby="contact-title">
|
|
<div>
|
|
<p class="section-kicker">Contact</p>
|
|
<h2 id="contact-title">正在看前端、跨端、AI 产品前端相关机会。</h2>
|
|
<span>男 · 29 岁 · 19980439383 · 电子科技大学 信息管理与信息系统 本科</span>
|
|
</div>
|
|
<div class="contact-actions">
|
|
<a class="button primary" href="mailto:419021733@qq.com">发送邮件</a>
|
|
<a class="button" href="mailto:wmagmgema521@gmail.com">wmagmgema521@gmail.com</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>© 2026 王元有. Built as an independent fluid portfolio.</footer>
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|