187 lines
10 KiB
HTML
187 lines
10 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">
|
||
|
||
<header class="fixed-top" id="mainNav">
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-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>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<section id="hero" class="d-flex align-items-center text-white text-center"
|
||
style="min-height: 100vh; padding-top: 56px;">
|
||
<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>
|
||
|
||
---
|
||
|
||
<section id="about" class="py-5 bg-light">
|
||
<div class="container py-4">
|
||
<h2 class="text-center display-4 fw-bold mb-5">Qui suis-je ?</h2>
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||
<p class="lead">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>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<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</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 (Premiere Pro)</li>
|
||
<li>🎧 Edition Sonore (Audacity, Pro Tools)</li>
|
||
<li>✨ Conception UX/UI de base</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
---
|
||
|
||
<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 Web</h3>
|
||
<p class="card-text text-muted">Collection de mini-projets et de démonstrations explorant
|
||
les dernières tendances en **HTML5, CSS3 (animations, transitions)** et **JavaScript moderne**.</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>
|
||
|
||
---
|
||
|
||
<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="VOTRE_SCRIPT_DE_TRAITEMENT.php" 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> |