<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@haileevn</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body, html, #app {
margin: 0;
width: 100%;
height: 100%;
}
#app {
overflow: hidden;
color: #ffffff;
font-family: 'Montserrat',
sans-serif;
text-align: center;
text-shadow: 0 0 5px
#ffffff, 0 0 20px #000,
0 0 30px #000;
}
#app h1 {
--fontSize: 60px;
--lineHeight: 80px;
width: auto;
height: calc(2 * var(--lineHeight));
line-height: var(--lineHeight);
margin: calc(50vh - var(--lineHeight)) auto 0;
font-size: var(--fontSize);
}
#app a {
margin-top: 10px;
display: inline-block;
text-decoration: none;
color: #fff;
}
#app canvas {
display: block;
position: fixed;
z-index: -1;
top: 0;
}
/* -- External Social Link CSS Styles -- */
#source-link {
top: 120px;
}
#source-link>i {
color: rgb(94, 106, 210);
}
#yt-link {
top: 65px;
}
#yt-link>i {
color: rgb(219, 31, 106);
}
#Fund-link {
top: 10px;
}
#Fund-link>i {
color: rgb(255, 251, 0);
}
.meta-link {
align-items: center;
backdrop-filter: blur(3px);
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: inline-flex;
gap: 5px;
left: 10px;
padding: 10px 20px;
position: fixed;
text-decoration: none;
transition: background-color 600ms, border-color 600ms;
z-index: 10000;
}
.meta-link:hover {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.meta-link>i,
.meta-link>span {
height: 20px;
line-height: 20px;
}
.meta-link>span {
color: white;
font-family: "Rubik", sans-serif;
transition: color 600ms;
}
</style>
</head>
<body>
<div id="app">
<div id="hero">
<h1>@haileevn</h1>
</div>
</div>
<!--Social Liks codings below-->
<a id="source-link" class="meta-link" href="https://t.me/haileevn" target="_blank">
<i class="fas fa-link"></i>
<span class="roboto-mono">Join my Telegram</span>
</a>
<a id="Fund-link" class="meta-link" href="https://www.buymeacoffee.com/toilahai"
target="_blank">
<i class="fas fa-dollar-sign"></i>
<span> Show your Support..❤</span>
</a>
<script type="module">
import { particlesCursor } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js'
const pc = particlesCursor({
el: document.getElementById('app'),
gpgpuSize: 512,color: 0xfff,
colors: [0x00fffc, 0x00fffc],
coordScale: 0.5,pointSize: 2,
noiseIntensity: 0.005,
noiseTimeCoef: 0.0001,
pointDecay: 0.0025,
sleepRadiusX: 250,
sleepRadiusY: 250,
sleepTimeCoefX: 0.001,
sleepTimeCoefY: 0.002
});
document.addEventListener('mousemove', (event) => {
const mouseX = event.clientX / window.innerWidth;
const mouseY = 1 - event.clientY / window.innerHeight;
pc.uniforms.uMousePos.value.set(mouseX, mouseY);
});
document.body.addEventListener('click', () => {
pc.uniforms.uColor.value.set(Math.random() * 0xffffff);
pc.uniforms.uCoordScale.value = 0.001 + Math.random() * 2;
pc.uniforms.uNoiseIntensity.value = 0.0001 + Math.random() * 0.001;
pc.uniforms.uPointSize.value = 1 + Math.random() * 10;
});
document.body.addEventListener('click', () => {
pc.uniforms.uColor.value.set(Math.random() * 0xffffff);
pc.uniforms.uCoordScale.value = 0.001 + Math.random() * 2;
pc.uniforms.uNoiseIntensity.value = 0.0001 + Math.random() * 0.001;
pc.uniforms.uPointSize.value = 1 + Math.random() * 10;
setTimeout(() => {
pc.uniforms.uColor.value.set(0x000000);
pc.uniforms.uCoordScale.value = 0.001;
pc.uniforms.uNoiseIntensity.value = 0.0001;
pc.uniforms.uPointSize.value = 0;
}, 2000);
});
</script>
</body>
</html>
