Webleb - UI Elements - Animated Bio / About Page

HTML

CSS

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #1d2b64, #f8cdda); /* Gradient background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    perspective: 1200px; /* Deep perspective for 3D effect */
    overflow: hidden;
}

#app {
    text-align: center;
    max-width: 600px;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth transition */
    padding: 20px;
    background: rgba(255, 255, 255, 0.9); /* Slightly transparent background */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* Box shadow for depth */
}

.profile {
    margin-bottom: 30px;
}

#avatar {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 5px solid #fff; /* White border around the avatar */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow for avatar */
    transition: transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
}

#name {
    font-size: 28px;
    margin: 15px 0;
    color: #333;
    transition: color 0.8s ease-in-out;
}

#bio {
    color: #555;
    margin-bottom: 20px;
    font-size: 16px;
}

.links-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    perspective: 1000px; /* Perspective for depth effect on icons */
}

.link-card {
    background-color: transparent; /* No background */
    border: none; /* Remove any border */
    box-shadow: none; /* Remove shadow */
    padding: 0; /* Remove padding */
    text-decoration: none;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px; /* Adjust size for better visibility */
    height: 80px; /* Adjust size for better visibility */
    position: relative;
}

.link-card img,
.link-card i {
    max-width: 100%; /* Full width of the container */
    max-height: 100%; /* Full height of the container */
    border-radius: 50%; /* Round shape for icons if needed */
    background-color: transparent; /* Ensure no background color */
    transition: transform 0.4s ease-in-out, color 0.4s ease-in-out;
}

.link-card img {
    object-fit: contain; /* Maintain aspect ratio */
}

.link-card:hover {
    transform: rotateY(15deg) rotateX(15deg); /* Added X-axis rotation for more dynamic effect */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Enhanced shadow for depth */
}

.link-card:hover img,
.link-card:hover i {
    transform: scale(1.2); /* Slight scale up on hover */
    color: #007bff; /* Color change on hover */
}

.link-card::before {
    content: ""; /* Removed */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); /* Light overlay */
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.4s ease-in-out;
    z-index: -1;
}

.link-card:hover::before {
    transform: scaleX(1);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

.link-card:hover {
    animation: pulse 1.2s infinite;
}

JS

document.addEventListener('DOMContentLoaded', () => {
    fetch('data.json')
        .then(response => response.json())
        .then(data => {
            // Set profile info
            document.getElementById('avatar').src = data.profile.avatar;
            document.getElementById('name').textContent = data.profile.name;
            document.getElementById('bio').textContent = data.profile.bio;

// Create link icons
            const linksContainer = document.getElementById('links');
            data.links.forEach(link => {
                const linkCard = document.createElement('a');
                linkCard.href = link.url;
                linkCard.className = 'link-card';
                linkCard.target = '_blank';
                linkCard.title = link.title;

if (link.icon.endsWith('.png')) {
                    // Create an img element for PNG icons
                    const img = document.createElement('img');
                    img.src = link.icon;
                    linkCard.appendChild(img);
                } else {
                    // Create a Font Awesome icon element
                    const icon = document.createElement('i');
                    icon.className = `fa ${link.icon}`;
                    linkCard.appendChild(icon);
                }

linksContainer.appendChild(linkCard);
            });

// Add 3D mouse effect
            const app = document.getElementById('app');
            app.addEventListener('mousemove', (event) => {
                const { clientX: x, clientY: y } = event;
                const { offsetWidth: width, offsetHeight: height } = app;
                const rotateX = ((x / width) - 0.5) * 20;
                const rotateY = ((y / height) - 0.5) * -20;
                app.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
            });

app.addEventListener('mouseleave', () => {
                app.style.transform = 'rotateX(0deg) rotateY(0deg)';
            });
        })
        .catch(error => console.error('Error loading data:', error));
});

--------- REMOVE THIS LINE AND ALSO ADD THE BELOW INTO A JSON FILE
             {
    "profile": {
        "avatar": "images/avatar.jpg", 
        "name": "NAME",
        "bio": "ENTER BIO HERE"
    },
    "links": [
        {
            "title": "Website",
            "url": "https://mywebsite.com",
            "icon": "images/globe.png"
        },
        {
            "title": "YouTube",
            "url": "https://youtube.com/mychannel",
            "icon": "images/youtube-icon.png"
        },
        {
            "title": "Instagram",
            "url": "https://instagram.com/myprofile",
            "icon": "images/instagram-icon.png"
        },
        {
            "title": "Snapchat",
            "url": "https://snapchat.com/add/myusername",
            "icon": "images/snapchat.png"
        },
        {
            "title": "TikTok",
            "url": "https://tiktok.com/@myusername",
            "icon": "images/tiktok-icon.png"
        },
        {
            "title": "Facebook",
            "url": "https://facebook.com/myprofile",
            "icon": "images/facebook-icon.png"
        }
    ]
}

Animated Bio / About Page

Recommended