sermandm/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

propre

Browse Source
This commit is contained in:
sermandm 2025-03-23 14:49:25 +01:00
parent 129504fde8
commit cb3ea0a734
8 changed files with 134 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
about.php
View File

@ -1,36 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Portfolio</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<div id="logo">
<h1>SERMAND Maxim</h1>
</div>
<button id="menu-toggle" aria-expanded="false">&#9776;</button>
<nav id="navbar">
<ul>
<li><a href="./public/index.php">Accueil</a></li>
<li><a href="about.php" class="active">À propos</a></li>
<li><a href="project.php">Projets</a></li>
<li><a href="experience.php">Expériences</a></li>
<li><a href="tech.php">Veilles technologiques</a></li>
<li><a href="contact.php">Contacts</a></li>
</ul>
</nav>
</header>
<section>
<h2>À propos</h2>
<p>Je suis Maxim, un développeur passionné par les nouvelles technologies et le développement d'applications.</p>
</section>
<footer>
<p>&copy; 2025 SERMAND Maxim. Tous droits réservés.</p>
</footer>
<script src="../js/script.js"></script>
</body>
</html>

41
contact.php
View File

@ -1,41 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<div id="logo">
<h1>SERMAND Maxim</h1>
</div>
<button id="menu-toggle" aria-expanded="false">&#9776;</button>
<nav id="navbar">
<ul>
<li><a href="./public/index.php">Accueil</a></li>
<li><a href="about.php">À propos</a></li>
<li><a href="project.php">Projets</a></li>
<li><a href="experience.php">Expériences</a></li>
<li><a href="tech.php">Veilles technologiques</a></li>
<li><a href="contact.php" class="active">Contacts</a></li>
</ul>
</nav>
</header>
<div class="container">
<h2>Contactez-moi</h2>
<form id="contactForm" action="https://formspree.io/f/moqypzra" method="POST">
<input type="text" name="name" placeholder="Votre nom" required>
<input type="email" name="email" placeholder="Votre email" required>
<textarea name="message" placeholder="Votre message" rows="5" required></textarea>
<button type="submit">Envoyer</button>
</form>
<p id="status"></p>
</div>
<footer>
<p>&copy; SERMAND Maxim, 2025. Tous droits réservés.</p>
</footer>
<script src="../js/script.js"></script>
</body>
</html>

35
experience.php
View File

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Portfolio</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<div id="logo">
<h1>SERMAND Maxim</h1>
</div>
<button id="menu-toggle" aria-expanded="false">&#9776;</button>
<nav id="navbar">
<ul>
<li><a href="./public/index.php">Accueil</a></li>
<li><a href="about.php">À propos</a></li>
<li><a href="project.php">Projets</a></li>
<li><a href="experience.php" class="active">Expériences</a></li>
<li><a href="tech.php">Veilles technologiques</a></li>
<li><a href="contact.php">Contacts</a></li>
</ul>
</nav>
</header>
<section>
<h2>Mes Expériences</h2>
</section>
<footer>
<p>&copy; 2025 SERMAND Maxim. Tous droits réservés.</p>
</footer>
<script src="../js/script.js"></script>
</body>
</html>

35
project.php
View File

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Portfolio</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<div id="logo">
<h1>SERMAND Maxim</h1>
</div>
<button id="menu-toggle" aria-expanded="false">&#9776;</button>
<nav id="navbar">
<ul>
<li><a href="./public/index.php">Accueil</a></li>
<li><a href="about.php">À propos</a></li>
<li><a href="project.php" class="active">Projets</a></li>
<li><a href="experience.php">Expériences</a></li>
<li><a href="tech.php">Veilles technologiques</a></li>
<li><a href="contact.php">Contacts</a></li>
</ul>
</nav>
</header>
<section>
<h2>Mes Projets</h2>
</section>
<footer>
<p>&copy; 2025 SERMAND Maxim. Tous droits réservés.</p>
</footer>
<script src="../js/script.js"></script>
</body>
</html>

30
public/asset/script/script.js
View File

@ -8,4 +8,34 @@ document.addEventListener("DOMContentLoaded", () => {
const isExpanded = navbar.classList.contains("active");
menuToggle.setAttribute("aria-expanded", isExpanded.toString());
});
// Thème clair/sombre
const toggleButton = document.getElementById('theme-toggle');
const body = document.body;
const transitionScreen = document.getElementById('theme-transition');
// Appliquer le thème sauvegardé
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
body.classList.add('dark-theme');
toggleButton.textContent = '☀️';
}
toggleButton.addEventListener('click', () => {
// Ajoute le fondu
transitionScreen.classList.add('active');
setTimeout(() => {
// Toggle le thème
body.classList.toggle('dark-theme');
const isDark = body.classList.contains('dark-theme');
toggleButton.textContent = isDark ? '☀️' : '🌙';
localStorage.setItem('theme', isDark ? 'dark' : 'light');
// Retire le fondu après transition
setTimeout(() => {
transitionScreen.classList.remove('active');
}, 400);
}, 100);
});
});

140
public/asset/style/style.css
View File

