generated from Templates_CodeFirst/templateHtmlCss
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
347 lines
19 KiB
347 lines
19 KiB
<!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">
|
|
|
|
<!-- Email -->
|
|
<script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
|
|
<script type="text/javascript">
|
|
(function() {
|
|
emailjs.init('eUXyFFZIItaTd4DVt');
|
|
})();
|
|
</script>
|
|
</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;">
|
|
<a href="pdf/Curriculum_Vitae.pdf" download="Curriculum_Vitae">Curriculum Vitae</a>
|
|
<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 style="max-width: 70%; text-align: justify;" class="timeline-component timeline-content">Je suis un développeur web passionné avec une grande expérience dans la construction de sites web et d'applications modernes. Ma spécialisation en BUT Informatique m'a permis de travailler sur des projets variés où j'ai acquis des compétences en développement full-stack, en gestion de projet et en travail d'équipe. Mon objectif de carrière est de travailler en tant que développeur full-stack dans une entreprise dynamique et innovante où je pourrai mettre en œuvre mes compétences, avec une promotion rapide vers de plus grandes responsabilités.
|
|
<br/>
|
|
<br/>
|
|
J'aime créer des expériences utilisateur intuitives et engageantes, en utilisant les dernières technologies pour garantir des performances optimales sur toutes les plateformes. Mon portfolio reflète mon souci du détail et ma capacité à mener à bien des projets, tout en mettant en valeur mes compétences techniques et créatives.
|
|
<br/>
|
|
<br/>
|
|
En dehors de mes activités professionnelles, je suis passionné par le sport, en particulier la musculation et le cyclisme, ainsi que par le pixel art, une forme d'expression artistique que j'ai commencé à explorer récemment. Ces centres d'intérêt enrichissent ma vie et m'aident à maintenir un équilibre sain entre le travail et les loisirs.
|
|
</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 déplacer à 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 an 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>
|
|
Le pixel art est une passion que j'ai développée après avoir découvert le logiciel Aseprite. Grâce à cet outil, j'ai pu m'épanouir en réalisant quelques créations personnelles. Bien que je sois encore débutant dans ce domaine, j'apprécie énormément le processus créatif et l'expression artistique qu'il offre.
|
|
</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>Lycée</h3>
|
|
<p>Au lycée, j'ai décidé d'explorer le monde de l'informatique en optant pour la filière NSI (Numérique et Sciences Informatiques). Fasciné par le fonctionnement des technologies qui nous entourent au quotidien, ce domaine m'a permis d'acquérir une compréhension solide des concepts informatiques. J'ai développé un réel intérêt pour cette discipline en me plongeant dans les bases de la programmation et de la gestion des systèmes d'information.</p>
|
|
</div>
|
|
<div class="timeline-component timeline-content">
|
|
<h3>BUT informatique</h3>
|
|
<p>Après le lycée, il m'a semblé naturel de continuer dans cette voie en poursuivant un BUT en Informatique. Au cours de ces trois années, j'ai acquis une large gamme de compétences couvrant différents aspects de l'informatique, tels que la programmation, les bases de données, les réseaux et le développement web. Ce programme m'a permis de renforcer mes connaissances théoriques et pratiques, me préparant ainsi efficacement à entrer dans le monde professionnel.</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>Premier Stage : Conseil Départemental</h3>
|
|
<p>Mon premier stage, qui a joué un rôle essentiel dans ma formation, s'est déroulé au sein du Conseil Départemental du Puy-de-Dôme. Cette expérience au sein d'une grande structure regroupant près de 3000 employés m'a offert un aperçu précieux du fonctionnement d'une entreprise à grande échelle. J'ai été chargé d'un projet individuel impliquant une technologie avec laquelle je n'avais pas encore travaillé, me permettant l'utilisation des acquis de la compétence 1 en BUT. Cette situation m'a aidé à renforcer mon sens des responsabilités, ma capacité à apprendre de manière autonome et mon adaptabilité, des compétences essentielles dans le monde professionnel.</p>
|
|
</div>
|
|
<div class="timeline-component timeline-content">
|
|
<h3>Second Stage : SOeMan</h3>
|
|
<p>Pour mon second stage, j'ai intégré une PME nommée SOeMan, où j'ai travaillé en open space sur un projet collaboratif. Ce changement de cadre m'a permis de découvrir l'importance de l'esprit d'équipe et de la collaboration en milieu professionnel. J'ai appris à coordonner mes efforts avec ceux de mes collègues, à utiliser des outils de gestion de projet et à communiquer efficacement au sein d'une équipe (que l'on retrouve dans la C6 de ma formation). Cette expérience a enrichi ma compréhension des dynamiques de travail en équipe et m'a préparé à assumer de nouvelles responsabilités et obligations professionnelles.</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">
|
|
<!-- "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 : Moz'ART, Leon'ART de Vinci, N'oubliez p'ART les paroles, Emile Zol'ART et iART.</p>
|
|
<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 rôles Pathfinder. Durant ma troisième année de BUT Informatique, j'ai pu faire partie des développeurs de ce gestionnaire de liste de sorts avec une 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é 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="projects" class="section">
|
|
<h2 class="mainTitle">Projet personnel</h2>
|
|
<div style="display: flex; justify-content: center;">
|
|
<div class="project-card" style="height: auto;">
|
|
<h3 class="text-title">LinkName</h3>
|
|
<p class="text-body">Découvrez LinkName, une application mobile innovante en cours de développement, conçue pour simplifier la gestion des listes de prénoms et pseudonymes grâce à des tags personnalisés. Vous êtes en quête d'un nom parfait pour un projet, un personnage, ou toute autre création, mais vous manquez toujours d'inspiration au moment crucial ? LinkName est là pour vous aider à trouver l'inspiration facilement et rapidement. Essayez LinkName et ne laissez plus jamais l'absence d'idées vous freiner !</p>
|
|
<a href="https://github.com/PiR194/LinkName.githubLogoW" 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>
|
|
|
|
<!-- Teams -->
|
|
<button class="Btn" onclick="window.location.href='https://teams.live.com/l/invite/FEA3h-MI0Z7-e0HGQE'">
|
|
<span class="imgContainer">
|
|
<img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon">
|
|
</span>
|
|
<span class="BG"></span>
|
|
</button>
|
|
|
|
<!-- CV -->
|
|
<a href="pdf/Curriculum_Vitae.pdf" download="Curriculum_Vitae">Curriculum Vitae</a>
|
|
<button class="Btn">
|
|
<span class="imgContainer">
|
|
<img src="logo/cv.png" alt="CV" class="imgIcon">
|
|
</span>
|
|
<span class="BG"></span>
|
|
</button>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<form class="form" id="contact-form">
|
|
<div class="form__group field">
|
|
<input type="text" name="from_name" class="form__field" placeholder="Nom" required="">
|
|
<label for="nom" class="form__label">Nom</label>
|
|
</div>
|
|
|
|
<div class="form__group field">
|
|
<input type="text" name="from_first_name" class="form__field" placeholder="Prénom" required="">
|
|
<label for="prenom" class="form__label">Prénom</label>
|
|
</div>
|
|
|
|
<div class="form__group field">
|
|
<input type="email" name="reply_to" class="form__field" placeholder="E-mail" required="">
|
|
<label for="email" 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="message" id="textarea" rows="10" cols="50" required=""></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" 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>
|
|
|
|
<script type="text/javascript">
|
|
document.getElementById('contact-form').addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
|
|
emailjs.sendForm('service_q2fsaoq', 'template_ahk6uto', this)
|
|
.then(function() {
|
|
console.log('SUCCESS!');
|
|
alert('Email envoyé avec succès !');
|
|
}, function(error) {
|
|
console.log('FAILED...', error);
|
|
alert('Erreur lors de l\'envoi de l\'email.');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<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 pour le loader
|
|
/*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>
|