arsene.poulain
/
portfolioarsene
generated from Templates_CodeFirst/templateHtmlCss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modifs bandeau pages + debut page projet
continuous-integration/drone/push Build is passing Details

Browse Source
master
Arsène Poulain 1 month ago
parent 483fd96f47
commit b086c33b95
10 changed files with 450 additions and 335 deletions
Show Stats Download Patch File Download Diff File

83
Apropos.html
Unescape View File

@ -14,93 +14,28 @@
</h1>
</div>
<nav id="bouttons_liens_nav">
<a href="Cursus.html" style="color:red">
<div class="bouttons_liens"> <strong> Scolaire </strong>
<a href="Projets.html" >
<div class="bouttons_liens"> <strong>Projets</strong>
</div>
</a>
<a href="Planning.html" style="color:red">
<div class="bouttons_liens"><strong>Extra-Scolaire</strong>
<a href="Apropos.html" >
<div class="bouttons_liens"><strong>A propos</strong>
</div>
</a>
<a href="Médias/Médias.html" style="color:red">
<div class="bouttons_liens"><strong>Médias</strong>
<a href="Competences.html">
<div class="bouttons_liens"><strong>Compétences</strong>
</div>
</a>
<a href="contact.html" style="color:red">
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong>
</div>
</a>
</nav>
</header>
<div class="contener">
<div id="taille_tableau">
<table class="centrer" style="background-color: black;">
<tr>
<th> Activités </th>
<th> Créneaux </th>
<th> Niveaux </th>
<th> Lieux </th>
<th> illustration </th>
</tr>
<tr>
<td rowspan="2" class="activités"> <strong>Handball</strong></td>
<td> Mer 19H15-20H30 </td>
<td colspan="2"> Pro Gymnase</td>
<td rowspan="2"> <img src="image/handball.webp" class="images_tableau"> </td>
</tr>
<tr>
<td> Ven 20h30 - 22h</td>
<td> novice </td>
<td> Gymnase </td>
</tr>
<tr>
<td class="activités"> <strong> Karaoké</strong></td>
<td> Dim 21h - 00h</td>
<td> The Voice </td>
<td> Lac </td>
<td> <img src="image/karaoke.jpeg" class="images_tableau"></td>
</tr>
<tr>
<td class="activités"> <strong> Cours Kazoo</strong></td>
<td> Lun 22h37- 22h44</td>
<td> orchestre </td>
<td> En ligne </td>
<td> <img src="image/kazoo.jpeg" class="images_tableau"> </td>
</tr>
<tr>
<td rowspan="2" class="activités"> <strong> Vélorail </strong></td>
<td> Mar 12h - 13h</td>
<td> Tour De France</td>
<td> Gour tazenat </td>
<td rowspan="2"> <img src="image/velorail.jpeg" class="images_tableau"> </td>
</tr>
<tr>
<td> Sam 10h - 17h01</td>
<td> Avec Roulette </td>
<td> Sommet Puy de dôme</td>
</tr>
</table>
</div>
<div id="legende_tableau">
<figcaption>
<p>
J'effectue du hand depuis 10 ans maintenant. Cepandant j'ai du arreter cette année à cause des études.<br>
Je m'entraine au karaoké de temps en temps avec des amis un peu spéciales..<br>
Je prends aussi des cours de kazoo durant une courte période les lundi. C'est un instrument simple qui ne demande pas beaucoup d'entrainements...<br>
J'aime sortir avec des amis pour faire du vélorail, plusieurs fois par semaine et avec de differents niveaux.
</p>
</figcaption>
</div>
</div>
<br>
<div>
<a href="index.html" > Revenir à la page d'accueil. </a>
</div>
<footer class="basPage">
<p>
Poulain Arsène, 1ère année, G5 | 6 Septembre 2024
</p>
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</footer>
</body>
</html>

