Compare commits

...

11 Commits

Author SHA1 Message Date
Pierre FERREIRA a5eff41cd4 Mise à jour de 'index.html'
continuous-integration/drone/push Build is passing Details
12 months ago
Pierre FERREIRA f26763b7d0 Supprimer 'send_mail.php'
continuous-integration/drone/push Build is passing Details
12 months ago
Pierre FERREIRA d825ecedf1 Mise à jour de 'README.md'
continuous-integration/drone/push Build is failing Details
12 months ago
Pierre Ferreira a566503c4b ajout de la gestion des mails dans la partie contact 💥
continuous-integration/drone/push Build is failing Details
12 months ago
Pierre Ferreira e1f0bc17b0 ajout du liens teams oublié 📦
continuous-integration/drone/push Build is failing Details
12 months ago
Pierre Ferreira 9a22d6e995 finition de la V1 du portfolio 🎉
continuous-integration/drone/push Build is failing Details
12 months ago
Pierre Ferreira 14982a677b réparation des thèmes, et ajout du cv telechargeable 💥
continuous-integration/drone/push Build is passing Details
12 months ago
Pierre Ferreira 27ccfb8444 Merge branch 'deploy' of https://codefirst.iut.uca.fr/git/pierre.ferreira/Portfolio-PierreFerreira
continuous-integration/drone/push Build is passing Details
1 year ago
Pierre FERREIRA 1b8f6e9309 Mise à jour de 'README.md'
continuous-integration/drone/push Build is failing Details
1 year ago
Pierre FERREIRA 146ccde5a9 Mise à jour de 'README.md'
continuous-integration/drone/push Build is failing Details
1 year ago
Pierre FERREIRA a7636ec866 Mise à jour de 'README.md'
continuous-integration/drone/push Build is failing Details
1 year ago

