mon-site-perso/Views/about.html

<section class="section">
    <h1>À propos de moi</h1>
    <div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;">
        <div style="flex: 1 1 300px;">
            <p>Je suis Anthony VIOLET, développeur web et designer freelance avec une passion pour la création d'expériences numériques innovantes.</p>
            <p>Avec plusieurs années d'expérience dans le développement web, je combine compétences techniques et sensibilité esthétique pour créer des sites et applications qui se démarquent.</p>
            <p>Mon approche du développement est centrée sur l'utilisateur, avec un focus sur la performance, l'accessibilité et l'esthétique.</p>
        </div>
        <div style="flex: 1 1 300px;">
            <h3>Mon parcours</h3>
            <p>Diplômé en développement web et multimédia, j'ai travaillé sur divers projets allant de sites vitrines à des applications web complexes.</p>
            <p>Ma curiosité et ma volonté d'apprentissage me poussent à me tenir constamment informé des dernières tendances et technologies du web.</p>
        </div>
    </div>
</section>

<section class="section">
    <h2>Mes valeurs</h2>
    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem;">
        <div style="flex: 1 1 200px; background-color: var(--light-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
            <h3>Qualité</h3>
            <p>Je m'engage à livrer un travail soigné et de haute qualité, respectant les standards du web et les bonnes pratiques.</p>
        </div>
        <div style="flex: 1 1 200px; background-color: var(--light-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
            <h3>Innovation</h3>
            <p>Je cherche constamment à explorer de nouvelles solutions et approches pour résoudre les défis de conception et de développement.</p>
        </div>
        <div style="flex: 1 1 200px; background-color: var(--light-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
            <h3>Communication</h3>
            <p>Je privilégie une communication claire et transparente tout au long du processus de création.</p>
        </div>
    </div>
</section>

<section class="section">
    <h2>Mes compétences</h2>
    <div style="margin-top: 2rem;">
        <!-- Python et ses frameworks -->
        <h3 style="color: var(--primary-color)">Python</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 2rem 0;">
            <div style="flex: 1;">
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">NumPy</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 85%; height: 100%; background-color: var(--primary-color);"></div>
                    </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">Pandas</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 90%; height: 100%; background-color: var(--primary-color);"></div>
                    </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">SciKit-Learn</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 75%; height: 100%; background-color: var(--primary-color);"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- JavaScript et ses frameworks -->
        <h3 style="color: var(--secondary-color)">JavaScript</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 2rem 0;">
            <div style="flex: 1;">
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">Node.JS</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 85%; height: 100%; background-color: var(--secondary-color);"></div>
                    </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">React/JS</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 70%; height: 100%; background-color: var(--secondary-color);"></div>
                    </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">Angular</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 60%; height: 100%; background-color: var(--secondary-color);"></div>
                    </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">Laravel</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 50%; height: 100%; background-color: var(--secondary-color);"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- PHP et ses frameworks -->
        <h3 style="color: var(--accent-color)">PHP</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 2rem 0;">
            <div style="flex: 1;">
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">Symfony</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 85%; height: 100%; background-color: var(--accent-color);"></div>
                    </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">Procédural & OO</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 90%; height: 100%; background-color: var(--accent-color);"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- C# -->
        <h3 style="color: var(--success-color)">C#</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 2rem 0;">
            <div style="flex: 1;">
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">Unity</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 65%; height: 100%; background-color: var(--success-color);"></div>
                    </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">Godot</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 80%; height: 100%; background-color: var(--success-color);"></div>
                    </div>
                </div>
                <div style="display: flex; align-items: center; margin-bottom: 0.8rem;">
                    <div style="width: 150px; font-weight: 500;">Logiciels</div>
                    <div style="flex-grow: 1; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden;">
                        <div style="width: 30%; height: 100%; background-color: var(--success-color);"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Langues -->
    <div style="margin-top: 2rem;">
        <h3>Langues</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 2rem; margin: 1rem 0;">
            <div style="flex: 1 1 200px; text-align: center;">
                <h4>Français</h4>
                <div style="position: relative; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(var(--accent-color) 100%, #e0e0e0 0); margin: 10px auto;">
                    <div style="position: absolute; top: 10px; left: 10px; width: 80px; height: 80px; border-radius: 50%; background-color: var(--light-color); display: flex; align-items: center; justify-content: center;">
                        <span style="font-weight: bold; font-size: 1.2rem;">100%</span>
                    </div>
                </div>
                <p>Natif</p>
            </div>
            <div style="flex: 1 1 200px; text-align: center;">
                <h4>Anglais</h4>
                <div style="position: relative; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(var(--accent-color) 30%, #e0e0e0 0); margin: 10px auto;">
                    <div style="position: absolute; top: 10px; left: 10px; width: 80px; height: 80px; border-radius: 50%; background-color: var(--light-color); display: flex; align-items: center; justify-content: center;">
                        <span style="font-weight: bold; font-size: 1.2rem;">30%</span>
                    </div>
                </div>
                <p>Basique</p>
            </div>
            <div style="flex: 1 1 200px; text-align: center;">
                <h4>Espagnol</h4>
                <div style="position: relative; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(var(--accent-color) 70%, #e0e0e0 0); margin: 10px auto;">
                    <div style="position: absolute; top: 10px; left: 10px; width: 80px; height: 80px; border-radius: 50%; background-color: var(--light-color); display: flex; align-items: center; justify-content: center;">
                        <span style="font-weight: bold; font-size: 1.2rem;">70%</span>
                    </div>
                </div>
                <p>Intermédiaire</p>
            </div>
        </div>
    </div>
    
    <!-- Technologies préférées (badges) -->
    <h3 style="margin-top: 2rem;">Technologies utilisées</h3>
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem;">
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">HTML5/CSS3</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">JavaScript</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">Python</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">PHP</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">SQL</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">Node.js</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">React</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">Angular</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">Pandas</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">NumPy</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">Symfony</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">Laravel</div>
        <div style="flex: 0 0 auto; padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border-radius: 20px;">SciKit-Learn</div>
    </div>