42
Competences.html
Unescape View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link rel="stylesheet" href="site.css">
</head>
<body>
<div class="wrapper">
<header class="bandeau">
<div class="photo_titre_bandeau">
<img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil">
<h1 style="margin-left: 10px; margin-top: 40px; margin-right : 10px; text-decoration: underline;">
<a href="index.html">Poulain <br> Arsène </a>
</h1>
</div>
<nav id="bouttons_liens_nav">
<a href="Projets.html" >
<div class="bouttons_liens"> <strong>Projets</strong>
</div>
</a>
<a href="Apropos.html" >
<div class="bouttons_liens"><strong>A propos</strong>
</div>
</a>
<a href="Competences.html">
<div class="bouttons_liens"><strong>Compétences</strong>
</div>
</a>
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong>
</div>
</a>
</nav>
</header>
<footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</footer>
</body>
</html>

110
Projets.html
Unescape View File

@ -1,7 +1,8 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Planning</title>
<title>Projets</title>
<link rel="stylesheet" href="site.css">
</head>
<body>
@ -32,14 +33,113 @@
</nav>
</header>
<div class="background">
<div class="background"></div>
<section class="container">
<h1 style="text-align: center;">Mes Projets</h1>
<br>
<!-- Projets personnels -->
<h2 class="section-title">Personnels</h2>
<div class="projects-grid">
<div class="project-card">
<button class="close-btn" style="display:none;" aria-label="Fermer">&times;</button>
<h3><span style="color:red;">We</span>Tube</h3>
<p>Appuyer pour en savoir plus</p>
</div>
</div>
<!-- Projets universitaires -->
<h2 class="section-title">Universitaires</h2>
<div class="projects-grid">
<div class="project-card">
<button class="close-btn" style="display:none;" aria-label="Fermer">&times;</button>
<h3>Projet 1</h3>
<p>Appuyer pour en savoir plus</p>
</div>
<div class="project-card">
<button class="close-btn" style="display:none;" aria-label="Fermer">&times;</button>
<h3>Projet 2</h3>
<p>Appuyer pour en savoir plus</p>
</div>
</div>
</section>
<footer class="basPage">
<p>
Poulain Arsène, 1ère année, G5 | 6 Septembre 2024
</p>
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</footer>
<script>
// Texte par défaut et texte détaillé pour chaque projet
const details = {
"WeTube": "<strong>WeTube</strong> est un projet personnel que j'ai commencé lors de mon année de Terminale. " +
"Il s'agit d'une plateforme de partage de vidéos, inspirée de YouTube et d'Instagram.<br><br>" +
"J'ai eu l'idée de développer ce projet principalement pour apprendre et perfectionner mes compétences " +
"en développement web, notamment en HTML, CSS et PHP. Je gère également la base de données locale du site.<br><br>" +
"Le site n'est pas encore terminé : certaines fonctionnalités manquent et, comme j'ai commencé ce projet au lycée, " +
"je n'ai pas pu récupérer toutes les données. De plus, avec mes études, j'ai mis ce projet de côté pour le moment.<br><br>" +
"<em>Il devrait bientôt être disponible sur mon <u><a href='https://github.com/ArsenePoulain' target='_blank'>GitHub</a></u>.</em>",
"Projet 1": "Projet universitaire 1 : <strong>description détaillée ici</strong>.<br><ul><li>Point 1</li><li>Point 2</li></ul>",
"Projet 2": "Projet universitaire 2 : description détaillée ici.<br><img src='image/exemple.png' alt='exemple' style='max-width:100px;'>"
};
document.querySelectorAll('.project-card').forEach(card => {
const closeBtn = card.querySelector('.close-btn');
// Fermer la carte avec la croix
closeBtn.addEventListener('click', (e) => {
e.stopPropagation();
card.classList.remove('expanded');
card.querySelector('p').textContent = "Appuyer pour en savoir plus";
closeBtn.style.display = 'none';
// Réaffiche toutes les cartes
document.querySelectorAll('.project-card').forEach(c => c.style.visibility = 'visible');
});
card.addEventListener('click', (e) => {
// Si on clique sur la croix, ne rien faire ici
if (e.target.classList.contains('close-btn')) return;
// Retire 'expanded' de toutes les cartes sauf celle cliquée
document.querySelectorAll('.project-card.expanded').forEach(expandedCard => {
if (expandedCard !== card) {
expandedCard.classList.remove('expanded');
const p = expandedCard.querySelector('p');
p.textContent = "Appuyer pour en savoir plus";
const btn = expandedCard.querySelector('.close-btn');
btn.style.display = 'none';
}
});
// Bascule 'expanded' sur la carte cliquée
card.classList.toggle('expanded');
const h3 = card.querySelector('h3');
const p = card.querySelector('p');
if (card.classList.contains('expanded')) {
// Met le texte détaillé
if (details[h3.textContent]) {
p.innerHTML = details[h3.textContent];
} else {
p.textContent = "Description détaillée du projet.";
}
closeBtn.style.display = 'block';
// Masque les autres cartes
document.querySelectorAll('.project-card').forEach(otherCard => {
if (otherCard !== card) {
otherCard.style.visibility = 'hidden';
}
});
} else {
// Remet le texte par défaut
p.textContent = "Appuyer pour en savoir plus";
closeBtn.style.display = 'none';
// Réaffiche toutes les cartes
document.querySelectorAll('.project-card').forEach(c => c.style.visibility = 'visible');
}
});
});
</script>
</body>
</html>

