Files
2026-06-16 11:55:14 +08:00

657 lines
31 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ UserName }} 的 个人主页</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.gvsds.com/font-awesome/css/all.min.css" rel="stylesheet">
<script src="https://cdn.gvsds.com/chart.js/dist/chart.umd.js"></script>
<link rel="stylesheet" href="https://cdn.gvsds.com/layui.js/src/css/layui.css">
<script src="https://cdn.gvsds.com/layui.js/src/layui.js"></script>
<link rel="stylesheet" href="https://cdn.gvsds.com/website/{{ ChildHost }}/css/index.css">
<script src="https://cdn.gvsds.com/website/{{ ChildHost }}/js/index.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#4080FF',
accent: '#0E2F56',
dark: '#1D2129',
light: '#F2F3F5'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.bg-gradient-custom {
background: linear-gradient(135deg, #165DFF 0%, #0E2F56 100%);
}
.bg-gradient-custom-dark {
background: linear-gradient(135deg, #0E2F56 0%, #000000 100%);
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.text-shadow-lg {
text-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.03);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
}
</style>
</head>
<body class="font-inter bg-light dark:bg-dark transition-colors duration-300">
<!-- 动态背景 -->
<div id="particles-js" class="fixed inset-0 -z-10 opacity-30"></div>
<!-- 顶部导航栏 -->
<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" id="navbar">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="text-2xl font-bold text-white">
<span class="text-primary/80">PERSONAL</span><span class="text-white">PAGE</span>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#readme" class="text-white hover:text-primary transition-colors duration-300">关于</a>
<a href="#achievements" class="text-white hover:text-primary transition-colors duration-300">成就</a>
<a href="#contact" class="text-white hover:text-primary transition-colors duration-300">联系</a>
</nav>
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="text-white hover:text-primary transition-colors duration-300">
<i class="fa-solid fa-moon"></i>
</button>
<button class="md:hidden text-white hover:text-primary transition-colors duration-300" id="mobile-menu-button">
<i class="fa-solid fa-bars"></i>
</button>
</div>
</div>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="hidden md:hidden bg-dark/95 backdrop-blur-md">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
<a href="#readme" class="text-white hover:text-primary transition-colors duration-300 py-2">关于</a>
<a href="#skills" class="text-white hover:text-primary transition-colors duration-300 py-2">技能</a>
<a href="#contact" class="text-white hover:text-primary transition-colors duration-300 py-2">联系</a>
</div>
</div>
</header>
<!-- 顶部图片区域 -->
<section class="relative h-[40vh] bg-cover bg-center bg-fixed flex items-center justify-center" style="background-image: url('{{ BackgroundLink or 'https://picsum.photos/id/1048/1920/1080' }}');">
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
<div class="relative z-10 text-center">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-white text-shadow-lg mb-4">
{{ UserName }} 的个人主页
</h1>
<p class="text-[clamp(1rem,2vw,1.5rem)] text-white text-shadow opacity-90 max-w-2xl mx-auto">
{{ Subtitle }}
</p>
</div>
</section>
<!-- README卡片 -->
<section id="readme" class="py-20 bg-gray-50 dark:bg-gray-900/50" style="padding-top: 2rem !important;">
<div class="container mx-auto px-4">
<div class="bg-white dark:bg-dark/90 backdrop-blur-md rounded-2xl shadow-2xl p-8 md:p-12 hover-scale">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/3">
<div class="relative">
<div class="w-48 h-48 mx-auto rounded-full overflow-hidden border-4 border-primary/20 shadow-lg animate-float">
<img src="https://ugm.gvsds.com/GetArgsUserHeadPng.api?UserUUID={{ UserUUID }}" alt="个人头像" class="w-full h-full object-cover">
</div>
<div class="absolute -bottom-4 -right-4 bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg">
<i class="fa-solid fa-code text-xl"></i>
</div>
</div>
<div class="mt-8 text-center">
<h2 class="text-2xl font-bold text-primary dark:text-white">{{ UserName }}</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">{{ Classification }}</p>
<div class="mt-4 flex justify-center space-x-4">
<a href="{{ Github }}" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300" target="_blank">
<i class="fa-brands fa-github text-xl"></i>
</a>
<a href="weixin://dl/business/?t={{ WeChat }}" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300" target="_blank">
<i class="fa-brands fa-weixin text-xl"></i>
</a>
<a href="tencent://message/?uin={{ QQ }}&Site=&Menu=yes" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300" target="">
<i class="fa-brands fa-qq text-xl"></i>
</a>
</div>
</div>
</div>
<div class="md:w-2/3">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">关于我</h3>
{% for line in SelfIntroduction.split('\n') if line %}
<p class="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">{{ line }}</p>
{% endfor %}
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="bg-gray-100 dark:bg-gray-800/50 p-4 rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa-solid fa-code text-primary"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 dark:text-white">{{ ProjectExperience }}</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">项目经验</p>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800/50 p-4 rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa-solid fa-users text-primary"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 dark:text-white">{{ SatisfiedCustomers }}</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">满意客户</p>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800/50 p-4 rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa-solid fa-award text-primary"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 dark:text-white">{{ ReceiveAward }}</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">获得奖项</p>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800/50 p-4 rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa-solid fa-coffee text-primary"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 dark:text-white">{{ CoffeeCups }}</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">咖啡杯数</p>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap gap-2">
{% for line in Tags.split(',') if line %}
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">{{ line }}</span>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 成就部分 -->
<section id="achievements" class="py-20 bg-gray-50 dark:bg-gray-900/50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 dark:text-white mb-4">成就与荣誉</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
这些是我获得的一些重要成就和荣誉
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 成就1 -->
<div class="bg-white dark:bg-gray-800/50 rounded-xl p-8 shadow-lg hover-scale relative overflow-hidden">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-primary/10 rounded-full"></div>
<div class="relative">
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
<i class="fa-solid {{ Achievement1Icon }} text-2xl text-primary"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">{{ Achievement1Name }}</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
{{ Achievement1Introduction }}
</p>
<span class="text-sm text-gray-500 dark:text-gray-400">{{ Achievement1Time }}</span>
</div>
</div>
<!-- 成就2 -->
<div class="bg-white dark:bg-gray-800/50 rounded-xl p-8 shadow-lg hover-scale relative overflow-hidden">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-primary/10 rounded-full"></div>
<div class="relative">
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
<i class="fa-solid {{ Achievement2Icon }} text-2xl text-primary"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">{{ Achievement2Name }}</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
{{ Achievement2Introduction }}
</p>
<span class="text-sm text-gray-500 dark:text-gray-400">{{ Achievement2Time }}</span>
</div>
</div>
<!-- 成就3 -->
<div class="bg-white dark:bg-gray-800/50 rounded-xl p-8 shadow-lg hover-scale relative overflow-hidden">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-primary/10 rounded-full"></div>
<div class="relative">
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
<i class="fa-solid {{ Achievement3Icon }} text-2xl text-primary"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">{{ Achievement3Name }}</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
{{ Achievement3Introduction }}
</p>
<span class="text-sm text-gray-500 dark:text-gray-400">{{ Achievement3Time }}</span>
</div>
</div>
<!-- 成就4 -->
<div class="bg-white dark:bg-gray-800/50 rounded-xl p-8 shadow-lg hover-scale relative overflow-hidden">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-primary/10 rounded-full"></div>
<div class="relative">
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
<i class="fa-solid {{ Achievement4Icon }} text-2xl text-primary"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">{{ Achievement4Name }}</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
{{ Achievement4Introduction }}
</p>
<span class="text-sm text-gray-500 dark:text-gray-400">{{ Achievement4Time }}</span>
</div>
</div>
</div>
<!-- 经验时间线
<div class="mt-20">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-12 text-center">工作经验</h3>
<div class="relative">
<div class="absolute left-0 md:left-1/2 top-0 bottom-0 w-1 bg-primary/20 transform md:-translate-x-1/2"></div>
<div class="relative mb-12">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
<div class="bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg hover-scale">
<h4 class="text-xl font-bold text-gray-800 dark:text-white mb-2">高级全栈开发工程师</h4>
<p class="text-primary font-medium mb-2">TechCorp Inc.</p>
<p class="text-gray-600 dark:text-gray-400 mb-4">
领导开发团队,负责核心产品的架构设计和技术实现,推动技术创新和团队发展。
</p>
<span class="text-sm text-gray-500 dark:text-gray-400">2022年 - 至今</span>
</div>
</div>
<div class="absolute left-0 md:left-1/2 w-6 h-6 rounded-full bg-primary border-4 border-white dark:border-gray-900 shadow-lg transform md:-translate-x-1/2"></div>
<div class="md:w-1/2 md:pl-12 md:text-left"></div>
</div>
</div>
<div class="relative mb-12">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 md:text-right md:order-1 md:ml-auto"></div>
<div class="absolute left-0 md:left-1/2 w-6 h-6 rounded-full bg-primary border-4 border-white dark:border-gray-900 shadow-lg transform md:-translate-x-1/2"></div>
<div class="md:w-1/2 md:pl-12 md:text-left mb-8 md:mb-0 md:order-2">
<div class="bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg hover-scale">
<h4 class="text-xl font-bold text-gray-800 dark:text-white mb-2">前端开发工程师</h4>
<p class="text-primary font-medium mb-2">WebSolutions Co.</p>
<p class="text-gray-600 dark:text-gray-400 mb-4">
负责公司产品的前端开发工作,优化用户体验,提升页面性能,参与技术栈升级。
</p>
<span class="text-sm text-gray-500 dark:text-gray-400">2019年 - 2022年</span>
</div>
</div>
</div>
</div>
<div class="relative">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
<div class="bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg hover-scale">
<h4 class="text-xl font-bold text-gray-800 dark:text-white mb-2">初级开发工程师</h4>
<p class="text-primary font-medium mb-2">StartUp Tech</p>
<p class="text-gray-600 dark:text-gray-400 mb-4">
参与公司产品的前后端开发工作,学习和实践最新技术,协助团队完成项目交付。
</p>
<span class="text-sm text-gray-500 dark:text-gray-400">2017年 - 2019年</span>
</div>
</div>
<div class="absolute left-0 md:left-1/2 w-6 h-6 rounded-full bg-primary border-4 border-white dark:border-gray-900 shadow-lg transform md:-translate-x-1/2"></div>
<div class="md:w-1/2 md:pl-12 md:text-left"></div>
</div>
</div>
</div>
</div>
-->
</div>
</section>
<!-- README卡片 -->
<section id="readmemarkdown" class="py-20 bg-gray-50 dark:bg-gray-900/50" style="padding-top: 2rem !important;">
<div class="container mx-auto px-4">
<div class="bg-white dark:bg-dark/90 backdrop-blur-md rounded-2xl shadow-2xl p-8 md:p-12 hover-scale">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/3" id="markdown-content">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4"></h3>
<p class="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">{{ MarkDown | safe }}</p>
</div>
</div>
</div>
</div>
</section>
<!-- 联系部分 -->
<section id="contact" class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 dark:text-white mb-4">联系我</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
如果你对我的工作感兴趣或者有任何问题,欢迎随时联系我
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="bg-white dark:bg-gray-800/50 rounded-xl p-8 shadow-lg">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-6">联系方式</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4 shrink-0">
<i class="fa-solid fa-envelope text-primary"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 dark:text-white mb-1">电子邮件</h4>
<p class="text-gray-600 dark:text-gray-400">{{ UserEmail }}</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4 shrink-0">
<i class="fa-solid fa-phone text-primary"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 dark:text-white mb-1">电话</h4>
<p class="text-gray-600 dark:text-gray-400">+{{ UserTele }}</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-bold text-gray-800 dark:text-white mb-4">社交媒体</h4>
<div class="flex space-x-4">
<a href="{{ Github }}" class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors duration-300" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="weixin://dl/business/?t={{ WeChat }}" class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors duration-300" target="_blank">
<i class="fa-brands fa-weixin"></i>
</a>
<a href="tencent://message/?uin={{ QQ }}&Site=&Menu=yes" class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors duration-300" target="_blank">
<i class="fa-brands fa-qq"></i>
</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800/50 rounded-xl p-8 shadow-lg">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-6">发送消息</h3>
<form class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">姓名</label>
<input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary dark:text-white" placeholder="请输入您的姓名">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">电子邮件</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary dark:text-white" placeholder="请输入您的电子邮件">
</div>
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">主题</label>
<input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary dark:text-white" placeholder="请输入消息主题">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">消息内容</label>
<textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary dark:text-white" placeholder="请输入您的消息内容"></textarea>
</div>
<button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium px-6 py-3 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
发送消息 <i class="fa-solid fa-paper-plane ml-2"></i>
</button>
</form>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h4 class="text-xl font-bold mb-4">关于我</h4>
<p class="text-gray-400 mb-4">
{{ UserPersonalSignature }}
</p>
<div class="flex space-x-4">
<a href="{{ Github }}" class="text-gray-400 hover:text-white transition-colors duration-300" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="weixin://dl/business/?t={{ WeChat }}" class="text-gray-400 hover:text-white transition-colors duration-300" target="_blank">
<i class="fa-brands fa-weixin"></i>
</a>
<a href="tencent://message/?uin={{ QQ }}&Site=&Menu=yes" class="text-gray-400 hover:text-white transition-colors duration-300" target="_blank">
<i class="fa-brands fa-qq"></i>
</a>
</div>
</div>
<div>
<h4 class="text-xl font-bold mb-4">快速链接</h4>
<ul class="space-y-2">
<li><a href="#readme" class="text-gray-400 hover:text-white transition-colors duration-300">关于我</a></li>
<li><a href="#achievements" class="text-gray-400 hover:text-white transition-colors duration-300">成就</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-300">联系</a></li>
</ul>
</div>
<!--<div>
<h4 class="text-xl font-bold mb-4">服务</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">网站开发</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">移动应用开发</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">UI/UX 设计</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">API 开发</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">技术咨询</a></li>
</ul>
</div>-->
<div>
<h4 class="text-xl font-bold mb-4">合作</h4>
<p class="text-gray-400 mb-4">
与我联系和合作,创造无限可能。
</p>
<form class="flex">
<input type="email" placeholder="您的电子邮件" class="px-4 py-2 rounded-l-lg focus:outline-none bg-gray-700 text-white w-full">
<button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors duration-300">
<i class="fa-solid fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
<p>&copy; 2025 个人主页. 保留所有权利.</p>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button id="back-to-top" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90 transform hover:scale-110">
<i class="fa-solid fa-arrow-up"></i>
</button>
<!-- 粒子效果脚本 -->
<script src="https://cdn.bootcdn.net/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<script>
// 粒子效果配置
particlesJS("particles-js", {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#165DFF" },
shape: { type: "circle" },
opacity: { value: 0.5, random: true },
size: { value: 3, random: true },
line_linked: {
enable: true,
distance: 150,
color: "#165DFF",
opacity: 0.2,
width: 1
},
move: {
enable: true,
speed: 1,
direction: "none",
random: true,
straight: false,
out_mode: "out",
bounce: false
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: "grab" },
onclick: { enable: true, mode: "push" },
resize: true
},
modes: {
grab: { distance: 140, line_linked: { opacity: 0.5 } },
push: { particles_nb: 4 }
}
},
retina_detect: true
});
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
const backToTop = document.getElementById('back-to-top');
if (window.scrollY > 50) {
navbar.classList.add('bg-dark/90', 'backdrop-blur-md', 'shadow-lg');
navbar.classList.remove('py-3');
navbar.classList.add('py-2');
} else {
navbar.classList.remove('bg-dark/90', 'backdrop-blur-md', 'shadow-lg');
navbar.classList.remove('py-2');
navbar.classList.add('py-3');
}
if (window.scrollY > 300) {
backToTop.classList.remove('opacity-0', 'invisible');
backToTop.classList.add('opacity-100', 'visible');
} else {
backToTop.classList.add('opacity-0', 'invisible');
backToTop.classList.remove('opacity-100', 'visible');
}
});
// 返回顶部按钮
document.getElementById('back-to-top').addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 移动端菜单
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// 关闭移动菜单
document.getElementById('mobile-menu').classList.add('hidden');
}
});
});
// 深色模式切换
document.getElementById('theme-toggle').addEventListener('click', function() {
document.documentElement.classList.toggle('dark');
// 更新主题图标
const icon = this.querySelector('i');
if (document.documentElement.classList.contains('dark')) {
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
} else {
icon.classList.remove('fa-sun');
icon.classList.add('fa-moon');
}
});
// 检测系统主题
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
document.getElementById('theme-toggle').querySelector('i').classList.remove('fa-moon');
document.getElementById('theme-toggle').querySelector('i').classList.add('fa-sun');
}
</script>
</body>
</html>