From a4cbca6fee5f0255d7b43625324d213cc355bea9 Mon Sep 17 00:00:00 2001 From: Destroyeur6315 Date: Wed, 26 Jun 2024 16:44:35 +0200 Subject: [PATCH] :lipstick: update design --- index.html | 558 ++++++++++++++++++++--------------------------------- main.js | 6 - style.css | 36 ++-- 3 files changed, 230 insertions(+), 370 deletions(-) diff --git a/index.html b/index.html index 339b2e2..55e6280 100644 --- a/index.html +++ b/index.html @@ -1,388 +1,240 @@ + - - - Mon portfolio - + + + Mon portfolio + + + + -
- + + +
+ +
+ + + - - -
-
-
-
Bonjour, Je m'appelle
-
Fillot Romain
-
Et je suis alternant en informatique
- A propos de moi +
+
+ + +
+
+

A propos de moi

+
+
+ Profile Image
-
-
- - -
-
-

A propos de moi

-
-
- Profile Image 626x626 -
-
-
Moi c'est Romain
-

- Passionné d'informatique, j'ai découvert ce domaine lors de ma première année de lycée, - en seconde. En effet, j'ai opté pour l'option ICN qui m'a permis de faire mon premier - pas dans ce monde fabuleux. J'ai pu y découvrir les bases du fonctionnement d'un ordinateur - ainsi que le langage python. -

- J'ai beaucoup apprécié cette option, qui m'est apparue dans un premier temps très - obscure et compliquée. Néanmoins, cela n'a pas suffi pour me décourager étant donné - que je suis en 3e année d'IUT informatique. Bien entendu, je ne m'arrête pas en si bon chemin. L'année prochaine, c'est parti pour deux ans supplémentaires en - Mastère informatique à l'école Hexagone. Cette fois-ci, je me spécialise un peu en me - tournant vers la filière "Architecture des Systèmes d'information". -

- Pendant mon temps libre je ne fais pas que de l'informatique. J'aime beaucoup le sport - (pratiquant de musculation depuis presque 6 ans), je sors souvent avec mes ami(e)s et - je m'intéresse depuis peu à deux nouveaux domaines qui me passionnent : les - cryptomonnaies avec tout ce qui se cache derrière (NFT, blockchain, DeFi...) et les - voitures (vieilles voitures, mécanique...). -

-
- Télécharger CV -
+
+
Moi c'est Romain
+

+ Passionné d'informatique, j'ai découvert ce domaine lors de ma première année de lycée, + en seconde. En effet, j'ai opté pour l'option ICN qui m'a permis de faire mon premier + pas dans ce monde fabuleux. J'ai pu y découvrir les bases du fonctionnement d'un ordinateur + ainsi que le langage python. +

+ J'ai beaucoup apprécié cette option, qui m'est apparue dans un premier temps très + obscure et compliquée. Néanmoins, cela n'a pas suffi pour me décourager étant donné + que je suis en 3e année d'IUT informatique. Bien entendu, je ne m'arrête pas en si bon chemin. L'année + prochaine, c'est parti pour deux ans supplémentaires en + Mastère informatique à l'école Hexagone. Cette fois-ci, je me spécialise un peu en me + tournant vers la filière "Architecture des Systèmes d'information". +

+ Pendant mon temps libre je ne fais pas que de l'informatique. J'aime beaucoup le sport + (pratiquant de musculation depuis presque 6 ans), je sors souvent avec mes ami(e)s et + je m'intéresse depuis peu à deux nouveaux domaines qui me passionnent : les + cryptomonnaies avec tout ce qui se cache derrière (NFT, blockchain, DeFi...) et les + voitures (vieilles voitures, mécanique...). +

+
+ Télécharger CV
-
- - -
-
-

Mes expériences

- -
- - - -
-
- - - -
-
-
- - - +
+
+

Mes expériences

+
+ -
--> - - - - - -
-
-

Me contacter

-
-
-
Entrer en contact
-

- N'hésitez pas à me contacter ! Je suis ouvert à toute discussion et ce serait avec - plaisir d'échanger avec des passionnés. -

-
- - -
- -
-
Nom
-
Fillot Romain
-
-
- - -
- -
-
 Adresse