2
README.md
Unescape View File

@ -2,4 +2,4 @@
# portfolioarsene
Bienvenue sur mon portfolio.
aaa

93
contact.html
Unescape View File

@ -2,10 +2,11 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>accueil</title>
<title>Contact</title>
<link rel="stylesheet" href="site.css">
</head>
<body>
<div class="wrapper">
<header class="bandeau">
<div class="photo_titre_bandeau">
<img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil">
@ -14,83 +15,53 @@
</h1>
</div>
<nav id="bouttons_liens_nav">
<a href="Cursus.html" style="color:red">
<div class="bouttons_liens"> <strong> Scolaire </strong>
<a href="Projets.html" >
<div class="bouttons_liens"> <strong>Projets</strong>
</div>
</a>
<a href="Planning.html" style="color:red">
<div class="bouttons_liens"><strong>Extra-Scolaire</strong>
<a href="Apropos.html" >
<div class="bouttons_liens"><strong>A propos</strong>
</div>
</a>
<a href="Médias/Médias.html" style="color:red">
<div class="bouttons_liens"><strong>Médias</strong>
<a href="Competences.html">
<div class="bouttons_liens"><strong>Compétences</strong>
</div>
</a>
<a href="contact.html" style="color:red">
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong>
</div>
</a>
</nav>
</header>
<div>
<h1>Contact</h1>
</div>
<div>
<form method="POST" action="contact.php">
<div>
<label for="nomVisiteur">Nom</label>
<input type="text" name="nomVisiteur" id="nomVisiteur" required/>
</div>
<div>
<label for="MailVisiteur">Mail</label>
<input type="email" name="MailVisiteur" id="MailVisiteur" required/>
</div>
<div>
<label for="TelVisiteur">Tel</label>
<input type="tel" name="TelVisiteur" id="TelVisiteur"/>
</div>
<div>
<label for="Motif">Motif de contact</label>
<select name="Motif" id="Motif">
<option value="Recrutement">Recrutement</option>
<option value="Renseignement">Renseignement</option>
<option value="Autre">Autre</option>
<option value="Non Précisé" selected>Non précisé</option>
</select>
</div>
<div>
<label for="Date">Date de Rencontre</label>
<input type="datetime-local" name="Date" id="Date"/>
</div>
<div>
<label for="Demande">1ère demande ?</label>
<input type="Radio" name="Demande" id="Demande"/>
<label for="DemandeNn">Non</label>
<input type="Radio" name="DemandeNn" id="DemandeNn"/>
</div>
<div>
<label for="TexteVisiteur">Zone de texte visiteur</label>
<input type="textarea" name="TexteVisiteur" id="TexteVisiteur" required/>
<div class="background">
</div>
<div>
<label for="Submit">Soumettre</label>
<input type="Submit" name="Submit" id="Submit"/>
<label for="Reset">Réinitialiser</label>
<input type="Reset" name="Reset" id="Reset"/>
<section class="container">
<h1 style="text-align: center;">Contactez-moi</h1>
<div class="contact-section">
<p>Vous pouvez me contacter via les informations ci-dessous :</p>
<ul>
<li>Email : <a href="mailto:arsenepoulain6@gmail.com">arsenepoulain6@gmail.com</a></li>
<li>Téléphone : +33 6 82 59 63 94</li>
</ul>
<h2 class="cv-title">Mon CV</h2>
<div class="cv-container">
<!-- Le lien doit inclure l'image comme enfant direct -->
<a href="cv/cv_alternance.pdf" download="cv_alternance.pdf">
<img src="cv/cv.png" alt="Aperçu du CV" class="cv-preview">
</a>
<p class="cv-download-text">Cliquez sur l'image pour télécharger mon CV.</p>
</div>
</form>
</div>
<br>
<div>
<a href="index.html" > Revenir à la page d'accueil. </a>
</section>
</div>
<footer class="basPage">
<p>
Poulain Arsène, 1ère année, G5 | 6 Septembre 2024
</p>
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</footer>
</body>
</html>

