657 lines
31 KiB
HTML
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>© 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> |