|
|
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Poppins:wght@300;400;500;600&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #3a86ff; |
|
|
--secondary: #8338ec; |
|
|
--accent: #ff006e; |
|
|
--dark: #1a1a2e; |
|
|
--light: #f8f9fa; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #0f0f1a; |
|
|
color: var(--light); |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.tech-font { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: rgba(26, 26, 46, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 16px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); |
|
|
border-color: rgba(58, 134, 255, 0.3); |
|
|
} |
|
|
|
|
|
.glow { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glow::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -2px; |
|
|
left: -2px; |
|
|
right: -2px; |
|
|
bottom: -2px; |
|
|
z-index: -1; |
|
|
background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent), var(--primary)); |
|
|
background-size: 400%; |
|
|
border-radius: 18px; |
|
|
opacity: 0; |
|
|
transition: 0.5s; |
|
|
animation: animate 20s linear infinite; |
|
|
} |
|
|
|
|
|
.glow:hover::before { |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
@keyframes animate { |
|
|
0% { |
|
|
background-position: 0 0; |
|
|
} |
|
|
50% { |
|
|
background-position: 300% 0; |
|
|
} |
|
|
100% { |
|
|
background-position: 0 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
background-size: 300% 300%; |
|
|
animation: gradient 8s ease infinite; |
|
|
} |
|
|
|
|
|
@keyframes gradient { |
|
|
0% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
50% { |
|
|
background-position: 100% 50%; |
|
|
} |
|
|
100% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
} |
|
|
|
|
|
.hexagon { |
|
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); |
|
|
} |
|
|
|
|
|
.skill-bar { |
|
|
height: 6px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 3px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.skill-progress { |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
|
border-radius: 3px; |
|
|
transition: width 1.5s ease; |
|
|
} |
|
|
|
|
|
.timeline-item { |
|
|
position: relative; |
|
|
padding-left: 30px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.timeline-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 5px; |
|
|
width: 15px; |
|
|
height: 15px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary); |
|
|
box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.3); |
|
|
} |
|
|
|
|
|
.timeline-item::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 7px; |
|
|
top: 20px; |
|
|
width: 1px; |
|
|
height: calc(100% - 15px); |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.timeline-item:last-child::after { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { |
|
|
transform: translateY(0px); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0px); |
|
|
} |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(58, 134, 255, 0.4); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(58, 134, 255, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(58, 134, 255, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.grid-bg { |
|
|
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; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="grid-bg min-h-screen"> |
|
|
|
|
|
<div id="loader" class="fixed inset-0 bg-dark z-50 flex items-center justify-center transition-opacity duration-500"> |
|
|
<div class="text-center"> |
|
|
<div class="hexagon w-20 h-20 mx-auto bg-gradient-to-r from-primary to-secondary flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-code text-3xl text-white"></i> |
|
|
</div> |
|
|
<h2 class="tech-font text-2xl gradient-text">LOADING PORTFOLIO</h2> |
|
|
<div class="w-48 h-1 bg-gray-700 rounded-full mx-auto mt-4 overflow-hidden"> |
|
|
<div id="progress-bar" class="h-full bg-gradient-to-r from-primary to-secondary" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-12 opacity-0" id="main-content"> |
|
|
|
|
|
<header class="flex flex-col md:flex-row items-center justify-between mb-16"> |
|
|
<div class="flex items-center mb-6 md:mb-0"> |
|
|
<div class="hexagon w-16 h-16 bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-code text-xl text-white"></i> |
|
|
</div> |
|
|
<h1 class="tech-font text-3xl gradient-text">TECH<span class="text-white">FOLIO</span></h1> |
|
|
</div> |
|
|
|
|
|
<nav class="flex space-x-1"> |
|
|
<a href="#about" class="px-4 py-2 rounded-full hover:bg-gray-800 transition-all duration-300 flex items-center"> |
|
|
<i class="fas fa-user mr-2 text-sm"></i> |
|
|
<span>关于</span> |
|
|
</a> |
|
|
<a href="#skills" class="px-4 py-2 rounded-full hover:bg-gray-800 transition-all duration-300 flex items-center"> |
|
|
<i class="fas fa-cog mr-2 text-sm"></i> |
|
|
<span>技能</span> |
|
|
</a> |
|
|
<a href="#projects" class="px-4 py-2 rounded-full hover:bg-gray-800 transition-all duration-300 flex items-center"> |
|
|
<i class="fas fa-project-diagram mr-2 text-sm"></i> |
|
|
<span>项目</span> |
|
|
</a> |
|
|
<a href="#contact" class="px-4 py-2 rounded-full hover:bg-gray-800 transition-all duration-300 flex items-center"> |
|
|
<i class="fas fa-envelope mr-2 text-sm"></i> |
|
|
<span>联系</span> |
|
|
</a> |
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="flex flex-col md:flex-row items-center justify-between mb-24"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-4 tech-font"> |
|
|
<span class="gradient-text">你好, 我是</span> |
|
|
<span class="block text-white">张科技</span> |
|
|
</h2> |
|
|
<h3 class="text-xl md:text-2xl text-gray-400 mb-6">全栈开发工程师 & UI/UX设计师</h3> |
|
|
<p class="text-gray-400 mb-8 leading-relaxed"> |
|
|
我专注于创造美观、高效且用户友好的数字体验。拥有5年以上的开发经验，擅长将复杂的技术转化为直观的解决方案。 |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#contact" class="px-6 py-3 bg-gradient-to-r from-primary to-secondary rounded-full text-white font-medium hover:shadow-lg transition-all duration-300 flex items-center"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> |
|
|
<span>联系我</span> |
|
|
</a> |
|
|
<a href="#projects" class="px-6 py-3 border border-gray-700 rounded-full text-white font-medium hover:bg-gray-800 transition-all duration-300 flex items-center"> |
|
|
<i class="fas fa-eye mr-2"></i> |
|
|
<span>查看作品</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 flex justify-center relative"> |
|
|
<div class="relative"> |
|
|
<div class="w-64 h-64 md:w-80 md:h-80 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" |
|
|
alt="Profile" |
|
|
class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="absolute -bottom-5 -right-5 bg-dark p-4 rounded-lg shadow-lg card"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-trophy"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-400">获奖项目</p> |
|
|
<p class="text-sm font-medium">年度最佳应用</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -top-5 -left-5 bg-dark p-4 rounded-lg shadow-lg card"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-secondary rounded-full flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-code-branch"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-400">项目完成</p> |
|
|
<p class="text-sm font-medium">50+</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="mb-24"> |
|
|
<div class="flex items-center mb-12"> |
|
|
<h2 class="text-3xl font-bold tech-font gradient-text mr-4">关于我</h2> |
|
|
<div class="flex-1 h-px bg-gradient-to-r from-primary to-transparent"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="card glow p-8"> |
|
|
<div class="w-16 h-16 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center text-primary text-2xl mb-6"> |
|
|
<i class="fas fa-lightbulb"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">创新思维</h3> |
|
|
<p class="text-gray-400"> |
|
|
我热衷于探索新技术和创意解决方案，能够将复杂问题分解为可管理的部分，并找到创新的解决途径。 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="card glow p-8"> |
|
|
<div class="w-16 h-16 bg-secondary bg-opacity-20 rounded-lg flex items-center justify-center text-secondary text-2xl mb-6"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">团队协作</h3> |
|
|
<p class="text-gray-400"> |
|
|
作为团队的一员，我重视沟通与协作，能够与设计师、产品经理和其他开发者有效合作，共同实现项目目标。 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="card glow p-8"> |
|
|
<div class="w-16 h-16 bg-accent bg-opacity-20 rounded-lg flex items-center justify-center text-accent text-2xl mb-6"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">快速学习</h3> |
|
|
<p class="text-gray-400"> |
|
|
技术领域日新月异，我始终保持学习的态度，能够快速掌握新技术并将其应用到实际项目中。 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="mb-24"> |
|
|
<div class="flex items-center mb-12"> |
|
|
<h2 class="text-3xl font-bold tech-font gradient-text mr-4">我的技能</h2> |
|
|
<div class="flex-1 h-px bg-gradient-to-r from-primary to-transparent"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="card p-8"> |
|
|
<h3 class="text-xl font-bold mb-6 flex items-center"> |
|
|
<i class="fas fa-laptop-code mr-3 text-primary"></i> |
|
|
<span>技术技能</span> |
|
|
</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-300">HTML/CSS</span> |
|
|
<span class="text-primary">95%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-300">JavaScript</span> |
|
|
<span class="text-primary">90%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-300">React</span> |
|
|
<span class="text-primary">85%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-300">Node.js</span> |
|
|
<span class="text-primary">80%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card p-8"> |
|
|
<h3 class="text-xl font-bold mb-6 flex items-center"> |
|
|
<i class="fas fa-paint-brush mr-3 text-secondary"></i> |
|
|
<span>设计技能</span> |
|
|
</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-300">UI/UX设计</span> |
|
|
<span class="text-secondary">90%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-300">Figma</span> |
|
|
<span class="text-secondary">85%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-300">Adobe XD</span> |
|
|
<span class="text-secondary">80%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-300">Photoshop</span> |
|
|
<span class="text-secondary">75%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="mb-24"> |
|
|
<div class="flex items-center mb-12"> |
|
|
<h2 class="text-3xl font-bold tech-font gradient-text mr-4">精选项目</h2> |
|
|
<div class="flex-1 h-px bg-gradient-to-r from-primary to-transparent"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="card glow overflow-hidden group"> |
|
|
<div class="relative overflow-hidden h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Project 1" |
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-80"></div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<span class="bg-primary text-white text-xs px-2 py-1 rounded">Web应用</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">数据分析平台</h3> |
|
|
<p class="text-gray-400 mb-4">一个强大的数据可视化和分析工具，帮助企业做出数据驱动的决策。</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded">React</span> |
|
|
<span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded">D3.js</span> |
|
|
<span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded">Node.js</span> |
|
|
</div> |
|
|
<a href="#" class="text-primary text-sm font-medium flex items-center hover:text-secondary transition-colors"> |
|
|
<span>查看详情</span> |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card glow overflow-hidden group"> |
|
|
<div class="relative overflow-hidden h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1467232004584-a241de8b3885?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" |
|
|
alt="Project 2" |
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-80"></div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<span class="bg-secondary text-white text-xs px-2 py-1 rounded">移动应用</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">健康追踪应用</h3> |
|
|
<p class="text-gray-400 mb-4">一款全面的健康管理应用，帮助用户追踪运动、饮食和睡眠数据。</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded">Flutter</span> |
|
|
<span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded">Firebase</span> |
|
|
<span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded">HealthKit</span> |
|
|
</div> |
|
|
<a href="#" class="text-primary text-sm font-medium flex items-center hover:text-secondary transition-colors"> |
|
|
<span>查看详情</span> |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card glow overflow-hidden group"> |
|
|
<div class="relative overflow-hidden h-48"> |
|
|
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Project 3" |
|
|
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-80"></div> |
|
|
<div class="absolute bottom-4 left-4"> |
|
|
<span class="bg-accent text-white text-xs px-2 py-1 rounded">电商平台</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">时尚电商平台</h3> |
|
|
<p class="text-gray-400 mb-4">一个现代化的电子商务平台，提供个性化的购物体验和推荐系统。</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded">Vue.js</span> |
|
|
<span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded">Laravel</span> |
|
|
<span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded">Stripe</span> |
|
|
</div> |
|
|
<a href="#" class="text-primary text-sm font-medium flex items-center hover:text-secondary transition-colors"> |
|
|
<span>查看详情</span> |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-flex items-center px-6 py-3 border border-gray-700 rounded-full text-white font-medium hover:bg-gray-800 transition-all duration-300"> |
|
|
<i class="fas fa-folder-open mr-2"></i> |
|
|
<span>查看所有项目</span> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="mb-24"> |
|
|
<div class="flex items-center mb-12"> |
|
|
<h2 class="text-3xl font-bold tech-font gradient-text mr-4">联系我</h2> |
|
|
<div class="flex-1 h-px bg-gradient-to-r from-primary to-transparent"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="card p-8"> |
|
|
<h3 class="text-xl font-bold mb-6">联系方式</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-primary bg-opacity-20 rounded-full flex items-center justify-center text-primary mr-4 mt-1"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-gray-400 mb-1">电子邮件</h4> |
|
|
<a href="mailto:zhangkeji@example.com" class="text-white hover:text-primary transition-colors">zhangkeji@example.com</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-secondary bg-opacity-20 rounded-full flex items-center justify-center text-secondary mr-4 mt-1"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-gray-400 mb-1">电话</h4> |
|
|
<a href="tel:+8613812345678" class="text-white hover:text-secondary transition-colors">+86 138 1234 5678</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 bg-accent bg-opacity-20 rounded-full flex items-center justify-center text-accent mr-4 mt-1"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-gray-400 mb-1">地址</h4> |
|
|
<p class="text-white">中国北京市海淀区科技园区88号</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 pt-6 border-t border-gray-800"> |
|
|
<h4 class="text-gray-400 mb-4">社交媒体</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-white hover:bg-primary transition-all"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-white hover:bg-blue-500 transition-all"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-white hover:bg-blue-400 transition-all"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-white hover:bg-pink-500 transition-all"> |
|
|
<i class="fab fa-dribbble"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card p-8"> |
|
|
<h3 class="text-xl font-bold mb-6">发送消息</h3> |
|
|
|
|
|
<form> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block text-gray-400 mb-2">姓名</label> |
|
|
<input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="请输入您的姓名"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block text-gray-400 mb-2">电子邮件</label> |
|
|
<input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="请输入您的电子邮件"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-gray-400 mb-2">消息</label> |
|
|
<textarea id="message" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="请输入您的消息"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-gradient-to-r from-primary to-secondary text-white font-medium py-3 px-6 rounded-lg hover:shadow-lg transition-all duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> |
|
|
<span>发送消息</span> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="border-t border-gray-800 pt-12 pb-8"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-between mb-8"> |
|
|
<div class="flex items-center mb-6 md:mb-0"> |
|
|
<div class="hexagon w-12 h-12 bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-code text-white"></i> |
|
|
</div> |
|
|
<h2 class="tech-font text-2xl gradient-text">TECH<span class="text-white">FOLIO</span></h2> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">首页</a> |
|
|
<a href="#about" class="text-gray-400 hover:text-primary transition-colors">关于</a> |
|
|
<a href="#skills" class="text-gray-400 hover:text-primary transition-colors">技能</a> |
|
|
<a href="#projects" class="text-gray-400 hover:text-primary transition-colors">项目</a> |
|
|
<a href="#contact" class="text-gray-400 hover:text-primary transition-colors">联系</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center text-gray-500 text-sm"> |
|
|
<p>© 2023 张科技个人主页. 保留所有权利.</p> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center text-white shadow-lg hover:bg-primary transition-all duration-300 opacity-0 invisible"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
let progress = 0; |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const loader = document.getElementById('loader'); |
|
|
const mainContent = document.getElementById('main-content'); |
|
|
|
|
|
const interval = setInterval(() => { |
|
|
progress += 1; |
|
|
progressBar.style.width = progress + '%'; |
|
|
|
|
|
if (progress >= 100) { |
|
|
clearInterval(interval); |
|
|
setTimeout(() => { |
|
|
loader.style.opacity = '0'; |
|
|
setTimeout(() => { |
|
|
loader.style.display = 'none'; |
|
|
mainContent.style.opacity = '1'; |
|
|
}, 500); |
|
|
}, 300); |
|
|
} |
|
|
}, 30); |
|
|
|
|
|
|
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.style.opacity = '1'; |
|
|
backToTopButton.style.visibility = 'visible'; |
|
|
} else { |
|
|
backToTopButton.style.opacity = '0'; |
|
|
backToTopButton.style.visibility = 'hidden'; |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', function() { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const skillSections = document.querySelectorAll('.skill-progress'); |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
const width = entry.target.style.width; |
|
|
entry.target.style.width = '0%'; |
|
|
setTimeout(() => { |
|
|
entry.target.style.width = width; |
|
|
}, 100); |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.1 }); |
|
|
|
|
|
skillSections.forEach(skill => { |
|
|
observer.observe(skill); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ixingchen/home" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
