pierre.ferreira
/
Portfolio-PierreFerreira
generated from Templates_CodeFirst/templateHtmlCss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout des modifs local + ci/cd 💚
continuous-integration/drone/push Build is failing Details

Browse Source
deploy
Pierre Ferreira 12 months ago
parent 5f169a4889
commit 13774d3c12
6 changed files with 148 additions and 39 deletions
Show Stats Download Patch File Download Diff File

18
.drone.yml
Unescape View File

@ -18,15 +18,15 @@ steps:
- name: docker-build-and-push - name: docker-build-and-push
image: plugins/docker image: plugins/docker
settings: settings:
dockerfile: docker/Dockerfile dockerfile: docker/Dockerfile
context: . context: .
registry: hub.codefirst.iut.uca.fr registry: hub.codefirst.iut.uca.fr
mirror: https://proxy.iut.uca.fr:8443 mirror: https://proxy.iut.uca.fr:8443
repo: hub.codefirst.iut.uca.fr/pierre.ferreira/Portfolio-PierreFerreira repo: hub.codefirst.iut.uca.fr/pierre.ferreira/Portfolio-PierreFerreira
username: username:
from_secret: SECRET_REGISTRY_USERNAME from_secret: SECRET_REGISTRY_USERNAME
password: password:
from_secret: SECRET_REGISTRY_PASSWORD from_secret: SECRET_REGISTRY_PASSWORD
- name: deploy-container - name: deploy-container
image: hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientdrone:latest image: hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientdrone:latest

102
Porte-folio.html
Unescape View File

