Spaces:

ixingchen
/

home

Running

App Files Files Community

ixingchen commited on Apr 24, 2025

Commit

1f66a91

verified ·

1 Parent(s): 821e88b

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +740 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Home
-emoji: 👀
-colorFrom: blue
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: home
+emoji: 🐳
+colorFrom: pink
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,740 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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">
+                <!-- 项目1 -->
+                <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>
+                <!-- 项目2 -->
+                <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>
+                <!-- 项目3 -->
+                <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>

prompts.txt ADDED Viewed

File without changes