极简个人介绍：
- 采用语义化 HTML 标签（header、section、footer 等）
- 实现滚动渐入动画，增强页面交互感
- 响应式布局适配各种设备
- 技能展示区域使用卡片式设计，突出视觉层次
<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<style>
@layer utilities {
.text-balance {
text-wrap: balance;
}
.section-fade {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease-out;
}
.section-visible {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 头部区域 -->
<header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
<div class="container mx-auto px-4 py-20 md:py-32">
<div class="max-w-3xl mx-auto text-center">
<img src="https://picsum.photos/id/64/200/200" alt="个人头像" class="w-32 h-32 rounded-full mx-auto border-4 border-white/30 mb-6 object-cover">
<h1 class="text-4xl md:text-5xl font-bold mb-4">小王</h1>
<p class="text-xl md:text-2xl text-blue-100 mb-8">前端开发者 | 设计爱好者</p>
<div class="flex justify-center gap-4">
<a href="#about" class="bg-white text-blue-700 px-6 py-3 rounded-full font-medium hover:bg-blue-50 transition-colors">
了解我 <i class="fa-solid fa-arrow-down ml-2"></i>
</a>
</div>
</div>
</div>
</header>
<!-- 主要内容 -->
<main class="container mx-auto px-4 py-16">
<!-- 关于我 -->
<section id="about" class="max-w-3xl mx-auto mb-20 section-fade">
<h2 class="text-3xl font-bold mb-6 text-gray-800 border-l-4 border-blue-600 pl-4">关于我</h2>
<div class="prose prose-lg max-w-none text-gray-700">
<p class="text-balance">
从事前端开发3年，专注于创建流畅的用户体验和响应式界面。擅长将复杂的需求转化为简洁的代码，
热衷于学习新技术并应用到实际项目中。
</p>
<p class="text-balance">
除了编码，我还喜欢摄影和UI设计，这些爱好帮助我从不同角度思考产品体验。
</p>
</div>
</section>
<!-- 技能 -->
<section class="max-w-3xl mx-auto mb-20 section-fade">
<h2 class="text-3xl font-bold mb-8 text-gray-800 border-l-4 border-blue-600 pl-4">技能栈</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<i class="fa-brands fa-html5 text-orange-500 text-3xl mb-3"></i>
<h3 class="font-semibold text-gray-800">HTML5</h3>
<p class="text-sm text-gray-600 mt-1">语义化结构</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<i class="fa-brands fa-css3-alt text-blue-500 text-3xl mb-3"></i>
<h3 class="font-semibold text-gray-800">CSS3</h3>
<p class="text-sm text-gray-600 mt-1">Flex/Grid布局</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<i class="fa-brands fa-js text-yellow-500 text-3xl mb-3"></i>
<h3 class="font-semibold text-gray-800">JavaScript</h3>
<p class="text-sm text-gray-600 mt-1">ES6+ 特性</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<i class="fa-brands fa-react text-blue-400 text-3xl mb-3"></i>
<h3 class="font-semibold text-gray-800">React</h3>
<p class="text-sm text-gray-600 mt-1">组件化开发</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<i class="fa-brands fa-figma text-purple-500 text-3xl mb-3"></i>
<h3 class="font-semibold text-gray-800">Figma</h3>
<p class="text-sm text-gray-600 mt-1">UI/UX 设计</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<i class="fa-brands fa-git text-red-500 text-3xl mb-3"></i>
<h3 class="font-semibold text-gray-800">Git</h3>
<p class="text-sm text-gray-600 mt-1">版本控制</p>
</div>
</div>
</section>
<!-- 近期动态 -->
<section class="max-w-3xl mx-auto section-fade">
<h2 class="text-3xl font-bold mb-8 text-gray-800 border-l-4 border-blue-600 pl-4">近期动态</h2>
<div class="space-y-6">
<div class="bg-white p-6 rounded-xl shadow-sm">
<span class="inline-block px-3 py-1 bg-green-100 text-green-800 text-xs rounded-full mb-3">2024.10</span>
<h3 class="font-semibold text-xl text-gray-800 mb-2">完成个人博客重构</h3>
<p class="text-gray-600">使用Next.js重写了个人博客，优化了加载速度和SEO表现</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm">
<span class="inline-block px-3 py-1 bg-green-100 text-green-800 text-xs rounded-full mb-3">2025.02</span>
<h3 class="font-semibold text-xl text-gray-800 mb-2">参与开源项目贡献</h3>
<p class="text-gray-600">为一个UI组件库提交了3个PR，修复了响应式适配问题</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm">
<span class="inline-block px-3 py-1 bg-green-100 text-green-800 text-xs rounded-full mb-3">2025.06</span>
<h3 class="font-semibold text-xl text-gray-800 mb-2">学习TypeScript</h3>
<p class="text-gray-600">完成TypeScript进阶课程，开始在项目中实践类型系统</p>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center mb-8">
<h3 class="text-xl font-bold mb-4 md:mb-0">小王的个人主页</h3>
<div class="flex gap-4">
<a href="#" class="text-gray-300 hover:text-white transition-colors"><i class="fa-brands fa-github text-xl"></i></a>
<a href="#" class="text-gray-300 hover:text-white transition-colors"><i class="fa-brands fa-linkedin text-xl"></i></a>
<a href="#" class="text-gray-300 hover:text-white transition-colors"><i class="fa-brands fa-codepen text-xl"></i></a>
</div>
</div>
<div class="text-center text-gray-400 text-sm">
<p>© 2025 小王. 用HTML、CSS和JavaScript构建</p>
</div>
</div>
</div>
</footer>
<script>
// 滚动显示动画
document.addEventListener('DOMContentLoaded', () => {
const sections = document.querySelectorAll('.section-fade');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('section-visible');
}
});
}, { threshold: 0.1 });
sections.forEach(section => {
observer.observe(section);
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
