commit 52f3de74b791566ccab78509813878f7fae927fe Author: Lucas Gomes Tamba Date: Mon Dec 8 00:06:03 2025 +0100 Portfolio avec Docker diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..483c0a0 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,9 @@ + + +FROM nginx:alpine + + +COPY . /usr/share/nginx/html + +EXPOSE 80 + diff --git a/LUCAS.png b/LUCAS.png new file mode 100644 index 0000000..1ab167f Binary files /dev/null and b/LUCAS.png differ diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..742dec6 --- /dev/null +++ b/docker-compose.yml @@ -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 + \ No newline at end of file diff --git a/experimentsaudio.html b/experimentsaudio.html new file mode 100644 index 0000000..663ed51 --- /dev/null +++ b/experimentsaudio.html @@ -0,0 +1,98 @@ + + + + + + Détail des Expérimentations Vidéo & Audio - Lucas G.T. + + + + + + + + + + + + + +
+

Lucas G.T.

+
+ + + +
+
+ + ← Revenir aux Projets + +

Expérimentations Audio & Vidéo

+

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.

+ +

Démonstrations de Création

+

Découvrez ci-dessous les deux clips mis en avant pour cet exemple :

+ +
+ +
+
+ +
+

+ Vidéo 1 : Trailer pour communauté gaming (Logiciel : Capcut). +

+
+ +
+
+ +
+

+ Vidéo 2 : Post-production et édition de dialogue (Logiciel : Audacity). +

+
+ +
+

Technologies Audiovisuelles Utilisées

+
    +
  • Logiciels de Montage : Capcut et Davinci Resolve
    • +
  • Logiciels Audio : Audacity pour l'édition et le mixage
    • +
  • Formats traités : MP4, MOV, WAV, MP3
    • +
+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/gitea_logo.png b/gitea_logo.png new file mode 100644 index 0000000..c14ee21 Binary files /dev/null and b/gitea_logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..550c27f --- /dev/null +++ b/index.html @@ -0,0 +1,195 @@ + + + + + + + Portfolio Lucas - Développeur, Monteur + + + + + + + + + + + +
+

Lucas G.T.

+
+ + +
+
+

Bonjour! Je suis Lucas!

+

Développeur Web, Monteur Vidéo & Editeur Son

+

Je code, j'édite, je crée du matériel audiovisuel.

+ Voir mes Projets + Me Contacter +
+
+ +
+

Qui suis-je ?

+
+ + +
+

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

+ +

Mes Compétences Clés 🚀

+
+
+
    +
  • ✅ HTML5, CSS3, JavaScript, Python
    • +
  • ✅ PHP, MySQL, CMS
    • +
  • ✅ Bootstrap 5
    • +
+
+
+
    +
  • 🎬 Montage Vidéo (Capcut, Davinci Resolve)
    • +
  • 🎧 Edition Sonore (Audacity)
    • +
  • ✨ Conception UX/UI de base
    • +
+
+
+
+ + +
+ Photo de Lucas +
+
+
+ + + + + + + + + +
+
+
+

Mes Réalisations

+
+
+
+
+

Projet PHP/MySQL CMS

+

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.

+ Voir le Projet +
+
+
+
+
+
+

Experimentations Python

+

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.

+ Voir les Démos +
+
+
+
+
+
+

Experiments Audio & Vidéo

+

Exemples de mes travaux en montage vidéo, en création + sonore et en mixage. Mettant en avant ma polyvalence technique et créative.

+ Voir les + Créations +
+
+
+
+
+
+ +
+
+
+

Parlons de votre projet 📧

+
+
+

N'hésitez pas à me contacter directement par email à + gomestambalucas@gmail.com ou via le formulaire ci-dessous.

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/projets.html b/projets.html new file mode 100644 index 0000000..9594e43 --- /dev/null +++ b/projets.html @@ -0,0 +1,69 @@ + + + + + + Détail du Projet CMS - Lucas G.T. + + + + + + + + + + + + + +
+

Lucas G.T.

+
+ + + +
+
+ + ← Revenir en avant + +

Projet Système de Gestion de Contenu (CMS)

+

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.

+ +
+ + + Télécharger le Projet + + +
+ +

Aspects Techniques

+
    +
  • A AJOUTER
    • + +
+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..42db8ae --- /dev/null +++ b/script.js @@ -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) + }) + })() + +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9f6789a --- /dev/null +++ b/style.css @@ -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 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; +} \ No newline at end of file diff --git a/style2.css b/style2.css new file mode 100644 index 0000000..81d9a69 --- /dev/null +++ b/style2.css @@ -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; +} \ No newline at end of file diff --git a/toggle-sound.mp3 b/toggle-sound.mp3 new file mode 100644 index 0000000..b9e0f6f Binary files /dev/null and b/toggle-sound.mp3 differ diff --git a/web.html b/web.html new file mode 100644 index 0000000..b77bbcc --- /dev/null +++ b/web.html @@ -0,0 +1,93 @@ + + + + + + Projets Python - Lucas G.T. + + + + + + + + + + + + + +
+

Lucas G.T.

+
+ + + +
+
+ + ← Revenir aux Projets + +

Projets et Scripts Python

+

Une sélection de mes réalisations Python, mettant en œuvre des concepts de base en algorithmique, sécurité et traitement de données.

+ +

Catalogue des Réalisations

+ +
+ +
+
+
+

Simulateur de Chiffrement César

+

Script de cryptographie basique permettant de chiffrer et déchiffrer des messages à l'aide de l'algorithme de César (décalage alphabétique).

+ Python, Algorithme, Chiffrement + Voir le Code +
+
+
+ +
+
+
+

Gestionnaire de Mots de Passe (CLI)

+

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

+ Python, Sécurité, Hashlib + Voir le Code +
+
+
+ +
+
+
+

TP : Simulation de Filtre Passe-Bas

+

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

+ Python, NumPy, Traitement du Signal + Voir le Code +
+
+
+ +
+
+
+ + + + + + + + + \ No newline at end of file