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

NETFLIX LOADING PAGE

HTML, Login Register animated

About Page

HTML

CSS

JS

Recommended

NETFLIX LOADING PAGE

HTML, Login Register animated

About Page

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS