195 lines
8.5 KiB
HTML
195 lines
8.5 KiB
HTML
<!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> |