File size: 10,653 Bytes
7e30643 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Devilish Chronicles</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=Major+Mono+Display&family=Syne+Mono&display=swap');
.devil-text {
font-family: 'Major Mono Display', monospace;
text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
}
.typing-effect {
overflow: hidden;
white-space: nowrap;
border-right: 0.15em solid #ff0000;
animation: typing 2.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #ff0000 }
}
.glow {
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff0000, 0 0 20px #ff0000;
}
to {
text-shadow: 0 0 10px #fff, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000;
}
}
.devil-bg {
background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(255, 0, 0, 0.3);
}
.social-icon {
transition: all 0.3s ease;
}
.social-icon:hover {
transform: scale(1.2) rotate(10deg);
color: #ff0000 !important;
}
</style>
</head>
<body class="devil-bg min-h-screen text-gray-200">
<div class="container mx-auto px-4 py-12">
<!-- Header with animated title -->
<header class="text-center mb-12">
<h1 class="devil-text text-4xl md:text-6xl font-bold mb-4 glow">
Ｄᴇᴠɪʟɪѕʜ ｃʜʀᴏɴɪᴄʟᴇѕ
</h1>
<div class="w-full max-w-md mx-auto h-px bg-gradient-to-r from-transparent via-red-500 to-transparent"></div>
</header>
<!-- Main content grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Left section - Devil avatar -->
<div class="flex flex-col items-center justify-center">
<div class="relative mb-6 group">
<div class="absolute -inset-1 bg-gradient-to-r from-red-600 to-purple-900 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-200"></div>
<div class="relative bg-black rounded-lg p-1">
<img src="https://avatars.githubusercontent.com/u/43078934?v=4" alt="Devil Avatar"
class="w-48 h-48 rounded-lg border-2 border-red-900 object-cover filter grayscale hover:grayscale-0 transition duration-500">
</div>
</div>
<h3 class="font-medium mb-2 text-red-400 typing-effect" id="devilTitle"></h3>
<p class="text-sm text-gray-400 italic">i._.become_a_devil</p>
<button id="darkModeToggle" class="mt-6 px-4 py-2 bg-red-900 hover:bg-red-800 rounded-lg transition-colors duration-300 flex items-center">
<i class="fas fa-moon mr-2"></i> Dark Ritual
</button>
</div>
<!-- Center section - About -->
<div class="col-span-1 md:col-span-2">
<div class="bg-gradient-to-br from-gray-900 to-black rounded-xl p-6 shadow-lg border border-gray-800 card-hover transition-all duration-300">
<h2 class="devil-text text-2xl font-bold mb-6 text-center border-b border-red-900 pb-2">
₊‧.°.⋆ 「 ✦ Devil ✦ 」
</h2>
<div class="space-y-6">
<div class="bg-gray-900 rounded-lg p-4 border-l-4 border-red-700">
<h3 class="text-red-400 font-bold mb-2">₊‧.° am i alive??✦</h3>
<p class="text-gray-300">"Code is my canvas, darkness my inspiration. Walking the line between reality and digital chaos. Creating what shouldn't exist, breaking what does."</p>
</div>
<div class="bg-gray-900 rounded-lg p-4 border-l-4 border-purple-700">
<h3 class="text-purple-400 font-bold mb-2">⊹₊ ㆍ✿ ㆍ₊⊹</h3>
<p class="text-gray-300">
Specializing in JavaScript frameworks with a focus on creating unconventional applications that challenge the norm. When the world sleeps, my code comes alive.
</p>
</div>
</div>
</div>
<!-- Social links -->
<div class="mt-8 flex justify-center space-x-6">
<a href="https://github.com/Darknessking13" target="_blank" class="social-icon text-2xl hover:text-red-500">
<i class="fab fa-github"></i>
</a>
<a href="https://discord.com/users/1083342294951927881" target="_blank" class="social-icon text-2xl hover:text-indigo-500">
<i class="fab fa-discord"></i>
</a>
<a href="https://x.com/Darknessking132" target="_blank" class="social-icon text-2xl hover:text-blue-400">
<i class="fab fa-twitter"></i>
</a>
</div>
<!-- Digital clock -->
<div class="mt-8 text-center">
<div class="inline-block bg-black bg-opacity-50 rounded-lg px-6 py-2 border border-gray-800">
<div id="clock" class="text-xl font-mono text-red-400"></div>
<div id="date" class="text-sm text-gray-400"></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mt-16 text-center text-gray-500 text-sm">
<div class="w-full max-w-md mx-auto h-px bg-gradient-to-r from-transparent via-red-900 to-transparent mb-4"></div>
<p>The darkness takes many forms... choose yours wisely.</p>
<p class="mt-2">© <span id="year"></span> Devilish Chronicles</p>
</footer>
</div>
<script>
// Typing animation for the title
const text = "₊‧.°.⋆ 「 ✦ Devil ✦ 」";
let i = 0;
const typingEffect = () => {
if (i < text.length) {
document.getElementById("devilTitle").innerHTML += text.charAt(i);
i++;
setTimeout(typingEffect, 100);
}
};
// Start typing effect after page loads
document.addEventListener('DOMContentLoaded', () => {
typingEffect();
// Set current year in footer
document.getElementById('year').textContent = new Date().getFullYear();
// Dark mode toggle
const darkModeToggle = document.getElementById('darkModeToggle');
let isDark = true;
darkModeToggle.addEventListener('click', () => {
isDark = !isDark;
if (!isDark) {
document.body.classList.remove('devil-bg');
document.body.classList.add('bg-gray-100', 'text-gray-900');
darkModeToggle.innerHTML = '<i class="fas fa-sun mr-2"></i> Light Mode';
darkModeToggle.classList.remove('bg-red-900', 'hover:bg-red-800');
darkModeToggle.classList.add('bg-yellow-500', 'hover:bg-yellow-400');
} else {
document.body.classList.add('devil-bg');
document.body.classList.remove('bg-gray-100', 'text-gray-900');
darkModeToggle.innerHTML = '<i class="fas fa-moon mr-2"></i> Dark Ritual';
darkModeToggle.classList.add('bg-red-900', 'hover:bg-red-800');
darkModeToggle.classList.remove('bg-yellow-500', 'hover:bg-yellow-400');
}
});
// Update clock every second
function updateClock() {
const now = new Date();
const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
const dateStr = now.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' });
document.getElementById('clock').textContent = timeStr;
document.getElementById('date').textContent = dateStr;
}
updateClock();
setInterval(updateClock, 1000);
// Add random glow effect to social icons
const socialIcons = document.querySelectorAll('.social-icon');
setInterval(() => {
socialIcons.forEach(icon => {
if (Math.random() > 0.7) {
icon.classList.add('glow');
setTimeout(() => icon.classList.remove('glow'), 2000);
}
});
}, 3000);
});
</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=PyxiLabs/my" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |