<!DOCTYPE html>
<html lang="zh-CN">
<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/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script src="./index.js"></script>
</head>
<body>
<!-- 动态背景层 -->
<div id="particles-js"></div>
<div class="grid-overlay"></div>
<div class="gradient-overlay"></div>
<!-- 几何装饰 -->
<div class="geometric-shape shape-1"></div>
<div class="geometric-shape shape-2"></div>
<div class="geometric-shape shape-3"></div>
<!-- 导航栏 -->
<nav>
<div class="logo">HEIU<span>主页</span></div>
<div class="nav-links">
<a href="#home">首页</a>
<a href="#about">关于</a>
<!--<a href="#projects">项目</a> -->
<a href="#contact">联系</a>
<!--<a href="https://www.heiu.top" target="_blank">博客</a>-->
</div>
</nav>
<!-- 头部区域 -->
<section class="hero" id="home">
<div class="hero-text">
<h1>你好，我是<span> 嘿 哟</span></h1>
<p>打工人 & 天选打工人。</p>
<!-- <a href="#projects" class="btn">查看我的项目</a> -->
<div class="tech-stats">
<div class="stat">
<div class="stat-value">0</div>
<div class="stat-label">年经验</div>
</div>
<div class="stat">
<div class="stat-value">0</div>
<div class="stat-label">项目</div>
</div>
<div class="stat">
<div class="stat-value">24小时</div>
<div class="stat-label">在线</div>
</div>
</div>
</div>
<div class="hero-image">
<div class="hexagon-container">
<div class="hexagon">
<img src="https://p.qlogo.cn/gh/750138502/750138502/100/" alt="大头照">
</div>
</div>
</div>
</section>
<!-- 关于我部分 -->
<section class="container" id="about">
<div class="section-title">
<h2>关于我</h2>
</div>
<div class="about-content">
<div class="about-text">
<h3>打工人</h3>
<p>没有困难的工作，只有勇敢的打工人！</p>
<p>奶茶好喝吗？好喝就对了！奶茶是奖励给打工人心灵慰籍的一剂良药！早安，打工人！</p>
<p>喜欢打工人的一句话：打工赚不了几个钱，但是多打几份工可以让你没时间花钱。</p>
<h3>铭牌</h3>
<div class="skills">
<div class="skill">非酋</div>
<div class="skill">想中大奖</div>
<div class="skill">步行三公里</div>
<div class="skill">天天累</div>
<div class="skill">打工魂</div>
<div class="skill">幻想大师</div>
<div class="skill">白日梦</div>
<div class="skill">躺平</div>
<div class="skill">没苦硬吃选手</div>
</div>
</div>
</div>
</section>
<!-- 项目展示 -->
<!--<section class="container" id="projects">
<div class="section-title">
<h2>我的项目</h2>
</div>
<div class="projects">
<div class="project-card">
<div class="project-img">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="项目图片">
</div>
<div class="project-info">
<h3>智能数据仪表盘</h3>
<p>一个实时数据可视化平台，使用React和D3.js构建，提供复杂数据的直观展示和交互分析功能。</p>
<div class="project-tags">
<div class="project-tag">React</div>
<div class="project-tag">D3.js</div>
<div class="project-tag">Redux</div>
</div>
</div>
</div>
<!--<div class="project-card">
<div class="project-img">
<img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="项目图片">
</div>
<div class="project-info">
<h3>电子商务平台</h3>
<p>全栈电商解决方案，包含用户认证、商品管理、支付集成等功能，前端使用Vue.js，后端使用Node.js。</p>
<div class="project-tags">
<div class="project-tag">Vue.js</div>
<div class="project-tag">Node.js</div>
<div class="project-tag">MongoDB</div>
</div>
</div>
</div>
<div class="project-card">
<div class="project-img">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="项目图片">
</div>
<div class="project-info">
<h3>任务管理应用</h3>
<p>一个简约高效的任务管理工具，具有看板视图、日历集成和团队协作功能，使用React和Firebase构建。</p>
<div class="project-tags">
<div class="project-tag">React</div>
<div class="project-tag">Firebase</div>
<div class="project-tag">Material UI</div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系方式 -->
<section id="contact">
<div class="contact">
<div class="section-title">
<h2>联系我</h2>
</div>
<p>球球了，不要联系我</p>
<div class="social-links">
<!--<a href="#" class="social-link">
<i class="fab fa-github"></i>
</a>-->
<!--<a href="#" class="social-link">
<i class="fab fa-linkedin-in"></i>
</a>-->
<a href="https://github.com/xiaoheiyo" class="social-link">
<i class="fab fa-github"></i>
</a>
<a href="3137704603" class="social-link">
<i class="fab fa-qq"></i>
</a>
<a href="mailto:[email protected]" class="social-link">
<i class="fas fa-envelope"></i>
</a>
</div>
<div class="copyright"> © 2025 Alex Chen. 保留所有权利 | 嘿哟 </div>
</div>
</section>
<!-- 粒子背景库 -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</body>
</html>
index.html
style.css
index.js
index.html