<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>周刚孺 - 个人简历</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5', // 主色调：深紫色，体现专业性与创意
secondary: '#10B981', // 辅助色：绿色，用于强调和交互元素
accent: '#F59E0B', // 强调色：橙色，用于突出关键信息
dark: '#1F2937', // 深色背景
light: '#F9FAFB', // 浅色背景
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-hover {
@apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
.section-padding {
@apply py-16 md:py-24;
}
.skill-bar {
@apply h-2 bg-gray-200 rounded-full overflow-hidden;
}
.skill-progress {
@apply h-full rounded-full transition-all duration-1000;
}
.nav-link {
@apply relative text-gray-600 hover:text-primary transition-colors duration-300;
}
.nav-link::after {
@apply content-[''] absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
}
.nav-link:hover::after {
@apply w-full;
}
}
</style>
</head>
<body class="font-inter bg-light text-dark antialiased">
<!-- 导航栏 -->
<nav id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-md shadow-sm">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<span class="text-primary text-2xl font-bold">周刚孺</span>
</div>
<!-- 桌面导航 -->
<div class="hidden md:flex items-center space-x-8">
<a href="#about" class="nav-link">个人信息</a>
<a href="#skills" class="nav-link">技能特长</a>
<a href="#education" class="nav-link">教育背景</a>
<a href="#projects" class="nav-link">项目经验</a>
<a href="#certificates" class="nav-link">荣誉证书</a>
</div>
<!-- 移动端菜单按钮 -->
<div class="md:hidden flex items-center">
<button id="menu-toggle" class="text-gray-600 focus:outline-none">
<i class="fa fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<!-- 移动端导航菜单 -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t shadow-lg">
<div class="container mx-auto px-4 py-3 space-y-3">
<a href="#about" class="block py-2 text-gray-600 hover:text-primary">个人信息</a>
<a href="#skills" class="block py-2 text-gray-600 hover:text-primary">技能特长</a>
<a href="#education" class="block py-2 text-gray-600 hover:text-primary">教育背景</a>
<a href="#projects" class="block py-2 text-gray-600 hover:text-primary">项目经验</a>
<a href="#certificates" class="block py-2 text-gray-600 hover:text-primary">荣誉证书</a>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<header class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/5 to-secondary/5 relative overflow-hidden">
<div class="absolute top-0 right-0 w-1/2 h-full opacity-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-full w-full">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow">
周刚孺 <span class="text-primary">前端开发工程师</span>
</h1>
<p class="text-lg md:text-xl text-gray-600 mt-4 max-w-lg">
专注于Web前端开发的应届毕业生，熟练掌握HTML5、CSS3和JavaScript，具备完整项目开发经验，期待在广州开启技术职业生涯。
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="#projects" class="px-6 py-3 bg-primary text-white rounded-full shadow-lg hover:shadow-primary/30 hover:bg-primary/90 transition-all duration-300 flex items-center">
<i class="fa fa-code mr-2"></i> 查看项目
</a>
<a href="mailto:zzxm2023@qq.com" class="px-6 py-3 bg-white text-primary border border-primary rounded-full shadow-md hover:shadow-primary/20 transition-all duration-300 flex items-center">
<i class="fa fa-envelope mr-2"></i> 联系我
</a>
</div>
</div>
<div class="md:w-1/2 relative">
<div class="w-64 h-64 md:w-80 md:h-80 mx-auto relative">
<div class="absolute -inset-2 bg-gradient-to-r from-primary to-secondary rounded-full blur-xl opacity-70 animate-pulse-slow"></div>
<div class="absolute -inset-1 bg-white rounded-full shadow-lg"></div>
<div class="relative w-full h-full rounded-full overflow-hidden border-4 border-white">
<img src="./assets/1000061820.jpg" width二="640" height="600" alt="周刚孺" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
</div>
</header>
<!-- 个人信息 -->
<section id="about" class="section-padding bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">个人信息</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
<div class="bg-light rounded-2xl shadow-lg p-8 card-hover">
<h3 class="text-xl font-semibold mb-6 flex items-center">
<i class="fa fa-user-circle text-primary mr-3 text-2xl"></i> 基本信息
</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0">
<i class="fa fa-calendar text-primary"></i>
</div>
<div>
<p class="text-gray-500">年龄</p>
<p class="font-medium">20岁</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0">
<i class="fa fa-male text-primary"></i>
</div>
<div>
<p class="text-gray-500">性别</p>
<p class="font-medium">男</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0">
<i class="fa fa-users text-primary"></i>
</div>
<div>
<p class="text-gray-500">民族</p>
<p class="font-medium">汉族</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0">
<i class="fa fa-map-marker text-primary"></i>
</div>
<div>
<p class="text-gray-500">籍贯</p>
<p class="font-medium">广东梅州</p>
</div>
</div>
</div>
</div>
<div class="bg-light rounded-2xl shadow-lg p-8 card-hover">
<h3 class="text-xl font-semibold mb-6 flex items-center">
<i class="fa fa-info-circle text-primary mr-3 text-2xl"></i> 联系信息
</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0">
<i class="fa fa-phone text-primary"></i>
</div>
<div>
<p class="text-gray-500">电话</p>
<p class="font-medium">13823817384</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0">
<i class="fa fa-envelope text-primary"></i>
</div>
<div>
<p class="text-gray-500">邮箱</p>
<p class="font-medium">zzxm2023@qq.com</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0">
<i class="fa fa-map-marker text-primary"></i>
</div>
<div>
<p class="text-gray-500">意向城市</p>
<p class="font-medium">广州</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0">
<i class="fa fa-tag text-primary"></i>
</div>
<div>
<p class="text-gray-500">期望薪资</p>
<p class="font-medium">4-5k</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 技能特长 -->
<section id="skills" class="section-padding bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">技能特长</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
<div class="bg-white rounded-2xl shadow-lg p-8 card-hover">
<h3 class="text-xl font-semibold mb-6 flex items-center">
<i class="fa fa-code text-primary mr-3 text-2xl"></i> 技术技能
</h3>
<div class="space-y-6">
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">计算机基础</span>
<span>精通</span>
</div>
<div class="skill-bar">
<div class="skill-progress bg-primary" style="width: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">Office软件</span>
<span>熟练</span>
</div>
<div class="skill-bar">
<div class="skill-progress bg-secondary" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">沟通能力</span>
<span>50%</span>
</div>
<div class="skill-bar">
<div class="skill-progress bg-accent" style="width: 50%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">前端开发</span>
<span>掌握</span>
</div>
<div class="skill-bar">
<div class="skill-progress bg-primary" style="width: 75%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">JAVA开发</span>
<span>掌握</span>
</div>
<div class="skill-progress bg-secondary" style="width: 70%"></div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-2xl shadow-lg p-8 card-hover">
<h3 class="text-xl font-semibold mb-6 flex items-center">
<i class="fa fa-wrench text-primary mr-3 text-2xl"></i> 综合能力
</h3>
<div class="space-y-6">
<div>
<h4 class="font-medium mb-2">编程语言</h4>
<p class="text-gray-600">掌握前端的JavaScript和移动端HTML5，能够实现交互逻辑与动态效果；熟悉后端的JAVA，具备面向对象编程思想，可开发基础服务端应用。</p>
</div>
<div>
<h4 class="font-medium mb-2">设计软件</h4>
<p class="text-gray-600">熟练掌握修图软件PS，能完成图片精修与特效制作；精通AI工具DeepSeek，具备本地部署能力，可应用于图像生成与智能设计场景。</p>
</div>
<div>
<h4 class="font-medium mb-2">维修与系统</h4>
<p class="text-gray-600">具备日常家用电器维修能力，能处理常见故障；熟练安装电脑系统，可配置Windows与Linux环境，解决系统兼容性问题。</p>
</div>
<div>
<h4 class="font-medium mb-2">工具与环境</h4>
<div class="flex flex-wrap gap-2 mt-2">
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">HTML5</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">CSS3</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">JavaScript</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Java</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">MySQL</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Photoshop</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">DeepSeek</span>
</div>
</div>
</div>
<!-- 技能雷达图 -->
<div class="mt-8">
<h4 class="font-medium mb-4">技能雷达图</h4>
<div class="w-full h-64">
<canvas id="skillsChart"></canvas>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 教育背景 -->
<section id="education" class="section-padding bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">教育背景</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div class="relative">
<!-- 时间线 -->
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-primary/20 md:w-2"></div>
<div class="space-y-12 relative">
<!-- 教育项1 -->
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
<span class="text-primary font-semibold">2023 - 09 ~ 2026 - 06</span>
<h3 class="text-xl font-bold mt-1">广州东华职业学院</h3>
<p class="text-gray-600">软件技术（大专）</p>
</div>
<div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center z-10 shadow-lg">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="md:w-1/2 md:pl-12 mt-6 md:mt-0">
<div class="bg-light rounded-xl p-6 shadow-md">
<h4 class="font-semibold text-lg mb-3">专业成绩</h4>
<p class="text-gray-600">60到90分，系统学习软件开发核心课程，注重理论与实践结合，多次在课程项目中担任技术负责人。</p>
<h4 class="font-semibold text-lg mt-6 mb-3">主修课程</h4>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">JAVA</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">JavaScript</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">My SQL</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">C语言</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Python</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">微信小程序开发</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">HTML5</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Node.js</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">计算机网络技术基础</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 项目经验 -->
<section id="projects" class="section-padding bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">项目经验</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
<div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
<div class="bg-primary p-6 text-white">
<h3 class="text-xl font-bold">飞机大战射击小游戏开发</h3>
<p class="mt-2 opacity-90">2025 - 05 ~ 2025 - 05 | 课堂开发项目</p>
</div>
<div class="p-6">
<h4 class="font-semibold text-lg mb-4">项目概述</h4>
<p class="text-gray-600 mb-6">基于Web技术开发的2D方块射击游戏，玩家操控方块角色躲避敌人并发射子弹攻击，通过击落敌人得分，被敌人撞击则减少生命值，生命值归零游戏结束。实现了动态场景、交互逻辑与视觉特效，提供流畅的射击游戏体验。</p>
<h4 class="font-semibold text-lg mb-4">技术栈</h4>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">HTML5</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">CSS3</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">JavaScript</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">动画帧</span>
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">碰撞检测算法</span>
</div>
<h4 class="font-semibold text-lg mb-3">核心职责与成果</h4>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fa fa-building text-primary mt-1 mr-2"></i>
<span>架构搭建：运用HTML5构建游戏页面结构，结合CSS3实现渐变色背景、角色样式、动画效果及响应式布局，提升视觉表现力。</span>
</li>
<li class="flex items-start">
<i class="fa fa-code text-primary mt-1 mr-2"></i>
<span>逻辑开发：通过JavaScript完成游戏核心逻辑，包括角色移动控制、子弹连发射制、敌人随机生成与移动、碰撞检测算法，保障游戏玩法流畅性。</span>
</li>
<li class="flex items-start">
<i class="fa fa-mouse-pointer text-primary mt-1 mr-2"></i>
<span>交互设计：实现游戏开始/结束界面、计分系统、生命值显示与血条动态变化，优化按钮交互反馈（如黄蓝渐变按钮、光晕特效），增强用户操作体验。</span>
</li>
<li class="flex items-start">
<i class="fa fa-tachometer text-primary mt-1 mr-2"></i>
<span>性能优化：利用requestAnimationFrame实现高效动画循环，合理管理DOM元素创建与删除，降低内存占用，确保游戏运行流畅。</span>
</li>
</ul>
</div>
</div>
<!-- 可扩展更多项目 -->
<div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover hidden lg:block">
<div class="bg-secondary p-6 text-white">
<h3 class="text-xl font-bold">待补充项目</h3>
<p class="mt-2 opacity-90">示例占位 | 可扩展更多项目</p>
</div>
<div class="p-6">
<p class="text-gray-600 text-center py-12">此位置可添加更多项目经验，展示完整技术栈与项目落地能力</p>
</div>
</div>
</div>
</div>
</section>
<!-- 荣誉证书 -->
<section id="certificates" class="section-padding bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">荣誉证书</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 证书1 -->
<div class="bg-light rounded-xl p-6 shadow-md card-hover flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<i class="fa fa-certificate text-2xl text-primary"></i>
</div>
<h3 class="font-bold text-lg mb-2">计算机WPS一级考试</h3>
<p class="text-gray-600 text-sm mb-3">熟练运用Wps office等常用办公软件</p>
<span class="text-xs bg-primary/10 text-primary px-3 py-1 rounded-full">2023年</span>
</div>
<!-- 证书2 -->
<div class="bg-light rounded-xl p-6 shadow-md card-hover flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-secondary/10 flex items-center justify-center mb-4">
<i class="fa fa-shopping-bag text-2xl text-secondary"></i>
</div>
<h3 class="font-bold text-lg mb-2">电子商务师四级考试</h3>
<p class="text-gray-600 text-sm mb-3">掌握电子商务运营与技术基础能力</p>
<span class="text-xs bg-secondary/10 text-secondary px-3 py-1 rounded-full">2022年</span>
</div>
<!-- 证书3 -->
<div class="bg-light rounded-xl p-6 shadow-md card-hover flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mb-4">
<i class="fa fa-trophy text-2xl text-accent"></i>
</div>
<h3 class="font-bold text-lg mb-2">计算机能力挑战赛</h3>
<p class="text-gray-600 text-sm mb-3">程序设计JAVA二等奖</p>
<span class="text-xs bg-accent/10 text-accent px-3 py-1 rounded-full">2024年</span>
</div>
<!-- 证书4 -->
<div class="bg-light rounded-xl p-6 shadow-md card-hover flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<i class="fa fa-book text-2xl text-primary"></i>
</div>
<h3 class="font-bold text-lg mb-2">诵读中国经典诵读竞赛</h3>
<p class="text-gray-600 text-sm mb-3">2023-2024年度校赛优秀奖</p>
<span class="text-xs bg-primary/10 text-primary px-3 py-1 rounded-full">2024年</span>
</div>
<!-- 证书5 -->
<div class="bg-light rounded-xl p-6 shadow-md card-hover flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-secondary/10 flex items-center justify-center mb-4">
<i class="fa fa-pencil text-2xl text-secondary"></i>
</div>
<h3 class="font-bold text-lg mb-2">强国有我征文比赛</h3>
<p class="text-gray-600 text-sm mb-3">作品《盛世华章，技能报国》获优秀奖</p>
<span class="text-xs bg-secondary/10 text-secondary px-3 py-1 rounded-full">2024年</span>
</div>
<!-- 证书6 -->
<div class="bg-light rounded-xl p-6 shadow-md card-hover flex flex-col items-center text-center hidden lg:block">
<div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mb-4">
<i class="fa fa-plus text-2xl text-gray-500"></i>
</div>
<h3 class="font-bold text-lg mb-2">更多荣誉</h3>
<p class="text-gray-600 text-sm mb-3">可在此处添加更多证书与奖项</p>
</div>
</div>
</div>
</section>
<!-- 兴趣爱好 -->
<section class="py-16 bg-gradient-to-br from-primary/5 to-secondary/5">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">兴趣爱好</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6">
<div class="bg-white rounded-xl p-6 shadow-md flex flex-col items-center text-center card-hover">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<i class="fa fa-mountain text-2xl text-primary"></i>
</div>
<h3 class="font-medium">爬山</h3>
</div>
<div class="bg-white rounded-xl p-6 shadow-md flex flex-col items-center text-center card-hover">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<i class="fa fa-plane text-2xl text-primary"></i>
</div>
<h3 class="font-medium">旅游</h3>
</div>
<div class="bg-white rounded-xl p-6 shadow-md flex flex-col items-center text-center card-hover">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<i class="fa fa-running text-2xl text-primary"></i>
</div>
<h3 class="font-medium">跑步</h3>
</div>
<div class="bg-white rounded-xl p-6 shadow-md flex flex-col items-center text-center card-hover">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<i class="fa fa-futbol-o text-2xl text-primary"></i>
</div>
<h3 class="font-medium">打羽毛球</h3>
</div>
<div class="bg-white rounded-xl p-6 shadow-md flex flex-col items-center text-center card-hover hidden lg:block">
<div class="w-14 h-14 rounded-full bg-gray-200 flex items-center justify-center mb-4">
<i class="fa fa-plus text-2xl text-gray-500"></i>
</div>
<h3 class="font-medium">更多爱好</h3>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<h3 class="text-xl font-bold mb-2">周刚孺</h3>
<p class="text-gray-400">前端开发工程师 | 应届生</p>
</div>
<div class="flex space-x-6 mb-6 md:mb-0">
<a href="tel:13823817384" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-phone text-xl"></i>
</a>
<a href="mailto:zzxm2023@qq.com" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-envelope text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-github text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-linkedin text-xl"></i>
</a>
</div>
<div class="text-gray-400 text-sm">
<p>© 2025 周刚孺. 保留所有权利.</p>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
<p>此简历采用现代Web技术开发，展示前端开发能力与个人风采</p>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 z-50">
<i class="fa fa-arrow-up"></i>
</button>
<!-- JavaScript -->
<script>
// 移动端菜单切换
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// 导航栏滚动效果
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('shadow-md');
navbar.classList.remove('shadow-sm');
} else {
navbar.classList.remove('shadow-md');
navbar.classList.add('shadow-sm');
}
// 返回顶部按钮显示/隐藏
const backToTop = document.getElementById('back-to-top');
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', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// 关闭移动端菜单
mobileMenu.classList.add('hidden');
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// 技能雷达图
window.addEventListener('load', () => {
const ctx = document.getElementById('skillsChart').getContext('2d');
const skillsChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['HTML/CSS', 'JavaScript', 'Java', 'PS/AI', '沟通能力', '系统维护'],
datasets: [{
label: '技能掌握程度',
data: [85, 75, 70, 75, 50, 80],
backgroundColor: 'rgba(79, 70, 229, 0.2)',
borderColor: 'rgba(79, 70, 229, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(79, 70, 229, 1)',
pointRadius: 4
}]
},
options: {
scales: {
r: {
angleLines: {
display: true
},
suggestedMin: 0,
suggestedMax: 100
}
},
plugins: {
legend: {
display: false
}
}
}
});
});
</script>
</body>
</html>
index.html
assets
index.html