| <!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> |
