commit cbe1a1bff3f507f7527934b84d1b54fdc979df97 Author: HugoooR Date: Thu Jun 27 11:48:19 2024 +0200 :tada: initial commit diff --git a/.drone.yml b/.drone.yml new file mode 100644 index 0000000..ec8f00e --- /dev/null +++ b/.drone.yml @@ -0,0 +1,29 @@ +kind: pipeline +type: docker +name: CD_pipeline + +trigger: + event: + - push + +steps: + - name: docker-build-and-push + image: plugins/docker + settings: + dockerfile: ./docker/Dockerfile + context: . + registry: hub.codefirst.iut.uca.fr + repo: hub.codefirst.iut.uca.fr/hugo.rochelle/portfolio + username: + from_secret: SECRET_REGISTRY_USERNAME + password: + from_secret: SECRET_REGISTRY_PASSWORD + + # container deployment + - name: deploy-container + image: hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientdrone:latest + environment: + IMAGENAME: hub.codefirst.iut.uca.fr/hugo.rochelle/portfolio:latest + CONTAINERNAME: portfolio-hugo-rochelle + COMMAND: create + OVERWRITE: true \ No newline at end of file diff --git a/docker/.htaccess b/docker/.htaccess new file mode 100644 index 0000000..aa5afc1 --- /dev/null +++ b/docker/.htaccess @@ -0,0 +1,4 @@ + + Order Allow,Deny + Deny from All + \ No newline at end of file diff --git a/docker/Dockerfile b/docker/Dockerfile new file mode 100644 index 0000000..b150ef5 --- /dev/null +++ b/docker/Dockerfile @@ -0,0 +1,4 @@ +FROM php:8.0-apache as base +COPY . /var/www/html/ +WORKDIR /var/www/html/ +EXPOSE 80 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..daed977 --- /dev/null +++ b/index.html @@ -0,0 +1,329 @@ + + + + + + Hugo Rochelle + + + + + + + + + + + + + + +
+
+
+
Bonjour, je m'appelle
+
Hugo Rochelle
+
Et je suis un
+ À propos de moi +
+
+
+ + +
+
+

About Me

+
+
+ my-avatar +
+
+
Je m'appelle Hugo Rochelle et je suis un
+

+ Salut ! Je suis un développeur junior de 20 ans. Depuis mon plus jeune âge, je suis très curieux et + j'adore découvrir et apprendre de nouvelles choses ou concepts. Je suis passionné d'Histoire et de sport, + j'adore écouter de la musique quand je marche, conduit et plus généralement tout le temps ! + Voyager est aussi une autre de mes passions, j'ai nottamment vécu au Canada pendant 7 mois à Chicoutimi (QC) + pour mes études (en 2ème année de BUT), et c'est pour moi une expérience de vie très importante et que je chérie + beaucoup ! Après mes études j'aimerais beaucoup retourner au Canada, mais cette fois pour y travailler ! +

+
+

+ Fun Fact: Cette photo a été prise au milieu des chutes Fer-à-Cheval (Chutes du Niagara), à la frontière entre les États-Unis et la Canada, et j'étais trempé ! +

+
+ Télécharger mon CV +
+
+
+
+ + +
+
+

Formations

+
+ +
+
+ + Mastère Architecture des Systèmes d’Information +
+

École Hexagone, Clermont-Ferrand
2024 - 2026

+

Je vais suivre cette formation pendant 2 ans en alternance chez Euromaster

+
+ + +
+
+ + Échange universitaire au Canada +
+

Université du Québec À Chicoutimi (UQAC), Canada, QC
2022 - 2023 (7 mois)

+

Cette expérience à l'UQAC m'a permis de découvrir de nouvelles cultures et d'améliorer mes compétences en programmation et en gestion de projet.

+
+ + +
+
+ + BUT Informatique +
+

IUT Clermont Auvergne, Aubière
2021 - 2024

+

Durant cette formation, j'ai acquis des bases solides en développement web, en bases de données et en algorithmique.

+
+ +
+
+
+ + + + + + + +
+
+

Contactez moi

