toine/mon-site-perso
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
mrtoine 2025-09-12 10:57:48 +02:00
commit b216a187bd
34 changed files with 4829 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

312
Views/about.html Normal file
View file

@ -0,0 +1,312 @@
<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>

58
Views/contact.html Normal file
View file

@ -0,0 +1,58 @@
<section class="section">
<h1>Contactez-moi</h1>
<p>Vous avez un projet en tête ou une question? N'hésitez pas à me contacter en utilisant le formulaire ci-dessous.</p>
</section>
<section class="section contact-page">
<form style="margin-top: 1rem;">
<div style="margin-bottom: 1.5rem;">
<label for="name" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Nom</label>
<input type="text" id="name" name="name" placeholder="Votre nom" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem;">
</div>
<div style="margin-bottom: 1.5rem;">
<label for="email" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Email</label>
<input type="email" id="email" name="email" placeholder="Votre adresse email" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem;">
</div>
<div style="margin-bottom: 1.5rem;">
<label for="subject" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Sujet</label>
<input type="text" id="subject" name="subject" placeholder="Sujet de votre message" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem;">
</div>
<div style="margin-bottom: 1.5rem;">
<label for="message" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Message</label>
<textarea id="message" name="message" rows="5" placeholder="Votre message" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem; resize: vertical;"></textarea>
</div>
<button type="submit" class="btn" style="border: none; cursor: pointer;">Envoyer le message</button>
</form>
</section>
<section class="section">
<h2>Autres moyens de contact</h2>
<div style="display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem;">
<div style="flex: 1 1 250px;">
<h3>Email</h3>
<p><a href="" data-page="externe" data-id="email"></a></p>
</div>
<div style="flex: 1 1 250px;">
<h3>Téléphone</h3>
<p data-id="phone">+33 6 XX XX XX XX</p>
</div>
<div style="flex: 1 1 250px;">
<h3>Réseaux sociaux</h3>
<div style="display: flex; gap: 1rem; margin-top: 0.5rem;">
<a href="#" style="text-decoration: none;" data-page="externe" data-id="linkedin">LinkedIn</a>
<a href="#" style="text-decoration: none;" data-page="externe" data-id="twitter">Twitter</a>
<a href="#" style="text-decoration: none;" data-page="externe" data-id="github">GitHub</a>
</div>
</div>
</div>
</section>
<section class="section">
<h2>Disponibilité</h2>
<p>Je suis actuellement disponible pour des projets freelance à temps partiel.</p>
<p>N'hésitez pas à me contacter pour discuter de votre projet et obtenir un devis personnalisé.</p>
</section>

69
Views/home.html Normal file
View file

@ -0,0 +1,69 @@
<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>

17
Views/index.html Normal file
View file

@ -0,0 +1,17 @@
<section class="section" id="admin-sanctuary">
<h2>Admin</h2>
<p>Ravi de te revoir, <span style="color:var(--success-color)"><?= $admin["username"]; ?></span> !</p>
<div style="display:inline-block;float:right;">
<a href="#" data-page="admin-logout" id="admin" class="btn">Partir</a>
</div>
<div class="info">
Espace d'administration protégé.
</div>
<div class="navbar-admin">
<ul>
<li>Réglages généraux</li>
<li>Les projets</li>
<li>Infos contact</li>
</ul>
</div>
</section>

19
Views/projects.html Normal file
View file

@ -0,0 +1,19 @@
<section class="section">
<h1>Mes projets</h1>
<p>Découvrez une sélection de mes réalisations récentes.</p>
</section>
<div class="projects-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0;"></div>
<section class="section">
<!--<h2>Autres projets</h2>
<p>En plus des projets présentés ci-dessus, j'ai également travaillé sur:</p>
<ul style="margin-left: 1.5rem;">
<li>Refonte UI/UX d'une application web de gestion de projet</li>
<li>Développement d'un tableau de bord administratif</li>
<li>Site web pour un photographe avec galerie dynamique</li>
<li>Blog personnel avec système de gestion de contenu</li>
</ul>-->
<p style="margin-top: 1.5rem;">Vous avez un projet en tête? N'hésitez pas à me contacter pour en discuter!</p>
<a id="contact" class="btn" style="margin-top: 1rem;">Me contacter</a>
</section>