-
 Clermont-Ferrand
-
-
- -
- -
-
Email
-
romain.fillot630@gmail.com
-
-
- +
+ + + +
+
+
+ + +
+
+

Me contacter

+
+ + +

+ N'hésitez pas à me contacter ! Je suis ouvert à toute discussion et ce serait avec + plaisir d'échanger avec des passionnés. +

+
+ +
- +
-
Langue
-
Anglais opérationnel
+
Nom
+
+ Fillot Romain
- -
+ - - - - -
-
Formulaire
-
-
-
- -
- -
-
- -
-
- + +
+ +
+
Email
+
romain.fillot630@gmail.com
-
- +
+ +
+ +
+
Langue
+
Anglais opérationnel
- +
+ +
+ + +
-
+
-
- - - +
+ + + + + + + + + - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/main.js b/main.js index f2fe4f6..c557ff7 100644 --- a/main.js +++ b/main.js @@ -2,10 +2,8 @@ $(document).ready(function () { $(window).scroll(function () { if (this.scrollY > 20) { $(".navbar").addClass("sticky"); - console.log("romain"); } else { $(".navbar").removeClass("sticky"); - console.log("romain"); } // scroll-up button show/hide script // @@ -17,7 +15,6 @@ $(document).ready(function () { }); // slide-up script // - $(".scroll-up-btn").click(function () { $("html").animate({ scrollTop: 0 }); // removing smooth scroll on slide-up button click // @@ -26,19 +23,16 @@ $(document).ready(function () { $(".navbar .menu li a").click(function () { // Smooth scroll on Menu Items click // - $("html").css("scrollBehavior", "smooth"); }); // Toggle Navbar // - $(".menu-btn").click(function () { $(".navbar .menu").toggleClass("active"); $(".menu-btn i").toggleClass("active"); }); // Typing Text Animation // - var typed = new Typed(".typing", { strings: [ "Fullstack Developer", diff --git a/style.css b/style.css index 2d1384b..3785ba0 100644 --- a/style.css +++ b/style.css @@ -69,13 +69,20 @@ footer { .about .about-content, .services .serv-content, .skills .skills-content, -.contact .contact-content { +.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } +.contact-content{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} + section .title { position: relative; text-align: center; @@ -179,7 +186,7 @@ section .title::after { position: fixed; height: 45px; width: 42px; - background: #1e3551; + background: #0d4d9b; right: 30px; bottom: 10px; text-align: center; @@ -253,14 +260,14 @@ section .title::after { .home .home-content a { display: inline-block; - background: #1e3551; + background: #0d4d9b; color: #fff; font-size: 25px; padding: 12px 36px; margin-top: 20px; font-weight: 400; border-radius: 6px; - border: 2px solid #1e3551; + border: 2px solid #ffffff; transition: all 0.3s ease; } @@ -384,9 +391,9 @@ section .title::after { } .carousel-buttons button { - background-color: #2e72c4; + background-color: #0d4d9b; + border: 2px solid #ffffff; color: white; - border: none; padding: 10px 20px; margin: 0 5px; cursor: pointer; @@ -394,7 +401,8 @@ section .title::after { } .carousel-buttons button:hover { - background-color: #0056b3; + color: #1e3551; + background: rgb(240, 246, 254); } .services, @@ -658,6 +666,10 @@ section .title::after { width: calc(50% - 30px); } +.contact .contact-content p { + margin-bottom: 30px; +} + .contact .contact-content .text { font-size: 20px; font-weight: 600; @@ -772,17 +784,19 @@ section .title::after { } .social-menu ul { - position: absolute; - left: 20%; + position: fixed; + right: 10px; + top : 150px; padding: 0; margin-top: 35px; transform: translate(-50%, -50%); display: flex; + flex-direction: column; } .social-menu ul li { list-style: none; - margin: 0 15px; + margin: 10px 0; } .social-menu ul li .fa { @@ -805,7 +819,7 @@ section .title::after { width: 30px; height: 30px; border-radius: 50%; - background-color: #1e3551; + background-color: #0d4d9b; text-align: center; transition: 0.6s; box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);