@ -3,7 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Portefolio</title> <title>Pifolio</title>
<link rel="icon" type="image/png" href="logo/slime.png" />
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head> </head>
@ -13,6 +14,22 @@
<a href="#parcour">Mon parcour</a> <a href="#parcour">Mon parcour</a>
<a href="#projects">Projets</a> <a href="#projects">Projets</a>
<a href="#contact">Contact</a> <a href="#contact">Contact</a>
<div class="container" style="display: flex; justify-content: end; margin-right: 10px;">
<label class="toggle" for="theme-toggle">
<input id="theme-toggle" class="input" type="checkbox">
<div class="icon icon--moon">
<svg height="32" width="32" fill="white" viewBox="0 0 24 24">
<path clip-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" fill-rule="evenodd"></path>
</svg>
</div>
<div class="icon icon--sun">
<svg height="32" width="32" fill="white" viewBox="0 0 24 24">
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"></path>
</svg>
</div>
</label>
</div>
</nav> </nav>
<div class="accueil"> <div class="accueil">
<header class="header"> <header class="header">
@ -36,19 +53,20 @@
<section id="about" class="section"> <section id="about" class="section">
<h2 class="mainTitle">À propos de moi</h2> <h2 class="mainTitle">À propos de moi</h2>
<p>Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.</p> <p>Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.</p>
<h2 class="text-title">Centres d'intéret</h2>
<div class="about-deck"> <div class="about-deck">
<div class="about-card-container"> <div class="about-card-container">
<div class="about-card"> <div class="about-card">
<div class="about-front-content"> <div class="about-front-content">
<p>Développeur<br/>Web</p> <img src="logo/cyclisme.png" alt="Cyclisme"/>
<p>Cyclisme</p>
</div> </div>
<div class="about-content"> <div class="about-content">
<p class="about-heading">Card Hover</p> <p class="about-heading">Cyclisme</p>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipii Depuis mon plus jeune âge, je pratique le cyclisme. Non pas en compétition, mais en tant que loisir.
voluptas ten mollitia pariatur odit, ab J'aime me balader en montagne et découvrir de nouveaux paysages.
minus ratione adipisci accusamus vel est excepturi laboriosam magnam Ou tout simplement me deplacer en vélo.
necessitatibus dignissimos molestias.
</p> </p>
</div> </div>
</div> </div>
@ -56,15 +74,15 @@
<div class="about-card-container"> <div class="about-card-container">
<div class="about-card"> <div class="about-card">
<div class="about-front-content"> <div class="about-front-content">
<p>Développeur<br/>Mobile</p> <img src="logo/muscu.png" alt="Musculation"/>
<p>Musculation</p>
</div> </div>
<div class="about-content"> <div class="about-content">
<p class="about-heading">Card Hover</p> <p class="about-heading">Musculation</p>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipii Cela va faire maintenant 1 ans que je pratique la musculation.
voluptas ten mollitia pariatur odit, ab Il s'agit d'un sport qui me permet de me défouler et de me sentir bien dans mon corps.
minus ratione adipisci accusamus vel est excepturi laboriosam magnam C'est un sport qui demande de la rigueur et de la discipline, mais qui apporte beaucoup de satisfaction.
necessitatibus dignissimos molestias.
</p> </p>
</div> </div>
</div> </div>
@ -72,10 +90,11 @@
<div class="about-card-container"> <div class="about-card-container">
<div class="about-card"> <div class="about-card">
<div class="about-front-content"> <div class="about-front-content">
<p>Apprenti<br/>Pixel-Artist</p> <img src="logo/slime.png" alt="Slime"/>
<p>Pixel-Artist</p>
</div> </div>
<div class="about-content"> <div class="about-content">
<p class="about-heading">Card Hover</p> <p class="about-heading">Pixel-Artist</p>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipii Lorem ipsum dolor sit amet, consectetur adipii
voluptas ten mollitia pariatur odit, ab voluptas ten mollitia pariatur odit, ab
@ -90,7 +109,7 @@
<section id="parcour" class="section"> <section id="parcour" class="section">
<h1 class="mainTitle">Mon parcours</h2> <h2 class="mainTitle">Mon parcours</h2>
<div class="timeline"> <div class="timeline">
<div class="timeline-empty"></div> <div class="timeline-empty"></div>
<div class="timeline-middle"> <div class="timeline-middle">
@ -120,7 +139,7 @@
</div> </div>
<div class="timeline-empty"></div> <div class="timeline-empty"></div>
<div class="timeline-middle"> <div class="timeline-middle">
<!-- Cercle final --> <!-- "Cercle" final -->
<div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div> <div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div>
</div> </div>
</div> </div>
@ -129,23 +148,22 @@
</section> </section>
<section id="projects" class="section"> <section id="projects" class="section">
<h1 class="mainTitle">Projets</h2> <h2 class="mainTitle">Projets</h2>
<div class="projects-grid"> <div class="projects-grid">
<div class="project-card"> <div class="project-card">
<h3 class="text-title">Art e-Show</h3> <h3 class="text-title">Art e-Show</h3>
<p class="text-body"> Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu : <p class="text-body"> Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu :
<a href="https://github.com/PiR194/Art-eShow.git" class="project-card-button">Plus d'infos</a>
<a href="https://codefirst.iut.uca.fr/git/" class="project-card-button">Plus d'infos</a>
</div> </div>
<div class="project-card offset"> <div class="project-card offset">
<h3 class="text-title">Spelltastic</h3> <h3 class="text-title">Spelltastic</h3>
<p class="text-body">Description du projet 2.</p> <p class="text-body">Spelltastic est une application de type "compagnons de jeu" pour le jeu de roles Pathfinder. Durant ma troisième année de BUT Informatique, j'ai pu faire parti des développeusr de ce gestionnaire de liste de sorts avec un logique bien particulière.</p>
<button class="project-card-button">Plus d'infos</button> <a href="https://github.com/PiR194/SpellTastic.git" class="project-card-button">Plus d'infos</a>
</div> </div>
<div class="project-card"> <div class="project-card">
<h3 class="text-title">Cryptid</h3> <h3 class="text-title">SocialGraph</h3>
<p class="text-body">Description du projet 3.</p> <p class="text-body">Adaptation numérique de jeu de société d'enquêteurs, inspiré de du jeu Cryptid. Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans un graphe de suspects ? Que l'enquête commence !</p>
<button class="project-card-button">Plus d'infos</button> <a href="https://github.com/PiR194/Cryptid.git" class="project-card-button">Plus d'infos</a>
</div> </div>
</div> </div>
</section> </section>
@ -158,7 +176,7 @@
<div class="AltLinks"> <div class="AltLinks">
<!-- Github --> <!-- Github -->
<button class="Btn"> <!-- JS + datautl --> <button class="Btn" onclick="window.location.href='https://github.com/PiR194'">
<span class="imgContainer"> <span class="imgContainer">
<img src="logo/githubLogoW.png" alt="Github" class="imgIcon"> <img src="logo/githubLogoW.png" alt="Github" class="imgIcon">
</span> </span>
@ -166,7 +184,7 @@
</button> </button>
<!-- LinkedIn --> <!-- LinkedIn -->
<button class="Btn"> <button class="Btn" onclick="window.location.href='https://www.linkedin.com/in/pierre-ferreira-95a656253/'">
<span class="imgContainer"> <span class="imgContainer">
<img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon"> <img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon">
</span> </span>
@ -227,12 +245,12 @@
<footer> <footer>
<p>&copy; 2024 Mon Portefolio. Tous droits réservés.</p> <p>&copy; 2024 Pifolio. Tous droits réservés.</p>
</footer> </footer>
<script> <script>
//Gestion du loader //* Gestion du loader
window.addEventListener('load', function() { window.addEventListener('load', function() {
document.querySelector('.loader-container').classList.add('hidden'); document.querySelector('.loader-container').classList.add('hidden');
}); });
@ -247,6 +265,32 @@
} }
}, 3000); // 3000 ms = 3 seconds }, 3000); // 3000 ms = 3 seconds
});*/ });*/
//* Dark theme
document.addEventListener('DOMContentLoaded', (event) => {
const toggleSwitch = document.querySelector('#theme-toggle');
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
document.body.classList.add(currentTheme);
if (currentTheme === 'dark-mode') {
toggleSwitch.checked = true;
}
}
toggleSwitch.addEventListener('change', function() {
if (this.checked) {
document.body.classList.add('dark-mode');
localStorage.setItem('theme', 'dark-mode');
} else {
document.body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light-mode');
}
});
});
</script> </script>
</body> </body>
</html> </html>

