Rdpex/

Bisamaboutme

<div class="container">
    <section class="hero">
        <div class="name-container">
            <span class="static-text">I'm</span>
            <div class="gradient-text-wrapper">
                <span class="gradient-text" data-text="Bisam">Bisam </span>👋
            </div>
        </div>
        <p>Also known as Bisam.</p>
        
        <div class="social-links">
            <div class="social-link-wrapper">
                <a href="https://github.com/DexCodeSX" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
                    </svg>
                </a>
            </div>
        </div>

        <div class="skills">
            <h3>My Skills</h3>
            <div class="skills-grid">
                <div class="skill-card">
                    <div class="skill-header">
                        <div class="skill-name">Lua</div>
                        <div class="skill-percentage">0%</div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress" data-progress="100"></div>
                    </div>
                </div>
                <div class="skill-card">
                    <div class="skill-header">
                        <div class="skill-name">JSON</div>
                        <div class="skill-percentage">0%</div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress" data-progress="100"></div>
                    </div>
                </div>
                <div class="skill-card">
                    <div class="skill-header">
                        <div class="skill-name">UI/UX Design</div>
                        <div class="skill-percentage">0%</div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress" data-progress="100"></div>
                    </div>
                </div>
                <div class="skill-card">
                    <div class="skill-header">
                        <div class="skill-name">Roblox Scripting</div>
                        <div class="skill-percentage">0%</div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress" data-progress="100"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
            document.body.classList.add('loaded');
            initializeAnimations();
        }, 500);
    });

    function initializeAnimations() {
        const canvas = document.getElementById('bgCanvas');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        const particles = Array.from({ length: 20 }, () => ({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            size: Math.random() * 2 + 1,
            speedX: (Math.random() - 0.5) * 0.3,
            speedY: (Math.random() - 0.5) * 0.3,
            opacity: Math.random() * 0.5
        }));

        function drawParticle(x, y, size, opacity) {
            ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(0, 255, 255, ${opacity})`;
            ctx.fill();
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            particles.forEach(particle => {
                particle.x += particle.speedX;
                particle.y += particle.speedY;
                particle.opacity += (Math.random() - 0.5) * 0.01;
                particle.opacity = Math.max(0.1, Math.min(0.5, particle.opacity));

                if (particle.x < 0) particle.x = canvas.width;
                if (particle.x > canvas.width) particle.x = 0;
                if (particle.y < 0) particle.y = canvas.height;
                if (particle.y > canvas.height) particle.y = 0;

                drawParticle(particle.x, particle.y, particle.size, particle.opacity);
            });

            requestAnimationFrame(animate);
        }

        animate();

        function  animateValue(element, start, end, duration) {
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                const value = Math.floor(progress * (end - start) + start);
                element.textContent = `${value}%`;
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }

        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const card = entry.target;
                    const progressBar = card.querySelector('.progress');
                    const percentageElement = card.querySelector('.skill-percentage');
                    
                    progressBar.style.width = progressBar.dataset.progress + '%';
                    percentageElement.classList.add('visible');
                    
                    animateValue(percentageElement, 0, 100, 1500);
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.skill-card').forEach(card => observer.observe(card));
    }
</script>