当前位置：首页 > news >正文

HTML 极简个人介绍卡片（侧重语义化标签和响应式布局）

news 2025/7/18 6:24:17

极简个人介绍：

采用语义化 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>

查看全文

http://www.lryc.cn/news/590962.html