xsl/xiangsilian.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

asdf

Browse Source
This commit is contained in:
xsl
2025-11-28 16:20:20 +08:00
parent 0f9a273ec0
commit 8d07d3fbef
1 changed files with 481 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+480 -8
View File
@@ -1,20 +1,492 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Xiang Silian - Resume</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
/* Smooth scrolling for anchor links */
html {
scroll-behavior: smooth;
html { scroll-behavior: smooth; }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-slate-50 text-slate-900 antialiased">
<div id="root"></div>
<script type="module" src="/index.tsx"></script>
<body class="bg-slate-50 text-slate-900 antialiased">
<!-- Data Script -->
<script>
const RESUME_DATA = {
name: { en: "Xiang, Silian", zh: "项思炼" },
title: { en: "Senior Developer / Simulation Expert", zh: "高级开发工程师 / 仿真专家" },
summary: {
en: "10+ years of experience. 4 years in autonomous driving simulation engine development and management. 6 years in mobile game development (Unity, Cocos2d, 3D graphics). 2 years in data visualization using React. Master of Engineering.",
zh: "10年以上工作经验。4年自动驾驶HMI、仿真开发管理经验。6年Unity、Cocos2d游戏开发管理经验。3年Linux后端开发及大数据Docker部署经验。"
},
contact: { mobile: "13810215419", email: "youmiss@163.com", wechat: "13810215419" },
skills: [
{ en: "Autonomous Driving Simulation (LGSVL, World Sim)", zh: "自动驾驶仿真 (LGSVL, World Sim)" },
{ en: "Unity 3D / Cocos2d Development", zh: "Unity 3D / Cocos2d 开发" },
{ en: "HMI Development (Android/PC)", zh: "HMI 开发 (Android/PC)" },
{ en: "Backend (C++, Java, Python, WebRTC)", zh: "后端 (C++, Java, Python, WebRTC)" },
{ en: "Graphics Programming (OpenGL, Shaders)", zh: "图形编程 (OpenGL, Shaders)" },
{ en: "Frontend (React, TypeScript)", zh: "前端 (React, TypeScript)" }
],
experience: [
{
company: { en: "Yi Hai Lan", zh: "亿海蓝" },
role: { en: "Software Development Engineer", zh: "软件开发工程师" },
period: "2024/05 - Present",
description: [
{ en: "Ship Autonomous Driving HMI System: Frontend using Unity (PC/Android), Backend on Orin using C++.", zh: "轮船自动驾驶HMI系统开发：前端采用Unity（支持PC和Android），后端为Orin采用C++开发。" },
{ en: "Remote Driving System Development: WebRTC low-latency video, KCP protocol control integration, multi-platform server architecture.", zh: "远程驾驶系统开发：WebRTC低延时视频，KCP协议控制指令集成，多端服务器架构设计。" }
]
},
{
company: { en: "He Duo Technology (HoloMatic)", zh: "禾多科技" },
role: { en: "Lead Developer of Simulation Engine", zh: "可视化、仿真开发负责人" },
period: "2020/10 - 2024/04",
description: [
{ en: "LGSVL Secondary Development: Built initial sim engine supporting ground truth perception testing and Python-based PNC scenarios.", zh: "基于LGSVL进行二次开发，完成仿真引擎初版。支持感知结果真值的自动驾驶仿真测试，通过Python搭建测试场景进行PNC测试。" },
{ en: "Sim Engine 2.0 Refactor: Implemented Unity real-time rendering for raw camera input simulation (closed-loop). Full data recording for replay. Decoupled logic from game engine (white-box testing). RL for NPC motion.", zh: "重构仿真引擎升级到2.0：Unity实时渲染仿真摄像头原始图像（闭环测试）；全数据记录与重放；逻辑纯代码实现（白盒化）；强化学习控制NPC运动。" },
{ en: "Developed in-house OpenScenario parsing engine.", zh: "自研OpenScenario解析引擎，支持标准化的仿真测试。" },
{ en: "Log Sim & World Sim: HIL bench testing, Perception CI/CD, Cloud Docker large-scale concurrency testing.", zh: "Log Sim回灌测试（Hil台架，感知CI/CD）；World Sim仿真测试（云端Docker大规模并发测试）。" },
{ en: "HMI Rendering: Optimization for TDA4 platform, proprietary UI framework on 8155 chip.", zh: "HMI渲染开发：TDA4平台3D实时渲染，自研交互框架在8155芯片实现高清渲染。" }
]
},
{
company: { en: "Independent Game", zh: "独立游戏开发" },
role: { en: "Game Producer", zh: "独立游戏制作人" },
period: "2019/11 - 2020/09",
description: [
{ en: "Smart TV Game: 'Soldier vs. Monster' (Unity). Optimized for low-end hardware.", zh: "智能电视游戏：《士兵打怪兽》（体感游戏，山寨健身环大冒险），硬件软件全栈开发。" },
{ en: "Mobile Education: 'Solid Geometry' AR teaching software.", zh: "手机教育软件：《立体几何》AR增强现实教学软件。" }
]
},
{
company: { en: "HappyElement (Beijing)", zh: "乐元互动(北京)" },
role: { en: "AI Engineer", zh: "AI工程师" },
period: "2018/01 - 2019/04",
description: [
{ en: "Full stack development, Big Data Analysis & Visualization using React and Druid.", zh: "全栈开发，大数据分析&可视化（React）。AI驱动游戏运营。" }
]
},
{
company: { en: "Beijing Youyi Mr. Technology", zh: "北京游艺先生科技" },
role: { en: "Technical Manager / Partner", zh: "技术合伙人" },
period: "2014/05 - 2017/12",
description: [
{ en: "Built tech team from scratch. Developed 'Ice and Fire Fantasy' (Cocos2dx + Lua, Java/Redis/MySQL).", zh: "从零开始搭建技术团队。开发手机游戏《冰火幻想》（客户端Cocos2dx+Lua，服务器Java+Redis+MySQL）。" },
{ en: "Virtual Idol Development (UE4 + Motion Capture).", zh: "虚拟偶像开发（UE4 + 洛伊滕动捕），数值人直播。" }
]
},
{
company: { en: "HappyElement (Beijing)", zh: "乐元互动(北京)" },
role: { en: "Technical Manager / Main Programmer", zh: "主程序" },
period: "2011/03 - 2014/05",
description: [
{ en: "Participated in 'Aquarium', 'Happy Fish'. Main programmer for 'Dragon Legend', 'Warrior World'.", zh: "参与《开心水族馆》《开心消消乐》开发。《巨龙传说》《指尖英雄》《战姬天下》前后端开发。" }
]
},
{
company: { en: "Tencent", zh: "腾讯" },
role: { en: "Game Developer (C++)", zh: "C++ 程序" },
period: "2010/03 - 2011/03",
description: [
{ en: "Participated in 'Happy Landlord'. Main programmer for 'QQ Matching'.", zh: "参与《欢乐斗地主》开发，《QQ连连看》主程序。" }
]
},
{
company: { en: "Gameloft", zh: "Gameloft" },
role: { en: "Lead Mobile Game Programmer", zh: "手机游戏主程序" },
period: "2008/08 - 2010/03",
description: [
{ en: "Programmed 'Real Football' and 'Chess' games (Java/Lua).", zh: "《脑白金》主机游戏Lua，《真实足球》Java，《棒球》C++。" }
]
}
],
education: [
{ school: { en: "Guizhou University", zh: "贵州大学 (211)" }, degree: { en: "Master of Engineering", zh: "硕士" }, major: { en: "Computer Application Technology", zh: "计算机应用技术" }, period: "2005/09 - 2008/07" },
{ school: { en: "Guizhou University", zh: "贵州大学 (211)" }, degree: { en: "Bachelor of Engineering", zh: "本科" }, major: { en: "Automation", zh: "自动化" }, period: "1999/09 - 2003/07" }
],
projects: [
{
title: { en: "U3D Software Rendering Engine", zh: "U3D 软渲染引擎" },
description: { en: "Deep dive into Unity rendering pipeline. Implemented Simple_lit and Physically Based Rendering (PBR) shaders in pure C++.", zh: "深入理解Unity引擎渲染细节。复刻Unity URP Shader效果，实现simple_lit及物理渲染Lit shader。" },
link: "https://zhuanlan.zhihu.com/p/688850501",
linkText: { en: "View Article (Zhihu)", zh: "知乎专栏" },
imageType: "code",
imageUrl: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop"
},
{
title: { en: "Surround View Camera Simulation", zh: "环视摄像头仿真" },
description: { en: "Solved 180+ degree FOV rendering issues using spherical projection instead of pinhole models, improving efficiency by 6x. High fidelity fisheye simulation.", zh: "环视全景相机实时渲染。弃用传统视锥体投影，采用球视体模型统一处理坐标变换和畸变，效率提升6倍。" },
link: "https://www.bilibili.com/video/BV16z421f7xH",
linkText: { en: "View Video (Bilibili)", zh: "B站视频" },
imageType: "car",
imageUrl: "https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=2304&auto=format&fit=crop"
},
{
title: { en: "LiDAR Point Cloud Visualization", zh: "激光雷达点云数据可视化" },
description: { en: "Unity URP pipeline. Encoded point cloud data to GPU via texture. Used Compute Shaders for vertex transformation and coloring, supporting 10M+ points on integrated graphics.", zh: "采用Unity URP管线。编写Computer shader进行点云可视化，支持集成显卡上千万级点云实时渲染。" },
imageType: "chart",
imageUrl: "https://images.unsplash.com/photo-1558494949-ef526b0042a0?q=80&w=2600&auto=format&fit=crop"
},
{
title: { en: "AR Solid Geometry", zh: "AR 立体几何" },
description: { en: "Augmented Reality teaching software using physical object visual features (no markers required). Occlusion rendering for realistic 3D geometry.", zh: "不用特定特征图片，直接采用实物视觉效果。采用空间透明遮挡渲染模型来渲染立体几何效果。" },
link: "http://www.bilibili.com/video/BV1jW421A7mM",
linkText: { en: "View Video", zh: "B站视频" },
imageType: "code",
imageUrl: "https://images.unsplash.com/photo-1531297461136-82lwDe43q5DL?q=80&w=2600&auto=format&fit=crop"
}
]
};
let currentLang = 'zh';
function render() {
const lang = currentLang;
// Header
document.getElementById('header-name-char').textContent = RESUME_DATA.name['en'].split(' ')[0][0];
document.getElementById('header-title').textContent = lang === 'en' ? 'Resume' : '个人简历';
document.getElementById('nav-about').textContent = lang === 'en' ? 'About' : '简介';
document.getElementById('nav-experience').textContent = lang === 'en' ? 'Experience' : '经历';
document.getElementById('nav-projects').textContent = lang === 'en' ? 'Projects' : '项目';
document.getElementById('btn-download').textContent = lang === 'en' ? 'Download PDF' : '下载简历';
document.getElementById('btn-lang-text').textContent = lang === 'en' ? '中文' : 'English';
// Hero
document.getElementById('hero-status').textContent = lang === 'en' ? 'Available for new opportunities' : '正在寻找新机会';
document.getElementById('hero-name').textContent = RESUME_DATA.name[lang];
document.getElementById('hero-title').textContent = RESUME_DATA.title[lang];
document.getElementById('hero-summary').textContent = RESUME_DATA.summary[lang];
document.getElementById('hero-mobile').textContent = RESUME_DATA.contact.mobile;
document.getElementById('hero-mobile-link').href = `tel:${RESUME_DATA.contact.mobile}`;
document.getElementById('hero-email').textContent = RESUME_DATA.contact.email;
document.getElementById('hero-email-link').href = `mailto:${RESUME_DATA.contact.email}`;
// Skills
document.getElementById('skills-title-sm').textContent = lang === 'en' ? 'Technical Expertise' : '技能特长';
document.getElementById('skills-title-lg').textContent = lang === 'en' ? 'Core Competencies' : '核心技术栈';
const skillsContainer = document.getElementById('skills-container');
skillsContainer.innerHTML = RESUME_DATA.skills.map(skill => `
<div class="group px-6 py-3 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 hover:border-indigo-500/50 backdrop-blur-sm transition-all cursor-default flex items-center gap-3">
<div class="w-1.5 h-1.5 rounded-full bg-indigo-500 group-hover:bg-indigo-400 transition-colors"></div>
<span class="text-slate-200 font-medium text-base md:text-lg">${skill[lang]}</span>
</div>
`).join('');
// Experience
document.getElementById('exp-title').textContent = lang === 'en' ? 'Work Experience' : '工作经历';
const expContainer = document.getElementById('exp-container');
expContainer.innerHTML = RESUME_DATA.experience.map((job, index) => `
<div class="relative flex flex-col md:flex-row gap-8 ${index % 2 === 0 ? 'md:flex-row-reverse' : ''} group">
<!-- Timeline Dot -->
<div class="absolute left-4 -translate-x-1/2 top-6 w-4 h-4 rounded-full border-4 border-white bg-indigo-500 shadow-md z-10 md:left-1/2 transition-transform group-hover:scale-125 group-hover:bg-indigo-600"></div>
<!-- Date for Desktop -->
<div class="hidden md:block w-1/2 pt-4 px-8 text-right group-hover:text-indigo-600 transition-colors">
<div class="flex items-center gap-2 text-sm font-bold tracking-wider text-slate-400 uppercase ${index % 2 === 0 ? 'justify-start' : 'justify-end'}">
${index % 2 !== 0 ? `<span>${job.period}</span>` : ''}
<i data-lucide="calendar" class="w-3.5 h-3.5"></i>
${index % 2 === 0 ? `<span>${job.period}</span>` : ''}
</div>
</div>
<!-- Content Card -->
<div class="ml-12 md:ml-0 md:w-1/2 md:px-8">
<div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 group-hover:shadow-lg group-hover:border-indigo-100 transition-all duration-300 relative">
<!-- Mobile Date -->
<div class="md:hidden text-xs font-bold text-indigo-500 mb-2 uppercase tracking-wide flex items-center gap-1">
<i data-lucide="calendar" class="w-3 h-3"></i>
${job.period}
</div>
<h3 class="text-lg font-bold text-slate-900 group-hover:text-indigo-700 transition-colors">
${job.company[lang]}
</h3>
<div class="text-sm font-semibold text-slate-500 mb-4">
${job.role[lang]}
</div>
<ul class="space-y-3">
${job.description.map(desc => `
<li class="text-sm text-slate-600 leading-relaxed flex items-start gap-3">
<span class="mt-1.5 w-1.5 h-1.5 bg-indigo-400 rounded-full shrink-0"></span>
<span>${desc[lang]}</span>
</li>
`).join('')}
</ul>
</div>
</div>
</div>
`).join('');
// Projects
document.getElementById('proj-title').textContent = lang === 'en' ? 'Featured Projects' : '个人作品';
const projContainer = document.getElementById('proj-container');
projContainer.innerHTML = RESUME_DATA.projects.map(project => `
<div class="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 border border-slate-100 flex flex-col h-full transform hover:-translate-y-1">
<div class="relative h-64 w-full overflow-hidden bg-slate-900">
${project.imageUrl ? `
<img src="${project.imageUrl}" alt="${project.title[lang]}" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700 ease-out" loading="lazy" />
` : `
<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-800 to-indigo-900">
<i data-lucide="code" class="text-white opacity-80 w-8 h-8"></i>
</div>
`}
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent to-transparent opacity-60"></div>
<div class="absolute top-4 right-4 bg-white/10 backdrop-blur-md px-3 py-1 rounded-full border border-white/20 shadow-sm">
<span class="text-xs font-bold text-white tracking-wide uppercase">${project.imageType || 'Dev'}</span>
</div>
</div>
<div class="p-6 md:p-8 flex-1 flex flex-col">
<h3 class="text-xl md:text-2xl font-bold text-slate-800 mb-3 group-hover:text-indigo-600 transition-colors">
${project.title[lang]}
</h3>
<p class="text-base text-slate-600 leading-relaxed mb-6 flex-1">
${project.description[lang]}
</p>
<div class="mt-auto pt-6 border-t border-slate-100 flex items-center justify-between">
<div class="flex gap-2">
<div class="h-2 w-2 rounded-full bg-indigo-500"></div>
<div class="h-2 w-2 rounded-full bg-blue-400"></div>
<div class="h-2 w-2 rounded-full bg-purple-400"></div>
</div>
${project.link ? `
<a href="${project.link}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-sm font-bold text-indigo-600 hover:text-indigo-800 transition-colors bg-indigo-50 px-4 py-2 rounded-lg hover:bg-indigo-100">
${project.linkText ? project.linkText[lang] : (lang === 'en' ? 'View details' : '查看详情')}
<i data-lucide="external-link" class="w-4 h-4"></i>
</a>
` : ''}
</div>
</div>
</div>
`).join('');
// Education
document.getElementById('edu-title').textContent = lang === 'en' ? 'Education' : '教育经历';
const eduContainer = document.getElementById('edu-container');
eduContainer.innerHTML = RESUME_DATA.education.map(edu => `
<div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 flex items-start gap-6 hover:shadow-md transition-all group">
<div class="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 shrink-0 group-hover:scale-110 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-300">
<i data-lucide="graduation-cap" class="w-8 h-8"></i>
</div>
<div>
<h3 class="font-bold text-xl text-slate-900">${edu.school[lang]}</h3>
<p class="text-indigo-600 font-semibold mb-2 text-lg">${edu.major[lang]}</p>
<div class="flex flex-wrap items-center gap-3 text-sm text-slate-500 font-medium">
<span class="bg-slate-100 px-3 py-1 rounded-full text-slate-600">${edu.degree[lang]}</span>
<span class="hidden sm:inline text-slate-300">•</span>
<span>${edu.period}</span>
</div>
</div>
</div>
`).join('');
// Footer
document.getElementById('footer-title').textContent = lang === 'en' ? 'Let\'s work together' : '期待与您的合作';
document.getElementById('footer-desc').textContent = lang === 'en'
? 'I am currently open to new opportunities in autonomous driving, simulation, and game development.'
: '我目前正在寻找自动驾驶、仿真及游戏开发领域的新机会。';
document.getElementById('footer-email-btn-text').textContent = lang === 'en' ? 'Email Me' : '发送邮件';
document.getElementById('footer-email-btn').href = `mailto:${RESUME_DATA.contact.email}`;
document.getElementById('footer-wechat').textContent = `WeChat: ${RESUME_DATA.contact.wechat}`;
document.getElementById('footer-name').textContent = RESUME_DATA.name[lang];
// Re-initialize icons
lucide.createIcons();
}
function toggleLanguage() {
currentLang = currentLang === 'en' ? 'zh' : 'en';
render();
}
document.addEventListener('DOMContentLoaded', () => {
render();
});
</script>
<!-- Navigation -->
<header class="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-white/20 shadow-sm transition-all supports-[backdrop-filter]:bg-white/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
<div class="font-bold text-xl tracking-tight text-slate-900 flex items-center gap-2">
<div id="header-name-char" class="w-9 h-9 bg-gradient-to-br from-indigo-600 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-indigo-200">
X
</div>
<span id="header-title" class="hidden sm:block">个人简历</span>
</div>
<div class="flex items-center gap-3 sm:gap-6">
<nav class="hidden md:flex gap-8 text-sm font-semibold text-slate-600">
<a id="nav-about" href="#about" class="hover:text-indigo-600 transition-colors">简介</a>
<a id="nav-experience" href="#experience" class="hover:text-indigo-600 transition-colors">经历</a>
<a id="nav-projects" href="#projects" class="hover:text-indigo-600 transition-colors">项目</a>
</nav>
<div class="h-5 w-px bg-slate-300 hidden md:block"></div>
<button class="hidden sm:flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-slate-900 rounded-full hover:bg-slate-800 transition-colors shadow-md">
<i data-lucide="download" class="w-3.5 h-3.5"></i>
<span id="btn-download">下载简历</span>
</button>
<button onclick="toggleLanguage()" class="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700 font-medium">
<i data-lucide="globe" class="w-4.5 h-4.5"></i>
<span id="btn-lang-text">English</span>
</button>
</div>
</div>
</header>
<main class="flex-grow pt-16">
<!-- Hero Section -->
<div id="about" class="relative h-[85vh] min-h-[600px] flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat bg-fixed" style="background-image: url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2670&auto=format&fit=crop')"></div>
<div class="absolute inset-0 z-10 bg-gradient-to-b from-white/95 via-white/80 to-slate-50/95"></div>
<div class="relative z-20 max-w-4xl mx-auto text-center px-4">
<div class="animate-fade-in-up">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/50 backdrop-blur-md text-indigo-700 text-sm font-bold mb-8 border border-indigo-100 shadow-sm ring-1 ring-indigo-50">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
</span>
<span id="hero-status">正在寻找新机会</span>
</div>
<h1 id="hero-name" class="text-5xl md:text-7xl lg:text-8xl font-black text-slate-900 tracking-tight mb-6 leading-[1.1]">
项思炼
</h1>
<p id="hero-title" class="text-xl md:text-3xl text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-500 font-bold mb-8">
高级开发工程师 / 仿真专家
</p>
<p id="hero-summary" class="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto leading-relaxed mb-10 font-medium">
10年以上工作经验。4年自动驾驶HMI、仿真开发管理经验。6年Unity、Cocos2d游戏开发管理经验。3年Linux后端开发及大数据Docker部署经验。
</p>
<div class="flex flex-wrap justify-center gap-4">
<a id="hero-mobile-link" href="#" class="flex items-center gap-3 bg-slate-900 text-white px-8 py-4 rounded-full shadow-lg shadow-indigo-200 hover:shadow-xl hover:-translate-y-1 transition-all font-semibold">
<i data-lucide="phone" class="w-4.5 h-4.5"></i>
<span id="hero-mobile">13810215419</span>
</a>
<a id="hero-email-link" href="#" class="flex items-center gap-3 bg-white text-slate-700 px-8 py-4 rounded-full shadow-md border border-slate-100 hover:border-indigo-200 hover:shadow-lg hover:-translate-y-1 transition-all font-semibold">
<i data-lucide="mail" class="w-4.5 h-4.5"></i>
<span id="hero-email">youmiss@163.com</span>
</a>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce text-slate-400 z-20">
<i data-lucide="chevron-down" class="w-8 h-8"></i>
</div>
</div>
<!-- Skills Section -->
<div class="bg-slate-900 text-white py-20 relative overflow-hidden">
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#4f46e5 1px, transparent 1px); background-size: 32px 32px;"></div>
<div class="max-w-6xl mx-auto px-4 sm:px-6 relative z-10">
<div class="text-center mb-12">
<h3 id="skills-title-sm" class="text-indigo-400 font-bold uppercase tracking-widest text-sm mb-3">技能特长</h3>
<h2 id="skills-title-lg" class="text-3xl md:text-4xl font-bold text-white">核心技术栈</h2>
</div>
<div id="skills-container" class="flex flex-wrap justify-center gap-3 md:gap-5">
<!-- Skills rendered by JS -->
</div>
</div>
</div>
<!-- Experience Section -->
<section id="experience" class="py-20 bg-slate-50">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex flex-col items-center mb-16">
<h2 id="exp-title" class="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 tracking-tight">工作经历</h2>
<div class="h-1 w-20 bg-indigo-600 rounded-full"></div>
</div>
<div id="exp-container" class="relative space-y-12">
<div class="absolute left-4 top-4 bottom-4 w-0.5 bg-slate-200 md:left-1/2 md:-ml-[1px]"></div>
<!-- Experience rendered by JS -->
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex flex-col items-center mb-16">
<h2 id="proj-title" class="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 tracking-tight">个人作品</h2>
<div class="h-1 w-20 bg-indigo-600 rounded-full"></div>
</div>
<div id="proj-container" class="grid md:grid-cols-2 gap-8 lg:gap-12">
<!-- Projects rendered by JS -->
</div>
</div>
</section>
<!-- Education Section -->
<section id="education" class="py-20 bg-slate-50">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex flex-col items-center mb-16">
<h2 id="edu-title" class="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 tracking-tight">教育经历</h2>
<div class="h-1 w-20 bg-indigo-600 rounded-full"></div>
</div>
<div id="edu-container" class="grid md:grid-cols-2 gap-6">
<!-- Education rendered by JS -->
</div>
</div>
</section>
<!-- Footer CTA -->
<div class="relative py-24 flex items-center justify-center bg-slate-900 overflow-hidden">
<div class="absolute inset-0 z-0 bg-cover bg-center opacity-20" style="background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2000&auto=format&fit=crop')"></div>
<div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/80 to-transparent"></div>
<div class="relative z-10 text-center px-4 max-w-3xl mx-auto">
<h2 id="footer-title" class="text-3xl md:text-5xl font-bold text-white mb-6">期待与您的合作</h2>
<p id="footer-desc" class="text-slate-300 text-lg mb-10 leading-relaxed">
我目前正在寻找自动驾驶、仿真及游戏开发领域的新机会。
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a id="footer-email-btn" href="#" class="w-full sm:w-auto px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-full font-bold text-lg transition-all shadow-lg shadow-indigo-900/50 flex items-center justify-center gap-2">
<i data-lucide="mail" class="w-5 h-5"></i>
<span id="footer-email-btn-text">发送邮件</span>
</a>
<div id="footer-wechat" class="w-full sm:w-auto px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-md text-white rounded-full font-bold text-lg transition-all flex items-center justify-center gap-2 cursor-pointer">
<i data-lucide="message-square" class="w-5 h-5"></i>
WeChat: 13810215419
</div>
</div>
</div>
</div>
</main>
<footer class="bg-slate-950 border-t border-white/5 py-12">
<div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex flex-col items-center md:items-start">
<h2 id="footer-name" class="text-xl font-bold text-white mb-2">项思炼</h2>
<p class="text-slate-500 text-sm">
© 2024 All rights reserved.
</p>
</div>
<div class="flex gap-6">
<a href="mailto:youmiss@163.com" class="text-slate-400 hover:text-white transition-colors p-2 bg-white/5 rounded-full hover:bg-indigo-600"><i data-lucide="mail" class="w-5 h-5"></i></a>
<a href="#" class="text-slate-400 hover:text-white transition-colors p-2 bg-white/5 rounded-full hover:bg-blue-600"><i data-lucide="linkedin" class="w-5 h-5"></i></a>
<a href="#" class="text-slate-400 hover:text-white transition-colors p-2 bg-white/5 rounded-full hover:bg-emerald-600"><i data-lucide="globe-2" class="w-5 h-5"></i></a>
</div>
</div>
</footer>
</body>
</html>