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

Merge branch 'deploy' of https://codefirst.iut.uca.fr/git/pierre.ferreira/Portfolio-PierreFerreira
continuous-integration/drone/push Build is passing Details

Browse Source
master
Pierre Ferreira 1 year ago
parent 1b8f6e9309 b9dc0352a2
commit 27ccfb8444
7 changed files with 388 additions and 274 deletions
Show Stats Download Patch File Download Diff File

41
.drone.yml
Unescape View File

@ -7,31 +7,32 @@ trigger:
- push - push
steps: steps:
- name: code-analysis
image: aosapps/drone-sonar-plugin # - name: code-analysis
settings: # image: aosapps/drone-sonar-plugin
sonar_host: # settings:
from_secret: sonar_host # sonar_host:
sonar_token: # from_secret: sonar_host
from_secret: sonar_token # sonar_token:
# from_secret: sonar_token_pifolio
- 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
environment: environment:
IMAGENAME: hub.codefirst.iut.uca.fr/pierre.ferreira/Portfolio-PierreFerreira:latest IMAGENAME: hub.codefirst.iut.uca.fr/pierre.ferreira/portfolio-pierreferreira:latest
CONTAINERNAME: Portfolio-PierreFerreira CONTAINERNAME: portfolio-pierreferreira
COMMAND: create COMMAND: create
OVERWRITE: true OVERWRITE: true

6
README.md
Unescape View File

