Portfolio avec Docker

This commit is contained in:
2025-12-08 00:06:03 +01:00
commit 52f3de74b7
12 changed files with 1161 additions and 0 deletions

9
Dockerfile Normal file
View File

@@ -0,0 +1,9 @@
FROM nginx:alpine
COPY . /usr/share/nginx/html
EXPOSE 80

BIN
LUCAS.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 KiB

16
docker-compose.yml Normal file
View 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
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

195
index.html Normal file
View 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
View 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
View 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
View 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
View 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

Binary file not shown.

93
web.html Normal file
View 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>