@ -1,4 +1,6 @@
/* Styles de base */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
/* Reset & base */
* {
margin: 0;
padding: 0;
@ -6,35 +8,40 @@
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
font-family: 'Poppins', sans-serif;
background-color: #f9fafb;
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-x: hidden; /* Empêche le débordement horizontal */
overflow-x: hidden;
transition: background-color 0.3s, color 0.3s;
}
/* Header */
header {
background-color: #333;
background-color: #2c3e50;
color: #fff;
display: flex;
justify-content: space-between; /* Aligne le logo et le menu burger */
justify-content: space-between;
align-items: center;
padding: 1rem;
padding: 1rem 2rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
position: relative;
width: 100%;
z-index: 10;
}
/* Logo */
#logo h1 {
margin-left: 1rem;
text-align: left;
font-size: 1.5rem;
font-size: 1.8rem;
font-weight: 600;
}
/* Bouton menu burger */
/* Menu burger */
#menu-toggle {
display: none;
font-size: 1.8rem;
font-size: 2rem;
background: none;
border: none;
color: #fff;
@ -44,79 +51,136 @@ header {
/* Navbar */
#navbar {
display: flex;
justify-content: center;
align-items: center;
width: auto;
margin-right: 1rem;
}
#navbar ul {
list-style: none;
display: flex;
gap: 2rem;
padding: 0;
margin: 0;
}
#navbar a {
color: #fff;
color: #ecf0f1;
text-decoration: none;
font-weight: bold;
font-weight: 500;
transition: color 0.3s;
}
#navbar a:hover {
text-decoration: underline;
color: #1abc9c;
}
#navbar ul li a.active {
border-bottom: 2px solid #fff; /* Indique la page active */
border-bottom: 2px solid #1abc9c;
}
/* Section principale */
section {
padding: 2rem;
padding: 3rem 2rem;
text-align: center;
flex-grow: 1;
}
/* Footer */
footer {
text-align: center;
padding: 1rem;
background-color: #333;
padding: 1.5rem 2rem;
background-color: #2c3e50;
color: #fff;
width: 100%;
font-size: 0.9rem;
margin-top: auto;
}
/* Navbar en mode mobile */
/* Bouton toggle thème */
#theme-toggle {
background: none;
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
margin-left: 1rem;
}
/* Responsive */
@media (max-width: 980px) {
#menu-toggle {
display: block; /* Affiche le menu burger */
display: block;
}
#navbar {
display: none; /* Cache la navbar par défaut */
display: none;
position: absolute;
top: 60px; /* Position sous le header */
right: 0;
background-color: #333;
padding: 1rem;
flex-direction: column; /* Empile les liens */
width: 200px; /* Largeur du menu */
max-width: 100%; /* Empêche les débordements */
top: 70px;
right: 20px;
background-color: #34495e;
padding: 1.5rem;
flex-direction: column;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
#navbar.active {
display: flex; /* Affiche la navbar lorsqu'elle est activée */
display: flex;
}
#navbar ul {
flex-direction: column; /* Les liens sont empilés */
flex-direction: column;
gap: 1rem;
text-align: right;
}
#navbar a {
text-align: right;
}
}
/* 🌙 Thème sombre */
body.dark-theme {
background-color: #1e1e1e;
color: #e0e0e0;
}
body.dark-theme header,
body.dark-theme footer {
background-color: #121212;
color: #f1f1f1;
}
body.dark-theme #navbar a {
color: #ccc;
}
body.dark-theme #navbar a:hover {
color: #1abc9c;
}
body.dark-theme #navbar ul li a.active {
border-bottom: 2px solid #1abc9c;
}
body.dark-theme #navbar {
background-color: #222;
}
body.dark-theme #theme-toggle {
color: #f1f1f1;
}
/* Couvre-écran de transition de thème */
#theme-transition {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1abc9c;
pointer-events: none;
opacity: 0;
z-index: 9999;
transition: opacity 0.4s ease;
}
#theme-transition.active {
opacity: 1;
}

37
tech.php
View File

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Portfolio</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<div id="logo">
<h1>SERMAND Maxim</h1>
</div>
<button id="menu-toggle" aria-expanded="false">&#9776;</button>
<nav id="navbar">
<ul>
<li><a href="./public/index.php">Accueil</a></li>
<li><a href="about.php">À propos</a></li>
<li><a href="project.php">Projets</a></li>
<li><a href="experience.php">Expériences</a></li>
<li><a href="tech.php" class="active">Veilles technologiques</a></li>
<li><a href="contact.php">Contacts</a></li>
</ul>
</nav>
</header>
<section>
<h2>Veilles technologiques</h2>
<p>Retrouvez ici mes deux veilles technologiques.</p>
</section>
<footer>
<p>&copy; 2025 SERMAND Maxim. Tous droits réservés.</p>
</footer>
<script src="../js/script.js"></script>
</body>
</html>

2
template/home/index.html
View File

@ -17,4 +17,6 @@
<main>
<h1>Bienvenue sur mon portfolio</h1>
<p>Voici la page d'accueil de l'application.</p>
<div id="theme-transition"></div>
</main>