@ -5,4 +5,8 @@
# Portfolio-PierreFerreira # Portfolio-PierreFerreira
### :construction: ### :construction:
work in progress work in progress
:warning: **Tant qu'il n'y a pas de redirection sur le lien, il faut ajouter un ``/`` au lien du runner ! (*sinon, on n'a pas de style...*)**
```https://codefirst.iut.uca.fr/containers/pierreferreira-portfolio-pierreferreira/```

548
Porte-folio.html → index.html
Unescape View File

@ -1,252 +1,296 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<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="stylesheet" href="styles.css"> <link rel="icon" type="image/png" href="logo/slime.png" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="styles.css">
</head> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<body> </head>
<nav class="topnav"> <body>
<a href="#about">À propos</a> <nav class="topnav">
<a href="#parcour">Mon parcour</a> <a href="#about">À propos</a>
<a href="#projects">Projets</a> <a href="#parcour">Mon parcour</a>
<a href="#contact">Contact</a> <a href="#projects">Projets</a>
</nav> <a href="#contact">Contact</a>
<div class="accueil"> <div class="container" style="display: flex; justify-content: end; margin-right: 10px;">
<header class="header"> <label class="toggle" for="theme-toggle">
<div class="header-content"> <input id="theme-toggle" class="input" type="checkbox">
<div class="nine"> <div class="icon icon--moon">
<h1>Pierre Ferreira<span>Développeur</span></h1> <svg height="32" width="32" fill="white" viewBox="0 0 24 24">
</div> <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>
</div> </svg>
</header> </div>
</div>
<div class="icon icon--sun">
<!-- Loader --> <svg height="32" width="32" fill="white" viewBox="0 0 24 24">
<div class="loader-container"> <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>
<div class="loader triangle"> </svg>
<svg viewBox="0 0 86 80"> </div>
<polygon points="43 8 79 72 7 72"></polygon> </label>
</svg> </div>
</div> </nav>
</div> <div class="accueil">
<header class="header">
<section id="about" class="section"> <div class="header-content">
<h2 class="mainTitle">À propos de moi</h2> <div class="nine">
<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> <h1>Pierre Ferreira<span>Développeur</span></h1>
<div class="about-deck"> </div>
<div class="about-card-container"> </div>
<div class="about-card"> </header>
<div class="about-front-content"> </div>
<p>Développeur<br/>Web</p>
</div> <!-- Loader -->
<div class="about-content"> <div class="loader-container">
<p class="about-heading">Card Hover</p> <div class="loader triangle">
<p> <svg viewBox="0 0 86 80">
Lorem ipsum dolor sit amet, consectetur adipii <polygon points="43 8 79 72 7 72"></polygon>
voluptas ten mollitia pariatur odit, ab </svg>
minus ratione adipisci accusamus vel est excepturi laboriosam magnam </div>
necessitatibus dignissimos molestias. </div>
</p>
</div> <section id="about" class="section">
</div> <h2 class="mainTitle">À propos de moi</h2>
</div> <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>
<div class="about-card-container"> <h2 class="text-title">Centres d'intéret</h2>
<div class="about-card"> <div class="about-deck">
<div class="about-front-content"> <div class="about-card-container">
<p>Développeur<br/>Mobile</p> <div class="about-card">
</div> <div class="about-front-content">
<div class="about-content"> <img src="logo/cyclisme.png" alt="Cyclisme"/>
<p class="about-heading">Card Hover</p> <p>Cyclisme</p>
<p> </div>
Lorem ipsum dolor sit amet, consectetur adipii <div class="about-content">
voluptas ten mollitia pariatur odit, ab <p class="about-heading">Cyclisme</p>
minus ratione adipisci accusamus vel est excepturi laboriosam magnam <p>
necessitatibus dignissimos molestias. Depuis mon plus jeune âge, je pratique le cyclisme. Non pas en compétition, mais en tant que loisir.
</p> J'aime me balader en montagne et découvrir de nouveaux paysages.
</div> Ou tout simplement me deplacer en vélo.
</div> </p>
</div> </div>
<div class="about-card-container"> </div>
<div class="about-card"> </div>
<div class="about-front-content"> <div class="about-card-container">
<p>Apprenti<br/>Pixel-Artist</p> <div class="about-card">
</div> <div class="about-front-content">
<div class="about-content"> <img src="logo/muscu.png" alt="Musculation"/>
<p class="about-heading">Card Hover</p> <p>Musculation</p>
<p> </div>
Lorem ipsum dolor sit amet, consectetur adipii <div class="about-content">
voluptas ten mollitia pariatur odit, ab <p class="about-heading">Musculation</p>
minus ratione adipisci accusamus vel est excepturi laboriosam magnam <p>
necessitatibus dignissimos molestias. Cela va faire maintenant 1 ans que je pratique la musculation.
</p> Il s'agit d'un sport qui me permet de me défouler et de me sentir bien dans mon corps.
</div> C'est un sport qui demande de la rigueur et de la discipline, mais qui apporte beaucoup de satisfaction.
</div> </p>
</div> </div>
</div> </div>
</section> </div>
<div class="about-card-container">
<div class="about-card">
<section id="parcour" class="section"> <div class="about-front-content">
<h1 class="mainTitle">Mon parcours</h2> <img src="logo/slime.png" alt="Slime"/>
<div class="timeline"> <p>Pixel-Artist</p>
<div class="timeline-empty"></div> </div>
<div class="timeline-middle"> <div class="about-content">
<div class="timeline-circle"></div> <p class="about-heading">Pixel-Artist</p>
</div> <p>
<div class="timeline-component timeline-content"> Lorem ipsum dolor sit amet, consectetur adipii
<h3>Collège</h3> voluptas ten mollitia pariatur odit, ab
<p>Lorem Ipsum</p> minus ratione adipisci accusamus vel est excepturi laboriosam magnam
</div> necessitatibus dignissimos molestias.
<div class="timeline-component timeline-content"> </p>
<h3>Lycée</h3> </div>
<p>Lorem Ipsum</p> </div>
</div> </div>
<div class="timeline-middle"> </div>
<div class="timeline-circle"></div> </section>
</div>
<div class="timeline-empty"></div> <section id="parcour" class="section">
<div class="timeline-empty"></div> <h2 class="mainTitle">Mon parcours</h2>
<div class="timeline">
<div class="timeline-middle"> <div class="timeline-empty"></div>
<div class="timeline-circle"></div> <div class="timeline-middle">
</div> <div class="timeline-circle"></div>
<div class=" timeline-component timeline-content"> </div>
<h3>BUT informatique</h3> <div class="timeline-component timeline-content">
<p>Lorem Ipsum</p> <h3>Collège</h3>
</div> <p>Lorem Ipsum</p>
<div class="timeline-empty"></div> </div>
<div class="timeline-middle"> <div class="timeline-component timeline-content">
<!-- Cercle final --> <h3>Lycée</h3>
<div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div> <p>Lorem Ipsum</p>
</div> </div>
</div> <div class="timeline-middle">
</div> <div class="timeline-circle"></div>
</div>
</section>
<div class="timeline-empty"></div>
<section id="projects" class="section"> <div class="timeline-empty"></div>
<h1 class="mainTitle">Projets</h2>
<div class="projects-grid"> <div class="timeline-middle">
<div class="project-card"> <div class="timeline-circle"></div>
<h3 class="text-title">Art e-Show</h3> </div>
<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 : <div class=" timeline-component timeline-content">
<h3>BUT informatique</h3>
<a href="https://codefirst.iut.uca.fr/git/" class="project-card-button">Plus d'infos</a> <p>Lorem Ipsum</p>
</div> </div>
<div class="project-card offset"> <div class="timeline-empty"></div>
<h3 class="text-title">Spelltastic</h3> <div class="timeline-middle">
<p class="text-body">Description du projet 2.</p> <!-- "Cercle" final -->
<button class="project-card-button">Plus d'infos</button> <div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div>
</div> </div>
<div class="project-card"> </div>
<h3 class="text-title">Cryptid</h3> </div>
<p class="text-body">Description du projet 3.</p>
<button class="project-card-button">Plus d'infos</button> </section>
</div>
</div> <section id="projects" class="section">
</section> <h2 class="mainTitle">Projets</h2>
<div class="projects-grid">
<section id="contact" class="section"> <div class="project-card">
<h2 class="mainTitle">Contact</h2> <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 :
<div class="form-container"> <a href="https://github.com/PiR194/Art-eShow.git" class="project-card-button">Plus d'infos</a>
</div>
<div class="AltLinks"> <div class="project-card offset">
<h3 class="text-title">Spelltastic</h3>
<!-- Github --> <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="Btn"> <!-- JS + datautl --> <a href="https://github.com/PiR194/SpellTastic.git" class="project-card-button">Plus d'infos</a>
<span class="imgContainer"> </div>
<img src="logo/githubLogoW.png" alt="Github" class="imgIcon"> <div class="project-card">
</span> <h3 class="text-title">SocialGraph</h3>
<span class="BG"></span> <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> <a href="https://github.com/PiR194/Cryptid.git" class="project-card-button">Plus d'infos</a>
</div>
<!-- LinkedIn --> </div>
<button class="Btn"> </section>
<span class="imgContainer">
<img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon"> <section id="contact" class="section">
</span> <h2 class="mainTitle">Contact</h2>
<span class="BG"></span>
</button> <div class="form-container">
<button class="Btn"> <div class="AltLinks">
<span class="imgContainer">
<img src="logo/BSLogoW.png" alt="BS" class="imgIcon"> <!-- Github -->
</span> <button class="Btn" onclick="window.location.href='https://github.com/PiR194'">
<span class="BG"></span> <span class="imgContainer">
</button> <img src="logo/githubLogoW.png" alt="Github" class="imgIcon">
</span>
<!-- Teams --> <span class="BG"></span>
<button class="Btn"> </button>
<span class="imgContainer">
<img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon"> <!-- LinkedIn -->
</span> <button class="Btn" onclick="window.location.href='https://www.linkedin.com/in/pierre-ferreira-95a656253/'">
<span class="BG"></span> <span class="imgContainer">
</button> <img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon">
</div> </span>
<span class="BG"></span>
<form class="form"> </button>
<div class="form__group field">
<input type="input" class="form__field" placeholder="Name" required=""> <button class="Btn">
<label for="name" class="form__label">Nom</label> <span class="imgContainer">
</div> <img src="logo/BSLogoW.png" alt="BS" class="imgIcon">
</span>
<div class="form__group field"> <span class="BG"></span>
<input type="input" class="form__field" placeholder="Name" required=""> </button>
<label for="name" class="form__label">Prenom</label>
</div> <!-- Teams -->
<button class="Btn">
<div class="form__group field"> <span class="imgContainer">
<input type="input" class="form__field" placeholder="Name" required=""> <img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon">
<label for="name" class="form__label">E-mail</label> </span>
</div> <span class="BG"></span>
</button>
<br/> </div>
<div class="form-group"> <form class="form">
<label for="textarea"><h3>En quoi puis-je vous aider ?</h3></label> <div class="form__group field">
<textarea name="textarea" id="textarea" rows="10" cols="50" required=""></textarea> <input type="input" class="form__field" placeholder="Name" required="">
</div> <label for="name" class="form__label">Nom</label>
</div>
<div>
<button class="send-msg"> <div class="form__group field">
<span class="circle" aria-hidden="true"> <input type="input" class="form__field" placeholder="Name" required="">
<span class="icon arrow"></span> <label for="name" class="form__label">Prenom</label>
</span> </div>
<span class="button-text">Envoyer</span>
</button> <div class="form__group field">
</div> <input type="input" class="form__field" placeholder="Name" required="">
<label for="name" class="form__label">E-mail</label>
</form> </div>
</div>
</section> <br/>
<div class="form-group">
<footer> <label for="textarea"><h3>En quoi puis-je vous aider ?</h3></label>
<p>&copy; 2024 Mon Portefolio. Tous droits réservés.</p> <textarea name="textarea" id="textarea" rows="10" cols="50" required=""></textarea>
</footer> </div>
<div>
<script> <button class="send-msg">
//Gestion du loader <span class="circle" aria-hidden="true">
window.addEventListener('load', function() { <span class="icon arrow"></span>
document.querySelector('.loader-container').classList.add('hidden'); </span>
}); <span class="button-text">Envoyer</span>
</button>
//Simulation d'un chargement de 3 secondes </div>
/*window.addEventListener('load', function() { </form>
setTimeout(function() { </div>
const loaderContainer = document.querySelector('.loader-container'); </section>
if (loaderContainer) {
loaderContainer.classList.add('hidden');
} <footer>
}, 3000); // 3000 ms = 3 seconds <p>&copy; 2024 Pifolio. Tous droits réservés.</p>
});*/ </footer>
</script>
</body>
</html> <script>
//* Gestion du loader
window.addEventListener('load', function() {
document.querySelector('.loader-container').classList.add('hidden');
});
//Simulation d'un chargement de 3 secondes
/*window.addEventListener('load', function() {
setTimeout(function() {
const loaderContainer = document.querySelector('.loader-container');
if (loaderContainer) {
loaderContainer.classList.add('hidden');
}
}, 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>
</body>
</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