generated from Templates_CodeFirst/templateHtmlCss
Merge branch 'deploy' of https://codefirst.iut.uca.fr/git/pierre.ferreira/Portfolio-PierreFerreira
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Pierre Ferreira
1 year ago
commit
27ccfb8444
@ -1,252 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mon Portefolio</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="topnav">
|
||||
<a href="#about">À propos</a>
|
||||
<a href="#parcour">Mon parcour</a>
|
||||
<a href="#projects">Projets</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
<div class="accueil">
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<div class="nine">
|
||||
<h1>Pierre Ferreira<span>Développeur</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- Loader -->
|
||||
<div class="loader-container">
|
||||
<div class="loader triangle">
|
||||
<svg viewBox="0 0 86 80">
|
||||
<polygon points="43 8 79 72 7 72"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="about" class="section">
|
||||
<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>
|
||||
<div class="about-deck">
|
||||
<div class="about-card-container">
|
||||
<div class="about-card">
|
||||
<div class="about-front-content">
|
||||
<p>Développeur<br/>Web</p>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<p class="about-heading">Card Hover</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipii
|
||||
voluptas ten mollitia pariatur odit, ab
|
||||
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
||||
necessitatibus dignissimos molestias.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-card-container">
|
||||
<div class="about-card">
|
||||
<div class="about-front-content">
|
||||
<p>Développeur<br/>Mobile</p>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<p class="about-heading">Card Hover</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipii
|
||||
voluptas ten mollitia pariatur odit, ab
|
||||
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
||||
necessitatibus dignissimos molestias.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-card-container">
|
||||
<div class="about-card">
|
||||
<div class="about-front-content">
|
||||
<p>Apprenti<br/>Pixel-Artist</p>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<p class="about-heading">Card Hover</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipii
|
||||
voluptas ten mollitia pariatur odit, ab
|
||||
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
||||
necessitatibus dignissimos molestias.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="parcour" class="section">
|
||||
<h1 class="mainTitle">Mon parcours</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-empty"></div>
|
||||
<div class="timeline-middle">
|
||||
<div class="timeline-circle"></div>
|
||||
</div>
|
||||
<div class="timeline-component timeline-content">
|
||||
<h3>Collège</h3>
|
||||
<p>Lorem Ipsum</p>
|
||||
</div>
|
||||
<div class="timeline-component timeline-content">
|
||||
<h3>Lycée</h3>
|
||||
<p>Lorem Ipsum</p>
|
||||
</div>
|
||||
<div class="timeline-middle">
|
||||
<div class="timeline-circle"></div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-empty"></div>
|
||||
<div class="timeline-empty"></div>
|
||||
|
||||
<div class="timeline-middle">
|
||||
<div class="timeline-circle"></div>
|
||||
</div>
|
||||
<div class=" timeline-component timeline-content">
|
||||
<h3>BUT informatique</h3>
|
||||
<p>Lorem Ipsum</p>
|
||||
</div>
|
||||
<div class="timeline-empty"></div>
|
||||
<div class="timeline-middle">
|
||||
<!-- Cercle final -->
|
||||
<div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="projects" class="section">
|
||||
<h1 class="mainTitle">Projets</h2>
|
||||
<div class="projects-grid">
|
||||
<div class="project-card">
|
||||
<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 :
|
||||
|
||||
<a href="https://codefirst.iut.uca.fr/git/" class="project-card-button">Plus d'infos</a>
|
||||
</div>
|
||||
<div class="project-card offset">
|
||||
<h3 class="text-title">Spelltastic</h3>
|
||||
<p class="text-body">Description du projet 2.</p>
|
||||
<button class="project-card-button">Plus d'infos</button>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<h3 class="text-title">Cryptid</h3>
|
||||
<p class="text-body">Description du projet 3.</p>
|
||||
<button class="project-card-button">Plus d'infos</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section">
|
||||
<h2 class="mainTitle">Contact</h2>
|
||||
|
||||
<div class="form-container">
|
||||
|
||||
<div class="AltLinks">
|
||||
|
||||
<!-- Github -->
|
||||
<button class="Btn"> <!-- JS + datautl -->
|
||||
<span class="imgContainer">
|
||||
<img src="logo/githubLogoW.png" alt="Github" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
|
||||
<!-- LinkedIn -->
|
||||
<button class="Btn">
|
||||
<span class="imgContainer">
|
||||
<img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
|
||||
<button class="Btn">
|
||||
<span class="imgContainer">
|
||||
<img src="logo/BSLogoW.png" alt="BS" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
|
||||
<!-- Teams -->
|
||||
<button class="Btn">
|
||||
<span class="imgContainer">
|
||||
<img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form class="form">
|
||||
<div class="form__group field">
|
||||
<input type="input" class="form__field" placeholder="Name" required="">
|
||||
<label for="name" class="form__label">Nom</label>
|
||||
</div>
|
||||
|
||||
<div class="form__group field">
|
||||
<input type="input" class="form__field" placeholder="Name" required="">
|
||||
<label for="name" class="form__label">Prenom</label>
|
||||
</div>
|
||||
|
||||
<div class="form__group field">
|
||||
<input type="input" class="form__field" placeholder="Name" required="">
|
||||
<label for="name" class="form__label">E-mail</label>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="textarea"><h3>En quoi puis-je vous aider ?</h3></label>
|
||||
<textarea name="textarea" id="textarea" rows="10" cols="50" required=""></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="send-msg">
|
||||
<span class="circle" aria-hidden="true">
|
||||
<span class="icon arrow"></span>
|
||||
</span>
|
||||
<span class="button-text">Envoyer</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Mon Portefolio. Tous droits réservés.</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<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
|
||||
});*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pifolio</title>
|
||||
<link rel="icon" type="image/png" href="logo/slime.png" />
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="topnav">
|
||||
<a href="#about">À propos</a>
|
||||
<a href="#parcour">Mon parcour</a>
|
||||
<a href="#projects">Projets</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>
|
||||
<div class="accueil">
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<div class="nine">
|
||||
<h1>Pierre Ferreira<span>Développeur</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- Loader -->
|
||||
<div class="loader-container">
|
||||
<div class="loader triangle">
|
||||
<svg viewBox="0 0 86 80">
|
||||
<polygon points="43 8 79 72 7 72"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="about" class="section">
|
||||
<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>
|
||||
<h2 class="text-title">Centres d'intéret</h2>
|
||||
<div class="about-deck">
|
||||
<div class="about-card-container">
|
||||
<div class="about-card">
|
||||
<div class="about-front-content">
|
||||
<img src="logo/cyclisme.png" alt="Cyclisme"/>
|
||||
<p>Cyclisme</p>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<p class="about-heading">Cyclisme</p>
|
||||
<p>
|
||||
Depuis mon plus jeune âge, je pratique le cyclisme. Non pas en compétition, mais en tant que loisir.
|
||||
J'aime me balader en montagne et découvrir de nouveaux paysages.
|
||||
Ou tout simplement me deplacer en vélo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-card-container">
|
||||
<div class="about-card">
|
||||
<div class="about-front-content">
|
||||
<img src="logo/muscu.png" alt="Musculation"/>
|
||||
<p>Musculation</p>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<p class="about-heading">Musculation</p>
|
||||
<p>
|
||||
Cela va faire maintenant 1 ans que je pratique la musculation.
|
||||
Il s'agit d'un sport qui me permet de me défouler et de me sentir bien dans mon corps.
|
||||
C'est un sport qui demande de la rigueur et de la discipline, mais qui apporte beaucoup de satisfaction.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-card-container">
|
||||
<div class="about-card">
|
||||
<div class="about-front-content">
|
||||
<img src="logo/slime.png" alt="Slime"/>
|
||||
<p>Pixel-Artist</p>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<p class="about-heading">Pixel-Artist</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipii
|
||||
voluptas ten mollitia pariatur odit, ab
|
||||
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
||||
necessitatibus dignissimos molestias.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="parcour" class="section">
|
||||
<h2 class="mainTitle">Mon parcours</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-empty"></div>
|
||||
<div class="timeline-middle">
|
||||
<div class="timeline-circle"></div>
|
||||
</div>
|
||||
<div class="timeline-component timeline-content">
|
||||
<h3>Collège</h3>
|
||||
<p>Lorem Ipsum</p>
|
||||
</div>
|
||||
<div class="timeline-component timeline-content">
|
||||
<h3>Lycée</h3>
|
||||
<p>Lorem Ipsum</p>
|
||||
</div>
|
||||
<div class="timeline-middle">
|
||||
<div class="timeline-circle"></div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-empty"></div>
|
||||
<div class="timeline-empty"></div>
|
||||
|
||||
<div class="timeline-middle">
|
||||
<div class="timeline-circle"></div>
|
||||
</div>
|
||||
<div class=" timeline-component timeline-content">
|
||||
<h3>BUT informatique</h3>
|
||||
<p>Lorem Ipsum</p>
|
||||
</div>
|
||||
<div class="timeline-empty"></div>
|
||||
<div class="timeline-middle">
|
||||
<!-- "Cercle" final -->
|
||||
<div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="projects" class="section">
|
||||
<h2 class="mainTitle">Projets</h2>
|
||||
<div class="projects-grid">
|
||||
<div class="project-card">
|
||||
<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 :
|
||||
<a href="https://github.com/PiR194/Art-eShow.git" class="project-card-button">Plus d'infos</a>
|
||||
</div>
|
||||
<div class="project-card offset">
|
||||
<h3 class="text-title">Spelltastic</h3>
|
||||
<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>
|
||||
<a href="https://github.com/PiR194/SpellTastic.git" class="project-card-button">Plus d'infos</a>
|
||||
</div>
|
||||
<div class="project-card">
|
||||
<h3 class="text-title">SocialGraph</h3>
|
||||
<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>
|
||||
<a href="https://github.com/PiR194/Cryptid.git" class="project-card-button">Plus d'infos</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section">
|
||||
<h2 class="mainTitle">Contact</h2>
|
||||
|
||||
<div class="form-container">
|
||||
|
||||
<div class="AltLinks">
|
||||
|
||||
<!-- Github -->
|
||||
<button class="Btn" onclick="window.location.href='https://github.com/PiR194'">
|
||||
<span class="imgContainer">
|
||||
<img src="logo/githubLogoW.png" alt="Github" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
|
||||
<!-- LinkedIn -->
|
||||
<button class="Btn" onclick="window.location.href='https://www.linkedin.com/in/pierre-ferreira-95a656253/'">
|
||||
<span class="imgContainer">
|
||||
<img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
|
||||
<button class="Btn">
|
||||
<span class="imgContainer">
|
||||
<img src="logo/BSLogoW.png" alt="BS" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
|
||||
<!-- Teams -->
|
||||
<button class="Btn">
|
||||
<span class="imgContainer">
|
||||
<img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon">
|
||||
</span>
|
||||
<span class="BG"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form class="form">
|
||||
<div class="form__group field">
|
||||
<input type="input" class="form__field" placeholder="Name" required="">
|
||||
<label for="name" class="form__label">Nom</label>
|
||||
</div>
|
||||
|
||||
<div class="form__group field">
|
||||
<input type="input" class="form__field" placeholder="Name" required="">
|
||||
<label for="name" class="form__label">Prenom</label>
|
||||
</div>
|
||||
|
||||
<div class="form__group field">
|
||||
<input type="input" class="form__field" placeholder="Name" required="">
|
||||
<label for="name" class="form__label">E-mail</label>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="textarea"><h3>En quoi puis-je vous aider ?</h3></label>
|
||||
<textarea name="textarea" id="textarea" rows="10" cols="50" required=""></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="send-msg">
|
||||
<span class="circle" aria-hidden="true">
|
||||
<span class="icon arrow"></span>
|
||||
</span>
|
||||
<span class="button-text">Envoyer</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Pifolio. Tous droits réservés.</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 563 B |
Loading…
Reference in new issue