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