@ -4,9 +4,38 @@
# Portfolio-PierreFerreira
### :construction:
work in progress
Bienvenue sur mon portfolio web, un projet personnel visant à présenter mes compétences, mes expériences et mes projets dans le domaine du développement web. Ce site est une vitrine de mes réalisations et de ma passion pour le développement et le design web.
: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...*)**
## :triangular_flag_on_post: Important
```https://codefirst.iut.uca.fr/containers/pierreferreira-portfolio-pierreferreira/```
: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/```
:seedling: La branche principale est ``master``
## :feet: Fonctionnalités
- Présentation de mes compétences et expériences
- Galerie de projets avec descriptions et liens
- Formulaire de contact fonctionnel avec envoi d'email (EmailJS)
- Thème sombre/clair avec bascule
- Design responsive adapté à tous les écrans
## :moyai: Remerciements
Je tiens à remercier tous ceux qui m'ont soutenu tout au long de mon cursus et qui ont contribué à la réalisation de ce projet. Ce portfolio est le fruit de plusieurs années de travail et de passion pour le développement web. Merci pour votre soutien et votre inspiration.
# :construction_worker: Développeur
- Pierre FERREIRA : pierre.ferreira@etu.uca.fr
<div align="center">
<a href = "https://codefirst.iut.uca.fr/git/pierre.ferreira">
<img src="https://codefirst.iut.uca.fr/git/avatars/edbacace5f621ae77077f206ebdcee27?size=870" width="50" >
</a>
© IUT - Auvergne
</div>
---

@ -7,6 +7,14 @@
<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">
@ -15,6 +23,7 @@
<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">
@ -52,7 +61,14 @@
<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>
<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">
@ -66,7 +82,7 @@
<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.
Ou tout simplement me déplacer à vélo.
</p>
</div>
</div>
@ -80,7 +96,7 @@
<div class="about-content">
<p class="about-heading">Musculation</p>
<p>
Cela va faire maintenant 1 ans que je pratique la musculation.
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>
@ -96,10 +112,7 @@
<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.
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>
@ -116,27 +129,34 @@
<div class="timeline-circle"></div>
</div>
<div class="timeline-component timeline-content">
<h3>Collège</h3>
<p>Lorem Ipsum</p>
<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>Lycée</h3>
<p>Lorem Ipsum</p>
<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>BUT informatique</h3>
<p>Lorem Ipsum</p>
<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 -->
@ -152,22 +172,34 @@
<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 :
<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 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>
<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é 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>
<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>
@ -191,58 +223,76 @@
<span class="BG"></span>
</button>
<button class="Btn">
<!-- Teams -->
<button class="Btn" onclick="window.location.href='https://teams.live.com/l/invite/FEA3h-MI0Z7-e0HGQE'">
<span class="imgContainer">
<img src="logo/BSLogoW.png" alt="BS" class="imgIcon">
<img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon">
</span>
<span class="BG"></span>
</button>
<!-- Teams -->
<!-- CV -->
<a href="pdf/Curriculum_Vitae.pdf" download="Curriculum_Vitae">Curriculum Vitae</a>
<button class="Btn">
<span class="imgContainer">
<img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon">
<img src="logo/cv.png" alt="CV" class="imgIcon">
</span>
<span class="BG"></span>
</button>
</a>
</div>
<form class="form">
<form class="form" id="contact-form">
<div class="form__group field">
<input type="input" class="form__field" placeholder="Name" required="">
<label for="name" class="form__label">Nom</label>
<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="input" class="form__field" placeholder="Name" required="">
<label for="name" class="form__label">Prenom</label>
<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="input" class="form__field" placeholder="Name" required="">
<label for="name" class="form__label">E-mail</label>
<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="textarea" id="textarea" rows="10" cols="50" required=""></textarea>
<textarea name="message" id="textarea" rows="10" cols="50" required=""></textarea>
</div>
<div>
<button class="send-msg">
<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>&copy; 2024 Pifolio. Tous droits réservés.</p>
@ -255,8 +305,7 @@
document.querySelector('.loader-container').classList.add('hidden');
});
//Simulation d'un chargement de 3 secondes
//* Simulation d'un chargement de 3 secondes pour le loader
/*window.addEventListener('load', function() {
setTimeout(function() {
const loaderContainer = document.querySelector('.loader-container');
@ -292,5 +341,6 @@
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

@ -19,6 +19,19 @@ html {
--BackgroundDark: #1e1e1e;
--TextDark: #f4f4f4;
/* Project card colors */
--CardLightBg: #f5f5f5;
--CardDarkBg: #333;
--CardLightText: #000;
--CardDarkText: #fff;
--CardShadowIn: #bebebe;
--CardShadowOut: #ffffff;
--CardDarkShadowIn: #555;
--CardDarkShadowOut: #111;
}
body {
@ -195,7 +208,6 @@ background-color:#f8f8f8;
align-items: center;
padding: 60px 20px;
text-align: center;
}
/** Text */
@ -309,7 +321,7 @@ opacity: 0;
.timeline {
width: 80%;
height: auto;
max-width: 800px;
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
@ -326,6 +338,11 @@ opacity: 0;
overflow: visible;
}
body.dark-mode .timeline-content
{
background: linear-gradient(#2a2a2a, var(--BackgroundDark)) padding-box,
linear-gradient(var(--Tertiary), var(--Secondary)) border-box;
}
.timeline-component {
margin: 0px 20px 20px 20px;
}
@ -370,13 +387,12 @@ opacity: 0;
height: 254px;
border-radius: 50px;
background: #e0e0e0;
box-shadow: 18px 18px 0px #bebebe,
-18px -18px 0px #ffffff;
background: var(--CardLightBg);
box-shadow: 18px 18px 0px var(--CardShadowIn),
-18px -18px 0px var(--CardShadowOut);
border-radius: 20px;
background: #f5f5f5;
border: 2px solid #c3c6ce;
border: 2px solid var(--CardShadowIn);
position: relative;
padding: 1.8rem;
transition: 0.5s ease-out;
@ -388,6 +404,14 @@ opacity: 0;
margin-bottom: 1em;
}
body.dark-mode .project-card {
background: var(--CardDarkBg);
color: var(--CardDarkText);
box-shadow: 18px 18px 0px var(--CardDarkShadowIn),
-18px -18px 0px var(--CardDarkShadowOut);
border: 2px solid var(--CardDarkShadowIn);
}
.text-title {
margin-top: 1em;
color: var(--Secondary);
@ -411,13 +435,16 @@ opacity: 0;
transition: 0.3s ease-out;
}
.project-card-details {
color: black;
color: var(--CardLightText);
height: 100%;
gap: .5em;
display: grid;
place-content: center;
}
body.dark-mode .project-card-details {
color: var(--CardDarkText);
}
/*Hover*/
.project-card:hover {
@ -425,6 +452,11 @@ opacity: 0;
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}
body.dark-mode .project-card:hover {
border-color: var(--Secondary);
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}
.project-card:hover .project-card-button {
transform: translate(-50%, 50%);
opacity: 1;
@ -539,6 +571,13 @@ opacity: 0;
}
body.dark-mode .form-container{
background: linear-gradient(#2a2a2a, var(--BackgroundDark)) padding-box,
linear-gradient(var(--Tertiary), var(--Secondary)) border-box;
color: white;
}
.form-container .form {
display: flex;

Loading…
Cancel
Save