<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>disneyritozx - Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'bg-color': '#0a0a0a',
                        'card-bg': '#151515',
                        'background-color': '#202020',
                        'primary': '#9d4edd',
                        'purple-primary': '#a78bfa',
                        'text': '#e0e0e0',
                        'text-secondary': '#8892b0',
                        'success': '#4ade80',
                        'border': '#2a2a2a',
                    },
                },
            },
        }
    </script>
    <style>
        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.7; }
            100% { transform: scale(1); opacity: 1; }
        }
        @keyframes scrollProjects {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-280px * 4 - 4rem)); }
        }
        @keyframes scrollLeft {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
        @keyframes scrollRight {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(0); }
        }
        .animate-pulse { animation: pulse 2s infinite; }
        .animate-scroll-projects { animation: scrollProjects 30s linear infinite; }
        .animate-scroll-left { animation: scrollLeft 40s linear infinite; }
        .animate-scroll-right { animation: scrollRight 40s linear infinite; }
        
        .fade-left::before,
        .fade-right::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50px;
            pointer-events: none;
            z-index: 1;
        }
        .fade-left::before {
            left: 0;
            background: linear-gradient(to right, #151515, transparent);
        }
        .fade-right::after {
            right: 0;
            background: linear-gradient(to left, #151515, transparent);
        }
        .projects-fade-left::before,
        .projects-fade-right::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50px;
            pointer-events: none;
            z-index: 1;
        }
        .projects-fade-left::before {
            left: 0;
            background: linear-gradient(to right, #151515, transparent);
        }
        .projects-fade-right::after {
            right: 0;
            background: linear-gradient(to left, #151515, transparent);
        }
    </style>
</head>
<body class="bg-bg-color text-text font-['Poppins'] min-h-screen">
    <div class="container mx-auto max-w-7xl p-4 lg:p-8">
        <div class="grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-8">
            <div class="left-column space-y-8">
                <div class="profile-card bg-card-bg rounded-3xl p-6 border border-border shadow-lg">
                    <div class="status text-success text-sm flex items-center gap-2 mb-4">
                        <span class="status-dot w-2 h-2 bg-success rounded-full animate-pulse"></span>
                        Online
                    </div>
                    <div class="profile-header flex flex-col sm:flex-row items-center gap-4 mb-4">
                        <img src="img/file.png" alt="Profile" class="profile-image w-20 h-20 rounded-full object-cover">
                        <div class="profile-info text-center sm:text-left">
                            <h1 class="name text-2xl font-bold font-['Montserrat'] bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">disneyritozx</h1>
                            <p class="role text-text-secondary text-sm flex items-center justify-center sm:justify-start gap-2">
                                <i class="fas fa-terminal"></i>
                                Fullstack Developer
                            </p>
                        </div>
                    </div>

                    <div class="badge-container flex flex-wrap justify-center sm:justify-start gap-2 my-4">
                        <div class="badge flex items-center gap-2 px-3 py-2 bg-background-color rounded-lg text-xs text-text-secondary">
                            <i class="fas fa-globe text-primary"></i>
                            English & Portuguese
                        </div>
                        <div class="badge flex items-center gap-2 px-3 py-2 bg-background-color rounded-lg text-xs text-text-secondary">
                            <i class="fas fa-map-marker-alt text-primary"></i>
                            Brazil
                        </div>
                    </div>

                    <div class="badge-container flex flex-wrap justify-center sm:justify-start gap-2 my-4">
                        <div class="badge flex items-center gap-2 px-3 py-2 bg-background-color rounded-lg text-xs text-text-secondary">
                            <i class="fas fa-laptop-code text-primary"></i>
                            Freelancer
                        </div>
                        <div class="badge flex items-center gap-2 px-3 py-2 bg-background-color rounded-lg text-xs text-text-secondary">
                            <i class="fas fa-calendar text-primary"></i>
                            15y/o
                        </div>
                    </div>

                    <div class="action-buttons grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4">
                        <a href="#" class="action-button bg-primary text-white py-3 px-4 rounded-xl flex items-center justify-center gap-2 font-semibold text-sm uppercase tracking-wide transition-all hover:opacity-90 hover:-translate-y-0.5">
                            <i class="fas fa-envelope"></i>
                            Hire Me
                        </a>
                        <a href="https://github.com/disneyritozx" class="action-button bg-background-color text-text py-3 px-4 rounded-xl flex items-center justify-center gap-2 font-semibold text-sm uppercase tracking-wide transition-all hover:opacity-90 hover:-translate-y-0.5">
                            <i class="fab fa-github"></i>
                            GitHub
                        </a>
                    </div>
                </div>

                <div class="stats-container grid grid-cols-2 sm:grid-cols-3 gap-3">
                    <div class="stat-card bg-card-bg border border-border rounded-xl p-5 text-center transition-all hover:-translate-y-0.5 hover:border-primary">
                        <div class="stat-number text-xl font-bold text-primary flex items-center justify-center gap-1">16<i class="fas fa-plus text-sm opacity-80"></i></div>
                        <div class="stat-label text-xs text-text-secondary bg-background-color px-2 py-1 rounded-md inline-flex items-center gap-1.5"><i class="fa-solid fa-briefcase"></i> Projects</div>
                    </div>
                    <div class="stat-card bg-card-bg border border-border rounded-xl p-5 text-center transition-all hover:-translate-y-0.5 hover:border-primary">
                        <div class="stat-number text-xl font-bold text-primary flex items-center justify-center gap-1">3<i class="fas fa-plus text-sm opacity-80"></i></div>
                        <div class="stat-label text-xs text-text-secondary bg-background-color px-2 py-1 rounded-md inline-flex items-center gap-1.5"><i class="fa-solid fa-user-plus"></i> Clients</div>
                    </div>
                    <div class="stat-card bg-card-bg border border-border rounded-xl p-5 text-center transition-all hover:-translate-y-0.5 hover:border-primary">
                        <div class="stat-number text-xl font-bold text-primary flex items-center justify-center gap-1">2<i class="fas fa-plus text-sm opacity-80"></i></div>
                        <div class="stat-label text-xs text-text-secondary bg-background-color px-2 py-1 rounded-md inline-flex items-center gap-1.5"><i class="fa-solid fa-circle-exclamation"></i> Years</div>
                    </div>
                </div>

                <div class="services-section">
                    <div class="services-container bg-card-bg border border-border rounded-xl p-5 overflow-hidden">
                        <div class="services-title text-lg font-semibold font-['Montserrat'] flex items-center gap-2 mb-2">
                            <i class="fas fa-tools text-primary"></i>
                            Services & Skills
                        </div>
                        <div class="services-subtitle text-sm text-text-secondary mb-4">
                            My services are tailored to your needs and budget
                        </div>
                        <div class="scroll-container overflow-hidden relative fade-left fade-right">
                            <div class="scroll-content flex gap-4 p-2 animate-scroll-left">
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Web Design</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Website Rework</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Custom Web App</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Web Design</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Website Rework</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Custom Web App</div>
                            </div>
                        </div>
                        <div class="scroll-container overflow-hidden relative fade-left fade-right mt-4">
                            <div class="scroll-content flex gap-4 p-2 animate-scroll-right">
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">HTML5/CSS3</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">JavaScript</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">React.js</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Python</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Node.js</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">TailwindCSS</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">HTML5/CSS3</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">JavaScript</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">React.js</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Python</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">Node.js</div>
                                <div class="service-item flex-none px-4 py-2 bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg text-sm">TailwindCSS</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right-column space-y-8">
                <div class="projects-container bg-card-bg border border-border rounded-2xl p-6 flex flex-col max-w-full sm:max-w-[800px] md:max-w-[800px] lg:max-w-[500px] xl:max-w-[800px] mx-auto">
                    <h2 class="section-title text-2xl font-semibold font-['Montserrat'] flex items-center gap-3 mb-4">
                        <i class="fas fa-laptop-code text-primary"></i>
                        Projects
                    </h2>
                    <div class="projects-scroll relative overflow-hidden py-4 -mx-6 projects-fade-left projects-fade-right">
                        <div class="projects-content flex gap-4 px-6 animate-scroll-projects">
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/lumen.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/aethera.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/lumen.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/aethera.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/lumen.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/aethera.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/lumen.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                            <div class="project-card flex-none w-[280px] h-[160px] bg-background-color rounded-xl overflow-hidden relative cursor-pointer transition-transform hover:-translate-y-1">
                                <img src="img/aethera.png" alt="" class="project-image w-full h-full object-cover">
                            </div>
                        </div>
                    </div>
                    <a href="projects.html" class="view-all-button mt-6 py-3 px-6 bg-primary text-white font-semibold rounded-lg flex items-center justify-center gap-2 self-center uppercase tracking-wide transition-all hover:opacity-90 hover:-translate-y-0.5 hover:shadow-lg">
                        <i class="fas fa-th-large"></i>
                        See all
                    </a>
                </div>

                <div class="contact-container bg-card-bg border border-border rounded-2xl p-6 text-center flex flex-col items-center justify-between min-h-[300px] md:min-h-[324px] lg:min-h-[324px]">
                    <i class="fas fa-user-tie text-4xl text-primary mb-4"></i>
                    <h2 class="contact-title text-3xl font-bold font-['Montserrat'] mb-2 bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">Let's Work Together</h2>
                    <p class="contact-subtitle text-text-secondary mb-4">and convert all of your ideas <span class="typewriter text-primary font-bold"></span></p>
                    <div class="social-links flex justify-center gap-4 mt-4">
                        <a href="https://discordapp.com/users/1210770858130415657" class="social-link w-10 h-10 bg-background-color rounded-lg flex items-center justify-center text-text transition-all hover:-translate-y-0.5 hover:bg-primary hover:text-white">
                            <i class="fab fa-discord text-lg"></i>
                        </a>
                        <a href="https://wa.me/+5531990660904" class="social-link w-10 h-10 bg-background-color rounded-lg flex items-center justify-center text-text transition-all hover:-translate-y-0.5 hover:bg-primary hover:text-white">
                            <i class="fa-brands fa-whatsapp"></i>
                        </a>
                        <a href="https://github.com/disneyritozzx" class="social-link w-10 h-10 bg-background-color rounded-lg flex items-center justify-center text-text transition-all hover:-translate-y-0.5 hover:bg-primary hover:text-white">
                            <i class="fab fa-github text-lg"></i>
                        </a>
                    </div>
                    <p class="footer-text text-xs text-text-secondary mt-4">
                        Made with <span class="heart text-primary"><i class="fa-solid fa-heart"></i></span> by <span class="text-primary" style="text-shadow: -1px -2px 19px rgba(255,45,149,1);">disneyritozx</span>
                        <br>
                        © 2024 All rights reserved
                    </p>
                </div>                
            </div>
        </div>
    </div>

    <script>
        class TypeWriter {
            constructor(element, words, wait = 3000) {
                this.element = element;
                this.words = words;
                this.txt = '';
                this.wordIndex = 0;
                this.wait = parseInt(wait, 10); 
                this.type();
                this.isDeleting = false;
            }

            type() {
                const current = this.wordIndex % this.words.length;
                const fullTxt = this.words[current];

                if (this.isDeleting) {
                    this.txt = fullTxt.substring(0, this.txt.length - 1);
                } else {
                    this.txt = fullTxt.substring(0, this.txt.length + 1);
                }

                this.element.innerHTML = `<span class="typing">${this.txt}</span>`;

                let typeSpeed = 100;

                if (this.isDeleting) {
                    typeSpeed = 50; 
                }

                if (!this.isDeleting && this.txt === fullTxt) {
                    typeSpeed = 1000; 
                    this.isDeleting = true;

                    setTimeout(() => {
                        this.element.style.opacity = "0.5";
                    }, typeSpeed / 2);
                } else if (this.isDeleting && this.txt === '') {
                    this.isDeleting = false;
                    this.wordIndex++;
                    typeSpeed = 500;

                    this.element.style.opacity = "1";
                }

                setTimeout(() => this.type(), typeSpeed);
            }
        }

        document.addEventListener('DOMContentLoaded', init);

        function init() {
            const txtElement = document.querySelector('.typewriter');
            const words = [
                'into reality',
                'into success',
                'into digital solutions',
                'into innovation'
            ];
            new TypeWriter(txtElement, words);
        }
    </script>
</body>
</html>