{{ define "main" }}
    <div class="hero-container">
        <div class="hero-section">
            <div class="profile-video">
                <video autoplay loop muted playsinline>
                    <source src="{{ "videos/profile-animation.mov" | relURL }}" type="video/quicktime">
                    <!-- Fallback pour les navigateurs qui ne supportent pas le format .mov -->
                    <source src="{{ "videos/profile-animation.mp4" | relURL }}" type="video/mp4">
                </video>
                <p class="intro-text">
                    Hello <span class="waving-hand">👋</span>, je suis <span class="highlight">Baptiste Leforestier</span>
                </p>
            </div>
            <div class="hero-content">
                <h1 class="title-highlight">Tech Lead Systèmes & Réseaux</h1>
                <p class="roles">Je suis aussi <span class="typewriter" data-text='["Web Designer", "Web Développeur", "DevOPS", "Tech enthusiast"]'></span></p>
            </div>
            <div class="button-group">
                <a href="https://www.baptisteleforestier.com/cv.pdf" class="primary-button" download target="_blank" rel="noopener noreferrer">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/>
                    </svg>
                    Voir mon CV
                </a>
                <a href="mailto:contact@baptisteleforestier.fr" class="secondary-button">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
                    </svg>
                    Discutons ensemble
                </a>
            </div>
            <div class="scroll-arrow">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
                </svg>
            </div>
        </div>
    </div>

    <section class="about-section">
        <div class="about-content">
            <p class="about-intro">
                Je suis <span class="highlight">Baptiste Leforestier</span>, couteau suisse technique passionné par les nouvelles technologies. Je suis aussi <span class="highlight">photographe</span> et <span class="highlight">graphiste</span> à mes heures perdues.
            </p>
            
            <p class="tech-description">
                Ce portfolio met en avant mes compétences en webdesign et développement web.<br>
                Il est construit avec les technologies suivantes :
            </p>

            <div class="tech-stack">
                <span class="tech-pill">
                    <svg class="tech-icon html" viewBox="0 0 24 24">
                        <path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"/>
                    </svg>
                    HTML
                </span>
                <span class="tech-pill">
                    <svg class="tech-icon css" viewBox="0 0 24 24">
                        <path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z"/>
                    </svg>
                    CSS
                </span>
                <span class="tech-pill">
                    <svg class="tech-icon js" viewBox="0 0 24 24">
                        <path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/>
                    </svg>
                    JavaScript
                </span>
                <span class="tech-pill">
                    <svg class="tech-icon hugo" viewBox="0 0 24 24">
                        <path d="M11.754 0a3.998 3.998 0 00-2.049.596L3.33 4.532a4.001 4.001 0 00-2.017 3.474v8.47c0 1.452.788 2.79 2.049 3.497l6.704 3.874c.33.19.679.32 1.041.404l-.371-.372a3.999 3.999 0 01-1.149-2.811v-8.47a3.998 3.998 0 012.017-3.474l6.375-3.936a4.001 4.001 0 013.029-.371l.371-.372a4.001 4.001 0 00-1.041-.404L13.803.596A3.998 3.998 0 0011.754 0zM18 8.472l-.563.563c.31.237.574.543.761.886.355.655.355 1.454 0 2.109-.355.655-1.01 1.056-1.72 1.056H14.4v-1.498h2.078c.274 0 .527-.157.647-.404.12-.247.12-.549 0-.796a.733.733 0 00-.647-.404h-.901l-3.516 3.515a.75.75 0 01-1.06 0l-3.516-3.515h-.901a.733.733 0 00-.647.404 1.009 1.009 0 000 .796c.12.247.373.404.647.404h2.078v1.498H6.584c-.71 0-1.365-.401-1.72-1.056a2.017 2.017 0 010-2.109c.187-.343.451-.649.761-.886L5.062 8.472c-.53.4-.96.937-1.224 1.564a3.534 3.534 0 000 3.408c.523.967 1.492 1.565 2.544 1.565h2.018v3.515c0 .414.336.75.75.75h5.7c.414 0 .75-.336.75-.75v-3.515h2.018c1.052 0 2.021-.598 2.544-1.565a3.534 3.534 0 000-3.408c-.264-.627-.694-1.164-1.224-1.564z"/>
                    </svg>
                    Hugo
                </span>
            </div>
        </div>
    </section>

    <section class="skills-section">
        <div class="skills-content">
            <h2>Mes Compétences</h2>
            <div class="skills-container">
                {{ range .Site.Params.skills }}
                <div class="skill-item">
                    <div class="skill-info">
                        <span class="skill-name">{{ .name }}</span>
                        <span class="skill-percentage">{{ .percentage }}%</span>
                    </div>
                    <div class="skill-bar">
                        <div class="skill-progress" data-percentage="{{ .percentage }}"></div>
                    </div>
                </div>
                {{ end }}
            </div>
        </div>
    </section>
{{ end }}