</section>

<section class="section">
    <h2>Contactez-moi</h2>
    <p>Vous souhaitez discuter d'un projet ou simplement en savoir plus sur mon travail?</p>
    <a id="contact" class="btn">Envoyez-moi un message</a>
</section>

<section class="section">
    <h2>Dernières expériences professionnelles</h2>
    <div style="position: relative; padding-left: 30px; margin-left: 20px; border-left: 2px solid var(--primary-color);">
        <!-- Expérience TipsIt -->
        <div style="position: relative; margin-bottom: 2.5rem;">
            <div style="position: absolute; width: 20px; height: 20px; background-color: var(--primary-color); border-radius: 50%; left: -41px; top: 0;"></div>
            <h3>Stagiaire chez Tryptik</h3>
            <p style="color: var(--primary-color); margin: 0.3rem 0;">11/2024 - 12/2024</p>
            <p style="margin-top: 0.8rem;">Développement application, maintien ambiance SCRUM, développement web.</p>
            <div style="margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">SCRUM</span>
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Développement web</span>
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Application</span>
            </div>
        </div>
        
        <!-- Collecte verdanges -->
        <div style="position: relative; margin-bottom: 2.5rem;">
            <div style="position: absolute; width: 20px; height: 20px; background-color: var(--primary-color); border-radius: 50%; left: -41px; top: 0;"></div>
            <h3>Collecte vendanges</h3>
            <p style="color: var(--primary-color); margin: 0.3rem 0;">2023</p>
            <p style="margin-top: 0.8rem;">Récolte, ramassage et transport de nature.</p>
            <div style="margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Travail d'équipe</span>
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Rigueur</span>
            </div>
        </div>
        
        <!-- Assistant de vie -->
        <div style="position: relative; margin-bottom: 2.5rem;">
            <div style="position: absolute; width: 20px; height: 20px; background-color: var(--primary-color); border-radius: 50%; left: -41px; top: 0;"></div>
            <h3>Assistant de vie</h3>
            <p style="color: var(--primary-color); margin: 0.3rem 0;">2023</p>
            <p style="margin-top: 0.8rem;">Fourni des assistances aux personnes âgées dans leurs activités quotidiennes, en assurant le service des repas et en proposant des activités.</p>
            <div style="margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Assistance</span>
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Service</span>
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Conseil</span>
            </div>
        </div>
        
        <!-- Divers métiers -->
        <div style="position: relative;">
            <div style="position: absolute; width: 20px; height: 20px; background-color: var(--primary-color); border-radius: 50%; left: -41px; top: 0;"></div>
            <h3>Divers métiers</h3>
            <p style="color: var(--primary-color); margin: 0.3rem 0;">2010 - 2017</p>
            <p style="margin-top: 0.8rem;">Barman, boucher, préparateur de commandes, vendeur en magasin de matériaux.</p>
            <div style="margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Polyvalence</span>
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Adaptabilité</span>
                <span style="background-color: var(--light-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Service client</span>
            </div>
        </div>
    </div>
