<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TPM-28 | Portfolio</title>
    <style>
        .spinner {
        width: 80px;
        height: 80px;
        --clr: rgb(127, 207, 255);
        --clr-alpha: rgb(127, 207, 255, .1);
        animation: spinner 2s infinite linear;
        transform-style: preserve-3d;
        }

        .spinner > div {
        background-color: var(--clr-alpha);
        height: 100%;
        position: absolute;
        width: 100%;
        border: 5px solid var(--clr);
        }

        .spinner div:nth-of-type(1) {
        transform: translateZ(-40px) rotateY(180deg);
        }

        .spinner div:nth-of-type(2) {
        transform: rotateY(-270deg) translateX(50%);
        transform-origin: top right;
        }

        .spinner div:nth-of-type(3) {
        transform: rotateY(270deg) translateX(-50%);
        transform-origin: center left;
        }

        .spinner div:nth-of-type(4) {
        transform: rotateX(90deg) translateY(-50%);
        transform-origin: top center;
        }

        .spinner div:nth-of-type(5) {
        transform: rotateX(-90deg) translateY(50%);
        transform-origin: bottom center;
        }

        .spinner div:nth-of-type(6) {
        transform: translateZ(40px);
        }

        @keyframes spinner {
        0% {
            transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
        }

        50% {
            transform: rotate(180deg) rotateX(180deg) rotateY(180deg);
        }

        100% {
            transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
        }
        }
        .tools-container span {
         --color: #00ffff;
         display: inline-block;
         width: 10em;
         height: 2.6em;
         line-height: 2.5em;
         position: relative;
         overflow: hidden;
         z-index: 1;
        }

        .tools-container span:before {
         content: "";
         position: absolute;
         z-index: -1;
         background: var(--color);
         height: 150px;
         width: 212px;
         border-radius: 50%;
        }

        .tools-container span:before {
         top: 100%;
         left: 100%;
         transition: all .7s;
        }

        .tools-container span:hover:before {
         top: -30px;
         left: -30px;
        }

        :root {
            --bg-color: #0f0f0f;
            --text-color: #ffffff;
            --accent-color: #00ff00;
            --card-bg: rgba(26, 26, 26, 0.8);
            --gradient: linear-gradient(135deg, #00ff00, #00ffff);
        }
        body, html {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            color: var(--text-color);
            height: 100%;
            overflow-x: hidden;
        }
        #animated-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: var(--bg-color);
            overflow: hidden;
        }
        .particle {
            position: absolute;
            background: var(--accent-color);
            border-radius: 50%;
            opacity: 0.5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            text-align: center;
            padding: 50px 0;
        }
        h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientFlow 10s ease infinite;
        }
        @keyframes gradientFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .profile-pic {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 3px solid var(--accent-color);
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
        }
        .card {
            background: var(--card-bg);
            padding: 30px;
            margin-bottom: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            backdrop-filter: blur(1px);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.35);
        }
        h2 {
            color: var(--accent-color);
            margin-bottom: 20px;
        }
        .skills-container, .tools-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .skill, .tool {
            background: var(--gradient);
            color: var(--bg-color);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: bold;
            transition: transform 0.3s ease;
        }
        .skill:hover, .tool:hover {
            transform: scale(1.05);
        }
        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        .social-link {
            font-size: 2em;
            color: var(--text-color);
            transition: color 0.3s ease, transform 0.3s ease;
        }
        .social-link:hover {
            color: var(--accent-color);
            transform: scale(1.2);
        }
        .project {
            margin-bottom: 15px;
            padding-left: 20px;
            position: relative;
        }
        .project::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--accent-color);
        }
        .typewriter {
            display: inline-block;
            overflow: hidden;
            border-right: .15em solid var(--accent-color);
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: .20em;
            animation: 
                typing 1s steps(10, end),
                blink-caret .70s step-end infinite;
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--accent-color); }
        }
        .typewriter-container {
            display: inline-block;
            margin: 0 auto;
        }
        .greybg {
            background-color: var(--bg-color);
        }
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<body class="greybg">

    <div class="center" id="loader">
        <div id="spinner" class="spinner">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

    <div id="mainContent" style="display:none;">  
        <div id="animated-bg"></div>
        <div class="container">
            <header>
                <img src="https://i.ibb.co/TYmNzKP/9f148b65a14e502a38a97d9c67f8ff54.webp" alt="TPM-28" class="profile-pic">
                <br>
                <div class="typewriter-container">
                    <h1 class="typewriter typewriter-container">TPM-28</h1>
                </div>
                <p>Développeur C# | Sysadmin | IA</p>
            </header>

            <section class="card">
                <h2>À propos</h2>
                <p>Je suis un passionné de technologie utilisant Debian comme système d'exploitation au quotidien. J'ai également mon propre serveur Proxmox à domicile, me permettant de déployer mes projets.</p>
            </section>

            <section class="card">
                <h2>Compétences</h2>
                <div class="skills-container">
                    <span class="skill">Développement d'APIs</span>
                    <span class="skill">.NET C#</span>
                    <span class="skill">IA de classification</span>
                    <span class="skill">Administration système</span>
                </div>
            </section>

            <section class="card">
                <h2>Projets</h2>
                <div class="project">IA de classification pour déterminer si une image est un mème ou non.</div>
                <div class="project">IA de classification pour identifier les requêtes de type "ask to ask". (Le Faite de demander pour avoir le droit de poser une question : <a href="https://dontasktoask.com/" style="color: var(--accent-color);">dontasktoask.com</a>)</div>
                <div class="project">Bot pour Discord basé sur l'IA.</div>
                <div class="project">Exécution de code dans un environnement sécurisé via une API.</div>
                <div class="project">Développement de mon propre hyperviseur.</div>
                <div class="project">Et bien plus encore...</div>
            </section>

            <section class="card">
                <h2>Outils</h2>
                <div class="tools-container">
                    <span class="tool"><i class="fas fa-ship"></i> Docker</span>
                    <span class="tool"><i class="fas fa-box"></i> LXC</span>
                    <span class="tool"><i class="fas fa-desktop"></i> Guacamole</span>
                    <span class="tool"><i class="fas fa-file-alt"></i> OnlyOffice</span>
                    <span class="tool"><i class="fas fa-terminal"></i> tabby.sh</span>
                    <span class="tool"><i class="fas fa-robot"></i> HuggingFace</span>
                    <span class="tool"><i class="fas fa-brain"></i> Claude.ai</span>
                    <span class="tool"><i class="fas fa-download"></i> Motrix</span>
                    <span class="tool"><i class="fas fa-mobile-alt"></i> Droidian</span>
                    <span class="tool"><i class="fas fa-comment-dots"></i> Ollama</span>
                    <span class="tool"><i class="fas fa-server"></i> Debian</span>
                    <span class="tool"><i class="fas fa-network-wired"></i> Proxmox</span>
                </div>
            </section>

            <div class="social-links">
                <a href="https://x.com/tpm_28" target="_blank" class="social-link" title="Twitter">𝕏</a>
                <a href="https://github.com/felix068" target="_blank" class="social-link" title="GitHub">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                </a>
                <a href="https://huggingface.co/TPM-28" target="_blank" class="social-link" title="Hugging Face">🤗</a>
                <a href="https://discord.com/users/536596446263246851" target="_blank" class="social-link" title="Discord">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
                </a>
            </div>
        </div>
    </div>

    <script>
        function hideSpinner() {
          document.getElementById('spinner').style.display = 'none';
          document.getElementById('mainContent').style.display = 'block';
          document.body.classList.remove('greybg');
          document.getElementById('loader').remove();
        }
        
        window.onload = function() {
          setTimeout(hideSpinner, 2000);
        }
    </script>

    <script>  
    document.addEventListener('DOMContentLoaded', function() {
        // Animation des cartes au défilement
        const cards = document.querySelectorAll('.card');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = 1;
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, { threshold: 0.1 });

        cards.forEach(card => {
            card.style.opacity = 0;
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'opacity 0.8s ease, transform 0.5s ease';
            observer.observe(card);
        });

        // Création du fond animé
        const bg = document.getElementById('animated-bg');
        const particleCount = 50;

        for (let i = 0; i < particleCount; i++) {
            createParticle();
        }

        function createParticle() {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            
            const size = Math.random() * 5 + 1;
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            
            const startPositionX = Math.random() * window.innerWidth;
            const startPositionY = Math.random() * window.innerHeight;
            particle.style.left = `${startPositionX}px`;
            particle.style.top = `${startPositionY}px`;
            
            bg.appendChild(particle);
            
            animateParticle(particle);
        }

        function animateParticle(particle) {
            const duration = Math.random() * 3 + 2;
            const angle = Math.random() * 360;
            const distance = Math.random() * 100 + 50;
            
            particle.animate([
                { transform: 'translate(0, 0)' },
                { transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)` }
            ], {
                duration: duration * 1000,
                iterations: Infinity,
                direction: 'alternate',
                easing: 'ease-in-out'
            });
        }
        

        function typeWriter(element, text, i = 0) {
            if (i < text.length) {
                element.innerHTML += text.charAt(i);
                i++;
                setTimeout(() => typeWriter(element, text, i), 20);
            }
        }

        const aboutSection = document.querySelector('.card p');
        const originalText = aboutSection.innerText;
        aboutSection.innerText = '';

        setTimeout(() => typeWriter(aboutSection, originalText), 2000);
    });
    </script>
</body>