Message
Uploaded by
luiscolonbusinessemailMessage
Uploaded by
luiscolonbusinessemail<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futuristic BioLink</title>
<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #050817 0%, #0a0e27 50%, #000511
100%);
overflow: hidden;
position: relative;
}
/* Background audio */
.bg-audio {
position: fixed;
top: -9999px;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
/* Audio visualizer */
.audio-visualizer {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
align-items: flex-end;
height: 40px;
gap: 3px;
z-index: 100;
}
.audio-bar {
width: 4px;
background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
animation: soundWave 0.8s infinite ease-in-out alternate;
}
.audio-bar:nth-child(1) { animation-delay: 0.1s; height: 10px; }
.audio-bar:nth-child(2) { animation-delay: 0.2s; height: 20px; }
.audio-bar:nth-child(3) { animation-delay: 0.3s; height: 15px; }
.audio-bar:nth-child(4) { animation-delay: 0.4s; height: 25px; }
.audio-bar:nth-child(5) { animation-delay: 0.5s; height: 18px; }
@keyframes soundWave {
0% { transform: scaleY(0.5); opacity: 0.5; }
100% { transform: scaleY(1); opacity: 0.8; }
}
/* Animated background orbs */
.bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.4;
animation: float 20s infinite ease-in-out;
}
.bg-orb-1 {
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(80, 79, 158, 0.6) 0%, rgba(80,
79, 158, 0) 70%);
top: -150px;
left: -150px;
}
.bg-orb-2 {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(180, 79, 158, 0.4) 0%,
rgba(180, 79, 158, 0) 70%);
bottom: -100px;
right: -100px;
animation-delay: 5s;
}
.bg-orb-3 {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(80, 159, 195, 0.5) 0%,
rgba(80, 159, 195, 0) 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: 10s;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(20px, -30px) scale(1.05);
}
50% {
transform: translate(-20px, 20px) scale(0.95);
}
75% {
transform: translate(30px, 10px) scale(1.02);
}
}
/* Particle system */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.particle {
position: absolute;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
pointer-events: none;
opacity: 0;
animation: particleFloat 15s infinite;
}
@keyframes particleFloat {
0% {
transform: translateY(100vh) scale(0);
opacity: 0;
}
10% {
opacity: 0.3;
}
90% {
opacity: 0.3;
}
100% {
transform: translateY(-100vh) scale(1);
opacity: 0;
}
}
/* Square frosted glass container */
.glass-container {
width: 500px;
height: 500px;
background: rgba(20, 25, 40, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px;
transform-style: preserve-3d;
transition: transform 0.1s ease-out;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
overflow: hidden;
}
/* Profile image with enhanced effects */
.profile-container {
position: relative;
margin-bottom: 15px;
margin-top: 10px;
transform-style: preserve-3d;
perspective: 1000px;
}
.profile-image {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
box-shadow:
0 10px 30px -10px rgba(0, 0, 0, 0.5),
0 0 0 4px rgba(255, 255, 255, 0.05);
transition: transform 0.5s ease;
position: relative;
z-index: 2;
}
/* 3D Profile Ring */
.profile-ring {
position: absolute;
top: -12px;
left: -12px;
width: calc(100% + 24px);
height: calc(100% + 24px);
border-radius: 50%;
border: 3px solid transparent;
border-top-color: rgba(100, 99, 178, 0.8);
border-right-color: rgba(100, 159, 195, 0.8);
border-bottom-color: rgba(180, 99, 158, 0.8);
border-left-color: rgba(100, 159, 195, 0.8);
animation: spin 3s linear infinite;
z-index: 1;
transform: translateZ(20px);
box-shadow:
0 0 15px rgba(100, 99, 178, 0.5),
0 0 30px rgba(100, 159, 195, 0.3),
inset 0 0 15px rgba(180, 99, 158, 0.2);
}
.profile-ring::before {
content: '';
position: absolute;
top: -6px;
left: -6px;
width: calc(100% + 12px);
height: calc(100% + 12px);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
transform: translateZ(-10px);
}
@keyframes spin {
0% { transform: translateZ(20px) rotate(0deg); }
100% { transform: translateZ(20px) rotate(360deg); }
}
.profile-image:hover {
transform: scale(1.05);
}
/* Profile name */
.profile-name {
color: white;
font-size: 22px;
font-weight: 600;
margin-bottom: 5px;
text-align: center;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.profile-bio {
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
font-weight: 400;
text-align: center;
margin-bottom: 15px;
max-width: 80%;
}
/* BioLink items container */
.biolink-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-bottom: 15px;
}
.biolink-item {
width: 100%;
height: 45px;
border-radius: 10px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
font-weight: 500;
font-size: 14px;
background: rgba(30, 35, 50, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.biolink-item i {
margin-right: 8px;
font-size: 16px;
}
.biolink-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0) 0%,
rgba(255,255,255,0.1) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.biolink-item:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 15px 30px -10px rgba(0, 0, 0, 0.5),
0 0 20px rgba(100, 99, 178, 0.4);
}
.biolink-item:hover::before {
opacity: 1;
}
/* Glow effect on hover */
.biolink-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
box-shadow: 0 0 15px rgba(100, 99, 178, 0.5);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.biolink-item:hover::after {
opacity: 1;
}
/* Social icons */
.social-icons {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 5px;
}
.social-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(30, 35, 50, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
text-decoration: none;
}
.social-icon:hover {
background: rgba(40, 45, 60, 0.8);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
color: white;
}
/* Ripple effect */
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: scale(0);
animation: rippleEffect 0.6s ease-out;
pointer-events: none;
}
@keyframes rippleEffect {
to {
transform: scale(4);
opacity: 0;
}
}
/* Responsive design */
@media (max-width: 768px) {
.glass-container {
width: 90vw;
height: auto;
min-height: 500px;
padding: 25px;
}
.profile-image {
width: 100px;
height: 100px;
}
.profile-name {
font-size: 20px;
}
.profile-bio {
font-size: 12px;
}
.biolink-item {
height: 42px;
font-size: 13px;
}
.social-icon {
width: 32px;
height: 32px;
}
}
@media (max-width: 480px) {
.glass-container {
width: 95vw;
padding: 20px;
min-height: 400px;
}
.profile-image {
width: 90px;
height: 90px;
}
.profile-name {
font-size: 18px;
}
.profile-bio {
font-size: 11px;
}
.biolink-item {
height: 40px;
font-size: 12px;
}
.social-icon {
width: 30px;
height: 30px;
}
}
/* 3D cursor effect */
.cursor-glow {
position: fixed;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(100, 99, 178, 0.2) 0%,
rgba(100, 99, 178, 0) 70%);
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 5;
transition: opacity 0.3s ease;
}
/* Custom cursor */
.custom-cursor {
position: fixed;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 1000;
transition: transform 0.1s ease, background 0.2s ease;
mix-blend-mode: difference;
}
.cursor-dot {
position: fixed;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 1001;
}
</style>
</head>
<body>
<!-- Background audio -->
<audio class="bg-audio" autoplay loop>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
type="audio/mpeg">
<!-- Replace with actual 24/7 unstoppable song URL -->
</audio>
<!-- Audio visualizer -->
<div class="audio-visualizer">
<div class="audio-bar"></div>
<div class="audio-bar"></div>
<div class="audio-bar"></div>
<div class="audio-bar"></div>
<div class="audio-bar"></div>
</div>
<!-- Particle system -->
<div class="particles" id="particles"></div>
<!-- Background orbs -->
<div class="bg-orb bg-orb-1"></div>
<div class="bg-orb bg-orb-2"></div>
<div class="bg-orb bg-orb-3"></div>
<!-- Custom cursor -->
<div class="custom-cursor"></div>
<div class="cursor-dot"></div>
<!-- Cursor glow effect -->
<div class="cursor-glow"></div>
<!-- Square frosted glass container -->
<div class="glass-container" id="glassBox">
<!-- Profile image with ring -->
<div class="profile-container">
<div class="profile-ring"></div>
<img src="https://picsum.photos/seed/futuristic-profile/300/300.jpg"
alt="Profile" class="profile-image">
</div>
<!-- Profile info -->
<h2 class="profile-name">Alex Morgan</h2>
<p class="profile-bio">Creative Designer & Developer</p>
<!-- BioLink items -->
<div class="biolink-container">
<a href="https://example.com/one" target="_blank" class="biolink-item">
<i class="fas fa-briefcase"></i> My Portfolio
</a>
<a href="https://example.com/two" target="_blank" class="biolink-item">
<i class="fab fa-instagram"></i> Instagram
</a>
<a href="https://example.com/three" target="_blank" class="biolink-
item">
<i class="fab fa-twitter"></i> Twitter
</a>
</div>
<!-- Social icons -->
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-github"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-icon"><i class="fab fa-dribbble"></i></a>
<a href="#" class="social-icon"><i class="fas fa-envelope"></i></a>
</div>
</div>
<script>
// 3D cursor following effect
const glassBox = document.getElementById('glassBox');
const cursorGlow = document.querySelector('.cursor-glow');
const customCursor = document.querySelector('.custom-cursor');
const cursorDot = document.querySelector('.cursor-dot');
document.addEventListener('mousemove', (e) => {
// Update custom cursor position
customCursor.style.left = e.clientX + 'px';
customCursor.style.top = e.clientY + 'px';
// Update cursor dot position with slight delay
setTimeout(() => {
cursorDot.style.left = e.clientX + 'px';
cursorDot.style.top = e.clientY + 'px';
}, 50);
// Update cursor glow position
cursorGlow.style.left = e.clientX + 'px';
cursorGlow.style.top = e.clientY + 'px';
// Calculate box center
const rect = glassBox.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
// Calculate distance from center
const deltaX = (e.clientX - centerX) / 30;
const deltaY = (e.clientY - centerY) / 30;
// Apply 3D transform
glassBox.style.transform = `
perspective(1000px)
rotateY(${deltaX}deg)
rotateX(${-deltaY}deg)
translateZ(20px)
`;
});
// Reset transform when mouse leaves
document.addEventListener('mouseleave', () => {
glassBox.style.transform = 'perspective(1000px) rotateY(0deg)
rotateX(0deg) translateZ(0)';
cursorGlow.style.opacity = '0';
customCursor.style.opacity = '0';
});
// Show cursor glow when mouse enters
document.addEventListener('mouseenter', () => {
cursorGlow.style.opacity = '1';
customCursor.style.opacity = '1';
});
// Cursor hover effects
const hoverElements = document.querySelectorAll('a, button, .social-icon');
hoverElements.forEach(element => {
element.addEventListener('mouseenter', () => {
customCursor.style.transform = 'translate(-50%, -50%) scale(1.5)';
customCursor.style.background = 'rgba(100, 99, 178, 0.8)';
});
element.addEventListener('mouseleave', () => {
customCursor.style.transform = 'translate(-50%, -50%) scale(1)';
customCursor.style.background = 'rgba(255, 255, 255, 0.7)';
});
});
// Try to play audio (browsers may block autoplay)
const audio = document.querySelector('.bg-audio');
document.addEventListener('click', () => {
if (audio.paused) {
audio.play().catch(e => console.log('Audio play failed:', e));
}
}, { once: true });
// Create particle system
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 30;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// Random size between 2px and 6px
const size = Math.random() * 4 + 2;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// Random position
particle.style.left = `${Math.random() * 100}%`;
// Random animation delay
particle.style.animationDelay = `${Math.random() * 15}s`;
// Random animation duration
particle.style.animationDuration = `${15 + Math.random() * 15}s`;
particlesContainer.appendChild(particle);
}
}
createParticles();
// Add ripple effect to biolink items
const biolinkItems = document.querySelectorAll('.biolink-item');
biolinkItems.forEach(item => {
item.addEventListener('click', function(e) {
const ripple = document.createElement('span');
ripple.classList.add('ripple');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
this.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
});
});
</script>
</body>
</html>