演示地址:http://han.ge
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>涵哥的个人主页</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; }
html, body { min-height: 100%; width: 100%; overflow-x: hidden; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
body { display: flex; flex-direction: column; align-items: center; padding: 20px; }
.container { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 30px; margin: 0 auto; }
/* 个人资料卡片 */
.profile-card { background: rgba(255, 255, 255, 0.9); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); }
.profile-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%); transform: rotate(45deg); z-index: 0; }
.profile-card>* { position: relative; z-index: 1; }
.avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 5px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.2); margin-bottom: 20px; }
.profile-name { font-size: 28px; font-weight: bold; margin-bottom: 10px; color: #333; }
.profile-bio { font-size: 16px; color: #666; text-align: center; margin-bottom: 20px; max-width: 600px; }
.social-links { display: flex; gap: 15px; margin-top: 15px; }
.social-link { width: 45px; height: 45px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #555; font-size: 20px; transition: all 0.3s ease; cursor: pointer; text-decoration: none; }
.social-link:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.social-link.wechat:hover { background: #07C160; color: white; }
.social-link.qq:hover { background: #12B7F5; color: white; }
.social-link.email:hover { background: #EA4335; color: white; }
.social-link.blog:hover { background: #FF5722; color: white; }
.social-link.website:hover { background: #2196F3; color: white; }
/* 问候语 */
.greeting { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: center; }
/* 网站导航 */
.nav-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; width: 100%; }
.nav-category { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
.nav-category:hover { transform: translateY(-5px); }
.category-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; padding-left: 10px; border-left: 4px solid #4285F4; color: #333; }
.nav-links { display: flex; flex-direction: column; gap: 10px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: background-color 0.2s; text-decoration: none; color: #555; }
.nav-link:hover { background-color: #f5f5f5; }
.nav-link i { font-size: 16px; width: 20px; text-align: center; }
/* 提示消息 */
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: rgba(0,0,0,0.7); color: white; padding: 10px 20px; border-radius: 30px; font-size: 14px; opacity: 0; transition: all 0.3s ease; z-index: 1000; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
@media (max-width: 768px) {
.nav-container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
</style>
</head>
<body>
<div class="container">
<!-- 个人资料 -->
<div class="profile-card">
<img src="https://picsum.photos/seed/avatar123/120/120.jpg" alt="个人头像" class="avatar">
<h1 class="profile-name">涵哥</h1>
<p class="profile-bio">80后大叔，爱喝酒，爱熬夜，爱追番！</p>
<div class="social-links">
<div class="social-link wechat" data-copy="微信号：farhans"><i class="fab fa-weixin"></i></div>
<div class="social-link qq" data-copy="QQ号：46369606"><i class="fab fa-qq"></i></div>
<a href="mailto:fim@qq.com" class="social-link email"><i class="fas fa-envelope"></i></a>
<a href="http://hanshuailing.com/wordpress" target="_blank" class="social-link blog"><i class="fas fa-blog"></i></a>
<a href="http://dh.nqq.org" target="_blank" class="social-link website"><i class="fas fa-globe"></i></a>
</div>
</div>
<!-- 问候语 -->
<div class="greeting" id="greeting">晚上好！欢迎来到shuai的个人主页</div>
<!-- 网站导航 -->
<div class="nav-container">
<div class="nav-category">
<div class="category-title">📱 社交媒体</div>
<div class="nav-links">
<a href="https://weibo.com" target="_blank" class="nav-link"><i class="fab fa-weibo"></i> 微博</a>
<a href="https://www.zhihu.com" target="_blank" class="nav-link"><i class="fas fa-question-circle"></i> 知乎</a>
<a href="https://www.reddit.com" target="_blank" class="nav-link"><i class="fab fa-reddit"></i> Reddit</a>
<a href="https://twitter.com" target="_blank" class="nav-link"><i class="fab fa-twitter"></i> Twitter</a>
</div>
</div>
<div class="nav-category">
<div class="category-title">💻 开发工具</div>
<div class="nav-links">
<a href="https://github.com" target="_blank" class="nav-link"><i class="fab fa-github"></i> GitHub</a>
<a href="https://gitlab.com" target="_blank" class="nav-link"><i class="fab fa-gitlab"></i> GitLab</a>
<a href="https://codepen.io" target="_blank" class="nav-link"><i class="fab fa-codepen"></i> CodePen</a>
<a href="https://jsfiddle.net" target="_blank" class="nav-link"><i class="fas fa-code"></i> JSFiddle</a>
</div>
</div>
<div class="nav-category">
<div class="category-title">🎬 娱乐休闲</div>
<div class="nav-links">
<a href="https://www.youtube.com" target="_blank" class="nav-link"><i class="fab fa-youtube"></i> YouTube</a>
<a href="https://www.netflix.com" target="_blank" class="nav-link"><i class="fas fa-film"></i> Netflix</a>
<a href="https://open.spotify.com" target="_blank" class="nav-link"><i class="fab fa-spotify"></i> Spotify</a>
<a href="https://www.bilibili.com" target="_blank" class="nav-link"><i class="fas fa-tv"></i> 哔哩哔哩</a>
</div>
</div>
<div class="nav-category">
<div class="category-title">🛠 常用服务</div>
<div class="nav-links">
<a href="https://mail.google.com" target="_blank" class="nav-link"><i class="fas fa-envelope"></i> Gmail</a>
<a href="https://drive.google.com" target="_blank" class="nav-link"><i class="fas fa-cloud"></i> Google Drive</a>
<a href="https://translate.google.com" target="_blank" class="nav-link"><i class="fas fa-language"></i> Google 翻译</a>
<a href="https://calendar.google.com" target="_blank" class="nav-link"><i class="fas fa-calendar-alt"></i> Google 日历</a>
</div>
</div>
</div>
</div>
<!-- 提示消息 -->
<div class="toast" id="toast">已复制到剪贴板</div>
<script>
// 设置问候语
function setGreeting() {
const hour = new Date().getHours();
let greeting = '';
if (hour < 6) greeting = '夜深了，注意休息！';
else if (hour < 9) greeting = '早上好！新的一天开始了';
else if (hour < 12) greeting = '上午好！工作顺利吗';
else if (hour < 14) greeting = '中午好！该吃午饭了';
else if (hour < 17) greeting = '下午好！继续加油';
else if (hour < 19) greeting = '傍晚好！放松一下吧';
else if (hour < 22) greeting = '晚上好！欢迎来到我的个人主页';
else greeting = '夜深了，注意休息！';
document.getElementById('greeting').textContent = greeting;
}
setGreeting();
setInterval(setGreeting, 3600000);
// 复制功能
document.querySelectorAll('.social-link[data-copy]').forEach(link => {
link.addEventListener('click', function() {
const textToCopy = this.getAttribute('data-copy');
navigator.clipboard.writeText(textToCopy).then(() => {
const toast = document.getElementById('toast');
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 2000);
});
});
});
</script>
</body>
</html>
