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.
183 lines
11 KiB
183 lines
11 KiB
<!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>
|
|
<!-- ---------------------- -->
|
|
</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: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>
|
|
</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 style="width: 80%;">
|
|
<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 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>
|
|
</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: #61dafb; color: black;"><i class="fab fa-react"></i> React</span>
|
|
<span class="badge" style="background-color: #68a063;"><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>
|
|
</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"> 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 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>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="footer">
|
|
<div class="wave wave1"></div>
|
|
<div class="wave wave2"></div>
|
|
<div class="wave wave3"></div>
|
|
<div class="wave wave4"></div>
|
|
<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> |