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

fin des autres pages - reste les projets universitaires à mettre
continuous-integration/drone/push Build is passing Details

Browse Source
master
Arsène Poulain 1 month ago
parent b086c33b95
commit 687ad6224b
31 changed files with 273 additions and 156 deletions
Show Stats Download Patch File Download Diff File

34
Apropos.html
Unescape View File

@ -1,11 +1,12 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Planning</title>
<title>À propos</title>
<link rel="stylesheet" href="site.css">
</head>
<body >
<body>
<div class="wrapper">
<header class="bandeau">
<div class="photo_titre_bandeau">
<img src="image/user_arpoulain.jpeg" alt="photo" class="image_accueil">
@ -15,24 +16,35 @@
</div>
<nav id="bouttons_liens_nav">
<a href="Projets.html" >
<div class="bouttons_liens"> <strong>Projets</strong>
</div>
<div class="bouttons_liens"> <strong>Projets</strong></div>
</a>
<a href="Apropos.html" >
<div class="bouttons_liens"><strong>A propos</strong>
</div>
<div class="bouttons_liens"><strong>A propos</strong></div>
</a>
<a href="Competences.html">
<div class="bouttons_liens"><strong>Compétences</strong>
</div>
<div class="bouttons_liens"><strong>Compétences</strong></div>
</a>
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong>
</div>
<div class="bouttons_liens"><strong>Contact</strong></div>
</a>
</nav>
</header>
<div class="background"></div>
<section class="container">
<h1 style="text-align: center;">À propos de moi</h1>
<div class="bloc-texte">
<p>
Je m’appelle Arsène Poulain, étudiant en première année de BUT Informatique à l’IUT de Clermont-Ferrand. Passionné par le développement web, j’ai choisi cette voie pour allier logique, créativité et résolution de problèmes.<br><br>
Mes études me permettent de travailler sur des projets variés, seul ou en équipe, et d’acquérir des compétences en programmation (HTML, CSS, Python, C#), gestion de bases de données et conception d’applications.<br><br>
Curieux, rigoureux et persévérant, j’aime apprendre de nouvelles technologies et relever des défis techniques.<br><br>
En dehors de l’informatique, je pratique le sport, je vais voir mes amis et je joue à des jeux vidéos<br><br>
Je recherche actuellement une alternance pour mettre en pratique mes connaissances et découvrir le monde professionnel, avec l’ambition de travailler plus tard dans le développement web.
</p>
</div>
</section>
</div>
<footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>

107
Competences.html
Unescape View File

@ -2,11 +2,10 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Contact</title>
<title>Compétences</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">
@ -16,24 +15,112 @@
</div>
<nav id="bouttons_liens_nav">
<a href="Projets.html" >
<div class="bouttons_liens"> <strong>Projets</strong>
</div>
<div class="bouttons_liens"> <strong>Projets</strong></div>
</a>
<a href="Apropos.html" >
<div class="bouttons_liens"><strong>A propos</strong>
</div>
<div class="bouttons_liens"><strong>A propos</strong></div>
</a>
<a href="Competences.html">
<div class="bouttons_liens"><strong>Compétences</strong>
</div>
<div class="bouttons_liens"><strong>Compétences</strong></div>
</a>
<a href="contact.html">
<div class="bouttons_liens"><strong>Contact</strong>
</div>
<div class="bouttons_liens"><strong>Contact</strong></div>
</a>
</nav>
</header>
<div class="background"></div>
<section class="container">
<div class="apropos-card">
<div class="apropos-texte">
<h2>Développement Web</h2>
<div class="skill-row">
<img class="skill-logo" src="image/html5.png" alt="HTML" />
<span>HTML</span>
<div class="skill-bar"><div class="skill-level" style="width: 65%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/css.png" alt="CSS" />
<span>CSS</span>
<div class="skill-bar"><div class="skill-level" style="width: 50%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/javascript.png" alt="JavaScript" />
<span>JavaScript</span>
<div class="skill-bar"><div class="skill-level" style="width: 15%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/php.png" alt="PHP" />
<span>PHP</span>
<div class="skill-bar"><div class="skill-level" style="width: 30%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/mysql.png" alt="SQL" />
<span>SQL</span>
<div class="skill-bar"><div class="skill-level" style="width: 80%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/python.png" alt="Python" />
<span>Python</span>
<div class="skill-bar"><div class="skill-level" style="width: 60%;"></div></div>
</div>
</div>
</div>
<div class="apropos-card">
<div class="apropos-texte">
<h2>Développement Logiciel & Systèmes</h2>
<div class="skill-row">
<img class="skill-logo" src="image/c.png" alt="C" />
<span>C</span>
<div class="skill-bar"><div class="skill-level" style="width: 90%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/cplusplus.png" alt="C++" />
<span>C++</span>
<div class="skill-bar"><div class="skill-level" style="width: 70%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/csharp.png" alt="C#" />
<span>C#</span>
<div class="skill-bar"><div class="skill-level" style="width: 50%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/xaml.png" alt="XAML" />
<span>XAML</span>
<div class="skill-bar"><div class="skill-level" style="width: 50%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/dotnet.png" alt=".NET MAUI" />
<span>.NET MAUI</span>
<div class="skill-bar"><div class="skill-level" style="width: 40%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/arduino.png" alt="Arduino" />
<span>Arduino</span>
<div class="skill-bar"><div class="skill-level" style="width: 70%;"></div></div>
</div>
</div>
</div>
<div class="apropos-card">
<div class="apropos-texte">
<h2>Scripts & Outils</h2>
<div class="skill-row">
<img class="skill-logo" src="image/gnubash.png" alt="Bash" />
<span>Bash</span>
<div class="skill-bar"><div class="skill-level" style="width: 50%;"></div></div>
</div>
<div class="skill-row">
<img class="skill-logo" src="image/git.png" alt="Git" />
<span>Git</span>
<div class="skill-bar"><div class="skill-level" style="width: 35%;"></div></div>
</div>
</div>
</div>
</section>
<footer class="basPage">
<p>&copy; 2025 Poulain Arsène. Tous droits réservés.</p>

74
Projets.html
Unescape View File

@ -6,6 +6,7 @@
<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">
@ -42,7 +43,6 @@
<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>
@ -64,82 +64,14 @@
</div>
</div>
</section>
</div>
<footer class="basPage">
<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 inchangé...
</script>
</body>
</html>

2
contact.html
Unescape View File

@ -41,7 +41,7 @@
<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>
<p>Vous pouvez me joindre via les informations ci-dessous :</p>
<ul>
<li>Email : <a href="mailto:arsenepoulain6@gmail.com">arsenepoulain6@gmail.com</a></li>

1
image/Instagram_logo_2022.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 8.7 KiB

BIN
image/arduino.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
image/c.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
image/collège.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
image/cplusplus.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
image/csharp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 721 B

BIN
image/css.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
image/dotnet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
image/git.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
image/gnubash.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
image/handball.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
image/html5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
image/iut.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB

BIN
image/javascript.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
image/karaoke.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
image/kazoo.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
image/linkedin_logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
image/logo_uc.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
image/lycée.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.1 KiB

BIN
image/mysql.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
image/php.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
image/python.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
image/velorail.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
image/xaml.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 543 B

BIN
image/école.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.6 KiB

BIN
images/CodeFirstLogo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

119
site.css
Unescape View File

@ -63,13 +63,19 @@ html, body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
body {
min-height: 100vh; /* hauteur minimum = hauteur de la fenêtre */
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
@ -154,11 +160,6 @@ body {
margin-top: 15px;
}
.wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
.photo_titre_bandeau{
margin-left: 8px;
@ -189,10 +190,13 @@ body {
border-right: 2px solid black;
}
.container{
margin-left:8px;
color:white;
.container {
margin-left: 8px;
margin-right: 8px;
color: white;
padding-left: 8px;
padding-right: 8px;
margin-bottom: 80px; /* Ajoute de l'espace sous le contenu */
}
.blocs{
@ -290,6 +294,7 @@ body {
.bloc-texte {
margin-top: 30px; /* espace entre les blocs */
margin-left: 20px;
line-height: 1.6;
}
@ -364,6 +369,89 @@ body {
color: #333;
}
.apropos-card {
display: flex;
align-items: center;
justify-content: space-between;
background: rgb(53, 52, 52);
border: 2px solid #bbb;
border-radius: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
margin: 30px 0;
padding: 30px;
width: 100%;
max-width: 100%;
box-sizing: border-box; /* <-- Ajouté */
gap: 30px;
}
.apropos-texte {
flex: 2;
}
.apropos-image img {
max-width: 250px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
@media (max-width: 900px) {
.apropos-card {
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 20px;
}
.apropos-image img {
max-width: 100%;
margin-top: 15px;
}
}
.skill-row {
display: flex;
align-items: center;
margin-bottom: 10px;
gap: 15px;
}
.skill-row span {
width: 110px;
font-weight: 500;
color: #fff;
}
.skill-bar {
flex: 1;
height: 16px;
background: #bbb;
border-radius: 8px;
overflow: hidden;
margin-left: 10px;
}
.skill-level {
height: 100%;
background: linear-gradient(90deg, #4e9cff, #1e5fa3);
border-radius: 8px 0 0 8px;
}
.skill-logo {
width: 28px;
height: 28px;
object-fit: contain;
margin-right: 10px;
vertical-align: middle;
}
.skill-row {
display: flex;
align-items: center;
margin-bottom: 18px; /* Augmente la valeur pour plus d'espace */
gap: 10px;
}
.bonne-visite {
text-align: center;
margin-top: 40px;
@ -375,13 +463,12 @@ body {
text-align: center;
background-color: rgb(53, 52, 52);
padding: 10px 0;
position: fixed; /* fixé en bas de l'écran */
bottom: 0;
left: 0;
/* position: fixed; <-- supprime ou commente cette ligne */
/* bottom: 0; <-- supprime ou commente cette ligne */
/* left: 0; <-- supprime ou commente cette ligne */
width: 100%;
z-index: 10;
}
::selection{
color: black;
background-color: rgb(57, 103, 143);

Write Preview
Loading…
Cancel
Save