这Vibe Coding的感觉不赖。
me.mxzfun.xyz 个人学术主页上线啦
- 其实应该也不太算学术主页，按照领英里的信息让DS出了几版页面。
- 这Vibe Coding的感觉不赖。
链接
页面展示
代码展示
CSS
/* ===== 全局重置 & 基础 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
background: #f4f7fb;
color: #1e293b;
display: flex;
min-height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
/* ===== 左侧菜单栏 – 毛玻璃（更通透） ===== */
.sidebar {
width: 280px;
background: rgba(243, 232, 255, 0.25);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-right: 1px solid rgba(255, 255, 255, 0.40);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
color: #2d1b69;
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
z-index: 100;
transition: transform 0.3s ease;
}
.sidebar-brand {
padding: 28px 24px 18px 24px;
border-bottom: 1px solid rgba(45, 27, 105, 0.08);
}
.sidebar-brand .name {
font-size: 22px;
font-weight: 700;
color: #2d1b69;
letter-spacing: 0.5px;
}
.sidebar-brand .name small {
font-weight: 400;
font-size: 16px;
color: #5b3a8c;
display: block;
margin-top: 4px;
}
.sidebar-brand .badge {
display: inline-block;
margin-top: 10px;
background: rgba(109, 40, 217, 0.12);
color: #4c1d95;
font-size: 12px;
padding: 4px 14px;
border-radius: 20px;
border: 1px solid rgba(109, 40, 217, 0.10);
}
/* ===== 菜单列表 ===== */
.menu {
flex: 1;
padding: 16px 12px 20px 12px;
list-style: none;
}
.menu-item {
margin-bottom: 2px;
}
.menu-item .menu-link {
display: flex;
align-items: center;
padding: 10px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
color: #3b2a6b;
transition: all 0.15s ease;
cursor: pointer;
gap: 10px;
}
.menu-item .menu-link:hover {
background: rgba(109, 40, 217, 0.12);
color: #1e0f4a;
}
.menu-item .menu-link.active {
background: rgba(109, 40, 217, 0.18);
color: #3b1d8a;
font-weight: 600;
}
.menu-item .menu-link .arrow {
margin-left: auto;
font-size: 12px;
transition: transform 0.25s ease;
color: #6b4c9a;
}
.menu-item .menu-link .arrow.open {
transform: rotate(90deg);
}
/* ===== 二级菜单 ===== */
.submenu {
list-style: none;
padding-left: 20px;
margin: 2px 0 6px 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease, opacity 0.25s ease;
opacity: 0;
}
.submenu.open {
max-height: 1200px;
opacity: 1;
}
.submenu .sub-link {
display: block;
padding: 7px 16px 7px 32px;
font-size: 13px;
font-weight: 400;
color: #4b3a72;
border-radius: 8px;
transition: all 0.12s ease;
cursor: pointer;
border-left: 2px solid transparent;
}
.submenu .sub-link:hover {
background: rgba(109, 40, 217, 0.08);
color: #1e0f4a;
border-left-color: #7c3aed;
}
.submenu .sub-link.active {
color: #3b1d8a;
background: rgba(109, 40, 217, 0.12);
border-left-color: #7c3aed;
font-weight: 500;
}
/* ===== 右侧内容区 ===== */
.main {
margin-left: 280px;
flex: 1;
padding: 48px 56px 80px 56px;
min-height: 100vh;
background: #f4f7fb;
}
.page-section {
display: none;
animation: fadeUp 0.35s ease forwards;
}
.page-section.active {
display: block;
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(18px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ===== 内容样式 ===== */
.section-title {
font-size: 26px;
font-weight: 700;
color: #0f1a2f;
margin-bottom: 6px;
letter-spacing: -0.3px;
}
.section-sub {
color: #64748b;
font-size: 15px;
margin-bottom: 28px;
border-bottom: 2px solid #e9edf4;
padding-bottom: 16px;
}
.card {
background: #ffffff;
border-radius: 16px;
padding: 24px 28px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
border: 1px solid #eaedf2;
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: #0f1a2f;
margin-bottom: 8px;
}
.card-meta {
font-size: 13px;
color: #64748b;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
}
.card-meta .tag {
background: #f1f5f9;
padding: 2px 12px;
border-radius: 20px;
font-size: 12px;
color: #475569;
}
.card-body {
font-size: 15px;
line-height: 1.75;
color: #1e293b;
}
.card-body ul {
padding-left: 22px;
margin: 8px 0 4px 0;
}
.card-body ul li {
margin-bottom: 4px;
}
.card-body ul li::marker {
color: #7c3aed;
}
.tag-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
.tag-group .skill-tag {
background: #eef2ff;
color: #1e40af;
padding: 4px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
border: 1px solid #dbeafe;
}
.tag-group .skill-tag.light {
background: #f1f5f9;
color: #334155;
border-color: #e2e8f0;
}
.badge-blue {
display: inline-block;
background: #dbeafe;
color: #1e40af;
font-size: 12px;
font-weight: 600;
padding: 2px 12px;
border-radius: 20px;
margin-right: 6px;
}
.paper-link {
color: #2563eb;
font-weight: 500;
word-break: break-all;
}
.paper-link:hover {
text-decoration: underline;
}
.timeline-dot {
display: inline-block;
width: 8px;
height: 8px;
background: #38bdf8;
border-radius: 50%;
margin-right: 8px;
}
/* ===== Home 特殊样式 ===== */
.hero-name {
font-size: 36px;
font-weight: 700;
color: #0f1a2f;
letter-spacing: -0.5px;
}
.hero-name small {
font-size: 20px;
font-weight: 400;
color: #475569;
margin-left: 10px;
}
.hero-title {
font-size: 18px;
color: #334155;
margin-top: 4px;
margin-bottom: 12px;
}
.hero-title .highlight {
color: #7c3aed;
font-weight: 600;
}
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 20px 40px;
margin: 18px 0 10px 0;
}
.hero-stats .stat-item {
display: flex;
align-items: baseline;
gap: 6px;
}
.hero-stats .stat-num {
font-size: 28px;
font-weight: 700;
color: #0f1a2f;
}
.hero-stats .stat-label {
color: #64748b;
font-size: 14px;
}
/* ===== 移动端响应式 ===== */
@media (max-width: 820px) {
.sidebar {
transform: translateX(-100%);
width: 280px;
}
.sidebar.open {
transform: translateX(0);
}
.main {
margin-left: 0;
/* 增加顶部内边距，为固定菜单按钮留出空间，避免遮挡标题 */
padding: 70px 20px 60px 20px;
}
.menu-toggle {
display: flex !important;
}
.hero-name {
font-size: 28px;
}
.hero-name small {
font-size: 16px;
display: block;
margin-left: 0;
}
}
/* ===== 移动端汉堡按钮（毛玻璃） ===== */
.menu-toggle {
display: none;
position: fixed;
top: 16px;
left: 16px;
z-index: 200;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #2d1b69;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 10px;
padding: 10px 14px;
font-size: 22px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.menu-toggle:hover {
background: rgba(255, 255, 255, 0.8);
}
/* ===== 遮罩层 – 模糊玻璃，不再变黑 ===== */
.overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 50;
}
.overlay.show {
display: block;
}
/* ===== 滚动条 (毛玻璃配套) ===== */
.sidebar::-webkit-scrollbar {
width: 4px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background: rgba(109, 40, 217, 0.2);
border-radius: 10px;
}JS
(function() {
// DOM 引用
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('overlay');
const menuToggle = document.getElementById('menuToggle');
const subLinks = document.querySelectorAll('.sub-link');
const allSections = document.querySelectorAll('.page-section');
const homeLink = document.querySelector('.menu-link[data-target="home"]');
const homeSubmenu = document.getElementById('homeSubmenu');
const homeArrow = document.getElementById('homeArrow');
// ---- 移动端切换 ----
function toggleMobileMenu() {
sidebar.classList.toggle('open');
overlay.classList.toggle('show');
}
menuToggle.addEventListener('click', toggleMobileMenu);
overlay.addEventListener('click', toggleMobileMenu);
// ---- 切换页面 ----
function switchPage(targetId) {
// 隐藏所有页面
allSections.forEach(sec => sec.classList.remove('active'));
// 显示目标页面
const targetPage = document.getElementById('page-' + targetId);
if (targetPage) {
targetPage.classList.add('active');
} else {
const homePage = document.getElementById('page-home');
if (homePage) homePage.classList.add('active');
}
// 更新二级菜单高亮
subLinks.forEach(link => {
link.classList.remove('active');
if (link.dataset.target === targetId) {
link.classList.add('active');
}
});
// Home 主菜单高亮
document.querySelectorAll('.menu-link').forEach(l => l.classList.remove('active'));
if (homeLink) homeLink.classList.add('active');
// 移动端自动关闭
if (window.innerWidth <= 820) {
sidebar.classList.remove('open');
overlay.classList.remove('show');
}
}
// ---- 二级菜单点击 ----
subLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.stopPropagation();
const target = this.dataset.target;
if (target) {
switchPage(target);
}
});
});
// ---- Home 主菜单点击（切换展开/折叠 + 回到 Home） ----
if (homeLink) {
homeLink.addEventListener('click', function(e) {
e.stopPropagation();
// 切换展开/折叠
const isOpen = homeSubmenu.classList.contains('open');
if (isOpen) {
homeSubmenu.classList.remove('open');
homeArrow.classList.remove('open');
} else {
homeSubmenu.classList.add('open');
homeArrow.classList.add('open');
}
// 切换到 Home 页面（如果当前不在 home）
const currentActive = document.querySelector('.page-section.active');
if (currentActive && currentActive.id !== 'page-home') {
switchPage('home');
} else if (!currentActive) {
switchPage('home');
}
// 高亮 Home
document.querySelectorAll('.menu-link').forEach(l => l.classList.remove('active'));
this.classList.add('active');
subLinks.forEach(l => l.classList.remove('active'));
const profileSub = document.querySelector('.sub-link[data-target="home"]');
if (profileSub) profileSub.classList.add('active');
});
}
// ---- 页面加载默认状态 ----
// 默认展开 Home 子菜单，高亮 Home 和“个人简介”
if (homeSubmenu) {
homeSubmenu.classList.add('open');
}
if (homeArrow) {
homeArrow.classList.add('open');
}
if (homeLink) {
homeLink.classList.add('active');
}
subLinks.forEach(l => l.classList.remove('active'));
const defaultSub = document.querySelector('.sub-link[data-target="home"]');
if (defaultSub) defaultSub.classList.add('active');
// 确保 home 页面显示
allSections.forEach(sec => sec.classList.remove('active'));
const homePage = document.getElementById('page-home');
if (homePage) homePage.classList.add('active');
// ---- 窗口 resize 时关闭移动菜单 ----
window.addEventListener('resize', function() {
if (window.innerWidth > 820) {
sidebar.classList.remove('open');
overlay.classList.remove('show');
}
});
// ---- 键盘 ESC 关闭菜单 ----
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
sidebar.classList.remove('open');
overlay.classList.remove('show');
}
});
})();HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>李海威 · 个人主页</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 移动端遮罩 -->
<div class="overlay" id="overlay"></div>
<!-- 移动端汉堡按钮 -->
<button class="menu-toggle" id="menuToggle" aria-label="切换菜单">☰</button>
<!-- 左侧菜单 -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<div class="name">
李海威
<small>Haiwei Li</small>
</div>
<span class="badge">海洋科学 · 博士研究生</span>
</div>
<ul class="menu" id="menuList">
<!-- Home 主菜单 -->
<li class="menu-item">
<div class="menu-link active" data-target="home" data-toggle="submenu">
<span>Home</span>
<span class="arrow open" id="homeArrow">▶</span>
</div>
<ul class="submenu open" id="homeSubmenu">
<li class="sub-link active" data-target="home">个人简介</li>
<li class="sub-link" data-target="work">工作经历</li>
<li class="sub-link" data-target="edu">教育经历</li>
<li class="sub-link" data-target="research">研究方向</li>
<li class="sub-link" data-target="papers">论文成果</li>
<li class="sub-link" data-target="systems">软件著作权</li>
<li class="sub-link" data-target="academic">学术交流</li>
<li class="sub-link" data-target="awards">奖项与证书</li>
<li class="sub-link" data-target="skills">技能</li>
<li class="sub-link" data-target="competition">竞赛经历</li>
<li class="sub-link" data-target="scholarship">奖学金与荣誉</li>
<li class="sub-link" data-target="activities">活动与社团</li>
</ul>
</li>
<!-- GitHub 与博客（与 Home 并列） -->
<li class="menu-item">
<a href="https://github.com/yosoroQ" target="_blank" rel="noopener" class="menu-link">GitHub</a>
</li>
<li class="menu-item">
<a href="http://mxzfun.xyz" target="_blank" rel="noopener" class="menu-link">博客</a>
</li>
</ul>
</aside>
<!-- 右侧主内容 -->
<main class="main" id="mainContent">
<!-- HOME 页面 -->
<section class="page-section active" id="page-home">
<div class="hero-name">
李海威 <small>Haiwei Li</small>
</div>
<div class="hero-title">
广东海洋大学 · <span class="highlight"> 博士研究生 | .NET 开发工程师</span>
<br />
中国 · 广东省 · 湛江市
</div>
<div class="hero-stats">
<div class="stat-item"><span class="stat-num">1</span><span class="stat-label">篇 一作 SCI</span></div>
<div class="stat-item"><span class="stat-num">3</span><span class="stat-label">项 软著</span></div>
<div class="stat-item"><span class="stat-num">2</span><span class="stat-label">次 学术汇报</span></div>
<div class="stat-item"><span class="stat-num">1</span><span class="stat-label">项 省级奖项</span></div>
</div>
<div class="card" style="margin-top:12px;">
<div class="card-body">
<p style="font-size:16px; line-height:1.8;">
<strong>你好，我是李海威。</strong> 广东海洋大学博士研究生，研究方向聚焦于
<strong>海洋垃圾智能监测与识别</strong>，结合无人机遥感影像与深度学习技术，
构建面向海滩、海面及海底的多场景自动化识别与评估方法体系。
同时具备 <strong>.NET 开发</strong> 与 <strong>建筑设计</strong> 的复合背景，
拥有从外业调查到系统开发的全链路实践经验。
</p>
</div>
</div>
<div class="card">
<div class="card-title">核心技能</div>
<div class="tag-group">
<span class="skill-tag">深度学习 (PyTorch / YOLO)</span>
<span class="skill-tag">无人机遥感影像处理</span>
<span class="skill-tag">C# / .NET</span>
<span class="skill-tag">Java</span>
<span class="skill-tag">Python</span>
<span class="skill-tag">CAD / SketchUp</span>
<span class="skill-tag">项目管理</span>
<span class="skill-tag">海洋外业调查</span>
<span class="skill-tag">数据分析与可视化</span>
</div>
</div>
</section>
<!-- 个人简介 -->
<section class="page-section" id="page-profile">
<div class="section-title">个人简介</div>
<div class="section-sub">广东海洋大学 · 博士研究生 · .NET 开发工程师</div>
<div class="card">
<div class="card-body">
<p style="font-size:16px; line-height:1.9;">
<strong>李海威 (Haiwei Li)</strong>，广东海洋大学博士研究生，<strong>.NET 开发工程师</strong>，
现居中国广东省湛江市。研究方向为 <strong>海洋垃圾智能监测与识别</strong>，
结合无人机遥感影像与深度学习目标检测技术，致力于提升海洋环境监测的效率与精度。
拥有从专科到博士的完整教育背景，以及 MES 系统开发与建筑设计的跨行业实践经验。
具备丰富的海洋外业调查经验，涵盖海岸带、近海与远海环境的多类型现场监测任务。
</p>
</div>
</div>
</section>
<!-- 工作经历 -->
<section class="page-section" id="page-work">
<div class="section-title">工作经历</div>
<div class="section-sub">4 个月 MES 开发 · 8 个月建筑设计</div>
<div class="card">
<div class="card-title">MES 开发工程师</div>
<div class="card-meta">
<span>深圳前海中软 · 正式</span>
<span>2023.02 – 2023.05 · 4 个月</span>
<span>广东深圳 / 梅州 · 现场办公</span>
</div>
<div class="card-body">
<ul>
<li>参与工厂信息化系统建设，负责数据采集与管理模块开发。</li>
<li>优化数据库与报表查询效率（部分查询提升约 <strong>30%</strong>），增强大规模数据处理与可视化支持。</li>
<li>编写实施方案与用户培训文档，积累系统实施与平台建设经验。</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-title">助理建筑设计师</div>
<div class="card-meta">
<span>名聿建筑设计 · 正式</span>
<span>2020.10 – 2021.05 · 8 个月</span>
<span>中国 · 广东省 · 常平镇 · 现场办公</span>
</div>
<div class="card-body">
<ul>
<li>参与城市更新、工厂园区及商业街项目设计，具备规划设计与实施经验。</li>
<li>完成建筑方案布局与施工图绘制，熟练使用 <strong>CAD、SketchUp</strong> 等软件。</li>
<li>协助图纸会审与跨专业协调，理解规划设计全过程。</li>
</ul>
</div>
</div>
</section>
<!-- 教育经历 -->
<section class="page-section" id="page-edu">
<div class="section-title">教育经历</div>
<div class="section-sub">博士 · 硕士 · 本科 · 专科</div>
<div class="card">
<div class="card-title">广东海洋大学 <span style="font-weight:400;font-size:15px;color:#475569;">· 理学博士</span></div>
<div class="card-meta">
<span>2026.09 – 2030.07</span>
<span>海洋科学专业</span>
</div>
<div class="card-body">
<p><strong>外业监测与调查经验：</strong></p>
<ul>
<li>海洋垃圾现场调查与样方监测</li>
<li>鸟类野外观测与种群调查</li>
<li>鲸豚类海上目击调查与记录</li>
<li>海洋水文要素现场监测</li>
<li>海洋环境采样（海水水质与生态指标采集）</li>
<li>红树林生态现状外业调查</li>
<li>珊瑚礁生态环境现场调查</li>
<li>增殖放流效果评估与跟踪监测</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-title">广东海洋大学 <span style="font-weight:400;font-size:15px;color:#475569;">· 农业硕士</span></div>
<div class="card-meta">
<span>2023.09 – 2026.07</span>
<span>农业工程与信息技术专业</span>
<span>加权平均成绩: <strong>85.2</strong></span>
</div>
<div class="card-body">
<p><strong>研究方向：</strong>基于无人机遥感与深度学习的海洋垃圾智能监测</p>
</div>
</div>
<div class="card">
<div class="card-title">湛江科技学院 <span style="font-weight:400;font-size:15px;color:#475569;">· 管理学学士</span></div>
<div class="card-meta">
<span>2021.09 – 2023.07</span>
<span>信息管理与信息系统专业</span>
<span>GPA: <strong>4.0 / 5.0</strong></span>
</div>
<div class="card-body">
<p>--</p>
<!--<p>班级学习委员 & 生活委员</p>-->
</div>
</div>
<div class="card">
<div class="card-title">茂名职业技术学院 <span style="font-weight:400;font-size:15px;color:#475569;">· 建筑设计</span></div>
<div class="card-meta">
<span>2018.09 – 2021.07</span>
</div>
<div class="card-body">
<p>--</p>
<!--<p>次元社 外联部 干事</p>-->
</div>
</div>
</section>
<!-- 研究方向 -->
<section class="page-section" id="page-research">
<div class="section-title">研究方向</div>
<div class="section-sub">海洋垃圾多场景智能监测与识别</div>
<div class="card">
<div class="card-body" style="font-size:16px; line-height:1.9;">
<p>
聚焦 <strong>海洋垃圾多场景智能监测与识别</strong> 问题，面向海滩、海面及海底等典型海洋环境，
结合 <strong>无人机遥感影像</strong> 与 <strong>深度学习目标检测</strong> 技术，
构建海洋垃圾自动化识别与评估方法体系，用于提升海洋环境监测的效率与精度。
</p>
<p style="margin-top:12px;">
核心研究内容涵盖：深度学习模型对比与优化、多源遥感数据融合、
垃圾目标检测与分类、空间分布分析与可视化、以及监测预警系统的构建与应用。
</p>
</div>
</div>
</section>
<!-- 论文成果 -->
<section class="page-section" id="page-papers">
<div class="section-title">论文成果</div>
<div class="section-sub">已发表 SCI 论文</div>
<div class="card">
<div class="card-title" style="font-size:17px;">
Comparative assessment of manual and UAV-based deep learning approaches for beach litter
</div>
<div class="card-meta">
<span><strong>Journal of Cleaner Production</strong> (2026)</span>
<span class="tag">中科院一区 / TOP</span>
</div>
<div class="card-body">
<p>
<a href="https://doi.org/10.1016/j.jclepro.2026.147512" target="_blank" rel="noopener" class="paper-link">
https://doi.org/10.1016/j.jclepro.2026.147512
</a>
</p>
<p style="margin-top:8px;color:#475569;">
本研究首次系统性对比了人工监测与多种深度学习模型（YOLO 系列等）在无人机遥感影像中
海滩垃圾检测的性能差异，为行业提供了标准化评估参考。
</p>
</div>
</div>
</section>
<!-- 研究与系统成果 -->
<section class="page-section" id="page-systems">
<div class="section-title">软件著作权</div>
<div class="section-sub">3 项软件著作权 · 覆盖海陆底全场景</div>
<div class="card">
<div class="card-body">
<p style="margin-bottom:12px;font-weight:500;">构建基于无人机遥感影像的海洋垃圾智能监测与预警系统矩阵：</p>
<ul>
<li><strong>海滩垃圾智能监测系统 V1.0</strong>（2025SR1312048）</li>
<li><strong>海漂垃圾智能监测系统 V1.0</strong>（2025SR1508406）</li>
<li><strong>海底垃圾智能监测系统 V1.0</strong>（2025SR1749326）</li>
</ul>
<p style="margin-top:12px;color:#475569;">
上述系统用于海洋垃圾检测、分类识别及空间分布分析，实现从数据采集到智能分析的流程化处理，
形成“海-陆-底”三位一体的监测预警能力。
</p>
</div>
</div>
</section>
<!-- 学术交流 -->
<section class="page-section" id="page-academic">
<div class="section-title">学术交流</div>
<div class="section-sub">2 次重要学术汇报</div>
<div class="card">
<div class="card-title">广东省近岸海洋资源与环境研究生学术论坛</div>
<div class="card-meta"><span>2025.09</span><span>广东</span></div>
<div class="card-body">
<p>口头汇报：《人工监测与无人机深度学习方法在海滩垃圾监测中的对比评估》</p>
</div>
</div>
<div class="card">
<div class="card-title">海洋生态修复技术交流会</div>
<div class="card-meta"><span>2024.12</span><span>海南 · 海口</span></div>
<div class="card-body">
<p>特邀报告：《无人机与深度学习技术赋能海洋垃圾监测》</p>
</div>
</div>
</section>
<!-- 奖项与证书 -->
<section class="page-section" id="page-awards">
<div class="section-title">奖项与证书</div>
<div class="section-sub">省级奖项 · 国家软考中级</div>
<div class="card">
<div class="card-title">广东省科技政策宣贯直通车大赛 · 优胜奖</div>
<div class="card-meta"><span>2025</span></div>
<div class="card-body">
<p>参赛作品：《从资源到动力：深圳科研仪器开放共享实践》</p>
</div>
</div>
<div class="card">
<div class="card-title">计算机技术与软件专业技术资格（中级）</div>
<div class="card-meta"><span>电子商务设计师 · 2025</span></div>
<div class="card-body">
<p>国家人力资源和社会保障部 · 工业和信息化部</p>
</div>
</div>
</section>
<!-- 技能 -->
<section class="page-section" id="page-skills">
<div class="section-title">技能</div>
<div class="section-sub">跨领域技术栈</div>
<div class="card">
<div class="card-title">AI & GIS</div>
<div class="tag-group">
<span class="skill-tag">深度学习</span>
<span class="skill-tag">目标检测</span>
<span class="skill-tag">无人机航摄</span>
<span class="skill-tag">Python</span>
<span class="skill-tag">ArcGIS</span>
</div>
</div>
<div class="card">
<div class="card-title">开发 & 系统</div>
<div class="tag-group">
<span class="skill-tag">C# / .NET</span>
<span class="skill-tag">Java</span>
<span class="skill-tag">SQL / 数据库优化</span>
<span class="skill-tag">项目管理</span>
<span class="skill-tag">系统实施</span>
</div>
</div>
<div class="card">
<div class="card-title">设计</div>
<div class="tag-group">
<span class="skill-tag">CAD</span>
<span class="skill-tag">SketchUp</span>
<span class="skill-tag">Adobe Photoshop</span>
</div>
</div>
<div class="card">
<div class="card-title">海洋科学</div>
<div class="tag-group">
<span class="skill-tag">海洋外业调查</span>
<span class="skill-tag">数据分析与可视化</span>
</div>
</div>
</section>
<!-- 竞赛经历 -->
<section class="page-section" id="page-competition">
<div class="section-title">竞赛经历</div>
<div class="section-sub">竞赛获奖</div>
<div class="card">
<div class="card-title">湛江科技学院中国大学生计算机设计大赛校内赛</div>
<div class="card-meta"><span>一等奖 · 2022</span></div>
</div>
<div class="card">
<div class="card-title">湛江科技学院第十四届蓝桥杯校内赛</div>
<div class="card-meta"><span>Python 组 · 三等奖</span></div>
</div>
<div class="card">
<div class="card-title">茂名职业技术学院建筑类别技能大赛</div>
<div class="card-meta"><span>景观设计方向 · 优秀奖 · 2019</span></div>
</div>
<div class="card">
<div class="card-title">茂名职业技术学院建筑类别技能大赛</div>
<div class="card-meta"><span>建筑设计方向 · 三等奖 · 2019</span></div>
</div>
</section>
<!-- 奖学金与荣誉 -->
<section class="page-section" id="page-scholarship">
<div class="section-title">奖学金与荣誉</div>
<div class="section-sub">学术荣誉 · 优秀毕业生</div>
<div class="card">
<div class="card-title">广东海洋大学研究生奖学金（三等奖）</div>
<div class="card-meta"><span>2023、2024、2025年度</span></div>
</div>
<div class="card">
<div class="card-title">湛江科技学院奖学金（三等奖）</div>
<div class="card-meta"><span>2021 – 2022 学年度</span></div>
</div>
<div class="card">
<div class="card-title">湛江科技学院优秀毕业生</div>
<div class="card-meta"><span>2023 届</span></div>
</div>
</section>
<!-- 活动与社团 -->
<section class="page-section" id="page-activities">
<div class="section-title">活动与社团</div>
<div class="section-sub">高校二次元文化活动策划与执行</div>
<div class="card">
<div class="card-title">次元社 外联部 干事</div>
<div class="card-meta"><span>茂名职业技术学院 · 2018 – 2021</span></div>
<div class="card-body">
<ul>
<li>参与策划《茂名动漫盛典高校联盟毕业季 2019 (MAG)》活动，负责高校联动与活动协同组织。</li>
<li>参与策划《茂职院次元社巡礼月活动——璃华祭》，协助完成活动整体流程设计与执行支持。</li>
</ul>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>封面
Comments | NOTHING
该文章已经关闭评论