Biolink

Biolink is a customizable and interactive profile card with animations, overlays, and dynamic features.

1. Overlay Animation

const overlay = document.getElementById('overlay');
const profileCard = document.getElementById('profile-card');

// Add event listener to remove overlay on click
overlay.addEventListener('click', () => {
    overlay.style.opacity = 0;
    overlay.style.pointerEvents = 'none';
    profileCard.style.opacity = 1;
});
            

Summary: This code handles the overlay animation. When a user clicks on the overlay, it fades out and reveals the profile card.

2. Dynamic Typing Effect

const text = "Welcome to my Biolink!";
let index = 0;

function typeWriter() {
    if (index < text.length) {
        document.getElementById('typing').textContent += text.charAt(index);
        index++;
        setTimeout(typeWriter, 150);
    }
}
window.onload = typeWriter;
            

Summary: This script creates a dynamic typing effect for the welcome message on the profile card. The text is revealed one character at a time.

3. Random Audio Playback

const audioFiles = ['audio1.mp3', 'audio2.mp3', 'audio3.mp3'];
const audio = new Audio();

function playRandomAudio() {
    const randomIndex = Math.floor(Math.random() * audioFiles.length);
    audio.src = audioFiles[randomIndex];
    audio.play();
}

document.getElementById('play-audio-btn').addEventListener('click', playRandomAudio);
            

Summary: This function selects a random audio file from the list and plays it when the user interacts with the designated button.

4. Profile Card Customization

const profileCard = document.getElementById('profile-card');

// Customize profile image
profileCard.style.backgroundImage = "url('custom-profile.jpg')";

// Update overlay text
document.getElementById('overlay-text').textContent = "Click to Explore!";
            

Summary: This script customizes the profile card by changing the background image and updating the overlay text dynamically.

5. Customizable Links

const links = [
    { name: 'GitHub', url: 'https://github.com/yourprofile' },
    { name: 'Twitter', url: 'https://twitter.com/yourhandle' },
    { name: 'Portfolio', url: 'https://yourportfolio.com' },
];

const linksContainer = document.getElementById('links');
links.forEach(link => {
    const linkElement = document.createElement('a');
    linkElement.href = link.url;
    linkElement.textContent = link.name;
    linkElement.target = '_blank';
    linksContainer.appendChild(linkElement);
});
            

Summary: This code dynamically generates customizable links for social media and portfolios, displaying them on the profile card.