102
contact.php
Unescape View File

@ -2,10 +2,11 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>accueil</title>
<title>Contact</title>
<link rel="stylesheet" href="site.css">
</head>
<body>
<div class="wrapper">
<header class="bandeau">
<div class="photo_titre_bandeau">
<img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil">
@ -14,85 +15,42 @@
</h1>
</div>
<nav id="bouttons_liens_nav">
<a href="Cursus.html" style="color:red">
<div class="bouttons_liens"> <strong> Scolaire </strong>
</div>
<a href="Projets.html">
<div class="bouttons_liens"><strong>Projets</strong></div>
</a>
<a href="Planning.html" style="color:red">
<div class="bouttons_liens"><strong>Extra-Scolaire</strong>
</div>
<a href="Apropos.html">
<div class="bouttons_liens"><strong>A propos</strong></div>
</a>
<a href="Médias/Médias.html" style="color:red">
<div class="bouttons_liens"><strong>Médias</strong>
</div>
<a href="Competences.html">
<div class="bouttons_liens"><strong>Compétences</strong></div>
</a>
<a href="contact.html" style="color:red">
<div class="bouttons_liens"><strong>Contact</strong>
</div>
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong></div>
</a>
</nav>
</header>
<?php
if(empty($_POST['nomVisiteur'])) {
echo '<p class="erreur">Le nom doit être renseigné !</p>';
}
else {
echo 'Bonjour ' . $_POST['nomVisiteur'] . ' ! ';
}
?>
<br>
<?php
if(empty($_POST['MailVisiteur'])) {
echo '<p class="erreur">Le mail doit être renseigné !</p>';
}
else {
echo 'Votre adresse mail : ' . $_POST['MailVisiteur'];
}
?>
<br>
<?php
if(isset($_POST['TelVisiteur'])) {
echo 'Votre Tel : ' . $_POST['TelVisiteur'];
}
?>
<br>
<?php
if(isset($_POST['Motif'])) {
echo 'Le motif de votre demande : ' . $_POST['Motif'];
}
?>
<br>
<?php
if(isset($_POST['Date'])) {
echo 'La date de votre demande : ' . $_POST['Date'];
}
?>
<br>
<?php
if(isset($_POST['Demande'])) {
echo '1ère demande : ' . $_POST['Demande'];
}
?>
<br>
<?php
if(isset($_POST['DemandeNn'])) {
echo 'Motif demande : ' . $_POST['DemandeNn'];
}
?>
<br>
<?php
if(empty($_POST['TexteVisiteur'])) {
echo '<p class="erreur">Le texte doit être renseigné !</p>';
}
else {
echo 'Votre texte :' . $_POST['TexteVisiteur'];
}
?>
<section class="container">
<h1 style="text-align: center;">Contactez-moi</h1>
<div class="contact-section">
<p>Vous pouvez me contacter via les informations ci-dessous :</p>
<ul>
<li>Email : <a href="mailto:arsene.poulain@example.com">arsene.poulain@example.com</a></li>
<li>Téléphone : +33 6 12 34 56 78</li>
</ul>
<h2>Mon CV</h2>
<div class="cv-container">
<a href="cv/arsene_poulain_cv.pdf" download>
<img src="cv/preview_cv.png" alt="Aperçu du CV" class="cv-preview">
</a>
<p>Cliquez sur l'image pour télécharger mon CV.</p>
</div>
</div>
</section>
</div>
<footer class="basPage">
<p>
Poulain Arsène, 1ère année, G5 | 6 Septembre 2024
</p>
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>
</footer>
</body>
</html>

