Skip to content
View itxvitao's full-sized avatar
🎯
Focusing
🎯
Focusing
4 followers · 16 following

Block or report itxvitao

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
itxvitao/readme.html 
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio Profissional</title>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #6366f1;
            --secondary: #8b5cf6;
            --background: #0f172a;
            --text: #e2e8f0;
            --accent: #22d3ee;
            --card-bg: rgba(30, 41, 59, 0.8);
        }

        body {
            margin: 0;
            padding: 0;
            background: var(--background);
            font-family: 'Space Grotesk', sans-serif;
            color: var(--text);
            overflow-x: hidden;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem;
        }

        .intro {
            text-align: center;
            margin-bottom: 5rem;
            opacity: 0;
            animation: fadeInUp 1s ease forwards;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .title {
            font-size: 4.5em;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(to right, var(--primary), var(--secondary), var(--accent));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 2px 2px 20px rgba(99, 102, 241, 0.2);
        }

        .subtitle {
            font-size: 2em;
            color: var(--accent);
            font-weight: 500;
            letter-spacing: 1px;
        }

        .skill-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2.5rem;
            perspective: 2000px;
        }

        .skill-card {
            background: var(--card-bg);
            border-radius: 24px;
            padding: 2.5rem;
            position: relative;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            transform: translateY(30px);
        }

        .skill-card.animate {
            opacity: 1;
            transform: translateY(0);
        }

        .skill-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 24px;
            padding: 2px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .skill-card:hover::before {
            opacity: 1;
        }

        .skill-icon {
            font-size: 3.5em;
            margin-bottom: 1.5rem;
            background: linear-gradient(45deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-block;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .skill-card:hover .skill-icon {
            transform: scale(1.2) rotate(10deg);
        }

        .skill-title {
            font-size: 1.8em;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--accent);
        }

        .skill-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .skill-list li {
            margin: 1rem 0;
            padding-left: 1.8rem;
            position: relative;
            font-size: 1.1em;
            opacity: 0.9;
        }

        .skill-list li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: var(--primary);
            font-weight: bold;
            transform: translateX(0);
            transition: transform 0.3s ease;
        }

        .skill-list li:hover::before {
            transform: translateX(5px);
        }

        .progress-container {
            margin-top: 2rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            height: 8px;
            overflow: hidden;
            position: relative;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            width: 0;
            transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .progress-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .cursor-glow {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
            position: fixed;
            pointer-events: none;
            transform: translate(-50%, -50%);
            z-index: 9999;
            transition: opacity 0.3s ease;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="cursor-glow"></div>
    <div class="container">
        <div class="intro">
            <h1 class="title">Desenvolvedor Full Stack</h1>
            <p class="subtitle">Transformando ideias em soluções inovadoras</p>
        </div>

        <div class="skill-grid">
            <div class="skill-card">
                <div class="skill-icon">⚡</div>
                <h2 class="skill-title">JavaScript</h2>
                <ul class="skill-list">
                    <li>Desenvolvimento Full Stack com React & Node.js</li>
                    <li>Arquitetura de Aplicações Modernas</li>
                    <li>Otimização de Performance</li>
                    <li>Integração de APIs RESTful</li>
                </ul>
                <div class="progress-container">
                    <div class="progress-bar" data-progress="95"></div>
                </div>
            </div>

            <div class="skill-card">
                <div class="skill-icon">🎯</div>
                <h2 class="skill-title">MySQL</h2>
                <ul class="skill-list">
                    <li>Design de Banco de Dados Escaláveis</li>
                    <li>Otimização de Queries Complexas</li>
                    <li>Gerenciamento de Performance</li>
                    <li>Implementação de Segurança</li>
                </ul>
                <div class="progress-container">
                    <div class="progress-bar" data-progress="90"></div>
                </div>
            </div>

            <div class="skill-card">
                <div class="skill-icon">🚀</div>
                <h2 class="skill-title">DevOps</h2>
                <ul class="skill-list">
                    <li>Containerização com Docker & Kubernetes</li>
                    <li>Automação de Infraestrutura</li>
                    <li>Pipeline CI/CD</li>
                    <li>Cloud Computing (AWS/Azure)</li>
                </ul>
                <div class="progress-container">
                    <div class="progress-bar" data-progress="85"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Animação das skills cards
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry, index) => {
                if (entry.isIntersecting) {
                    setTimeout(() => {
                        entry.target.classList.add('animate');
                        const progressBar = entry.target.querySelector('.progress-bar');
                        if (progressBar) {
                            progressBar.style.width = `${progressBar.dataset.progress}%`;
                        }
                    }, index * 200);
                }
            });
        }, { threshold: 0.2 });

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

        // Efeito de cursor com glow
        const cursorGlow = document.querySelector('.cursor-glow');
        let cursorTimeout;

        document.addEventListener('mousemove', (e) => {
            cursorGlow.style.opacity = '1';
            cursorGlow.style.left = e.clientX + 'px';
            cursorGlow.style.top = e.clientY + 'px';

            clearTimeout(cursorTimeout);
            cursorTimeout = setTimeout(() => {
                cursorGlow.style.opacity = '0';
            }, 150);
        });

        // Efeito 3D nos cards
        document.querySelectorAll('.skill-card').forEach(card => {
            card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                const centerX = rect.width / 2;
                const centerY = rect.height / 2;
                
                const rotateX = ((y - centerY) / 15) * -1;
                const rotateY = (x - centerX) / 15;
                
                card.style.transform = `
                    perspective(1000px)
                    rotateX(${rotateX}deg)
                    rotateY(${rotateY}deg)
                    scale(1.02)
                `;
            });

            card.addEventListener('mouseleave', () => {
                card.style.transform = 'none';
            });
        });
    </script>
</body>
</html>

Popular repositories Loading

  1. itxvitao itxvitao Public

  2. demo demo Public

    teaching how to use Github

  3. urban-carnival urban-carnival Public

    Uma lista de frases