iam-baivab / Portfolio

Portfolio can include a range of projects, assignments, and work experiences that showcase your skills, knowledge, and achievements in the field.

Portfolio

🚀 Explore the Simplicity of HTML, CSS, and a Touch of JS in Building Your Unique Showcase. Let's Elevate Your Portfolio Game Together! 💼❤

Website is Live: baivabsarkar.pages.dev

Key Feature

Welcome Message Pre-Loader

Welcome.Preloader.mp4

Input the <SCRIPT> in index.html:

const messages = ["Hello", "Bonjour", "स्वागत हे", "Ciao", "Olá", "おい", "Hallå", "Guten tag", "Hallo"];
const preloader = document.getElementById('preloader');
const content = document.getElementById('content');

let currentMessage = 0;

function showNextMessage() {
    if (currentMessage < messages.length) {
        const messageElement = document.createElement('div');
        messageElement.className = 'message';
        messageElement.textContent = messages[currentMessage];

        if (currentMessage === 0) {
            messageElement.classList.add('fade-in');
        }

        preloader.innerHTML = '';
        preloader.appendChild(messageElement);

        let displayTime = 150;
        if (currentMessage === 0) {
            displayTime = 800;
        }

        currentMessage++;
        setTimeout(showNextMessage, displayTime);
    } else {
        content.classList.add('show-content');
        content.style.borderBottomLeftRadius = '0';
        content.style.borderBottomRightRadius = '0';
        
        setTimeout(() => {
            preloader.classList.add('slide-out');
            setTimeout(() => {
                preloader.style.display = 'none';
            }, 400);
        }, 400);
    }
}

UI 📈

Landing Page

Projects Page