+
+
+
Restons en contact !
+
+
+ +
+
Nom
+
Hugo Rochelle
+
+
+
+ +
+
Situé à
+
Clermont-Ferrand
+
+
+
+ +
+
Email
+
hugo.rochelle@gmail.com
+
+
+
+
+
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..198ea33 --- /dev/null +++ b/index.js @@ -0,0 +1,75 @@ +$(document).ready(function(){ + $(window).scroll(function(){ + // sticky navbar on scroll script + if (this.scrollY > 20) { + $('.navbar').addClass("sticky"); + } else { + $('.navbar').removeClass("sticky"); + } + + // scroll-up button show/hide script + if (this.scrollY > 500) { + $('.scroll-up-btn').addClass("show"); + } else { + $('.scroll-up-btn').removeClass("show"); + } + }); + + // slide-up script + $('.scroll-up-btn').click(function(){ + $('html').animate({scrollTop: 0}); + // removing smooth scroll on slide-up button click + $('html').css("scrollBehavior", "auto"); + }); + + $('.navbar .menu li a').click(function(){ + // applying again smooth scroll on menu items click + $('html').css("scrollBehavior", "smooth"); + }); + + // toggle menu/navbar script + $('.menu-btn').click(function(){ + $('.navbar .menu').toggleClass("active"); + $('.menu-btn i').toggleClass("active"); + }); + + // typing text animation script + var typedOptions = { + strings: ["Développeur Junior"], + typeSpeed: 100, + backSpeed: 60, + loop: true + }; + + var typed = new Typed(".typing", typedOptions); + + var typed2 = new Typed(".typing-2", { + strings: ["développeur junior", "étudiant en informatique", "fan d'Histoire"], + typeSpeed: 100, + backSpeed: 60, + loop: true + }); + + // owl carousel script + $('.carousel').owlCarousel({ + margin: 20, + loop: true, + autoplay: true, + autoplayTimeout: 2000, + autoplayHoverPause: true, + responsive: { + 0: { + items: 1, + nav: false + }, + 600: { + items: 2, + nav: false + }, + 1000: { + items: 3, + nav: false + } + } + }); +}); diff --git a/public/cv/CV_Hugo_ROCHELLE.pdf b/public/cv/CV_Hugo_ROCHELLE.pdf new file mode 100644 index 0000000..b568c18 Binary files /dev/null and b/public/cv/CV_Hugo_ROCHELLE.pdf differ diff --git a/public/images/home_pic.jpg b/public/images/home_pic.jpg new file mode 100644 index 0000000..51d8d1a Binary files /dev/null and b/public/images/home_pic.jpg differ diff --git a/public/images/logoHR.png b/public/images/logoHR.png new file mode 100644 index 0000000..e7ba6d9 Binary files /dev/null and b/public/images/logoHR.png differ diff --git a/public/images/logo_hexagone.png b/public/images/logo_hexagone.png new file mode 100644 index 0000000..1ccef71 Binary files /dev/null and b/public/images/logo_hexagone.png differ diff --git a/public/images/niagara.jpg b/public/images/niagara.jpg new file mode 100644 index 0000000..1a810bb Binary files /dev/null and b/public/images/niagara.jpg differ diff --git a/public/images/uca_logo.png b/public/images/uca_logo.png new file mode 100644 index 0000000..5e70d5f Binary files /dev/null and b/public/images/uca_logo.png differ diff --git a/public/images/uqac.png b/public/images/uqac.png new file mode 100644 index 0000000..a85973c Binary files /dev/null and b/public/images/uqac.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..a426904 --- /dev/null +++ b/style.css @@ -0,0 +1,708 @@ +/* Import Google Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Raleway:wght@400;500;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + font-family: "Raleway", sans-serif; +} + +:root { + --primary-color: #0A0A0A; /* Couleur primaire */ + --secondary-color: #FFA62F; /* Couleur secondaire */ +} + +html { + scroll-behavior: smooth; +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + background: #f1f1f1; +} +::-webkit-scrollbar-thumb { + background: #888; +} +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +/* Common Section Styles */ +section { + padding: 100px 0; +} +.max-width { + max-width: 1300px; + padding: 0 80px; + margin: auto; +} +.about, .services, .skills, .skills-hobbies, .contact, footer { + font-family: 'Raleway', sans-serif; +} +section .title { + position: relative; + text-align: center; + font-size: 40px; + font-weight: 500; + margin-bottom: 60px; + padding-bottom: 20px; + font-family: 'Poppins', sans-serif; +} +section .title::before { + content: ""; + position: absolute; + bottom: 0px; + left: 50%; + width: 180px; + height: 3px; + background: #111; + transform: translateX(-50%); +} +section .title::after { + position: absolute; + bottom: -8px; + left: 50%; + font-size: 20px; + color: #6e6e6e; + padding: 0 5px; + background: #fff; + transform: translateX(-50%); +} + +/* Navbar Styles */ +.navbar { + position: fixed; + width: 100%; + z-index: 999; + padding: 30px 0; + font-family: 'Poppins', sans-serif; + transition: all 0.3s ease; +} +.navbar.sticky { + padding: 0px; + background: #6e6e6e; +} +.navbar .max-width { + display: flex; + align-items: center; + justify-content: space-between; +} +.logo-container img { + width: 80px; + height: auto; +} +.navbar .menu li { + list-style: none; + display: inline-block; +} +.navbar .menu li a { + display: block; + color: #fff; + font-size: 18px; + font-weight: 500; + margin-left: 25px; + transition: color 0.3s ease; +} +.navbar .menu li a:hover { + color: var(--secondary-color); +} +.navbar .menu-btn { + color: #3883d3; + font-size: 23px; + cursor: pointer; + display: none; +} +.navbar .menu-btn i.active:before { + content: "\f00d"; +} + +/* Scroll Up Button */ +.scroll-up-btn { + position: fixed; + height: 45px; + width: 42px; + background: #3883d3; + right: 30px; + bottom: 10px; + text-align: center; + line-height: 45px; + color: #ededed; + z-index: 9999; + font-size: 30px; + border-radius: 6px; + cursor: pointer; + opacity: 0; + pointer-events: none; + transition: all 0.5s ease; +} +.scroll-up-btn.show { + bottom: 30px; + opacity: 1; + pointer-events: auto; +} +.scroll-up-btn:hover { + filter: brightness(90%); +} + +/* Home Section Styles */ +.home { + display: flex; + background: url(bn.jpg) no-repeat center; + height: 100vh; + min-height: 500px; + background-size: cover; + background-attachment: fixed; + color: #000; +} +.home .max-width { + width: 100%; + display: flex; +} +.home .home-content .text-1 { + font-size: 27px; +} +.home .home-content .text-2 { + font-size: 75px; + font-weight: 600; + margin-left: -3px; +} +.home .home-content .text-3 { + font-size: 40px; + margin: 5px 0; +} +.home .home-content .text-3 span { + color: #6e6e6e; + font-weight: 500; +} +.home .home-content a { + display: inline-block; + background: #6e6e6e; + color: #fff; + font-size: 16px; + font-weight: 500; + padding: 12px 36px; + margin-top: 20px; + border-radius: 6px; + transition: background 0.3s ease; +} +.home .home-content a:hover { + background: var(--secondary-color);; +} + +/* About Section Styles */ +.about .about-content { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 80px; +} +.about .about-content .column { + flex: 1; +} +.about .about-content .left img { + width: 100%; +} +.about .about-content .right { + margin-left: 50px; +} +.about .about-content .right .text { + font-size: 30px; + font-weight: 500; +} +.about .about-content .right p { + font-size: 16px; + margin: 20px 0; + color: #6e6e6e; + line-height: 1.6; +} +.about .about-content .right p:last-child { + margin-bottom: 40px; +} +.about .about-content .right .btn { + background: #3883d3; + color: #fff; + padding: 12px 36px; + border-radius: 6px; + font-size: 16px; + font-weight: 500; + transition: background 0.3s ease; +} +.about .about-content .right .btn:hover { + background: #6e6e6e; +} + +/* Services Section Styles */ +.services .serv-content { + display: flex; + justify-content: space-between; + margin-top: 80px; +} +.services .serv-content .card { + flex-basis: calc(33.333% - 20px); + background: #f9f9f9; + padding: 30px 20px; + border-radius: 6px; + transition: all 0.3s ease; +} +.services .serv-content .card:hover { + background: #ddd; +} +.services .serv-content .card .box { + display: flex; + align-items: center; +} +.services .serv-content .card .box i { + font-size: 35px; + color: #3883d3; + margin-right: 20px; +} +.services .serv-content .card .box .text { + font-size: 20px; + font-weight: 500; +} +.services .serv-content .card .box p { + font-size: 16px; + margin-top: 8px; + color: #6e6e6e; +} + +/* Skills Section Styles */ +.skills .skills-content { + display: flex; + justify-content: space-between; + margin-top: 80px; +} +.skills .skills-content .column { + flex: 1; +} +.skills .skills-content .text { + font-size: 30px; + font-weight: 500; + margin-bottom: 30px; +} +.skills .skills-content .column.right .bars { + margin-bottom: 30px; +} +.skills .skills-content .column.right .bars:last-child { + margin-bottom: 0; +} +.skills .skills-content .column.right .bars .info { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} +.skills .skills-content .column.right .bars .info span:first-child { + font-size: 18px; + font-weight: 500; + color: #6e6e6e; +} +.skills .skills-content .column.right .bars .info span:last-child { + font-size: 16px; + font-weight: 400; + color: #3883d3; +} +.skills .skills-content .column.right .bars .line { + height: 8px; + width: 100%; + background: #f1f1f1; + border-radius: 8px; + position: relative; +} +.skills .skills-content .column.right .bars .line:before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + height: 100%; + background: #3883d3; + border-radius: 8px; +} +.skills .skills-content .column.right .bars .line.html:before { + width: 90%; +} +.skills .skills-content .column.right .bars .line.css:before { + width: 60%; +} +.skills .skills-content .column.right .bars .line.js:before { + width: 50%; +} +.skills .skills-content .column.right .bars .line.react:before { + width: 70%; +} +.skills .skills-content .column.right .bars .line.ts:before { + width: 80%; +} + +/* Skills & Hobbies Section Styles */ +.skills-hobbies .carousel .owl-nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 100%; + display: flex; + justify-content: space-between; +} +.skills-hobbies .carousel .owl-nav .owl-prev, .skills-hobbies .carousel .owl-nav .owl-next { + background: #3883d3; + color: #fff; + padding: 8px 20px; + border-radius: 30px; + font-size: 18px; + display: inline-block; + transition: background 0.3s ease; +} +.skills-hobbies .carousel .owl-nav .owl-prev:hover, .skills-hobbies .carousel .owl-nav .owl-next:hover { + background: #6e6e6e; +} +.skills-hobbies .carousel .owl-nav .owl-prev { + margin-left: 10px; +} +.skills-hobbies .carousel .owl-nav .owl-next { + margin-right: 10px; +} +.skills-hobbies .carousel .owl-dots { + text-align: center; + margin-top: 20px; +} +.skills-hobbies .carousel .owl-dots .owl-dot { + height: 15px; + width: 15px; + background: #6e6e6e; + display: inline-block; + margin: 0 5px; + border-radius: 50%; + transition: background 0.3s ease; +} +.skills-hobbies .carousel .owl-dots .owl-dot.active { + background: #3883d3; +} +.skills-hobbies .carousel .card { + padding: 20px; + background: #f9f9f9; + border-radius: 6px; + transition: all 0.3s ease; +} +.skills-hobbies .carousel .card:hover { + background: #ddd; +} +.skills-hobbies .carousel .card .box { + display: flex; + align-items: center; +} +.skills-hobbies .carousel .card .box i { + font-size: 35px; + color: #3883d3; + margin-right: 20px; +} +.skills-hobbies .carousel .card .box .text { + font-size: 20px; + font-weight: 500; +} +.skills-hobbies .carousel .card .box p { + font-size: 16px; + margin-top: 8px; + color: #6e6e6e; +} + +/* Contact Section Styles */ +.contact .contact-content { + display: flex; + justify-content: space-between; + margin-top: 80px; + } + .contact .contact-content .column { + flex: 1; + } + .contact .contact-content .left .text { + font-size: 30px; + font-weight: 500; + } + .contact .contact-content .left p { + font-size: 16px; + margin-top: 20px; + color: #6e6e6e; + line-height: 1.6; + } + .contact .contact-content .left .icons { + margin-top: 20px; + } + .contact .contact-content .left .icons i { + font-size: 30px; + color: #3883d3; + margin-right: 20px; + transition: color 0.3s ease; + } + .contact .contact-content .left .icons i + { + color: #6e6e6e; + } + .contact .contact-content .right form .fields { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-top: 20px; + } + .contact .contact-content .right form .field, .contact .contact-content .right form .textarea { + margin-bottom: 20px; + } + .contact .contact-content .right form .field input, .contact .contact-content .right form .textarea textarea { + width: calc(100% - 10px); + padding: 10px; + border-radius: 6px; + border: 1px solid #ccc; + outline: none; + transition: border-color 0.5s ease; + } + .contact .contact-content .right form .field input + , .contact .contact-content .right form .textarea textarea + { + border-color: #3883d3; + } + .contact .contact-content .right form .textarea textarea { + height: 100px; + resize: none; + } + .contact .contact-content .right form .button-area { + margin-top: 20px; + } + .contact .contact-content .right form .button { + background: #3883d3; + color: #fff; + padding: 12px 36px; + border-radius: 6px; + cursor: pointer; + transition: background 0.3s ease; + } + .contact .contact-content .right form .button + { + background: #6e6e6e; + } + + /* Footer Section Styles */ + footer { + background: #000; + color: #fff; + padding: 10px 0; + font-size: 16px; + text-align: center; + } + + /* Media Queries */ + @media(max-width: 1200px) { + .max-width { + padding: 0 50px; + } + } + + @media(max-width: 1080px) { + .max-width { + padding: 0 40px; + } + } + + @media(max-width: 991px) { + .max-width { + padding: 0 30px; + } + } + + @media(max-width: 768px) { + .max-width { + padding: 0 20px; + } + .navbar .menu { + display: none; + } + .navbar .menu-btn { + display: block; + } + .navbar.active .menu { + display: block; + position: absolute; + top: 80px; + left: 0; + width: 100%; + background: #6e6e6e; + padding: 10px 0; + border-top: 1px solid #fff; + } + .navbar.active .menu li { + width: 100%; + text-align: center; + } + .navbar.active .menu li a { + margin-left: 0; + display: block; + padding: 10px 20px; + } + } + + @media(max-width: 500px) { + .home .home-content .text-2 { + font-size: 50px; + } + .home .home-content .text-3 { + font-size: 30px; + } + .home .home-content a { + font-size: 14px; + } + .about .about-content .right .text { + font-size: 24px; + } + .about .about-content .right p { + font-size: 14px; + } + .about .about-content .right .btn { + font-size: 14px; + } + .services .serv-content .card .box i { + font-size: 30px; + } + .services .serv-content .card .box .text { + font-size: 16px; + } + .services .serv-content .card .box p { + font-size: 14px; + } + .skills .skills-content .text { + font-size: 24px; + } + .skills .skills-content .column.right .bars .info span + { + font-size: 16px; + } + .skills .skills-content .column.right .bars .info span + { + font-size: 14px; + } + .skills-hobbies .carousel .card .box i { + font-size: 30px; + } + .skills-hobbies .carousel .card .box .text { + font-size: 16px; + } + .skills-hobbies .carousel .card .box p { + font-size: 14px; + } + .contact .contact-content .left .text { + font-size: 24px; + } + .contact .contact-content .left p { + font-size: 14px; + } + .contact .contact-content .right form .field input, .contact .contact-content .right form .textarea textarea { + width: calc(100% - 20px); + } + .contact .contact-content .right form .button { + font-size: 14px; + } + } + +.logo { + font-size: 1.6rem; /* Agrandir le texte du logo */ + font-weight: bold; + color: var(--secondary-color); /* Appliquer la couleur secondaire au nom */ +} + +.logo-container { + display: flex; + align-items: center; + text-decoration: none; +} + +.btn-download { + display: inline-block; + padding: 10px 20px; + margin-top: 20px; + font-size: 16px; + color: #fff; + background-color: #6e6e6e; + text-align: center; + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +.btn-download:hover { + background-color: var(--secondary-color); +} + +/* Formations section */ +.formations { + padding: 100px 0; + background: #f8f8f8; +} +.formations .max-width { + max-width: 1200px; + margin: auto; + padding: 0 20px; +} +.formations .title { + text-align: center; + font-size: 36px; + font-weight: 600; + margin-bottom: 40px; + position: relative; +} +.formations .formations-content { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.formations .card { + background: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + margin: 15px 0; + width: calc(33.33% - 20px); /* Ajuster la largeur pour les 3 cartes */ + padding: 20px; + box-sizing: border-box; + transition: all 0.3s ease; + text-decoration: none; /* Supprime la décoration de lien */ + color: inherit; /* Hérite de la couleur du texte par défaut */ + cursor: pointer; /* Curseur pointer au survol */ +} +.formations .card:hover { + transform: translateY(-10px); + box-shadow: 0 6px 12px rgba(0,0,0,0.2); +} +.formations .box { + text-align: center; +} +.formations .box .text { + font-size: 24px; + font-weight: 500; + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: center; +} +.formations .box .text img.formation-logo { + width: 40px; + height: 40px; + margin-right: 10px; + border-radius: 100%; /* Ajoute le border-radius pour rendre les logos circulaires */ +} +.formations .box p { + font-size: 16px; + color: #555; + line-height: 1.5; +} +.formations .box p.description { + font-size: 14px; + color: #777; + margin-top: 10px; + text-align: left; /* Optionnel: ajuster selon le style souhaité */ +} +@media (max-width: 768px) { + .formations .card { + width: 100%; + } +} +