@ -19,7 +19,12 @@
<!-- 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 >
@ -31,10 +36,10 @@
< / label >
< nav class = "header-nav" >
< a href = "#about -me" style = "--i:0 "> À propos de moi< / a >
< a href = "#skills" style = "--i: 1 "> Compétences< / a >
< a href = "# " style = "--i:2 "> Projets< / a >
< a href = "#" style = "--i: 3 "> Alternance< / a >
< 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 = "#" style = "--i: 4 "> Alternance< / a >
< / nav >
< / header >
@ -71,7 +76,7 @@
< / div >
< / section >
< section class = "container-about-me" id = "about - me">
< 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;" >
@ -106,7 +111,7 @@
Bonne visite !
< / p >
< / div >
< div style= "width: 80%; ">
< 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 >
@ -117,53 +122,191 @@
< h1 > Compétences< / h1 >
< hr style = "width: 50%; margin: 0 auto; border: 1px solid #000;" >
< / div >
< div style = "display: flex; flex-direction: column; justify-content: center; align-items: center;" >
< 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: #626567;" > < img src = "assets/python.png" > Python< / span >
< span class = "badge" style = "background-color: #563d7c;" > < i class = "fab fa-php" > < / i > PHP< / span >
< span class = "badge" style = "background-color: #4eaa25;" > < i class = "fas fa-terminal" > < / i > 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 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 > PHP< / span >
< span class = "badge" style = "background-color: #4eaa25;" > < i class = "fas fa-terminal" > < / i > 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 >
< div style = "display: flex; flex-direction: column; justify-content: center; align-items: center;" >
< 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: #6 1dafb; color: black;"> < i class = "fab fa-react" > < / i > React < / span >
< span class = "badge" style = "background-color: #6 8a063;"> < i class = "fab fa-node-js" > < / i > Node.js < / span >
< span class = "badge" style = "background-color: gray;"> < img src = "assets/typeorm.png" > TypeORM < / 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 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: #6 8a063;"> < i class = "fab fa-node-js" > < / i > Node.js < / span >
< span class = "badge" style = "background-color: #6 1dafb; 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 >
< div style = "display: flex; flex-direction: column; justify-content: center; align-items: center;" >
< h4 > Bases de données< / h4 >
< div class = "skills-content" >
< span class = "badge" style = "background- color: #326790;"> < img src = "assets/postgresql.png" > Postgre SQL< / 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 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" > My SQL< / 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 >
< div style = "display: flex; flex-direction: column; justify-content: center; align-items: center;" >
< 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 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 > 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/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 >
< footer >
< div class = "footer" >
< div class = "wave wave1" > < / div >
thdupin2
1 year ago
