<section class="section">
    <h1>Bienvenue sur mon portfolio</h1>
    <!--<p>Je suis Anthony VIOLET, développeur web passionné par la création d'expériences utilisateur modernes et intuitives.</p>
    <p>Explorez mes projets et découvrez mes compétences en développement web et design.</p>-->
    <p><a data-page="projects" class="btn">Voir mes projets</a></p>
</section>

<section class="section">
    <h2>Mes compétences</h2>
    <div style="display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.5rem;">
        <div style="background-color: var(--light-color); padding: 1.2rem; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05); flex: 1 1 200px; transition: transform 0.3s ease;">
            <h3 style="color: var(--primary-color);">Python</h3>
            <p style="margin-top: 0.8rem;">NumPy, Pandas, SciKit-Learn</p>
            <div style="height: 6px; background-color: #e0e0e0; margin-top: 1rem; border-radius: 3px; overflow: hidden;">
                <div style="width: 85%; height: 100%; background-color: var(--primary-color);"></div>
            </div>
        </div>
        <div style="background-color: var(--light-color); padding: 1.2rem; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05); flex: 1 1 200px; transition: transform 0.3s ease;">
            <h3 style="color: var(--secondary-color);">JavaScript</h3>
            <p style="margin-top: 0.8rem;">Node.js, React/JS, Angular</p>
            <div style="height: 6px; background-color: #e0e0e0; margin-top: 1rem; border-radius: 3px; overflow: hidden;">
                <div style="width: 75%; height: 100%; background-color: var(--secondary-color);"></div>
            </div>
        </div>
        <div style="background-color: var(--light-color); padding: 1.2rem; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05); flex: 1 1 200px; transition: transform 0.3s ease;">
            <h3 style="color: var(--accent-color);">PHP</h3>
            <p style="margin-top: 0.8rem;">Symfony, Laravel, OOP</p>
            <div style="height: 6px; background-color: #e0e0e0; margin-top: 1rem; border-radius: 3px; overflow: hidden;">
                <div style="width: 80%; height: 100%; background-color: var(--accent-color);"></div>
            </div>
        </div>
    </div>
    <div style="text-align: center; margin-top: 1.5rem;">
        <a id="about" class="btn">Voir toutes mes compétences</a>
    </div>
</section>

<section class="section">
    <h2>Services proposés</h2>
    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem;">
        <div style="flex: 1 1 300px;">
            <h3 style="display: flex; align-items: center;">
                <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--primary-color); color: white; border-radius: 8px; margin-right: 10px;">🌐</span>
                Création de site web
            </h3>
            <p>Des sites web modernes, responsives et optimisés pour tous les appareils.</p>
        </div>
        <div style="flex: 1 1 300px;">
            <h3 style="display: flex; align-items: center;">
                <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--secondary-color); color: white; border-radius: 8px; margin-right: 10px;">📊</span>
                Analyse de données
            </h3>
            <p>Traitement et visualisation de données avec Python (NumPy, Pandas, SciKit-Learn).</p>
        </div>
        <div style="flex: 1 1 300px;">
            <h3 style="display: flex; align-items: center;">
                <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--accent-color); color: white; border-radius: 8px; margin-right: 10px;">💻</span>
                Développement web
            </h3>
            <p>Applications web performantes avec JavaScript (Node.js, React, Angular) et PHP (Symfony).</p>
        </div>
    </div>
</section>

<section class="section">
    <h2>Contactez-moi</h2>
    <p>Vous avez un projet en tête ou une question? N'hésitez pas à me contacter!</p>
    <a id="contact" class="btn">Me contacter</a>
</section>