mon-site-perso/Views/home.html
2025-09-12 10:57:48 +02:00

69 lines
No EOL
4.3 KiB
HTML

<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>