BIN
logo/cyclisme.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
logo/muscu.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
logo/slime.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 563 B

67
styles.css
Unescape View File

@ -13,6 +13,12 @@ html {
--Secondary: #900C3F; --Secondary: #900C3F;
--Tertiary: #C70039; --Tertiary: #C70039;
--Quaternary: #250F1E; --Quaternary: #250F1E;
/**BG**/
--BackgroundLight: #f4f4f4;
--TextLight: #333;
--BackgroundDark: #1e1e1e;
--TextDark: #f4f4f4;
} }
body { body {
@ -21,6 +27,10 @@ body {
background-color: #f4f4f4; background-color: #f4f4f4;
color: #333; color: #333;
} }
body.dark-mode {
background-color: var(--BackgroundDark);
color: var(--TextDark);
}
.accueil{ .accueil{
background-color: #b5d2fc background-color: #b5d2fc
@ -38,6 +48,10 @@ header {
color: white; color: white;
} }
/* header.dark-mode {
background: url('img/accueil_dark.jpeg') no-repeat center center;
} */
.header-content { .header-content {
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -103,6 +117,10 @@ background-color:#f8f8f8;
.topnav { .topnav {
background-color: #333; background-color: #333;
overflow: hidden; overflow: hidden;
position: sticky;
top: 0;
width: 100%;
z-index: 1000;
} }
/* Style the links inside the navigation bar */ /* Style the links inside the navigation bar */
@ -127,6 +145,45 @@ background-color:#f8f8f8;
color: white; color: white;
} }
/** Switch Dark Mode*/
.toggle {
background-color: #1e1e1e;
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 0 50px 20px rgba(0, 0, 0, .1);
line-height: 1;
}
.input {
display: none;
}
.icon {
grid-column: 1 / 1;
grid-row: 1 / 1;
transition: transform 500ms;
}
.icon--moon {
transition-delay: 200ms;
}
.icon--sun {
transform: scale(0);
}
#theme-toggle:checked + .icon--moon {
transform: rotate(360deg) scale(0);
}
#theme-toggle:checked ~ .icon--sun {
transition-delay: 200ms;
transform: scale(1) rotate(360deg);
}
/* .header-content { /* .header-content {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
@ -180,8 +237,9 @@ background-color:#f8f8f8;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1) transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
} }
@ -330,6 +388,13 @@ opacity: 0;
margin-bottom: 1em; margin-bottom: 1em;
} }
.text-title {
margin-top: 1em;
color: var(--Secondary);
font: bolder;
font-size: 1.5em;
}
.project-card-button { .project-card-button {
transform: translate(-50%, 125%); transform: translate(-50%, 125%);
width: 60%; width: 60%;

Write Preview
Loading…
Cancel
Save