Spaces:

pixelx
/

about-me

Running

App Files Files Community

pixelx commited on Apr 3

Commit

095d2d7

verified ·

1 Parent(s): e4fc3de

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +488 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: About Me
-emoji: 📈
-colorFrom: pink
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: about-me
+emoji: 🐳
+colorFrom: blue
 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,488 @@
-<!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;700&family=Rajdhani:wght@300;500;700&display=swap');
+        :root {
+            --neon-pink: #ff2a6d;
+            --neon-blue: #05d9e8;
+            --neon-purple: #d300c5;
+            --dark-bg: #0d0221;
+        }
+        body {
+            font-family: 'Rajdhani', sans-serif;
+            background-color: var(--dark-bg);
+            color: white;
+            overflow-x: hidden;
+        }
+        h1, h2, h3 {
+            font-family: 'Orbitron', sans-serif;
+        }
+        .neon-text-pink {
+            color: var(--neon-pink);
+            text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
+        }
+        .neon-text-blue {
+            color: var(--neon-blue);
+            text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
+        }
+        .neon-border-pink {
+            border: 1px solid var(--neon-pink);
+            box-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
+        }
+        .neon-border-blue {
+            border: 1px solid var(--neon-blue);
+            box-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
+        }
+        .glow-on-hover:hover {
+            text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
+        }
+        .scanline {
+            position: relative;
+            overflow: hidden;
+        }
+        .scanline::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: rgba(5, 217, 232, 0.3);
+            animation: scan 8s linear infinite;
+        }
+        @keyframes scan {
+            0% { top: 0%; }
+            100% { top: 100%; }
+        }
+        .grid-pattern {
+            background-image:
+                linear-gradient(rgba(5, 217, 232, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(5, 217, 232, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .terminal-cursor::after {
+            content: "|";
+            animation: blink 1s step-end infinite;
+            color: var(--neon-blue);
+        }
+        @keyframes blink {
+            from, to { opacity: 1; }
+            50% { opacity: 0; }
+        }
+    </style>
+</head>
+<body class="min-h-screen grid-pattern">
+    <!-- 故障效果背景 -->
+    <div class="fixed inset-0 opacity-10 z-0" id="glitch-bg"></div>
+    <!-- 主容器 -->
+    <div class="container mx-auto px-4 py-8 relative z-10">
+        <!-- 页眉 -->
+        <header class="flex flex-col md:flex-row justify-between items-center mb-12 p-6 neon-border-pink rounded-lg bg-black bg-opacity-70 backdrop-blur-sm">
+            <div class="flex items-center mb-4 md:mb-0">
+                <div class="w-16 h-16 rounded-full neon-border-blue bg-black mr-4 flex items-center justify-center">
+                    <i class="fas fa-user-astronaut text-3xl neon-text-blue"></i>
+                </div>
+                <div>
+                    <h1 class="text-3xl md:text-4xl font-bold neon-text-pink">新视界</h1>
+                    <p class="text-lg neon-text-blue">数字设计 // 未来界面</p>
+                </div>
+            </div>
+            <nav class="flex space-x-1 md:space-x-6">
+                <a href="#work" class="px-3 py-2 glow-on-hover neon-text-blue hover:neon-text-pink transition-all duration-300">作品</a>
+                <a href="#about" class="px-3 py-2 glow-on-hover neon-text-blue hover:neon-text-pink transition-all duration-300">关于</a>
+                <a href="#contact" class="px-3 py-2 glow-on-hover neon-text-blue hover:neon-text-pink transition-all duration-300">联系</a>
+            </nav>
+        </header>
+        <!-- 英雄区域 -->
+        <section class="mb-20 p-8 neon-border-blue rounded-lg bg-black bg-opacity-70 backdrop-blur-sm scanline relative">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                <div>
+                    <h2 class="text-4xl md:text-6xl font-bold mb-4 neon-text-pink">设计<span class="neon-text-blue">未来</span></h2>
+                    <p class="text-xl mb-6 text-gray-300">在科技与人文的交汇处创造沉浸式数字体验</p>
+                    <div class="terminal bg-black p-4 rounded neon-border-blue mb-6 font-mono">
+                        <div class="flex items-center mb-2">
+                            <span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span>
+                            <span class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></span>
+                            <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
+                            <span class="text-sm neon-text-blue">终端</span>
+                        </div>
+                        <div class="mb-1"><span class="neon-text-blue">$</span> <span class="text-gray-300">我是谁</span></div>
+                        <div id="terminal-text" class="terminal-cursor">赛博设计师.exe</div>
+                    </div>
+                    <div class="flex space-x-4">
+                        <button class="px-6 py-3 bg-gradient-to-r from-pink-600 to-blue-600 rounded-lg font-bold hover:opacity-90 transition-all duration-300 flex items-center">
+                            <i class="fas fa-rocket mr-2"></i> 探索作品
+                        </button>
+                        <button class="px-6 py-3 neon-border-blue rounded-lg font-bold neon-text-blue hover:bg-blue-900 hover:bg-opacity-30 transition-all duration-300 flex items-center">
+                            <i class="fas fa-terminal mr-2"></i> 联系我
+                        </button>
+                    </div>
+                </div>
+                <div class="relative">
+                    <div class="absolute -inset-4 neon-border-pink rounded-lg animate-pulse opacity-30"></div>
+                    <div class="relative bg-black p-2 rounded-lg neon-border-blue">
+                        <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop" alt="赛博朋克城市" class="w-full h-auto rounded">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <p class="neon-text-pink text-sm">当前项目: <span class="neon-text-blue">霓虹街区UI套件</span></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- 作品区域 -->
+        <section id="work" class="mb-20">
+            <h2 class="text-3xl font-bold mb-8 neon-text-pink flex items-center">
+                <span class="w-8 h-1 bg-pink-500 mr-4"></span>
+                近期作品
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- 项目1 -->
+                <div class="bg-black bg-opacity-70 rounded-lg overflow-hidden neon-border-blue hover:neon-border-pink transition-all duration-500 group">
+                    <div class="relative h-48 overflow-hidden">
+                        <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?q=80&w=2264&auto=format&fit=crop" alt="项目1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                        <div class="absolute bottom-0 left-0 p-4">
+                            <h3 class="text-xl font-bold neon-text-blue group-hover:neon-text-pink transition-all duration-300">霓虹界面系统</h3>
+                            <p class="text-sm text-gray-300">UI/UX设计</p>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-300 mb-4">为未来风格用户界面打造的模块化综合设计系统</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="text-xs px-2 py-1 rounded neon-border-blue neon-text-blue">UI设计</span>
+                            <span class="text-xs px-2 py-1 rounded neon-border-blue neon-text-blue">Figma</span>
+                            <span class="text-xs px-2 py-1 rounded neon-border-blue neon-text-blue">After Effects</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 项目2 -->
+                <div class="bg-black bg-opacity-70 rounded-lg overflow-hidden neon-border-blue hover:neon-border-pink transition-all duration-500 group">
+                    <div class="relative h-48 overflow-hidden">
+                        <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?q=80&w=2274&auto=format&fit=crop" alt="项目2" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                        <div class="absolute bottom-0 left-0 p-4">
+                            <h3 class="text-xl font-bold neon-text-blue group-hover:neon-text-pink transition-all duration-300">赛博城市品牌</h3>
+                            <p class="text-sm text-gray-300">品牌形象</p>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-300 mb-4">为赛博朋克风格科技初创公司打造的完整视觉形象，包括标志、字体和动态图形</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="text-xs px-2 py-1 rounded neon-border-blue neon-text-blue">品牌设计</span>
+                            <span class="text-xs px-2 py-1 rounded neon-border-blue neon-text-blue">Illustrator</span>
+                            <span class="text-xs px-2 py-1 rounded neon-border-blue neon-text-blue">Blender</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 项目3 -->
+                <div class="bg-black bg-opacity-70 rounded-lg overflow-hidden neon-border-blue hover:neon-border-pink transition-all duration-500 group">
+                    <div class="relative h-48 overflow-hidden">
+                        <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?q=80&w=2274&auto=format&fit=crop" alt="项目3" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                        <div class="absolute bottom-0 left-0 p-4">
+                            <h3 class="text-xl font-bold neon-text-blue group-hover:neon-text-pink transition-all duration-300">虚拟现实仪表盘</h3>
+                            <p class="text-sm text-gray-300">XR界面</p>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-300 mb-4">为虚拟现实生产力应用设计的沉浸式仪表盘，具有空间交互功能</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="text-xs px-2 py-1 rounded neon-border-blue neon-text-blue">XR设计</span>
+                            <span class="text-xs px-2 py-1 rounded neon-border-blue neon-text-blue">Unity</span>
+                            <span class="text-xs px-2 py-1 rounded neon-border-blue neon-text-blue">3D建模</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- 关于区域 -->
+        <section id="about" class="mb-20 p-8 neon-border-pink rounded-lg bg-black bg-opacity-70 backdrop-blur-sm">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h2 class="text-3xl font-bold mb-6 neon-text-blue flex items-center">
+                        <span class="w-8 h-1 bg-blue-500 mr-4"></span>
+                        关于设计师
+                    </h2>
+                    <p class="text-gray-300 mb-4 leading-relaxed">
+                        我是一名专注于未来界面、赛博朋克美学和沉浸式体验的数字设计师。在行业深耕8年，曾与科技初创公司、游戏工作室和创新品牌合作，创造突破界限的视觉作品。
+                    </p>
+                    <p class="text-gray-300 mb-6 leading-relaxed">
+                        我的设计方法结合前沿设计原则与复古未来主义灵感，打造既先进又充满怀旧感的界面。不设计时，你可以在VR世界中找到我，或者看我捣鼓创意编程项目。
+                    </p>
+                    <div class="mb-8">
+                        <h3 class="text-xl font-bold neon-text-pink mb-4">技能矩阵</h3>
+                        <div class="space-y-3">
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-gray-300">UI/UX设计</span>
+                                    <span class="neon-text-blue">95%</span>
+                                </div>
+                                <div class="w-full bg-gray-800 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-pink-500 to-blue-500 h-2 rounded-full" style="width: 95%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-gray-300">动态图形</span>
+                                    <span class="neon-text-blue">85%</span>
+                                </div>
+                                <div class="w-full bg-gray-800 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-pink-500 to-blue-500 h-2 rounded-full" style="width: 85%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="text-gray-300">3D建模</span>
+                                    <span class="neon-text-blue">75%</span>
+                                </div>
+                                <div class="w-full bg-gray-800 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-pink-500 to-blue-500 h-2 rounded-full" style="width: 75%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="relative">
+                    <div class="absolute -inset-4 neon-border-blue rounded-lg animate-pulse opacity-30"></div>
+                    <div class="relative bg-black p-1 rounded-lg neon-border-pink overflow-hidden">
+                        <div class="aspect-w-1 aspect-h-1">
+                            <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=2187&auto=format&fit=crop" alt="设计师肖像" class="w-full h-full object-cover">
+                        </div>
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <div class="flex items-center">
+                                <div class="mr-3">
+                                    <div class="w-12 h-12 rounded-full neon-border-blue bg-black flex items-center justify-center">
+                                        <i class="fas fa-code text-xl neon-text-blue"></i>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p class="neon-text-pink font-bold">设计 + 编程</p>
+                                    <p class="text-xs text-gray-300">混合设计师-开发者工作流</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- 联系区域 -->
+        <section id="contact" class="mb-20">
+            <h2 class="text-3xl font-bold mb-8 neon-text-blue flex items-center">
+                <span class="w-8 h-1 bg-blue-500 mr-4"></span>
+                与我联系
+            </h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div class="bg-black bg-opacity-70 p-8 rounded-lg neon-border-blue">
+                    <h3 class="text-2xl font-bold neon-text-pink mb-6">发送消息</h3>
+                    <form class="space-y-4">
+                        <div>
+                            <label for="name" class="block text-gray-300 mb-2">您的姓名</label>
+                            <input type="text" id="name" class="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500" placeholder="输入您的姓名">
+                        </div>
+                        <div>
+                            <label for="email" class="block text-gray-300 mb-2">电子邮箱</label>
+                            <input type="email" id="email" class="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500" placeholder="[email protected]">
+                        </div>
+                        <div>
+                            <label for="message" class="block text-gray-300 mb-2">消息内容</label>
+                            <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500" placeholder="您有什么想法？"></textarea>
+                        </div>
+                        <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-pink-600 to-blue-600 rounded-lg font-bold text-white hover:opacity-90 transition-all duration-300 flex items-center justify-center">
+                            <i class="fas fa-paper-plane mr-2"></i> 发送消息
+                        </button>
+                    </form>
+                </div>
+                <div class="bg-black bg-opacity-70 p-8 rounded-lg neon-border-pink">
+                    <h3 class="text-2xl font-bold neon-text-blue mb-6">其他渠道</h3>
+                    <div class="space-y-6">
+                        <div class="flex items-center">
+                            <div class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center mr-4 neon-border-blue">
+                                <i class="fab fa-twitter text-xl neon-text-blue"></i>
+                            </div>
+                            <div>
+                                <p class="text-gray-300">关注获取设计见解</p>
+                                <a href="#" class="neon-text-pink hover:underline">@新视界设计</a>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center mr-4 neon-border-blue">
+                                <i class="fab fa-dribbble text-xl neon-text-blue"></i>
+                            </div>
+                            <div>
+                                <p class="text-gray-300">查看我的作品集</p>
+                                <a href="#" class="neon-text-pink hover:underline">dribbble.com/新视界</a>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center mr-4 neon-border-blue">
+                                <i class="fab fa-github text-xl neon-text-blue"></i>
+                            </div>
+                            <div>
+                                <p class="text-gray-300">开源项目</p>
+                                <a href="#" class="neon-text-pink hover:underline">github.com/新视界</a>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-30 flex items-center justify-center mr-4 neon-border-blue">
+                                <i class="fas fa-envelope text-xl neon-text-blue"></i>
+                            </div>
+                            <div>
+                                <p class="text-gray-300">直接联系</p>
+                                <a href="#" class="neon-text-pink hover:underline">contact@新视界.design</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-8 pt-6 border-t border-gray-800">
+                        <h4 class="text-lg font-bold neon-text-blue mb-4">项目接收状态</h4>
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 rounded-full bg-green-500 mr-3 animate-pulse"></div>
+                            <p class="text-gray-300">目前接受2023年第三季度新项目</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- 页脚 -->
+        <footer class="py-8 border-t border-gray-800 text-center">
+            <div class="flex justify-center space-x-6 mb-6">
+                <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-900 hover:bg-opacity-30 transition-all duration-300 neon-text-blue hover:neon-text-pink">
+                    <i class="fab fa-behance"></i>
+                </a>
+                <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-900 hover:bg-opacity-30 transition-all duration-300 neon-text-blue hover:neon-text-pink">
+                    <i class="fab fa-linkedin-in"></i>
+                </a>
+                <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-900 hover:bg-opacity-30 transition-all duration-300 neon-text-blue hover:neon-text-pink">
+                    <i class="fab fa-instagram"></i>
+                </a>
+                <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-900 hover:bg-opacity-30 transition-all duration-300 neon-text-blue hover:neon-text-pink">
+                    <i class="fab fa-discord"></i>
+                </a>
+            </div>
+            <p class="text-gray-500 text-sm">© 2023 新视界设计. 保留所有权利</p>
+            <p class="text-gray-600 text-xs mt-2">在赛博朋克时代 <i class="fas fa-heart text-pink-500"></i> 精心设计</p>
+        </footer>
+    </div>
+    <script>
+        // 终端打字效果
+        const terminalText = document.getElementById('terminal-text');
+        const texts = [
+            "赛博设计师.exe",
+            "界面专家.sys",
+            "未来界面.dev",
+            "视觉未来.dll"
+        ];
+        let currentTextIndex = 0;
+        let charIndex = 0;
+        let isDeleting = false;
+        let typingSpeed = 100;
+        function type() {
+            const currentText = texts[currentTextIndex];
+            if (isDeleting) {
+                terminalText.textContent = currentText.substring(0, charIndex - 1);
+                charIndex--;
+                typingSpeed = 50;
+            } else {
+                terminalText.textContent = currentText.substring(0, charIndex + 1);
+                charIndex++;
+                typingSpeed = 100;
+            }
+            if (!isDeleting && charIndex === currentText.length) {
+                isDeleting = true;
+                typingSpeed = 1500; // 文本末尾暂停
+            } else if (isDeleting && charIndex === 0) {
+                isDeleting = false;
+                currentTextIndex = (currentTextIndex + 1) % texts.length;
+                typingSpeed = 500; // 输入下个文本前暂停
+            }
+            setTimeout(type, typingSpeed);
+        }
+        // 开始打字效果
+        setTimeout(type, 1000);
+        // 故障背景效果
+        const glitchBg = document.getElementById('glitch-bg');
+        let glitchInterval;
+        function startGlitch() {
+            glitchInterval = setInterval(() => {
+                const glitchChance = Math.random();
+                if (glitchChance > 0.7) {
+                    glitchBg.style.background = `linear-gradient(${Math.random() * 360}deg, rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.1), rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.1))`;
+                    glitchBg.style.clipPath = `polygon(0 0, ${Math.random() * 100}% 0, ${Math.random() * 100}% ${Math.random() * 100}%, 0 ${Math.random() * 100}%)`;
+                    setTimeout(() => {
+                        glitchBg.style.background = 'transparent';
+                        glitchBg.style.clipPath = 'none';
+                    }, 100);
+                }
+            }, 500);
+        }
+        startGlitch();
+        // 链接霓虹悬停效果
+        document.querySelectorAll('a').forEach(link => {
+            link.addEventListener('mouseenter', () => {
+                if (link.classList.contains('glow-on-hover')) {
+                    link.style.textShadow = `0 0 10px ${link.classList.contains('neon-text-blue') ? 'var(--neon-blue)' : 'var(--neon-pink)'}, 0 0 20px ${link.classList.contains('neon-text-blue') ? 'var(--neon-blue)' : 'var(--neon-pink)'}`;
+                }
+            });
+            link.addEventListener('mouseleave', () => {
+                if (link.classList.contains('glow-on-hover')) {
+                    link.style.textShadow = link.classList.contains('neon-text-blue') ? '0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue)' : '0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink)';
+                }
+            });
+        });
+    </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=pixelx/about-me" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>