theo.dupin
/
portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '84ac7d309c'
${ noResults }
portfolio/index.html

350 lines
22 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Portfolio</title>
<link rel="icon" href="./assets/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- --------- -->
<!-- AOS (Animate on Scroll) -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!-- ----------------------- -->
<!-- Swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- ------ -->
</head>
<body>
<header class="header">
<input type="checkbox" id="check">
<label for="check" class="icons">
<i class='bx bx-menu' id="menu-icon"></i>
<i class='bx bx-x' id="close-icon"></i>
</label>
<nav class="header-nav">
<a href="#about_me" style="--i:1">À propos de moi</a>
<a href="#skills" style="--i:2">Compétences</a>
<a href="#projects" style="--i:3">Projets</a>
<a href="#alternance" style="--i:4">Alternance</a>
</nav>
</header>
<section class="container-home">
<div class="home">
<div class="line">
<img src="./assets/IMG_0126.JPG" class="photo-profil">
</div>
<div class="line">
Bonjour
<img src="./assets/bonjour.gif" class="emoji" alt="Bonjour emoji">
</div>
<div class="line">je suis Théo DUPIN</div>
<div class="line cursor">apprenti développeur web</div>
<div class="sub-text">
<div class="row align-items-center">
<div class="col-auto">
<a class="btn btn-primary btn-round" href="https://www.linkedin.com/in/th%C3%A9o-dupin-a81a34257/" target="_blank" role="button">
<i class="bi bi-linkedin btn-icon"> Linkedin</i>
</a>
</div>
<div class="col-auto">
<a class="btn btn-dark btn-round" href="https://github.com/thdupin2" target="_blank" role="button">
<i class="bi bi-github btn-icon"> Github </i>
</a>
</div>
<div class="col-auto">
<a class="btn btn-light btn-round" style="display: flex; align-items: center; gap: 5px; font-size: 20px;" href="#" role="button" id="openGmail">
<img src="assets/gmail.png" style="width: 20px; height: 20px;"> Gmail
</a>
</div>
</div>
</div>
</div>
</section>
<section class="container-about-me" id="about_me">
<div>
<h1>À propos de moi</h1>
<hr style="width: 50%; margin: 0 auto; border: 1px solid #000;">
</div>
<div class="about-me-content">
<p>
Étudiant en 3e et dernière année de BUT informatique à l'IUT Clermont Auvergne,
je suis actuellement en alternance chez <a href="https://www.satel.fr/" target="_blank">Satel</a>
en tant que développeur web sur le site de Vichy. Cette année d'alternance a été pour moi une
opportunité de mettre en pratique les compétences acquises durant mes deux premières années
d'études. J'ai pu travailler sur des projets concrets et collaborer avec des professionnels
du métier plus expérimentés que moi. J'ai également pu découvrir le monde de l'entreprise et ses contraintes.
</p>
<p>
Je me suis orienté vers le développement web car j'aime le côté créatif et le fait de pouvoir voir le résultat
de son travail en direct. Je souhaite continuer dans cette voie et me spécialiser dans le développement web
en intégrant un Mastère développeur web Full Stack en alternance (2 ans) conférant le titre RCNP de niveau 7 équivalent
à Bac+5. Ce parcours me permettra d'acquérir de nouvelles compétences et de me perfectionner dans le développement
web, tout en continuant à travailler en entreprise. J'aurais la possibilité de passer deux certifications par an reconnues par l'État. Ces certifications sont un gage
de qualité et de sérieux pour les entreprises. Ces certifications me permettront de me spécialiser dans des domaines
très intéressants comme l'IA ou la cyber-sécurité par exemple qui font partie des domaines les plus recherchés
par les entreprises et qui constituent l'avenir du numérique.
</p>
<p>
Comme vous l'aurez compris, je suis passionné par le développement web et je suis toujours à la recherche de nouvelles technologies et de nouveaux
langages de programmation à apprendre. C'est pourquoi j'ai conçu ce portfolio pour vous présenter mes compétences et mes projets.
</p>
<p>
N'hésitez pas à me contacter si vous avez des questions ou si vous souhaitez collaborer avec moi.
</p>
<p>
Bonne visite !
</p>
</div>
<div class="download-button-CV">
<a id="downloadCV" href="assets/CV_Théo_Dupin.pdf" download="CV_Théo_Dupin.pdf" style="display:none;"></a>
<button type="button" class="btn btn-dark" style="padding: 12px;" id="downloadButton">Télécharger mon CV</button>
</div>
</section>
<section class="container-skills" id="skills">
<div>
<h1>Compétences</h1>
<hr style="width: 50%; margin: 0 auto; border: 1px solid #000;">
</div>
<div class="skills-grid">
<div class="skills-section">
<h4>Languages de programmation</h4>
<div class="skills-content">
<span class="badge" style="background-color: #e34c26;"><i class="fab fa-html5"></i> HTML</span>
<span class="badge" style="background-color: #264de4;"><i class="fab fa-css3-alt"></i> CSS</span>
<span class="badge" style="background-color: #f0db4f; color: black;"><i class="fab fa-js"></i> JavaScript</span>
<span class="badge" style="background-color: #3178C6; color: black;"><img src="assets/typescript.png"> Typescript</span>
<span class="badge python" style="background-color: #234A6B;"><img src="assets/python.png"> Python</span>
<span class="badge" style="background-color: #563d7c;"><i class="fab fa-php"></i> &nbsp; PHP</span>
<span class="badge" style="background-color: #4eaa25;"><i class="fas fa-terminal"></i> &nbsp; Bash</span>
<span class="badge" style="background-color: #f29111;"><i class="fas fa-database"></i> SQL</span>
<span class="badge" style="background-color: #00599c;"><i class="fab fa-cuttlefish"></i> C/C++/C#</span>
<span class="badge" style="background-color: #b2afaf; color: #F44336;"><img src="assets/java.png"> Java</span>
<span class="badge" style="background-color: #0095d5; background-image: linear-gradient(135deg, #0095d5 0%, #00c4cc 50%, #00c4cc 50%, #e44857 50%, #e44857 100%);"><img src="assets/kotlin.png"> Kotlin</span>
</div>
</div>
<div class="skills-section">
<h4>Frameworks / Bibliothèques / ORM</h4>
<div class="skills-content">
<span class="badge" style="background-color: #dd0031;"><i class="fab fa-angular"></i> Angular</span>
<span class="badge" style="background-color: black;"><img src="assets/nestjs.png"> NestJS</span>
<span class="badge" style="background-color: gray;"><img src="assets/typeorm.png"> TypeORM</span>
<span class="badge" style="background-color: #68a063;"><i class="fab fa-node-js"></i> Node.js</span>
<span class="badge" style="background-color: #61dafb; color: black;"><i class="fab fa-react"></i> React</span>
<span class="badge" style="background-color: black;"><i class="fab fa-symfony"></i> Symfony</span>
<span class="badge" style="background-color: #0C4B33;"><img src="assets/django.png"> Django</span>
<span class="badge" style="background: linear-gradient(135deg, #FF5D5D, #C35355, #8A494E);"><img src="assets/streamlit.png"> Streamlit</span>
</div>
</div>
<div class="skills-section">
<h4>Bases de données</h4>
<div class="skills-content">
<span class="badge" style="background-color: #326790;"><img src="assets/postgresql.png"> PostgreSQL</span>
<span class="badge" style="background-image: linear-gradient(135deg, #0071BC 50%, #E48E00 50%);"><img src="assets/mysql.png"> MySQL</span>
<span class="badge" style="background-color: #689F38;"><img src="assets/mongodb.png"> MongoDB</span>
<span class="badge" style="background-color: #003B57"><img src="assets/sqlite.png"> SQLite</span>
</div>
</div>
<div class="skills-section">
<h4>Outils de DevOps</h4>
<div class="skills-content">
<span class="badge" style="background-color: #0095DA;"><i class="fab fa-docker"></i> &nbsp; Docker</span>
<span class="badge" style="background-color: #316CE6;"><img src="assets/kubernetes.png"> Kubernetes</span>
<span class="badge" style="background-color: #212529;"><img src="assets/jenkins.png"> Jenkins</span>
<span class="badge" style="background-color: black"><i class="fab fa-github"></i> GitHub Actions</span>
<span class="badge" style="background: #E24329;"><i class="fab fa-gitlab"></i> GitLab CI/CD</span>
</div>
</div>
<div class="skills-section">
<h4>Gestion de projets</h4>
<div class="skills-content">
<span class="badge" style="background-color: #FF5733;"><img src="assets/scrum.png"> SCRUM</span>
<span class="badge" style="background-color: #F2C94C"><img src="assets/kanban.png"> KANBAN</span>
</div>
</div>
</div>
</section>
<section class="container-projects" id="projects">
<div>
<h1>Projets</h1>
<hr style="width: 50%; margin: 0 auto; border: 1px solid #000;">
</div>
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="grid-container">
<img src="assets/logo-color-answerz.png" alt="AnswerZ Logo" class="image">
<div class="content-container">
<h2>AnswerZ</h2>
<p class="description">
Projet de 3e année de BUT informatique réalisé par 5 étudiants.<br>
Application web reprenant le concept de deux applications connues : Kahoot et Quizzlet.<br>
La première partie de l'appli est dédiée à la création de <strong>flashcards</strong> pour réviser (Quizzlet).<br>
La deuxième est dédiée à la création de <strong>quiz</strong> pour jouer avec ses amis en temps réel (Kahoot).<br>
La partie quiz en temps réel a été développée avec Socket.IO. <br>
L'application AnswerZ n'est disponible qu'en local pour le moment.
</p>
<div class="logos">
<img src="assets/angular.png">
<img src="assets/nestjs.png">
<img src="assets/typeorm.png">
<img src="assets/postgresql-color.png">
<img src="assets/docker.png">
</div>
<a href="https://github.com/AnswerZDev" class="repo-button" target="_blank">Voir le Repository</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="grid-container">
<img src="assets/maxwin.jpeg" alt="MaxWin Logo" class="image">
<div class="content-container">
<h2>MaxWin</h2>
<p class="description">
Projet de 3e année de BUT informatique réalisé par 5 étudiants. <br>
Application web permettant de jouer à une <strong>machine à sous en ligne</strong>. <br>
La partie animation de la machine a été réalisée en JavaScript grâce à ce repository :
<a href="https://github.com/johakr/html5-slot-machine" target="_blank">lien</a>. <br>
D'autres jeux comme la roulette ou le blackjack avaient été prévus pour la suite. <br>
L'application MaxWin n'est disponible qu'en local.
</p>
<div class="logos">
<img src="assets/symfony.png">
<img src="assets/mysql-color.png">
<img src="assets/javascript-color.png">
</div>
<a href="https://github.com/MaxWinDev/" class="repo-button" target="_blank">Voir le Repository</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="grid-container">
<img src="assets/traitement-images.jpeg" alt="Image_son Logo" class="image">
<div class="content-container">
<h2>Image, Son et Visualisation</h2>
<p class="description">
Projet de 3e année de BUT informatique que j'ai réalisé seul. <br>
Application web de traitements d'images développée à l'aide du framework Django qui comporte de 8 fonctionnalités différentes :
<strong>Importation d'images, conversion en noir et blanc, application de niveaux de gris, redimensionnement,
alignement horizontal, alignement vertical, fusion d'images et animation d'images.</strong> <br>
Le projet Image, Son et Visualisation n'est disponible qu'en local.
</p>
<div class="logos">
<img src="assets/django-color.png">
<img src="assets/html.png">
<img src="assets/css.png">
</div>
<a href="https://github.com/thdupin2/Image_son" class="repo-button" target="_blank">Voir le Repository</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="grid-container">
<img src="assets/data-analyst.jfif" alt="Image_son Logo" class="image">
<div class="content-container">
<h2>Streamlit</h2>
<p class="description">
Projet de 3e année de BUT informatique réalisé par 3 étudiants. <br>
Application web développée à l'aide du framework Streamlit qui comporte plusieurs sections :
<strong>Importation de fichiers CSV, Nettoyage et pré-traitement de données, Normalisation, Clustering, Prédiction et Visualisation de données.</strong> <br>
Le projet Streamlit n'est disponible qu'en local.
</p>
<div class="logos">
<img src="assets/streamlit-color.png">
</div>
<a href="https://github.com/Streamlit-project/" class="repo-button" target="_blank">Voir le Repository</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="grid-container">
<img src="assets/Burger.jpeg" alt="Image_son Logo" class="image">
<div class="content-container">
<h2>MyBigBurger</h2>
<p class="description">
Projet de 3e année de BUT informatique réalisé par 2 étudiants. <br>
Application web en Angular pour <strong>créer des burgers personnalisés</strong>. <br>
Choisissez parmi des ingrédients préenregistrés et ajoutez ou modifiez à votre guise. <br>
Consultez vos créations dans une liste de recettes. <br>
Commandez pour passer une recette dans une liste de commandes en cours. <br>
L'application MyBigBurger est uniquement disponible en local.
</p>
<div class="logos">
<img src="assets/angular.png">
</div>
<a href="https://github.com/Alexis1663/MyBigBurger/" class="repo-button" target="_blank">Voir le Repository</a>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</section>
<section class="container-alternance" id="alternance">
<div style="margin-top: 60px;">
<h1>Alternance</h1>
<hr style="width: 50%; margin: 0 auto; border: 1px solid #000;">
</div>
<div class="alternance-content">
<div class="image-container">
<img src="assets/satel.PNG" alt="Description de l'image">
</div>
<div class="text-container">
<p>
Durant cette 3e et dernière année de BUT informatique (2023-2024), j'ai eu la chance d'être en alternance chez <a href="https://www.satel.fr/" target="_blank">Satel</a> en tant que développeur web sur le site de Vichy du <strong>4 septembre 2023</strong> au <strong>30 août 2024</strong>. <br>
J'ai pu travailler sur des projets concrets et collaborer avec des professionnels du métier plus expérimentés que moi. <br>
J'ai également pu découvrir le monde de l'entreprise et ses contraintes. <br>
Ma mission principale était de migrer les données concernant la partie Ressources Humaines de Satel sur le site web déjà exitsant "SatelPlatform". <br>
Cette mission m'a permis de découvrir de nouvelles technologies comme Angular ou encore NestJS et de me perfectionner dans le développement web. <br>
Elle m'a également permis de développer des compétences qui me seront précisieuses pour la suite de ma carrière et notamment dès les 2 prochaines années en Mastère développeur web Full Stack à OpenIT. <br>
Ces compétences sont les suivantes : <strong>réaliser des développement d'applications</strong>, <strong>gérer des données de l'information</strong>, <strong>collaborer au sein d'une équipe informatique</strong>. <br>
Dès septembre 2024, je serais de nouveaux en alternance chez Satel jusqu'en 2026. <br>
Je suis très heureux de continuer l'aventure chez Satel et de pouvoir continuer à apprendre et à me perfectionner dans le développement web. <br>
Je suis également très reconnaissant envers Satel de m'avoir fait confiance et de m'avoir permis de réaliser mon rêve de devenir développeur web. <br>
Je suis impatient de commencer cette nouvelle année et de relever de nouveaux défis. <br>
</p>
</div>
</div>
</section>
<footer>
<div class="footer">
<div class="footer-text">
<p>Created with ♥ by Théo DUPIN © 2024</p>
</div>
</div>
</footer>
<button onclick="topFunction()" id="button-top" title="Go to top"><i class="fas fa-arrow-up"></i></button>
<script src="main.js"></script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink