Spaces:
Running
Running
Let's create a website landing page that serves the landing page for a project named Matrix... the idea behind the project is to collect data and cover the process and reserach taken and needed to accoplish the goal of creating a global quantum encryption protocol that would become the new standard of encryption, the beauty and logic is to link encryption and cyrptography down to the quantum entagled connection of the input and output of data. the landing page should read as an introduction and about me similar to the start of a blog page/site but essentially should be the platform and medium of where I Aziel Melek will begin the process of my journey through cryptography, encryption, quantum mechanics and security developing the process and the technolgy that would lay the groundwork for the new encryption protocol. Let's include the willing and openness to develop and study to expand the research with mutual minded individuals. I want the design of the landing page to be reactive and smooth bold and dynamic with futuristic elements pick colors and designs that center around technology. Be sure to keep all the code streamlined and error free, it should work on all browsers and all operating systems. lets call the website m1encode. my mission and story should revolve around the passion and vision of a new system of cryptography and security
Browse files- README.md +8 -5
- index.html +279 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title: Quantum Cypher Nexus
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Quantum Cypher Nexus 🚀
|
| 3 |
+
colorFrom: red
|
| 4 |
+
colorTo: green
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,280 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>m1encode - Quantum Encryption Protocol</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
|
| 12 |
+
<style>
|
| 13 |
+
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&display=swap');
|
| 14 |
+
.cyber-gradient {
|
| 15 |
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| 16 |
+
}
|
| 17 |
+
.quantum-pulse {
|
| 18 |
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
| 19 |
+
}
|
| 20 |
+
@keyframes pulse {
|
| 21 |
+
0%, 100% { opacity: 1; }
|
| 22 |
+
50% { opacity: 0.7; }
|
| 23 |
+
}
|
| 24 |
+
.hologram-border {
|
| 25 |
+
border: 1px solid transparent;
|
| 26 |
+
background: linear-gradient(90deg, #00ffff, #ff00ff) border-box;
|
| 27 |
+
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
| 28 |
+
-webkit-mask-composite: xor;
|
| 29 |
+
mask-composite: exclude;
|
| 30 |
+
}
|
| 31 |
+
.matrix-bg {
|
| 32 |
+
background: radial-gradient(circle at center, #0a0a0a 0%, #000000 100%);
|
| 33 |
+
}
|
| 34 |
+
</style>
|
| 35 |
+
</head>
|
| 36 |
+
<body class="matrix-bg text-white font-['Exo_2'] min-h-screen">
|
| 37 |
+
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
|
| 38 |
+
|
| 39 |
+
<!-- Navigation -->
|
| 40 |
+
<nav class="relative z-10 py-6 px-4 lg:px-8 border-b border-gray-800 backdrop-blur-sm bg-black/30">
|
| 41 |
+
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
| 42 |
+
<div class="flex items-center space-x-2">
|
| 43 |
+
<div class="w-3 h-3 bg-cyan-400 rounded-full quantum-pulse"></div>
|
| 44 |
+
<h1 class="text-xl font-['Orbitron'] font-bold tracking-wider">m1encode</h1>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hidden md:flex space-x-8">
|
| 47 |
+
<a href="#mission" class="hover:text-cyan-300 transition-colors duration-300">Mission</a>
|
| 48 |
+
<a href="#journey" class="hover:text-cyan-300 transition-colors duration-300">Journey</a>
|
| 49 |
+
<a href="#collaborate" class="hover:text-cyan-300 transition-colors duration-300">Collaborate</a>
|
| 50 |
+
<a href="#contact" class="hover:text-cyan-300 transition-colors duration-300">Contact</a>
|
| 51 |
+
</div>
|
| 52 |
+
<button class="md:hidden">
|
| 53 |
+
<i data-feather="menu"></i>
|
| 54 |
+
</button>
|
| 55 |
+
</div>
|
| 56 |
+
</nav>
|
| 57 |
+
|
| 58 |
+
<!-- Hero Section -->
|
| 59 |
+
<section class="relative z-10 py-20 px-4 lg:px-8 text-center">
|
| 60 |
+
<div class="max-w-4xl mx-auto">
|
| 61 |
+
<div class="inline-block px-4 py-2 mb-6 hologram-border rounded-full">
|
| 62 |
+
<span class="text-sm font-['Orbitron'] tracking-widest">QUANTUM ENCRYPTION INITIATIVE</span>
|
| 63 |
+
</div>
|
| 64 |
+
<h1 class="text-5xl lg:text-7xl font-['Orbitron'] font-black mb-6 leading-tight">
|
| 65 |
+
The Future of <span class="text-transparent bg-clip-text cyber-gradient">Cryptography</span>
|
| 66 |
+
</h1>
|
| 67 |
+
<p class="text-xl lg:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
|
| 68 |
+
Pioneering a global quantum encryption protocol through quantum entanglement,
|
| 69 |
+
where security becomes an intrinsic property of the universe itself.
|
| 70 |
+
</p>
|
| 71 |
+
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
| 72 |
+
<button class="px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-['Orbitron'] font-bold tracking-wider hover:scale-105 transition-transform duration-300 shadow-lg shadow-cyan-500/25">
|
| 73 |
+
EXPLORE THE PROTOCOL
|
| 74 |
+
</button>
|
| 75 |
+
<button class="px-8 py-4 border-2 border-cyan-400 rounded-lg font-['Orbitron'] tracking-wider hover:bg-cyan-400/10 transition-all duration-300">
|
| 76 |
+
JOIN THE RESEARCH
|
| 77 |
+
</button>
|
| 78 |
+
</div>
|
| 79 |
+
</div>
|
| 80 |
+
</section>
|
| 81 |
+
|
| 82 |
+
<!-- Mission Section -->
|
| 83 |
+
<section id="mission" class="relative z-10 py-20 px-4 lg:px-8">
|
| 84 |
+
<div class="max-w-6xl mx-auto">
|
| 85 |
+
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
| 86 |
+
<div>
|
| 87 |
+
<h2 class="text-4xl font-['Orbitron'] font-bold mb-6">My Mission</h2>
|
| 88 |
+
<p class="text-lg text-gray-300 mb-6 leading-relaxed">
|
| 89 |
+
I'm <span class="text-cyan-400 font-bold">Aziel Melek</span>, and I stand at the intersection of cryptography,
|
| 90 |
+
quantum mechanics, and security engineering. My vision is to develop a quantum encryption
|
| 91 |
+
protocol that transcends current limitations, creating an unbreakable security framework
|
| 92 |
+
rooted in the fundamental principles of quantum entanglement.
|
| 93 |
+
</p>
|
| 94 |
+
<p class="text-lg text-gray-300 mb-6 leading-relaxed">
|
| 95 |
+
The m1encode project represents more than just technical innovation—it's a philosophical
|
| 96 |
+
journey to redefine how we perceive data security in the quantum era. By linking encryption
|
| 97 |
+
directly to quantum-entangled connections, we're building a system where security becomes
|
| 98 |
+
an emergent property of the universe itself.
|
| 99 |
+
</p>
|
| 100 |
+
<div class="flex items-center space-x-4 mt-8">
|
| 101 |
+
<div class="w-2 h-12 bg-gradient-to-b from-cyan-400 to-purple-500 rounded-full"></div>
|
| 102 |
+
<p class="text-cyan-300 font-['Orbitron'] tracking-wider">WHERE PHYSICS MEETS SECURITY</p>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
<div class="relative">
|
| 106 |
+
<div class="h-80 lg:h-96 rounded-2xl bg-gradient-to-br from-gray-900 via-purple-900 to-cyan-900 p-1">
|
| 107 |
+
<div class="w-full h-full rounded-2xl bg-black/80 backdrop-blur-sm flex items-center justify-center">
|
| 108 |
+
<div class="text-center">
|
| 109 |
+
<i data-feather="cpu" class="w-16 h-16 mx-auto text-cyan-400 mb-4"></i>
|
| 110 |
+
<h3 class="text-2xl font-['Orbitron'] mb-2">Quantum Core</h3>
|
| 111 |
+
<p class="text-gray-400">Entanglement-based Security Matrix</p>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
<div class="absolute -top-4 -right-4 w-8 h-8 border-t-2 border-r-2 border-cyan-400"></div>
|
| 116 |
+
<div class="absolute -bottom-4 -left-4 w-8 h-8 border-b-2 border-l-2 border-purple-400"></div>
|
| 117 |
+
</div>
|
| 118 |
+
</div>
|
| 119 |
+
</div>
|
| 120 |
+
</section>
|
| 121 |
+
|
| 122 |
+
<!-- Journey Section -->
|
| 123 |
+
<section id="journey" class="relative z-10 py-20 px-4 lg:px-8 bg-black/40 backdrop-blur-sm">
|
| 124 |
+
<div class="max-w-6xl mx-auto">
|
| 125 |
+
<h2 class="text-4xl font-['Orbitron'] font-bold mb-12 text-center">The Research Journey</h2>
|
| 126 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 127 |
+
<div class="group p-6 rounded-xl bg-gradient-to-br from-gray-900 to-black border border-gray-800 hover:border-cyan-500 transition-all duration-500">
|
| 128 |
+
<div class="w-12 h-12 bg-cyan-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
| 129 |
+
<i data-feather="book" class="text-cyan-400"></i>
|
| 130 |
+
</div>
|
| 131 |
+
<h3 class="text-xl font-['Orbitron'] mb-3">Foundation Research</h3>
|
| 132 |
+
<p class="text-gray-400">Deep dive into quantum mechanics, cryptography fundamentals, and existing encryption protocols</p>
|
| 133 |
+
</div>
|
| 134 |
+
<div class="group p-6 rounded-xl bg-gradient-to-br from-gray-900 to-black border border-gray-800 hover:border-purple-500 transition-all duration-500">
|
| 135 |
+
<div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
| 136 |
+
<i data-feather="code" class="text-purple-400"></i>
|
| 137 |
+
</div>
|
| 138 |
+
<h3 class="text-xl font-['Orbitron'] mb-3">Protocol Development</h3>
|
| 139 |
+
<p class="text-gray-400">Architecting the quantum entanglement-based encryption framework and testing implementations</p>
|
| 140 |
+
</div>
|
| 141 |
+
<div class="group p-6 rounded-xl bg-gradient-to-br from-gray-900 to-black border border-gray-800 hover:border-blue-500 transition-all duration-500">
|
| 142 |
+
<div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
| 143 |
+
<i data-feather="globe" class="text-blue-400"></i>
|
| 144 |
+
</div>
|
| 145 |
+
<h3 class="text-xl font-['Orbitron'] mb-3">Global Standardization</h3>
|
| 146 |
+
<p class="text-gray-400">Working toward establishing the protocol as the new global standard for quantum-era encryption</p>
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
</div>
|
| 150 |
+
</section>
|
| 151 |
+
|
| 152 |
+
<!-- Collaboration Section -->
|
| 153 |
+
<section id="collaborate" class="relative z-10 py-20 px-4 lg:px-8">
|
| 154 |
+
<div class="max-w-4xl mx-auto text-center">
|
| 155 |
+
<h2 class="text-4xl font-['Orbitron'] font-bold mb-6">Join the Quantum Revolution</h2>
|
| 156 |
+
<p class="text-xl text-gray-300 mb-8 leading-relaxed">
|
| 157 |
+
The path to quantum encryption excellence requires collective intelligence.
|
| 158 |
+
I'm actively seeking collaboration with researchers, cryptographers, quantum physicists,
|
| 159 |
+
and security experts who share this vision.
|
| 160 |
+
</p>
|
| 161 |
+
<div class="grid sm:grid-cols-2 gap-6 max-w-2xl mx-auto">
|
| 162 |
+
<div class="p-6 rounded-xl bg-gradient-to-br from-cyan-900/30 to-blue-900/30 border border-cyan-500/30">
|
| 163 |
+
<i data-feather="users" class="w-8 h-8 mx-auto mb-4 text-cyan-400"></i>
|
| 164 |
+
<h3 class="font-['Orbitron'] mb-2">Research Partners</h3>
|
| 165 |
+
<p class="text-gray-400 text-sm">Quantum physicists and cryptography researchers</p>
|
| 166 |
+
</div>
|
| 167 |
+
<div class="p-6 rounded-xl bg-gradient-to-br from-purple-900/30 to-pink-900/30 border border-purple-500/30">
|
| 168 |
+
<i data-feather="git-merge" class="w-8 h-8 mx-auto mb-4 text-purple-400"></i>
|
| 169 |
+
<h3 class="font-['Orbitron'] mb-2">Development Team</h3>
|
| 170 |
+
<p class="text-gray-400 text-sm">Security engineers and protocol developers</p>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
</section>
|
| 175 |
+
|
| 176 |
+
<!-- Contact Section -->
|
| 177 |
+
<section id="contact" class="relative z-10 py-20 px-4 lg:px-8 bg-black/60 backdrop-blur-sm">
|
| 178 |
+
<div class="max-w-4xl mx-auto text-center">
|
| 179 |
+
<h2 class="text-4xl font-['Orbitron'] font-bold mb-6">Connect & Collaborate</h2>
|
| 180 |
+
<p class="text-lg text-gray-300 mb-8">
|
| 181 |
+
Ready to contribute to the future of quantum encryption? Let's build this together.
|
| 182 |
+
</p>
|
| 183 |
+
<div class="flex flex-wrap justify-center gap-6 mb-12">
|
| 184 |
+
<a href="#" class="flex items-center space-x-2 px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
|
| 185 |
+
<i data-feather="mail" class="w-5 h-5"></i>
|
| 186 |
+
<span>aziel@m1encode.quantum</span>
|
| 187 |
+
</a>
|
| 188 |
+
<a href="#" class="flex items-center space-x-2 px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
|
| 189 |
+
<i data-feather="github" class="w-5 h-5"></i>
|
| 190 |
+
<span>github/m1encode</span>
|
| 191 |
+
</a>
|
| 192 |
+
</div>
|
| 193 |
+
<div class="h-px bg-gradient-to-r from-transparent via-cyan-500 to-transparent max-w-2xl mx-auto mb-12"></div>
|
| 194 |
+
<p class="text-gray-400 font-['Orbitron'] tracking-widest">
|
| 195 |
+
QUANTUM SECURITY FOR THE POST-QUANTUM ERA
|
| 196 |
+
</p>
|
| 197 |
+
</div>
|
| 198 |
+
</section>
|
| 199 |
+
|
| 200 |
+
<!-- Footer -->
|
| 201 |
+
<footer class="relative z-10 py-8 px-4 lg:px-8 border-t border-gray-800">
|
| 202 |
+
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
|
| 203 |
+
<div class="flex items-center space-x-2 mb-4 md:mb-0">
|
| 204 |
+
<div class="w-2 h-2 bg-cyan-400 rounded-full quantum-pulse"></div>
|
| 205 |
+
<span class="text-sm text-gray-400">m1encode © 2024 - Quantum Encryption Initiative</span>
|
| 206 |
+
</div>
|
| 207 |
+
<div class="flex space-x-4">
|
| 208 |
+
<a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300">
|
| 209 |
+
<i data-feather="twitter"></i>
|
| 210 |
+
</a>
|
| 211 |
+
<a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300">
|
| 212 |
+
<i data-feather="linkedin"></i>
|
| 213 |
+
</a>
|
| 214 |
+
<a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300">
|
| 215 |
+
<i data-feather="youtube"></i>
|
| 216 |
+
</a>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
</footer>
|
| 220 |
+
|
| 221 |
+
<script>
|
| 222 |
+
// Initialize Vanta.js globe background
|
| 223 |
+
VANTA.GLOBE({
|
| 224 |
+
el: "#vanta-bg",
|
| 225 |
+
mouseControls: true,
|
| 226 |
+
touchControls: true,
|
| 227 |
+
gyroControls: false,
|
| 228 |
+
minHeight: 200.00,
|
| 229 |
+
minWidth: 200.00,
|
| 230 |
+
scale: 1.00,
|
| 231 |
+
scaleMobile: 1.00,
|
| 232 |
+
color: 0x3f83f8,
|
| 233 |
+
backgroundColor: 0x0a0a0a,
|
| 234 |
+
size: 1.10
|
| 235 |
+
});
|
| 236 |
+
|
| 237 |
+
// Smooth scrolling for navigation links
|
| 238 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 239 |
+
anchor.addEventListener('click', function (e) {
|
| 240 |
+
e.preventDefault();
|
| 241 |
+
const target = document.querySelector(this.getAttribute('href'));
|
| 242 |
+
if (target) {
|
| 243 |
+
target.scrollIntoView({
|
| 244 |
+
behavior: 'smooth',
|
| 245 |
+
block: 'start'
|
| 246 |
+
});
|
| 247 |
+
}
|
| 248 |
+
});
|
| 249 |
+
});
|
| 250 |
+
|
| 251 |
+
// Initialize animations
|
| 252 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 253 |
+
// Animate elements on scroll
|
| 254 |
+
const observerOptions = {
|
| 255 |
+
threshold: 0.1,
|
| 256 |
+
rootMargin: '0px 0px -50px 0px'
|
| 257 |
+
};
|
| 258 |
+
|
| 259 |
+
const observer = new IntersectionObserver((entries) => {
|
| 260 |
+
entries.forEach(entry => {
|
| 261 |
+
if (entry.isIntersecting) {
|
| 262 |
+
entry.target.style.opacity = '1';
|
| 263 |
+
entry.target.style.transform = 'translateY(0)';
|
| 264 |
+
}
|
| 265 |
+
});
|
| 266 |
+
}, observerOptions);
|
| 267 |
+
|
| 268 |
+
// Observe all sections for animation
|
| 269 |
+
document.querySelectorAll('section').forEach(section => {
|
| 270 |
+
section.style.opacity = '0';
|
| 271 |
+
section.style.transform = 'translateY(20px)';
|
| 272 |
+
observer.observe(section);
|
| 273 |
+
});
|
| 274 |
+
});
|
| 275 |
+
|
| 276 |
+
// Initialize Feather Icons
|
| 277 |
+
feather.replace();
|
| 278 |
+
</script>
|
| 279 |
+
</body>
|
| 280 |
</html>
|