|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>我的编程世界 | Coding Space</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@300;400;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
|
|
|
:root { |
|
|
--primary-color: #00d2ff; |
|
|
--secondary-color: #3a7bd5; |
|
|
--bg-dark: #0f172a; |
|
|
--card-bg: #1e293b; |
|
|
--text-main: #f8fafc; |
|
|
--text-dim: #94a3b8; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, sans-serif; |
|
|
background-color: var(--bg-dark); |
|
|
color: var(--text-main); |
|
|
line-height: 1.6; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
nav { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 1.5rem 10%; |
|
|
background: rgba(15, 23, 42, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
position: fixed; |
|
|
width: 100%; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
font-family: 'Fira Code', monospace; |
|
|
font-weight: bold; |
|
|
font-size: 1.5rem; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.nav-links { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.nav-links li { margin-left: 2rem; } |
|
|
.nav-links a { |
|
|
text-decoration: none; |
|
|
color: var(--text-main); |
|
|
transition: color 0.3s; |
|
|
} |
|
|
.nav-links a:hover { color: var(--primary-color); } |
|
|
|
|
|
|
|
|
header { |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
text-align: center; |
|
|
background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%); |
|
|
} |
|
|
|
|
|
header h1 { |
|
|
font-size: 4rem; |
|
|
margin-bottom: 1rem; |
|
|
background: linear-gradient(to right, #00d2ff, #3a7bd5); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.typing-text { |
|
|
font-family: 'Fira Code', monospace; |
|
|
font-size: 1.2rem; |
|
|
color: var(--text-dim); |
|
|
} |
|
|
|
|
|
|
|
|
.section { padding: 5rem 10%; } |
|
|
.section-title { |
|
|
text-align: center; |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 3rem; |
|
|
} |
|
|
|
|
|
.skills-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); |
|
|
gap: 2rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.skill-item { |
|
|
background: var(--card-bg); |
|
|
padding: 1.5rem; |
|
|
border-radius: 12px; |
|
|
border: 1px solid #334155; |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.skill-item:hover { |
|
|
transform: translateY(-10px); |
|
|
border-color: var(--primary-color); |
|
|
} |
|
|
|
|
|
|
|
|
.project-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 2rem; |
|
|
} |
|
|
|
|
|
.project-card { |
|
|
background: var(--card-bg); |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
transition: scale 0.3s; |
|
|
} |
|
|
|
|
|
.project-card:hover { scale: 1.02; } |
|
|
|
|
|
.project-info { padding: 1.5rem; } |
|
|
.project-info h3 { margin-bottom: 0.5rem; color: var(--primary-color); } |
|
|
.tags { margin-top: 1rem; } |
|
|
.tag { |
|
|
font-size: 0.8rem; |
|
|
background: #334155; |
|
|
padding: 2px 8px; |
|
|
border-radius: 4px; |
|
|
margin-right: 5px; |
|
|
} |
|
|
|
|
|
footer { |
|
|
text-align: center; |
|
|
padding: 3rem; |
|
|
background: #0b1120; |
|
|
color: var(--text-dim); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.animate { animation: fadeIn 1s ease forwards; } |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav> |
|
|
<div class="logo"><HELLO WORLD /></div> |
|
|
<ul class="nav-links"> |
|
|
<li><a href="#home">首页</a></li> |
|
|
<li><a href="#skills">技能</a></li> |
|
|
<li><a href="#projects">项目</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<header id="home"> |
|
|
<h1 class="animate">你好，我是 开发者</h1> |
|
|
<p class="typing-text animate">热爱代码 • 专注构建 • 持续学习</p> |
|
|
</header> |
|
|
|
|
|
<section class="section" id="skills"> |
|
|
<h2 class="section-title">我的技术栈</h2> |
|
|
<div class="skills-grid"> |
|
|
<div class="skill-item">HTML5</div> |
|
|
<div class="skill-item">CSS3</div> |
|
|
<div class="skill-item">JavaScript</div> |
|
|
<div class="skill-item">Python</div> |
|
|
<div class="skill-item">React</div> |
|
|
<div class="skill-item">Node.js</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section" id="projects"> |
|
|
<h2 class="section-title">近期项目</h2> |
|
|
<div class="project-grid"> |
|
|
<div class="project-card"> |
|
|
<div class="project-info"> |
|
|
<h3>智能天气应用</h3> |
|
|
<p>使用 API 获取实时天气数据，并根据天气自动切换背景主题。</p> |
|
|
<div class="tags"> |
|
|
<span class="tag">JavaScript</span> |
|
|
<span class="tag">RestAPI</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="project-card"> |
|
|
<div class="project-info"> |
|
|
<h3>在线协作编辑器</h3> |
|
|
<p>支持多人实时编辑代码的 Web 平台，集成了语法高亮功能。</p> |
|
|
<div class="tags"> |
|
|
<span class="tag">Socket.io</span> |
|
|
<span class="tag">React</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<footer> |
|
|
<p>© 2026 由 yukuii 构建 | 保持好奇心</p> |
|
|
</footer> |
|
|
|
|
|
</body> |
|
|
</html> |