</section>

<section class="section">
    <h2>Formation</h2>
    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem;">
        <div style="flex: 1 1 300px; background-color: var(--light-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
            <h3>Développeur Gaming</h3>
            <p style="margin-top: 0.5rem; color: var(--primary-color);">Technocité - 2025</p>
            <p style="margin-top: 0.5rem;">Après avoir approfondi mes connaissances en web et applications, ma curiosité m'a poussé à découvrir le développement dans le gaming. J'ai pu apréhender et maitriser le C# et des outils comme Unity..</p>
            <p style="margin-top: 0.5rem;">Formé en tant que développeur gaming, j'ai acquis à maîtriser le C# ainsi que le moteur Unity.</p>
        </div>
        <div style="flex: 1 1 300px; background-color: var(--light-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
            <h3>Développeur Web orientée data analyste</h3>
            <p style="margin-top: 0.5rem; color: var(--primary-color);">Technofutur TIC - 2024</p>
            <p style="margin-top: 0.5rem;">Après environ 15 ans d'apprentissage en autodidacte, j'ai pu approfondir et expérimenter mes connaissances dans le développement web (PHP, POO, CSS, HTML, SQL...).</p>
            <p style="margin-top: 0.5rem;">Formé en tant que développeur web en data analyse, j'ai acquis à maîtriser JS/TS, Python (Pandas, NumPy, Nest.JS, Express, Angular, et Python (Pandas, NumPy, MatPlotLib...)).</p>
        </div>
        <div style="flex: 1 1 300px; background-color: var(--light-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
            <h3>Préparateur de commande en entrepôt</h3>
            <p style="margin-top: 0.5rem; color: var(--primary-color);">AFPA Dijon - France - 2010</p>
        </div>
    </div>
</section>

<section class="section">
    <h2>À propos</h2>
    <div style="margin-top: 1.5rem;">
        <p>Après environ 15 ans d'apprentissage en autodidacte, j'ai pu approfondir et expérimenter mes connaissances dans le développement web (PHP, POO, CSS, HTML, SQL...).</p>
        <p style="margin-top: 1rem;">Formé en tant que développeur web en data analyse, j'ai acquis à maîtriser JS/TS, Python (Pandas, NumPy, Nest.JS, Express, Angular, et Python (Pandas, NumPy, MatPlotLib...)).</p>
    </div>
</section>

<section class="section">
    <h2>Centres d'intérêt</h2>
    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem;">
        <div style="flex: 1 1 200px; text-align: center; padding: 1rem;">
            <div style="width: 60px; height: 60px; background-color: var(--success-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto;">
                <span style="color: white; font-size: 1.5rem;">💻</span>
            </div>
            <h3>Développement et Programmation</h3>
        </div>
        <div style="flex: 1 1 200px; text-align: center; padding: 1rem;">
            <div style="width: 60px; height: 60px; background-color: var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto;">
                <span style="color: white; font-size: 1.5rem;">✈️</span>
            </div>
            <h3>Voyages</h3>
        </div>
        <div style="flex: 1 1 200px; text-align: center; padding: 1rem;">
            <div style="width: 60px; height: 60px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto;">
                <span style="color: white; font-size: 1.5rem;">🎮</span>
            </div>
            <h3>Gaming</h3>
        </div>
        <div style="flex: 1 1 200px; text-align: center; padding: 1rem;">
            <div style="width: 60px; height: 60px; background-color: var(--secondary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto;">
                <span style="color: white; font-size: 1.5rem;">📚</span>
            </div>
            <h3>Lecture de romans</h3>
        </div>
    </div>
</section>