Portfolio avec Docker
This commit is contained in:
9
Dockerfile
Normal file
9
Dockerfile
Normal file
@@ -0,0 +1,9 @@
|
||||
|
||||
|
||||
FROM nginx:alpine
|
||||
|
||||
|
||||
COPY . /usr/share/nginx/html
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
16
docker-compose.yml
Normal file
16
docker-compose.yml
Normal file
@@ -0,0 +1,16 @@
|
||||
version: "3"
|
||||
|
||||
services:
|
||||
gitea:
|
||||
image: gitea/gitea:latest
|
||||
container_name: gitea
|
||||
environment:
|
||||
- USER_UID=1000
|
||||
- USER_GID=1000
|
||||
restart: always
|
||||
ports:
|
||||
- "3000:3000"
|
||||
- "222:22"
|
||||
volumes:
|
||||
- ./gitea:/data
|
||||
|
||||
98
experimentsaudio.html
Normal file
98
experimentsaudio.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Détail des Expérimentations Vidéo & Audio - Lucas G.T.</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="50">
|
||||
|
||||
<div id="preloader" class="preloader-active">
|
||||
<h1 class="text-white">Lucas G.T.</h1>
|
||||
</div>
|
||||
|
||||
<header class="fixed-top" id="mainNav">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark py-3" aria-label="Navigation principale">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold fs-4" href="index.html#hero">Lucas G.T.</a>
|
||||
<button id="themeToggle" class="btn btn-outline-light rounded-pill">Dark mode</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="project-detail" class="py-5 mt-5">
|
||||
<div class="container py-4">
|
||||
|
||||
<a href="index.html#projects" class="btn btn-secondary mb-4 rounded-pill">← Revenir aux Projets</a>
|
||||
|
||||
<h1 class="display-3 fw-bold mb-4">Expérimentations Audio & Vidéo</h1>
|
||||
<p class="lead mb-5">Une sélection de mes travaux de montage, d'édition sonore et de création audiovisuelle, démontrant ma polyvalence technique et mon sens du rythme.</p>
|
||||
|
||||
<h2 class="fw-bold mb-4 mt-5">Démonstrations de Création</h2>
|
||||
<p class="lead mb-4">Découvrez ci-dessous les deux clips mis en avant pour cet exemple :</p>
|
||||
|
||||
<div class="row g-4 video-gallery mb-5">
|
||||
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="video-container">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/cH-ysZILju4"
|
||||
title="Démo Vidéo 1 : Montage Minecraft"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<p class="text-center mt-2 fw-light text-muted">
|
||||
Vidéo 1 : Trailer pour communauté gaming (Logiciel : Capcut).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="video-container">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/BZR-1JJQFz4"
|
||||
title="Démo Vidéo 2 : Mixage et Édition Sonore"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
<p class="text-center mt-2 fw-light text-muted">
|
||||
Vidéo 2 : Post-production et édition de dialogue (Logiciel : Audacity).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<h2 class="fw-bold mb-4 mt-5">Technologies Audiovisuelles Utilisées</h2>
|
||||
<ul>
|
||||
<li> Logiciels de Montage : Capcut et Davinci Resolve</li>
|
||||
<li> Logiciels Audio : Audacity pour l'édition et le mixage</li>
|
||||
<li> Formats traités : MP4, MOV, WAV, MP3</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="text-white text-center py-4 bg-secondary">
|
||||
<div class="container">
|
||||
<p class="m-0">© 2025 Lucas Gomes Tamba.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<audio id="soundToggle" src="toggle-sound.mp3"></audio>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
gitea_logo.png
Normal file
BIN
gitea_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
195
index.html
Normal file
195
index.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Portfolio Lucas - Développeur, Monteur</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="50">
|
||||
<div id="preloader" class="preloader-active">
|
||||
<h1 class="text-white">Lucas G.T.</h1>
|
||||
</div>
|
||||
<header class="fixed-top" id="mainNav">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark py-3" aria-label="Navigation principale">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold fs-4" href="#hero">Lucas G.T.</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu"
|
||||
aria-controls="navMenu" aria-expanded="false" aria-label="Basculer la navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div id="navMenu" class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav ms-auto align-items-lg-center">
|
||||
<li class="nav-item"><a class="nav-link" href="#about">À Propos</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#projects">Projets</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||
<li class="nav-item ms-lg-3"><button id="themeToggle" class="btn btn-outline-light rounded-pill">Dark
|
||||
mode</button></li>
|
||||
<li class="nav-item ms-lg-3">
|
||||
<a href="https://gitea.lasallesaintdenis.com/Lucas_Gomes_Tamba" target="_blank" class="btn btn-outline-light rounded-pill py-1 px-3 gitea-link-button" aria-label="Lien vers le profil Gitea">
|
||||
<img src="gitea_logo.png" alt="Logo Gitea" class="gitea-icon-nav">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="hero" class="d-flex align-items-center text-white text-center">
|
||||
<div class="container">
|
||||
<p class="lead mb-2">Bonjour! Je suis Lucas!</p>
|
||||
<h1 class="display-3 fw-bold mb-4">Développeur Web, Monteur Vidéo & Editeur Son</h1>
|
||||
<p class="fs-5 mb-5">Je code, j'édite, je crée du matériel audiovisuel.</p>
|
||||
<a href="#projects" class="btn btn-light btn-lg rounded-pill shadow-lg me-3">Voir mes Projets</a>
|
||||
<a href="#contact" class="btn btn-outline-light btn-lg rounded-pill shadow-lg">Me Contacter</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container py-4">
|
||||
<h2 id="about" class="text-center display-4 fw-bold mb-5">Qui suis-je ?</h2>
|
||||
<div class="row align-items-start">
|
||||
|
||||
|
||||
<div class="col-lg-6">
|
||||
<p class="lead mb-4">
|
||||
Je suis un développeur passionné par l'intersection de la logique du
|
||||
code et de l'expression créative. Fort de mes compétences en PHP/MySQL et en développement front-end
|
||||
(HTML/CSS/JS), je crée des expériences numériques robustes et intuitives. Mon double profil inclut
|
||||
également une expertise dans la production audiovisuelle (montage vidéo, édition son), me permettant
|
||||
d'apporter une perspective unique et complète à vos projets.
|
||||
</p>
|
||||
|
||||
<h3 class="fw-bold mb-3">Mes Compétences Clés 🚀</h3>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<ul class="list-unstyled">
|
||||
<li>✅ HTML5, CSS3, JavaScript, Python</li>
|
||||
<li>✅ PHP, MySQL, CMS</li>
|
||||
<li>✅ Bootstrap 5</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ul class="list-unstyled">
|
||||
<li>🎬 Montage Vidéo (Capcut, Davinci Resolve)</li>
|
||||
<li>🎧 Edition Sonore (Audacity)</li>
|
||||
<li>✨ Conception UX/UI de base</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-6 text-center">
|
||||
<img src="LUCAS.png" alt="Photo de Lucas" class="img-fluid rounded shadow-lg" style="max-width: 520px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="my-5 opacity-0">
|
||||
<section id="projects" class="py-5">
|
||||
<div class="container py-4">
|
||||
<h2 class="text-center display-4 fw-bold mb-5">Mes Réalisations</h2>
|
||||
<div class="row g-4 justify-content-center">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100 shadow-lg border-0 project-card">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h3 class="card-title fw-semibold">Projet PHP/MySQL CMS</h3>
|
||||
<p class="card-text text-muted">Création d'un Système de Gestion de Contenu (CMS) complet.
|
||||
Utilisation de PHP pour la logique back-end et MySQL pour la base de données.</p>
|
||||
<a href="projets.html" class="btn btn-primary mt-auto stretched-link">Voir le Projet</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100 shadow-lg border-0 project-card">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h3 class="card-title fw-semibold">Experimentations Python</h3>
|
||||
<p class="card-text text-muted">Collection de scripts et de mini-applications démontrant la maîtrise des bibliothèques clés, incluant l'automatisation de tâches, la manipulation de données.</p>
|
||||
<a href="web.html" class="btn btn-primary mt-auto stretched-link">Voir les Démos</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card h-100 shadow-lg border-0 project-card">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h3 class="card-title fw-semibold">Experiments Audio & Vidéo</h3>
|
||||
<p class="card-text text-muted">Exemples de mes travaux en montage vidéo, en création
|
||||
sonore et en mixage. Mettant en avant ma polyvalence technique et créative.</p>
|
||||
<a href="experimentsaudio.html" class="btn btn-primary mt-auto stretched-link">Voir les
|
||||
Créations</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="my-5 opacity-0">
|
||||
<section id="contact" class="py-5 bg-dark text-white">
|
||||
<div class="container py-4">
|
||||
<h2 class="text-center display-4 fw-bold mb-5">Parlons de votre projet 📧</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<p class="text-center lead mb-4">N'hésitez pas à me contacter directement par email à
|
||||
gomestambalucas@gmail.com ou via le formulaire ci-dessous.</p>
|
||||
<form action="https://formspree.io/f/xyzrjvyd" method="POST" class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">Nom</label>
|
||||
<input type="text" class="form-control" id="name" name="name" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="subject" class="form-label">Sujet</label>
|
||||
<input type="text" class="form-control" id="subject" name="subject" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="message" class="form-label">Message</label>
|
||||
<textarea class="form-control" id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<div class="col-12 text-center mt-4">
|
||||
<button type="submit" class="btn btn-lg btn-primary rounded-pill px-5">Envoyer le
|
||||
Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="text-white text-center py-4 bg-secondary">
|
||||
<div class="container">
|
||||
<p class="m-0">© 2025 Lucas Gomes Tamba.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<audio id="soundToggle" src="toggle-sound.mp3"></audio>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
69
projets.html
Normal file
69
projets.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Détail du Projet CMS - Lucas G.T.</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="50">
|
||||
|
||||
<div id="preloader" class="preloader-active">
|
||||
<h1 class="text-white">Lucas G.T.</h1>
|
||||
</div>
|
||||
|
||||
<header class="fixed-top" id="mainNav">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark py-3" aria-label="Navigation principale">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold fs-4" href="index.html#hero">Lucas G.T.</a>
|
||||
<button id="themeToggle" class="btn btn-outline-light rounded-pill">Dark mode</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="project-detail" class="py-5 mt-5">
|
||||
<div class="container py-4">
|
||||
|
||||
<a href="index.html#projects" class="btn btn-secondary mb-4 rounded-pill">← Revenir en avant</a>
|
||||
|
||||
<h1 class="display-3 fw-bold mb-4">Projet Système de Gestion de Contenu (CMS)</h1>
|
||||
<p class="lead mb-5">Un CMS complet développé en PHP, MySQL, HTML, CSS et JavaScript, permettant la création, la lecture, la modification et la suppression (CRUD) de contenu dynamique.</p>
|
||||
|
||||
<div class="d-grid gap-3 d-md-flex justify-content-start mb-5">
|
||||
|
||||
<a href="https://gitea.lasallesaintdenis.com/Lucas_Gomes_Tamba/CMS_Simple--xampp-" download class="btn btn-success btn-lg rounded-pill px-5">
|
||||
<i class="fas fa-download me-2"></i> Télécharger le Projet
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 class="fw-bold mb-4 mt-5">Aspects Techniques</h2>
|
||||
<ul>
|
||||
<li> A AJOUTER </li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="text-white text-center py-4 bg-secondary">
|
||||
<div class="container">
|
||||
<p class="m-0">© 2025 Lucas Gomes Tamba.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<audio id="soundToggle" src="toggle-sound.mp3"></audio>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
130
script.js
Normal file
130
script.js
Normal file
@@ -0,0 +1,130 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// ===============================================
|
||||
// 0. GESTION DU PRÉCHARGEUR (SPLASH SCREEN)
|
||||
// ===============================================
|
||||
|
||||
const preloader = document.getElementById('preloader');
|
||||
// const introSound = document.getElementById('soundToggle'); <-- Supprimé, car cette variable est trompeuse ici
|
||||
|
||||
if (preloader) {
|
||||
|
||||
// 1. Jouer le son de l'animation d'introduction
|
||||
// LIGNE(S) RETIRÉE(S) :
|
||||
/*
|
||||
if (introSound) {
|
||||
// Tenter de jouer le son immédiatement (les navigateurs peuvent le bloquer)
|
||||
introSound.play().catch(e => console.log("Intro sound blocked by browser:", e));
|
||||
}
|
||||
*/
|
||||
// Le son ne se jouera plus ici, mais seulement au clic sur le bouton de thème.
|
||||
|
||||
// 2. Définir le délai de 2000 ms (2 secondes) avant la disparition
|
||||
setTimeout(() => {
|
||||
// Retirer la classe active pour déclencher la transition CSS de disparition (opacité: 1 -> 0)
|
||||
preloader.classList.remove('preloader-active');
|
||||
|
||||
// 3. Suppression totale du DOM après la transition de 0.5 seconde
|
||||
setTimeout(() => {
|
||||
preloader.style.display = 'none';
|
||||
}, 500);
|
||||
|
||||
}, 2000); // Durée de l'animation principale avant le fade out
|
||||
|
||||
}
|
||||
|
||||
// ===============================================
|
||||
// 1. GESTION DU MODE SOMBRE (DARK MODE)
|
||||
// ===============================================
|
||||
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const body = document.body;
|
||||
const localStorageKey = 'themePreference';
|
||||
|
||||
/**
|
||||
* Applique la classe .dark-mode au corps et met à jour le texte du bouton.
|
||||
* @param {boolean} isDarkMode - Vrai si le mode sombre doit être activé.
|
||||
*/
|
||||
function applyTheme(isDarkMode) {
|
||||
if (isDarkMode) {
|
||||
body.classList.add('dark-mode');
|
||||
themeToggle.textContent = 'Light mode';
|
||||
themeToggle.classList.remove('btn-outline-light');
|
||||
themeToggle.classList.add('btn-outline-warning');
|
||||
} else {
|
||||
body.classList.remove('dark-mode');
|
||||
themeToggle.textContent = 'Dark mode';
|
||||
themeToggle.classList.remove('btn-outline-warning');
|
||||
themeToggle.classList.add('btn-outline-light');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Charge le thème préféré depuis le localStorage ou détecte la préférence système.
|
||||
*/
|
||||
function loadTheme() {
|
||||
const storedTheme = localStorage.getItem(localStorageKey);
|
||||
let isDarkMode = false;
|
||||
|
||||
if (storedTheme !== null) {
|
||||
isDarkMode = storedTheme === 'dark';
|
||||
} else {
|
||||
isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
|
||||
applyTheme(isDarkMode);
|
||||
}
|
||||
|
||||
// Charger le thème au chargement initial de la page
|
||||
if (themeToggle) {
|
||||
loadTheme();
|
||||
}
|
||||
|
||||
|
||||
// Événement au clic du bouton
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener('click', () => {
|
||||
const isCurrentlyDark = body.classList.contains('dark-mode');
|
||||
const newTheme = isCurrentlyDark ? 'light' : 'dark';
|
||||
|
||||
// 1. Basculer le thème
|
||||
applyTheme(!isCurrentlyDark);
|
||||
|
||||
// 2. Stocker le nouveau choix
|
||||
localStorage.setItem(localStorageKey, newTheme);
|
||||
|
||||
// 3. (Optionnel) Jouer le son si l'élément audio existe
|
||||
const soundToggle = document.getElementById('soundToggle');
|
||||
if (soundToggle) {
|
||||
// C'est l'endroit CORRECT pour jouer le son (uniquement au clic)
|
||||
soundToggle.currentTime = 0;
|
||||
soundToggle.play().catch(e => console.log("Audio play failed:", e));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ===============================================
|
||||
// 2. VALIDATION DES FORMULAIRES BOOTSTRAP
|
||||
// ===============================================
|
||||
|
||||
// Fonction d'auto-exécution pour la validation des formulaires
|
||||
(function () {
|
||||
'use strict'
|
||||
var forms = document.querySelectorAll('.needs-validation')
|
||||
|
||||
Array.prototype.slice.call(forms)
|
||||
.forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
form.classList.add('was-validated')
|
||||
|
||||
}, false)
|
||||
})
|
||||
})()
|
||||
|
||||
});
|
||||
384
style.css
Normal file
384
style.css
Normal file
@@ -0,0 +1,384 @@
|
||||
/* ======================================= */
|
||||
/* 1. RÉINITIALISATION ET STYLES DE BASE */
|
||||
/* ======================================= */
|
||||
|
||||
:root {
|
||||
--primary: #6a11cb;
|
||||
--secondary: #2575fc;
|
||||
--accent: cyan;
|
||||
--highlight: #ffd700;
|
||||
--bg-light: #f4f4f4;
|
||||
--text-dark: #333;
|
||||
--bg-dark-header: linear-gradient(135deg, #1f104c, #03296b);
|
||||
--bg-dark-footer: #1f104c;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
margin: 0;
|
||||
background: var(--bg-light);
|
||||
color: var(--text-dark);
|
||||
transition: background 0.3s, color 0.3s;
|
||||
/* Correction principale pour le HEADER fixe */
|
||||
/* Ajustement basé sur la hauteur de la navbar (environ 56px) + padding (py-3) */
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* 2. NAVIGATION ET EN-TÊTE FIXE */
|
||||
/* ======================================= */
|
||||
|
||||
/* Cibler le nav à l'intérieur du header pour appliquer le dégradé,
|
||||
car le nav a la classe Bootstrap py-3 */
|
||||
header .navbar {
|
||||
background: var(--bg-dark-header);
|
||||
}
|
||||
|
||||
nav a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
nav a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 2px;
|
||||
bottom: -3px;
|
||||
left: 0;
|
||||
background-color: var(--highlight);
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
nav a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: var(--highlight);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* 3. SECTION HÉRO (#hero) */
|
||||
/* ======================================= */
|
||||
|
||||
#hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 6rem 2rem;
|
||||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||||
background-size: 200% 200%;
|
||||
animation: gradientMove 8s ease infinite;
|
||||
color: white;
|
||||
min-height: calc(122vh - 120px); /* 100% de la fenêtre moins la hauteur du header */
|
||||
display: flex; /* Assure que le contenu est centré verticalement (d-flex dans HTML) */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 255, 255, 0.15); /* voile cyan */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes gradientMove {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* 4. TYPOGRAPHIE ET HIERARCHIE */
|
||||
/* ======================================= */
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Styles spécifiques pour les sections */
|
||||
#about {
|
||||
background-color: var(--bg-light); /* Override Bootstrap's bg-light if needed */
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* 5. SECTION PROJETS (#projects) */
|
||||
/* ======================================= */
|
||||
|
||||
#projects {
|
||||
padding-top: 5rem !important; /* Pour compenser le padding-top du body qui masque le titre */
|
||||
padding-bottom: 5rem !important;
|
||||
background: #f9f9f9; /* S'assurer de la couleur de fond */
|
||||
}
|
||||
|
||||
/* Le système de grille Bootstrap gère le display et flex-wrap */
|
||||
/* On cible la classe project-card que vous aviez dans l'HTML */
|
||||
.project-card {
|
||||
/* Utilisation de l'effet glassmorphism sur les cartes */
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
text-align: left; /* Aligne le texte à gauche dans les cartes */
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-8px) scale(1.01); /* Moins agressif que 1.05 */
|
||||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
|
||||
.card a {
|
||||
text-decoration: none;
|
||||
color: var(--secondary);
|
||||
font-weight: 600;
|
||||
display: inline-block; /* Pour un lien plus contenu */
|
||||
}
|
||||
|
||||
/* Supprime le bleu/violet par défaut */
|
||||
.card a:visited {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.card a:hover {
|
||||
color: var(--highlight);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ======================================= */
|
||||
/* 6. BOUTON DU THÈME (#themeToggle) */
|
||||
/* ======================================= */
|
||||
|
||||
#themeToggle {
|
||||
background: #fff;
|
||||
color: var(--secondary);
|
||||
border: none;
|
||||
padding: 0.8rem 1.2rem;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
#themeToggle:hover {
|
||||
background: var(--secondary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* 7. FOOTER */
|
||||
/* ======================================= */
|
||||
|
||||
footer {
|
||||
background: var(--bg-dark-footer);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* Bootstrap's py-4 is used, we keep padding here just in case */
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* 8. DARK MODE (Structure pour JS) */
|
||||
/* ======================================= */
|
||||
|
||||
.dark-mode {
|
||||
--bg-light: #121212;
|
||||
--text-dark: #f0f0f0;
|
||||
--bg-dark-header: linear-gradient(135deg, #0a0a0a, #1f1f1f);
|
||||
--bg-dark-footer: #1f1f1f;
|
||||
}
|
||||
|
||||
.dark-mode .project-card {
|
||||
background: rgba(30, 30, 30, 0.85); /* Fond de carte sombre et transparent */
|
||||
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* 5. SECTION PROJETS (#projects) */
|
||||
/* ======================================= */
|
||||
|
||||
/* ... (autres styles project-card) ... */
|
||||
|
||||
/* Styles pour les liens généraux dans les cartes (sauf les boutons) */
|
||||
/* C'est cette règle qui est trop forte. Nous allons la laisser mais la surclasser. */
|
||||
.card a {
|
||||
text-decoration: none;
|
||||
color: var(--secondary); /* Garde les autres liens bleus si vous en avez */
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 🏆 CORRECTION DÉFINITIVE : Rendre le texte des boutons blanc */
|
||||
/* Cibler le lien <a> AVEC la classe btn-primary */
|
||||
.card a.btn-primary {
|
||||
/* Ceci force le texte à être BLANC. Le !important est souvent nécessaire
|
||||
ici pour écraser la règle générique .card a */
|
||||
color: #fff !important;
|
||||
transition: color 0.3s, background-color 0.3s;
|
||||
}
|
||||
|
||||
/* Et au survol, le texte redevient jaune comme vous le souhaitez */
|
||||
.card a.btn-primary:hover {
|
||||
color: var(--highlight) !important;
|
||||
}
|
||||
|
||||
/* Supprime le bleu/violet par défaut */
|
||||
.card a:visited {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.card a:hover {
|
||||
color: var(--highlight);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.dark-mode .card-text.text-muted {
|
||||
color: #b0b0b0 !important;
|
||||
}
|
||||
|
||||
.dark-mode #about {
|
||||
background-color: #1a1a1a !important;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.dark-mode #projects {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.dark-mode .navbar {
|
||||
background: var(--bg-dark-header);
|
||||
}
|
||||
|
||||
.dark-mode .navbar-brand {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
#preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Utilisation du dégradé du header pour un look cohérent */
|
||||
background: var(--bg-dark-header);
|
||||
|
||||
z-index: 9999; /* Toujours au-dessus de tout */
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
/* Transition douce pour la disparition */
|
||||
transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Classe active (visible au début du chargement) */
|
||||
#preloader.preloader-active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Styles pour le texte/logo sur l'écran de chargement */
|
||||
#preloader h1 {
|
||||
font-size: 3rem;
|
||||
/* Petite animation d'entrée */
|
||||
animation: pulse 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
transition: transform 0.4s ease, box-shadow 0.4s ease;
|
||||
}
|
||||
img:hover {
|
||||
transform: scale(1.05) rotate(-2deg);
|
||||
box-shadow: 0 16px 40px rgba(72, 56, 255, 0.4);
|
||||
}
|
||||
|
||||
.fade-section {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
}
|
||||
|
||||
.fade-section.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ======================================= */
|
||||
/* 9. DÉTAIL DU PROJET ET VIDÉOS */
|
||||
/* ======================================= */
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* Ratio 16:9 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.video-container:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.video-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Style pour le logo Gitea dans la barre de navigation */
|
||||
.gitea-icon-nav {
|
||||
height: 1.5rem; /* Ajuste la hauteur de l'image (environ la taille d'une icône de texte) */
|
||||
width: auto;
|
||||
/* Optionnel : ajoute un filtre pour qu'il soit blanc dans le Dark Mode, si ton logo PNG n'est pas déjà blanc/transparent */
|
||||
/* filter: invert(1); */
|
||||
}
|
||||
/* Ajustement pour que le bouton contienne bien l'image */
|
||||
.gitea-link-button {
|
||||
padding-top: 0.5rem !important;
|
||||
padding-bottom: 0.5rem !important;
|
||||
}
|
||||
167
style2.css
Normal file
167
style2.css
Normal file
@@ -0,0 +1,167 @@
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
margin: 0;
|
||||
background: #f4f4f4;
|
||||
color: #333;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
header {
|
||||
background: linear-gradient(135deg, #1f104c, #03296b);
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#hero {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
background: linear-gradient(135deg, #6a11cb, #2575fc);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
#themeToggle {
|
||||
background: #fff;
|
||||
color: #2575fc;
|
||||
border: none;
|
||||
padding: 0.8rem 1.2rem;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
#themeToggle:hover {
|
||||
background: #2575fc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #ffd700;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#projects {
|
||||
padding: 2rem;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
#projects h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(135deg, #ffffff, #e3e3e3);
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card a {
|
||||
text-decoration: none;
|
||||
color: #2575fc;
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
#projects {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 250px;
|
||||
background: linear-gradient(135deg, #ffffff, #e3e3e3);
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card a {
|
||||
text-decoration: none;
|
||||
color: #2575fc;
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.card:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.card:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.card:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
background: #1f104c;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
BIN
toggle-sound.mp3
Normal file
BIN
toggle-sound.mp3
Normal file
Binary file not shown.
93
web.html
Normal file
93
web.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Projets Python - Lucas G.T.</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="50">
|
||||
|
||||
<div id="preloader" class="preloader-active">
|
||||
<h1 class="text-white">Lucas G.T.</h1>
|
||||
</div>
|
||||
|
||||
<header class="fixed-top" id="mainNav">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark py-3" aria-label="Navigation principale">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold fs-4" href="index.html#hero">Lucas G.T.</a>
|
||||
<button id="themeToggle" class="btn btn-outline-light rounded-pill">Dark mode</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="python-projects" class="py-5 mt-5">
|
||||
<div class="container py-4">
|
||||
|
||||
<a href="index.html#projects" class="btn btn-secondary mb-4 rounded-pill">← Revenir aux Projets</a>
|
||||
|
||||
<h1 class="display-3 fw-bold mb-4">Projets et Scripts Python</h1>
|
||||
<p class="lead mb-5">Une sélection de mes réalisations Python, mettant en œuvre des concepts de base en algorithmique, sécurité et traitement de données.</p>
|
||||
|
||||
<h2 class="fw-bold mb-4 mt-5">Catalogue des Réalisations</h2>
|
||||
|
||||
<div class="row g-4 justify-content-center">
|
||||
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="card h-100 shadow-lg border-0 project-card">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h3 class="card-title fw-semibold">Simulateur de Chiffrement César</h3>
|
||||
<p class="card-text text-muted">Script de cryptographie basique permettant de chiffrer et déchiffrer des messages à l'aide de l'algorithme de César (décalage alphabétique).</p>
|
||||
<span class="badge bg-success mb-3">Python, Algorithme, Chiffrement</span>
|
||||
<a href="https://gitea.lasallesaintdenis.com/Lucas_Gomes_Tamba/python/src/branch/main/" target="_blank" class="btn btn-primary mt-auto stretched-link">Voir le Code <i class="fas fa-code ms-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="card h-100 shadow-lg border-0 project-card">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h3 class="card-title fw-semibold">Gestionnaire de Mots de Passe (CLI)</h3>
|
||||
<p class="card-text text-muted">Programme en ligne de commande pour générer, stocker et récupérer des mots de passe de manière sécurisée (utilisation du module Hashlib et gestion des fichiers).</p>
|
||||
<span class="badge bg-success mb-3">Python, Sécurité, Hashlib</span>
|
||||
<a href="https://gitea.lasallesaintdenis.com/Lucas_Gomes_Tamba/python/src/branch/main/" target="_blank" class="btn btn-primary mt-auto stretched-link">Voir le Code <i class="fas fa-code ms-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="card h-100 shadow-lg border-0 project-card">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h3 class="card-title fw-semibold">TP : Simulation de Filtre Passe-Bas</h3>
|
||||
<p class="card-text text-muted">Travail Pratique montrant la réponse fréquentielle et temporelle d'un Filtre Passe-Bas RC, utilisant des bibliothèques scientifiques comme NumPy ou Matplotlib**.</p>
|
||||
<span class="badge bg-success mb-3">Python, NumPy, Traitement du Signal</span>
|
||||
<a href="https://gitea.lasallesaintdenis.com/Lucas_Gomes_Tamba/python/src/branch/main/" target="_blank" class="btn btn-primary mt-auto stretched-link">Voir le Code <i class="fas fa-code ms-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="text-white text-center py-4 bg-secondary">
|
||||
<div class="container">
|
||||
<p class="m-0">© 2025 Lucas Gomes Tamba.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<audio id="soundToggle" src="toggle-sound.mp3"></audio>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user