BIN
cv/cv.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

BIN
cv/cv_alternance.pdf
View File

Binary file not shown.

32
mycoolstyle.css
Unescape View File

@ -1,32 +0,0 @@
body {
padding-left: 11em;
font-family: Georgia, 'Georgia', "Times New Roman",
Times, serif;
color: darksalmon;
background-color: rgb(39, 39, 84) }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid darksalmon }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: darkblue }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }

155
site.css
Unescape View File

@ -47,7 +47,7 @@ a{
}
a:hover:visited{
color: rgb(255, 166, 0);
color: rgb(24, 24, 24);
}
.centrer{
@ -97,6 +97,45 @@ body {
z-index: -2; /* met bien l'image en fond derrière tout */
}
.cv-container {
text-align: center;
margin-top: 20px;
}
.cv-preview {
width: 200px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.cv-preview:hover {
transform: scale(1.5); /* Agrandit l'image à 1.5x sa taille */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.contact-section a {
color: white;
text-decoration: none;
}
.contact-section a:hover {
text-decoration: underline; /* Ajoute un soulignement au survol */
}
/* Centrer le titre "Mon CV" */
.cv-title {
text-align: center;
margin-bottom: 20px;
}
/* Descendre le texte sous l'image */
.cv-download-text {
text-align: center;
margin-top: 10px;
font-size: 14px;
color: #ffffff;
}
.background::after {
content: "";
position: absolute;
@ -150,7 +189,6 @@ body {
border-right: 2px solid black;
}
.container{
margin-left:8px;
@ -189,6 +227,67 @@ body {
padding : 15px;
}
/* Section des projets */
.section-title {
text-align: center;
margin: 20px 0;
font-size: 18px; /* réduit la taille */
color: #ffffff;
}
.container h1 {
text-align: center;
font-size: 36px; /* augmente la taille */
margin-bottom: 20px;
color: #ffffff;
}
/* Grille des projets */
.projects-grid {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin: 20px 0;
}
/* Carte de projet */
.project-card {
background-color: #f9f9f9;
border: 2px solid #bbb; /* border grise */
border-radius: 15px;
width: 250px;
height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s, z-index 0.1s;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.07); /* légère ombre */
position: relative;
z-index: 1;
}
.project-card:hover {
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
z-index: 10; /* Passe au-dessus des autres */
}
.project-card h3 {
margin: 0;
font-size: 18px;
color: #333;
}
.project-card p {
font-size: 14px;
color: #666;
margin-top: 10px;
}
.bloc-texte {
margin-top: 30px; /* espace entre les blocs */
line-height: 1.6;
@ -225,6 +324,46 @@ body {
width: 400px;
}
/* État agrandi */
.project-card.expanded {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.2); /* Zoom centré */
width: 60vw;
height: 220px;
z-index: 100;
background: #e9e9e9;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
transition:
transform 0.3s cubic-bezier(.4,2,.6,1),
box-shadow 0.3s,
z-index 0.1s,
width 0.3s,
height 0.3s;
}
.close-btn {
position: absolute;
top: 10px;
right: 15px;
background: #fff;
border: none;
font-size: 2rem;
color: #888;
cursor: pointer;
z-index: 30;
border-radius: 50%;
width: 36px;
height: 36px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: background 0.2s;
}
.close-btn:hover {
background: #eee;
color: #333;
}
.bonne-visite {
text-align: center;
margin-top: 40px;
@ -233,12 +372,14 @@ body {
}
.basPage {
background-color: #222;
text-align: center;
padding: 20px;
font-size: 0.9em;
z-index: 1;
position: relative;
background-color: rgb(53, 52, 52);
padding: 10px 0;
position: fixed; /* fixé en bas de l'écran */
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
}
::selection{

Write Preview
Loading…
Cancel
Save