<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio 3D - 周刚孺作品集</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/three@0.160.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
neon: '#00F5FF', // 霓虹青色主色调
purple: '#9D4EDD', // 紫色辅助色
pink: '#FF6B9B', // 粉色强调色
dark: '#0A0A10', // 深色背景
darker: '#05050A', // 更深色背景
},
fontFamily: {
orbitron: ['Orbitron', 'sans-serif'],
inter: ['Inter', 'sans-serif'],
},
animation: {
'pulse-neon': 'pulseNeon 2s infinite alternate',
'float': 'float 6s ease-in-out infinite',
},
keyframes: {
pulseNeon: {
'0%': { boxShadow: '0 0 5px rgba(0, 245, 255, 0.7)' },
'100%': { boxShadow: '0 0 20px rgba(0, 245, 255, 0.9), 0 0 30px rgba(0, 245, 255, 0.7)' }
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-15px)' }
}
}
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-glow {
text-shadow: 0 0 8px rgba(0, 245, 255, 0.8);
}
.bg-grid {
background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 30px 30px;
}
.perspective-1000 {
perspective: 1000px;
}
.preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
}
</style>
</head>
<body class="font-inter bg-darker text-white overflow-x-hidden">
<!-- 粒子背景容器 -->
<div id="particles-container" class="fixed inset-0 z-0"></div>
<!-- 导航栏 -->
<nav id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-darker/80 backdrop-blur-md border-b border-neon/20">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<a href="#" class="text-2xl font-orbitron font-bold text-neon text-glow">Portfolio 3D</a>
<!-- 桌面导航 -->
<div class="hidden md:flex items-center space-x-8">
<a href="#about" class="nav-link text-gray-400 hover:text-neon transition-colors duration-300">关于我</a>
<a href="#projects" class="nav-link text-gray-400 hover:text-neon transition-colors duration-300">项目</a>
<a href="#skills" class="nav-link text-gray-400 hover:text-neon transition-colors duration-300">技能</a>
<a href="#contact" class="nav-link text-gray-400 hover:text-neon transition-colors duration-300">联系</a>
</div>
<!-- 移动端菜单按钮 -->
<div class="md:hidden">
<button id="menu-toggle" class="text-gray-400 focus:outline-none">
<i class="fa fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<!-- 移动端导航菜单 -->
<div id="mobile-menu" class="hidden md:hidden bg-darker border-t border-neon/10">
<div class="container mx-auto px-4 py-3 space-y-3">
<a href="#about" class="block py-2 text-gray-400 hover:text-neon">关于我</a>
<a href="#projects" class="block py-2 text-gray-400 hover:text-neon">项目</a>
<a href="#skills" class="block py-2 text-gray-400 hover:text-neon">技能</a>
<a href="#contact" class="block py-2 text-gray-400 hover:text-neon">联系</a>
</div>
</div>
</nav>
<!-- 英雄区域 - 3D标题 -->
<header class="relative section-height flex items-center justify-center p-8">
<div class="container mx-auto">
<div class="text-center">
<h1 class="text-[clamp(2.5rem,10vw,5rem)] font-orbitron font-bold mb-4 preserve-3d">
<span class="block relative inline-block">周刚孺</span>
<span class="block relative inline-block text-pink">前端开发者</span>
</h1>
<p class="text-[clamp(1rem,3vw,1.5rem)] text-gray-300 max-w-2xl mx-auto mb-8">
专注于创造沉浸式交互体验的前端开发者，擅长将3D技术与Web设计结合，打造视觉震撼的数字作品
</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#projects" class="px-8 py-3 bg-neon/20 text-neon border border-neon/50 rounded-full shadow-neon/20 hover:bg-neon/30 hover:shadow-neon/40 transition-all duration-500 flex items-center animate-pulse-neon">
<i class="fa fa-code mr-2"></i> 查看项目
</a>
<a href="#contact" class="px-8 py-3 bg-transparent text-neon border border-neon/50 rounded-full hover:bg-neon/10 transition-all duration-500 flex items-center">
<i class="fa fa-envelope mr-2"></i> 联系我
</a>
</div>
</div>
</div>
<!-- 3D装饰元素 -->
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 w-16 h-16 md:w-24 md:h-24 animate-float">
<div class="w-full h-full rounded-full border border-neon/30 animate-pulse-neon"></div>
</div>
</header>
<!-- 关于我 - 视差滚动 -->
<section id="about" class="section-height relative bg-grid bg-darker">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col lg:flex-row items-center h-full">
<div class="lg:w-1/2 mb-12 lg:mb-0">
<h2 class="text-[clamp(1.8rem,5vw,3rem)] font-orbitron font-bold mb-6 text-glow">关于<span class="text-pink">我</span></h2>
<p class="text-gray-300 text-lg mb-6 leading-relaxed">
20岁的前端开发应届生，毕业于广州东华职业学院软件技术专业，专注于Web前端开发与交互设计。擅长使用HTML5、CSS3和JavaScript构建视觉震撼的网页应用，对3D技术与WebGL有浓厚兴趣并具备实战经验。
</p>
<p class="text-gray-300 text-lg mb-8 leading-relaxed">
除技术开发外，我还熟练掌握PS、AI等设计工具，并能本地部署AI模型如DeepSeek，实现智能设计与图像生成。期待在广州的技术团队中发挥创造力，打造令人惊叹的用户体验。
</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-neon/20 flex items-center justify-center mr-4 flex-shrink-0">
<i class="fa fa-phone text-neon"></i>
</div>
<div>
<h4 class="font-semibold text-neon">电话</h4>
<p class="text-gray-400">13823817384</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-neon/20 flex items-center justify-center mr-4 flex-shrink-0">
<i class="fa fa-envelope text-neon"></i>
</div>
<div>
<h4 class="font-semibold text-neon">邮箱</h4>
<p class="text-gray-400">zzxm2023@qq.com</p>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-neon/20 flex items-center justify-center mr-4 flex-shrink-0">
<i class="fa fa-map-marker text-neon"></i>
</div>
<div>
<h4 class="font-semibold text-neon">意向城市</h4>
<p class="text-gray-400">广州</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2 flex justify-center">
<div class="relative w-64 h-64 lg:w-80 lg:h-80 perspective-1000">
<div class="w-full h-full preserve-3d animate-float">
<div class="absolute inset-0 w-full h-full rounded-full border-4 border-neon/30 backface-hidden"></div>
<div class="absolute inset-0 w-full h-full rounded-full bg-neon/5 backface-hidden"></div>
<div class="absolute inset-0 w-full h-full rounded-full bg-gradient-to-r from-purple/20 to-pink/20 backface-hidden"></div>
<div class="absolute inset-4 w-full h-full rounded-full bg-darker border-2 border-neon/20 backface-hidden"></div>
<div class="relative w-full h-full rounded-full overflow-hidden backface-hidden">
<img src="https://picsum.photos/seed/zhou/600/600" alt="周刚孺" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 视差背景元素 -->
<div class="absolute top-1/4 right-10 w-32 h-32 md:w-48 md:h-48 bg-pink/10 rounded-full filter blur-3xl"></div>
<div class="absolute bottom-1/3 left-10 w-24 h-24 md:w-32 md:h-32 bg-neon/10 rounded-full filter blur-3xl"></div>
</section>
<!-- 项目展示 - 3D旋转卡片 -->
<section id="projects" class="section-height relative bg-darker">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,5vw,3rem)] font-orbitron font-bold mb-4 text-glow">我的<span class="text-pink">项目</span></h2>
<p class="text-gray-300 max-w-2xl mx-auto">探索我运用前沿技术打造的交互式网页项目，每一个作品都融合了视觉设计与用户体验</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 项目卡片1 -->
<div class="project-card group">
<div class="w-full h-80 perspective-1000">
<div class="w-full h-full transform transition-all duration-700 group-hover:rotate-y-180 preserve-3d">
<div class="w-full h-full bg-dark rounded-xl overflow-hidden border border-neon/20 backface-hidden">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/seed/game/600/400" alt="飞机大战游戏" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-neon">飞机大战射击游戏</h3>
<p class="text-gray-400 mb-4">基于HTML5开发的2D射击游戏，实现角色操控、子弹发射与碰撞检测等核心玩法。</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-neon/10 text-neon text-xs rounded-full">HTML5</span>
<span class="px-3 py-1 bg-neon/10 text-neon text-xs rounded-full">JavaScript</span>
<span class="px-3 py-1 bg-neon/10 text-neon text-xs rounded-full">动画帧</span>
</div>
</div>
</div>
<div class="w-full h-full bg-dark rounded-xl overflow-hidden border border-neon/20 backface-hidden transform rotate-y-180">
<div class="p-6 h-full flex flex-col">
<h3 class="text-xl font-bold mb-2 text-neon">项目详情</h3>
<p class="text-gray-400 mb-6 flex-grow">通过requestAnimationFrame实现流畅动画，使用碰撞检测算法优化游戏体验，设计渐变按钮与动态血条提升交互感。</p>
<a href="#" class="text-neon inline-flex items-center text-sm hover:text-glow">
<span>查看项目</span>
<i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 项目卡片2 -->
<div class="project-card group">
<div class="w-full h-80 perspective-1000">
<div class="w-full h-full transform transition-all duration-700 group-hover:rotate-y-180 preserve-3d">
<div class="w-full h-full bg-dark rounded-xl overflow-hidden border border-neon/20 backface-hidden">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/seed/portfolio/600/400" alt="个人作品集" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-neon">个人作品集网站</h3>
<p class="text-gray-400 mb-4">响应式设计的个人作品展示平台，包含3D旋转卡片与视差滚动效果，突出技术能力。</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-neon/10 text-neon text-xs rounded-full">HTML5</span>
<span class="px-3 py-1 bg-neon/10 text-neon text-xs rounded-full">CSS3</span>
<span class="px-3 py-1 bg-neon/10 text-neon text-xs rounded-full">JavaScript</span>
</div>
</div>
</div>
<div class="w-full h-full bg-dark rounded-xl overflow-hidden border border-neon/20 backface-hidden transform rotate-y-180">
<div class="p-6 h-full flex flex-col">
<h3 class="text-xl font-bold mb-2 text-neon">项目详情</h3>
<p class="text-gray-400 mb-6 flex-grow">采用Tailwind CSS构建响应式布局，集成GSAP动画库实现元素入场效果，使用Chart.js可视化技能数据。</p>
<a href="#" class="text-neon inline-flex items-center text-sm hover:text-glow">
<span>查看项目</span>
<i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 项目卡片3 -->
<div class="project-card group">
<div class="w-full h-80 perspective-1000">
<div class="w-full h-full transform transition-all duration-700 group-hover:rotate-y-180 preserve-3d">
<div class="w-full h-full bg-dark rounded-xl overflow-hidden border border-neon/20 backface-hidden">
<div class="h-48 overflow-hidden">
<img src="https://picsum.photos/seed/ecommerce/600/400" alt="电商产品页面" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-neon">电商产品展示页</h3>
<p class="text-gray-400 mb-4">模拟电子产品商城的产品详情页面，包含360度旋转视图与动态价格动画。</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-neon/10 text-neon text-xs rounded-full">HTML5</span>
<span class="px-3 py-1 bg-neon/10 text-neon text-xs rounded-full">CSS3</span>
<span class="px-3 py-1 bg-neon/10 text-neon text-xs rounded-full">JavaScript</span>
</div>
</div>
</div>
<div class="w-full h-full bg-dark rounded-xl overflow-hidden border border-neon/20 backface-hidden transform rotate-y-180">
<div class="p-6 h-full flex flex-col">
<h3 class="text-xl font-bold mb-2 text-neon">项目详情</h3>
<p class="text-gray-400 mb-6 flex-grow">实现产品图片360度旋转交互，价格变动时的数字动画，以及加入购物车的微交互效果，优化移动端体验。</p>
<a href="#" class="text-neon inline-flex items-center text-sm hover:text-glow">
<span>查看项目</span>
<i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-flex items-center text-neon border border-neon/50 px-6 py-3 rounded-full hover:bg-neon/10 transition-all duration-300">
<span>查看更多项目</span>
<i class="fa fa-long-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- 背景装饰 -->
<div class="absolute top-20 left-1/4 w-40 h-40 bg-purple/10 rounded-full filter blur-3xl"></div>
<div class="absolute bottom-20 right-1/4 w-32 h-32 bg-neon/10 rounded-full filter blur-3xl"></div>
</section>
<!-- 技能展示 - 3D环形图表 -->
<section id="skills" class="section-height relative bg-grid bg-darker">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,5vw,3rem)] font-orbitron font-bold mb-4 text-glow">我的<span class="text-pink">技能</span></h2>
<p class="text-gray-300 max-w-2xl mx-auto">从前端开发到设计工具，多维度展示技术能力与工具掌握程度</p>
</div>
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-12 lg:mb-0">
<h3 class="text-2xl font-semibold mb-6 text-neon">技术能力概览</h3>
<div class="space-y-6">
<div>
<div class="flex justify-between mb-2">
<span class="font-medium text-neon">前端开发</span>
<span class="text-neon">75%</span>
</div>
<div class="h-2 bg-neon/20 rounded-full overflow-hidden">
<div class="h-full bg-neon rounded-full" style="width: 75%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium text-neon">JAVA开发</span>
<span class="text-neon">70%</span>
</div>
<div class="h-2 bg-neon/20 rounded-full overflow-hidden">
<div class="h-full bg-purple rounded-full" style="width: 70%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium text-neon">设计工具</span>
<span class="text-neon">75%</span>
</div>
<div class="h-2 bg-neon/20 rounded-full overflow-hidden">
<div class="h-full bg-pink rounded-full" style="width: 75%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium text-neon">系统维护</span>
<span class="text-neon">80%</span>
</div>
<div class="h-2 bg-neon/20 rounded-full overflow-hidden">
<div class="h-full bg-neon/80 rounded-full" style="width: 80%"></div>
</div>
</div>
<div>
<h4 class="font-semibold text-neon mb-3">掌握工具</h4>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1.5 bg-neon/10 text-neon rounded-full text-sm">HTML5</span>
<span class="px-3 py-1.5 bg-neon/10 text-neon rounded-full text-sm">CSS3</span>
<span class="px-3 py-1.5 bg-neon/10 text-neon rounded-full text-sm">JavaScript</span>
<span class="px-3 py-1.5 bg-neon/10 text-neon rounded-full text-sm">Java</span>
<span class="px-3 py-1.5 bg-neon/10 text-neon rounded-full text-sm">MySQL</span>
<span class="px-3 py-1.5 bg-neon/10 text-neon rounded-full text-sm">Photoshop</span>
<span class="px-3 py-1.5 bg-neon/10 text-neon rounded-full text-sm">DeepSeek</span>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2 flex justify-center">
<div class="relative w-64 h-64 lg:w-80 lg:h-80">
<!-- 3D环形图表容器 -->
<div id="skills-chart" class="w-full h-full"></div>
<!-- 装饰元素 -->
<div class="absolute -inset-4 bg-gradient-to-r from-neon/20 to-pink/20 rounded-full blur-2xl animate-pulse-neon"></div>
<div class="absolute -inset-2 border border-neon/30 rounded-full"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系我 - 霓虹表单 -->
<section id="contact" class="section-height relative bg-darker">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,5vw,3rem)] font-orbitron font-bold mb-4 text-glow">联系<span class="text-pink">我</span></h2>
<p class="text-gray-300 max-w-2xl mx-auto">期待与您分享我的项目经验，或探讨潜在的合作机会</p>
</div>
<div class="max-w-3xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<div class="bg-dark/50 border border-neon/20 rounded-xl p-6 hover:border-neon/40 transition-all duration-300">
<h3 class="text-xl font-bold mb-4 text-neon flex items-center">
<i class="fa fa-map-marker mr-2"></i> 位置
</h3>
<p class="text-gray-400">目前位于广州，可接受本地全职职位</p>
</div>
<div class="bg-dark/50 border border-neon/20 rounded-xl p-6 hover:border-neon/40 transition-all duration-300">
<h3 class="text-xl font-bold mb-4 text-neon flex items-center">
<i class="fa fa-envelope mr-2"></i> 邮箱
</h3>
<p class="text-gray-400">zzxm2023@qq.com</p>
</div>
<div class="bg-dark/50 border border-neon/20 rounded-xl p-6 hover:border-neon/40 transition-all duration-300">
<h3 class="text-xl font-bold mb-4 text-neon flex items-center">
<i class="fa fa-phone mr-2"></i> 电话
</h3>
<p class="text-gray-400">13823817384</p>
</div>
<div class="bg-dark/50 border border-neon/20 rounded-xl p-6 hover:border-neon/40 transition-all duration-300">
<h3 class="text-xl font-bold mb-4 text-neon flex items-center">
<i class="fa fa-clock-o mr-2"></i> 状态
</h3>
<p class="text-gray-400">应届毕业生，随时可到岗</p>
</div>
</div>
<div class="bg-dark/50 border border-neon/20 rounded-xl p-8 hover:border-neon/40 transition-all duration-300">
<h3 class="text-xl font-bold mb-6 text-neon">发送消息</h3>
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label for="name" class="block text-gray-400 mb-2 text-sm">姓名</label>
<input type="text" id="name" class="w-full bg-darker border border-neon/30 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon transition-colors">
</div>
<div>
<label for="email" class="block text-gray-400 mb-2 text-sm">邮箱</label>
<input type="email" id="email" class="w-full bg-darker border border-neon/30 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon transition-colors">
</div>
</div>
<div class="mb-6">
<label for="subject" class="block text-gray-400 mb-2 text-sm">主题</label>
<input type="text" id="subject" class="w-full bg-darker border border-neon/30 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon transition-colors">
</div>
<div class="mb-6">
<label for="message" class="block text-gray-400 mb-2 text-sm">消息</label>
<textarea id="message" rows="4" class="w-full bg-darker border border-neon/30 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon transition-colors"></textarea>
</div>
<button type="submit" class="w-full bg-neon/20 text-neon border border-neon/50 rounded-lg px-6 py-3 hover:bg-neon/30 transition-all duration-300 animate-pulse-neon">
发送消息
</button>
</form>
</div>
</div>
</div>
<!-- 背景装饰 -->
<div class="absolute top-20 right-10 w-40 h-40 bg-pink/10 rounded-full filter blur-3xl"></div>
<div class="absolute bottom-20 left-10 w-32 h-32 bg-neon/10 rounded-full filter blur-3xl"></div>
</section>
<!-- 页脚 -->
<footer class="bg-darker border-t border-neon/10 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">
<a href="#" class="text-2xl font-orbitron font-bold text-neon text-glow">Portfolio 3D</a>
<p class="text-gray-400 mt-2">周刚孺 - 前端开发者作品集</p>
</div>
<div class="flex space-x-6 mb-6 md:mb-0">
<a href="tel:13823817384" class="text-gray-400 hover:text-neon transition-colors duration-300 text-xl">
<i class="fa fa-phone"></i>
</a>
<a href="mailto:zzxm2023@qq.com" class="text-gray-400 hover:text-neon transition-colors duration-300 text-xl">
<i class="fa fa-envelope"></i>
</a>
<a href="#" class="text-gray-400 hover:text-neon transition-colors duration-300 text-xl">
<i class="fa fa-github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-neon transition-colors duration-300 text-xl">
<i class="fa fa-linkedin"></i>
</a>
</div>
<div class="text-gray-500 text-sm">
<p>© 2025 周刚孺. 保留所有权利.</p>
</div>
</div>
<div class="border-t border-neon/10 mt-8 pt-8 text-center text-gray-500 text-sm">
<p>本作品集采用HTML5、Three.js和GSAP开发，展示前沿Web技术应用</p>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-neon/20 text-neon border border-neon/50 shadow-neon/20 flex items-center justify-center opacity-0 invisible transition-all duration-300 z-50 hover:bg-neon/30">
<i class="fa fa-arrow-up"></i>
</button>
<!-- JavaScript -->
<script>
// 粒子背景
const particlesContainer = document.getElementById('particles-container');
let particlesGeometry, particlesMaterial, particlesMesh;
const initParticles = () => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
particlesContainer.appendChild(renderer.domElement);
// 创建粒子
particlesGeometry = new THREE.BufferGeometry();
const count = 1000;
const positions = new Float32Array(count * 3);
for (let i = 0; i < count * 3; i++) {
positions[i] = (Math.random() - 0.5) * 10;
}
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
color: 0x00F5FF,
transparent: true,
opacity: 0.8,
sizeAttenuation: true
});
particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particlesMesh);
// 动画循环
const animate = () => {
requestAnimationFrame(animate);
particlesMesh.rotation.x += 0.0005;
particlesMesh.rotation.y += 0.0005;
renderer.render(scene, camera);
};
animate();
// 窗口大小调整
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
};
// 3D技能图表
const initSkillsChart = () => {
const container = document.getElementById('skills-chart');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 100);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
// 技能数据
const skills = [
{ name: 'HTML/CSS', value: 85, color: 0x00F5FF },
{ name: 'JavaScript', value: 75, color: 0x00F5FF },
{ name: 'Java', value: 70, color: 0x9D4EDD },
{ name: 'PS/AI', value: 75, color: 0xFF6B9B },
{ name: '沟通能力', value: 50, color: 0x00F5FF },
{ name: '系统维护', value: 80, color: 0x00F5FF }
];
// 创建环形图表
const createRing = (angle, color) => {
const geometry = new THREE.RingGeometry(1, 1.2, 32);
const material = new THREE.MeshBasicMaterial({
color: color,
side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
mesh.rotation.z = -Math.PI / 2;
mesh.rotation.x = Math.PI / 2;
mesh.rotation.y = angle;
return mesh;
};
// 添加环形
skills.forEach((skill, index) => {
const angle = (index / skills.length) * Math.PI * 2;
const ringAngle = (skill.value / 100) * Math.PI * 2;
const ring = createRing(angle, skill.color);
ring.rotation.z = -ringAngle / 2;
scene.add(ring);
});
// 动画循环
const animate = () => {
requestAnimationFrame(animate);
scene.rotation.y += 0.001;
renderer.render(scene, camera);
};
animate();
// 窗口大小调整
window.addEventListener('resize', () => {
renderer.setSize(container.clientWidth, container.clientHeight);
});
};
// 移动端菜单切换
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('backdrop-blur-md');
navbar.classList.remove('backdrop-blur-sm');
} else {
navbar.classList.remove('backdrop-blur-md');
navbar.classList.add('backdrop-blur-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', () => {
initParticles();
initSkillsChart();
// 元素滚动动画
const animateOnScroll = () => {
const elements = document.querySelectorAll('.project-card, .bg-dark\\/50');
elements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const elementVisible = 150;
if (elementTop < window.innerHeight - elementVisible) {
element.classList.add('animate-fade-in');
}
});
};
window.addEventListener('scroll', animateOnScroll);
animateOnScroll();
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html