commit ae1cf1315cf63a6e2758832a9b9081432db22ecd Author: Matheo Guilbert Date: Tue Oct 3 09:22:32 2023 +0200 03/10/23 firstcommit diff --git a/README.md b/README.md new file mode 100644 index 0000000..382e2cc --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# PortFolio_Matheo \ No newline at end of file diff --git a/about.html b/about.html new file mode 100644 index 0000000..21e59f5 --- /dev/null +++ b/about.html @@ -0,0 +1,155 @@ + + + + + + + + + + + + About me ! + + + +
+
+ + +
+
+ photo de Mathéo +
+

Un lycéen
passionné
d'informatique

+
+
+ +
+ +
+ +
+
+ time machine image +
+ +
+

PRE BAC

+

De Coron à Chemillé

+

J'ai d'abord fait une maternelle puis une primaire à l'école Saint Louis à Coron, + ma commune de résidence. Je suis ensuite allé au collège Notre Dame à La Salle de + Vihiers.
J'ai fait une seconde générale à Renaudeau pour intégrer une filière STI2D SIN au + lycée de L'Hyrôme, à Chemillé.

+
+
+
+ +
+ +
+ +
+
+ illustration d'informatique +
+ +
+

POST BAC

+

Informatique un jours,
Informatique toujours !

+

Après le BAC, je voudrais faire un BUT Informatique en trois ans, et, pourquoi pas, + poursuivre dans une école d'ingénieur. Toujours dans l'informatique bien entendu !

+
+
+
+ +
+ +
+ +
+
+ illustration de code +
+ +
+

SKILLS

+

HTML, CSS, JS, Python,
C and more ...

+

J'ai commencé par apprendre le HTML et le CSS lors d'un stage en 4ème année de + collège. Puis j'ai étendu mes connaissances avec le Python. Dans le cadre du lycée j'ai aussi + coder en C et en JS, je n'ai pas résisté à ma curiosité bien longtemps et j'ai approfondi ces + toutes nouvelles notions toutes autant appétissantes les unes que les autres en autodidacte.

+
+
+
+ + +
+
+
+
+
+ github logo + linkedin logo + awwwards logo + fiverr logo +
+ +
+
+
+ +

Arrows icons + created by Pixel perfect - Flaticon

+

Image par Sergey + Prusakov de Pixabay +

+

Arrow icons created + by Freepik - Flaticon

+

Image par Daniel + Roberts de Pixabay +

+

Image par krzysztof-m + de Pixabay +

+

Pointing icons + created by Freepik - Flaticon

+

Technology illustrations by Storyset

+

Work illustrations by Storyset

+

Image par naobim + de Pixabay +

+ +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/astroPi.html b/astroPi.html new file mode 100644 index 0000000..6ffbf3e --- /dev/null +++ b/astroPi.html @@ -0,0 +1,121 @@ + + + + + + + + + + + + Astro Pi + + + + +
+ +
+
+ +
+
+

Mission Space Lab

+
+
+ +
+
+ +
+

Le concours Astro Pi

+
+ +
+ + +
+
+ +
+

Astro Pi ? C'est quoi ?

+

Le concours Astro Pi est organisé par l'ESA, pour les écoles européennes. Il se décompose en 4 phases : la soumission du projet, la réalisation du projet, la vérification du programme et son exécution sur l'ISS, puis la phase de compte rendu en anglais. Chaque phase est éliminatoire. Le meilleur compte rendu gagne le concours.

+ + +
+
+ + +
+
+ +
+

Notre projet

+

Pour réaliser le projet, nous étions par groupe de 5. Le notre consistait à prendre des photos de la terre à partir de l'ISS pour ensuite y détecter les fumées d'incendie. Le but était de créer un moyen de détecter les feux plus efficacement.

+
+
+ + +
+
+ +
+

Mes tâches

+

Pour ce projet j'étais chargé de faire le traitement d'image. Pour cela j'ai opté pour la méthode KNN (Cas Plus Proche Voisin en français). Mais les images étaient trop grandes en termes de pixels et donc le traitement d'une seule image mettait trop longtemps ... J'ai alors dû faire un code qui découpe les images en d'autres plus petites.

+
+
+ + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..1815174 --- /dev/null +++ b/contact.html @@ -0,0 +1,33 @@ + + + + + + + + + + Contact + + + +
+
+

#CONTACTME

+
+ + +
+
+ + +
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/css/about.css b/css/about.css new file mode 100644 index 0000000..8bf802c --- /dev/null +++ b/css/about.css @@ -0,0 +1,187 @@ +@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@200;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap'); + +body { + margin: 0px; + padding: 0px; + + overflow: hidden; +} + +.first-container { + height: 100vh; + position: relative; +} + +.other-container { + height: 100vh; +} + +.container-container { + scroll-snap-align: center; +} + +/* headerStyle */ + +.header { + width: 100vw; + height: 100vh; + background-color: rgb(1, 1, 1); + display: flex; + justify-content: center; + align-items: center; +} + +.divImgProfil { + width: fit-content; +} + +.imgProfil { + height: 60vh; + border-radius: 30px; + position: relative; +} + +.header h1 { + color: #f1f1f1; + font-size: clamp(50px, 5vw, 80px); + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + text-align: left; + width: fit-content; + margin-left: 50px; +} + +.header h1 span { + font-family: 'Source Code Pro', monospace; + font-size: clamp(45px, 5vw, 70px); + transition-property: color; + transition-duration: 0.75s; + transition-delay: 0s; +} + +.header h1 span:hover { + color: #ff7700; +} + + +/* contentPageStyle */ + +.contentPage-container { + margin: 0px; + padding: 0px; + height: 100vh; + + overflow-y: scroll; + scroll-snap-type: y mandatory; +} + +.borderBottomImg { + width: 100vw; + height: 6%; + background-image: url(../img/borderBottom.svg); + background-repeat: repeat; +} + +.borderTopImg { + width: 100vw; + height: 6%; + background-image: url(../img/borderBottom.svg); + background-repeat: repeat; + transform: rotateX(180deg); +} + +.part-container { + width: 100vw; + height: 94%; + display: flex; + align-items: center; +} + +.leftColumn { + width: 50vw; + height: 94%; + display: flex; + justify-content: center; + align-items: center; +} + +.leftColumn img { + width: 60%; +} + +.rightColumn { + width: 50vw; + margin-left: 5%; +} + +.rightColumn h2 { + font-size: clamp(45px, 5vw, 70px); + font-family: Arial, Helvetica, sans-serif; + font-weight: 900; + margin-bottom: 0px; +} + +.rightColumn h3 { + font-size: clamp(30px, 5vw, 60px); + font-family: 'Kaushan Script', cursive; + /*Kaushan Script*/ + margin-top: 0px; +} + +.rightColumn p { + width: 60%; + margin-left: 7.5%; + text-align: justify; + font-size: clamp(20px, 5vw, 35px); + font-family: Arial, Helvetica, sans-serif; +} + +.black { + color: #111; +} + +.white { + color: white; +} + +.whiteBgc { + background-color: white; +} + +.blackBgc { + background-color: black; +} + +@media screen and (max-width:1023px) { + .header { + flex-direction: column-reverse; + } + + .header h1 { + margin-left: 0px; + } + + .imgProfil { + height: 55vh; + } +} + +@media screen and (max-width:1500px) { + .leftColumn { + visibility: hidden; + width: 0px; + } + + .rightColumn { + width: 100vw; + margin-left: 10%; + } + + .rightColumn p { + width: 80%; + } +} diff --git a/css/backBtn.css b/css/backBtn.css new file mode 100644 index 0000000..8eb8d68 --- /dev/null +++ b/css/backBtn.css @@ -0,0 +1,41 @@ +.backBtn-container { + position: absolute; + top: 85px; + left: 70px; + display: flex; + align-items: center; + justify-content: space-around; + background-color: #fff; + border-style: none; + border-radius: 30px; + padding-right: 10px; + padding-left: 10px; + width: 200px; +} + +.backBtn-container a { + display: flex; + align-items: center; + justify-content: space-around; + text-decoration: none; +} + +.backArrow img { + transform: rotate(180deg); + width: 40px; + height: 40px; +} + +.backTxt p { + color: #111; + font-family: 'Arial Narrow Bold', sans-serif; + font-size: 2rem; + font-weight: bold; + margin: 10px; +} + +@media screen and (max-width:1023px) { + .backBtn-container { + visibility: hidden; + } +} \ No newline at end of file diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 0000000..88966fc --- /dev/null +++ b/css/contact.css @@ -0,0 +1,88 @@ +@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@200;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap'); + +/* CONTACT PAGE */ +body { + margin: 0px; + padding: 0px; + background-color: #fff; +} + +.contact-container { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.formulaire h1 { + color: #ff7700; + font-size: 5em; + font-family: 'Sofia Sans Semi Condensed', sans-serif; +} + +.formulaire h1 span { + background-color: #111; + border-radius: 15px; + padding-left: 10px; + padding-right: 10px; + margin-right: 10px; + color: #f1f1f1; + font-size: 1em; + font-family: 'Source Code Pro', monospace; +} + +.labelAndInput-container { + display: flex; + flex-direction: column; +} + +.labelAndInput-container label { + color: #111; + font-family: 'Source Code Pro', monospace; + font-weight: bold; + font-size: 1em; + margin: 10px; +} + +.labelAndInput-container input { + border: solid 1px; + border-color: #111; + border-radius: 10px; + width: 100%; + height: 30px; + background-color: #fff; +} + +.labelAndInput-container textarea { + border: solid 1px; + border-color: #111; + border-radius: 10px; + width: 100%; + height: 100px; + background-color: #fff; +} + +.sendButton { + margin-top: 30px; + background-color: #ff7700; + color: #f1f1f1; + border-radius: 30px; + border: none; + padding: 10px; + padding-left: 20px; + padding-right: 20px; + font-size: 1.5em; +} + +.sendButton:hover { + border: solid 2px; + border-color: #ff7700; + background-color: #fff; + color: #ff7700; +} \ No newline at end of file diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000..49d21ef --- /dev/null +++ b/css/footer.css @@ -0,0 +1,114 @@ +@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@200;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap'); + +body { + margin: 0px; + padding: 0px; +} + +.footer { + width: 100vw; + background-color: #fff; +} + +.colones-container { + height: 100vh; + display: flex; + align-items: center; +} + +.left { + width: 50vw; + height: 50vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.separation { + width: 2px; + height: 80vh; + background-color: #111; +} + +.right { + width: 50vw; + height: fit-content; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.right p { + color: #111; + font-size: 1.25rem; +} + +.links-container { + display: flex; + justify-content: space-around; + width: 60%; +} + +.links-container a { + background-color: transparent; + border: none; +} + +.links-container a img { + width: 60px; + height: 60px; +} + +.btnContact-container { + margin-top: 5%; +} + +.btnContact-container button { + font-size: 1.5em; + font-family: 'Source Code Pro', monospace; + padding: 20px; + background-color: #111; + color: #f1f1f1; + border-radius: 30px; + border-style: none; + font-weight: bold; +} + +.btnContact-container button:hover { + background-color: transparent; + border: solid 3px; + border-color: #111; + color: #111; +} + +.btnContact-container button a { + text-decoration: none; + color: #f1f1f1; +} + +.btnContact-container button a:hover { + color: #111; +} + +@media screen and (max-width:1023px) { + .colones-container { + flex-direction: column; + } + .left { + width: 100vw; + } + .right { + width: 100vw; + margin-top: 4%; + } + .separation { + width: 80vw; + height: 3px; + } +} \ No newline at end of file diff --git a/css/homePage.css b/css/homePage.css new file mode 100644 index 0000000..54cb5de --- /dev/null +++ b/css/homePage.css @@ -0,0 +1,282 @@ +@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@200;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap'); + +/* Home Page CSS */ +body, +html { + margin: 0px; + padding: 0px; +} + +html.active { + overflow-y: hidden; +} + +.homePage-container { + display: flex; + flex-direction: column; +} + +/* Menu rideau */ +.nav-toggler { + position: relative; + z-index: 10; + top: 30px; + left: 30px; + height: 50px; + width: 50px; + border: none; + outline: none; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + background: transparent; +} + +.line { + position: absolute; + display: block; + width: 100%; + height: 3px; + background: #f1f1f1; + transition: transform 0.3s ease-out, + opacity 0.1s ease-out; +} + +.l1 { + transform: translateY(-10px); +} + +.l3 { + transform: translateY(10px); +} + +.nav-toggler.active .l1 { + transform: translateY(0px) rotate(45deg); +} + +.nav-toggler.active .l2 { + opacity: 0; +} + +.nav-toggler.active .l3 { + transform: translateY(0px) rotate(-45deg); +} + +nav { + position: fixed; + width: 100vw; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background: #111; + + transform: translateX(-100%); + transition: transform 0.3s cubic-bezier(0.73, 0.11, 0.67, 0.84); +} + +nav.active { + transform: translateX(0); +} + +nav a { + font-family: 'Sofia Sans Semi Condensed', sans-serif; + color: #f1f1f1; + font-size: clamp(40px, 5vw, 60px); + display: block; + margin: 20px 0; + text-decoration: none; +} + +.txtHover:hover { + color: #ff7700; +} + +/* Partie haute de la page */ + +.homePage-top { + background-color: #ff7700; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + margin-bottom: 3%; +} + +.Home-container { + display: flex; + flex-direction: column; +} + +.nav-container { + display: flex; + width: 100vw; + align-items: center; +} + +.titleNav { + position: absolute; + right: 30px; + top: 30px; +} + +.titleNav p { + color: #f1f1f1; + font-size: 4rem; + margin: 0px; +} + +.textAcroche-container { + display: flex; + justify-content: center; + align-items: center; + height: 88vh; + flex-direction: column; +} + +.textAcroche { + color: #f1f1f1; + width: 60vw; + font-size: clamp(40px, 5vw, 50px); + font-family: 'Sofia Sans Semi Condensed', sans-serif; + font-weight: bold; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + margin-top: 15vh; +} + +/* Partie basse de la page */ +.homePage-bottom { + background-color: #fff; + width: 100vw; + height: 100vh; +} + +.recentsProjects-container h1 { + font-size: clamp(45px, 5vw, 70px); + text-align: center; + font-family: 'Sofia Sans Semi Condensed', sans-serif; + margin-top: 0px; + margin-bottom: 0px; +} + +/* Swiper Content */ +.swiper-slide { + display: flex; + flex-direction: column; +} + +.slide-img { + border-top-left-radius: 30px; + border-top-right-radius: 30px; + width: 100%; + height: 200px; + background-color: #ff7700; +} + +#slideOne { + background-image: url("../img/bgMountain.svg"); + background-size: cover; + background-repeat: no-repeat; + background-position: 25%; +} + +#slideTwo { + background-image: url("../img/bgHtmlAndCss.svg"); + background-size: cover; + background-repeat: no-repeat; + background-position: 25%; +} + +#slideThree { + background-image: url("../img/imgCity.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: 25%; +} + +.slide-title { + font-size: 1.5rem; + color: rgb(44, 44, 44); + font-family: 'Tilt Warp', cursive; + margin-left: 20px; + margin-top: 5px; +} + +.slide-title h2 { + margin-top: 0px; + margin-bottom: 0px; +} + +.slide-desc { + color: rgb(72, 72, 72); + font-size: 1.25rem; + font-family: 'Sofia Sans Semi Condensed', sans-serif; + margin-right: 30px; + margin-left: 30px; + text-align: justify; +} + +.slide-readmore-btn { + height: 20%; + display: flex; + justify-content: center; + align-items: center; +} + +.slide-readmore-btn button { + border: solid 3px; + border-color: #111; + border-radius: 0px; + background-color: transparent; + color: #111; + font-family: 'Tilt Warp', cursive; + font-size: 1.5rem; + padding: 5px; +} + +.slide-readmore-btn a { + text-decoration: none; + color: #111; +} + +.slide-readmore-btn button:hover { + color: #ff7700; + border-color: #ff7700; +} + +.slide-readmore-btn a:hover { + color: #ff7700; +} + + +/* FOOTER */ +footer { + width: 100vw; + height: 50vh; + background-color: #111; +} + +@media screen and (max-width:767px) { + .titleNav { + visibility: hidden; + } + + .textAcroche { + font-size: 2rem; + } + + .recentsProjects-container h1 { + margin-top: 10%; + margin-bottom: 10%; + } +} \ No newline at end of file diff --git a/css/myProjectsPage.css b/css/myProjectsPage.css new file mode 100644 index 0000000..54e0844 --- /dev/null +++ b/css/myProjectsPage.css @@ -0,0 +1,69 @@ +@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@200;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap'); + +body { + background-color: black; +} + +header { + height: 100vh; + background-image: url("../img/backgroundProjectPageOmbrage.jpg"); +} + +/* PAGE */ + +/* header */ +.titleHeader-container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.title h1 { + color: #f1f1f1; + font-size: 4rem; + font-family: 'Sofia Sans Semi Condensed', sans-serif; +} + +/* downArrow and animation */ +.downArrow { + animation: floating 3s ease-in-out 0s infinite; +} + +.downArrow img { + width: 64px; + height: 64px; +} + +@keyframes floating { + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(-15px); + } + 100% { + transform: translate(0px); + } +} + +.gradient { + width: 100vw; + height: 500px; + background: rgb(255,255,255); + background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(17,17,17,0.8652195730609095) 46%, rgba(17,17,17,1) 69%); +} + +@media screen and (max-width:1023px) { + header { + visibility: hidden; + height: 0px; + } +} \ No newline at end of file diff --git a/css/overflow.css b/css/overflow.css new file mode 100644 index 0000000..8361025 --- /dev/null +++ b/css/overflow.css @@ -0,0 +1,4 @@ +html, +body { + overflow-x: hidden; +} \ No newline at end of file diff --git a/css/projects.css b/css/projects.css new file mode 100644 index 0000000..ec6a089 --- /dev/null +++ b/css/projects.css @@ -0,0 +1,269 @@ +@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@200;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap'); + +body { + margin: 0px; + padding: 0px; +} + +.containerBody { + height: 100vh; + overflow-y: scroll; + scroll-snap-type: y mandatory; +} + +.container-container { + scroll-snap-align: center; +} + +header { + position: relative; +} + +.projectName-container { + width: fit-content; + position: absolute; + right: 42px; + top: 40px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.name h1 { + margin: 0px; + color: #f1f1f1; + font-size: 5rem; +} + +.space { + width: 100px; +} + +.logo { + display: flex; + flex-direction: column; + +} + +.logo img { + width: 150px; + height: 150px; +} + +.logo p { + margin: 0px; + font-size: 2em; + font-family: 'Source Code Pro', monospace; + font-weight: 900; +} + +.htmlLogo { + color: #ff7700; +} + +.cssLogo { + color: rgb(0, 170, 255); +} + +.projetITLogo { + color: #f1f1f1; +} + +/**/ + +.spaceLabTitle-container { + height: 100vh; + display: flex; + justify-content: center; +} + +#sltc1 { + background-image: url("../img/bgSpace.svg"); + background-size: cover; + background-repeat: no-repeat; + background-position: 25%; +} + +#sltc2 { + background-image: url("../img/bgCodeHtmlFlou.jpg"); + background-size: cover; + background-repeat: no-repeat; +} + +#sltc3 { + background-image: url("../img/bgProjetIT_sombre.jpg"); + background-size: cover; + background-repeat: no-repeat; +} + +.spaceLabTitle-container h1 { + font-size: clamp(4rem, 8vw, 7rem); + display: flex; + align-items: center; + color: #f1f1f1; + -webkit-text-stroke: 2px #111; + font-family: 'Tilt Warp', cursive; +} + +.spaceLabTitle-container p { + display: flex; + align-items: center; +} + +.desc-container { + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: space-around; +} + +.black { + background-color: #111; + color: #f1f1f1; +} + +.white { + background-color: white; + color: #111; + +} + +.imgRight { + width: 30%; + height: 70%; + border-radius: 30px; + box-shadow: 30px -20px 10px rgb(186, 186, 186); + display: flex; + justify-content: center; + align-items: center; +} + +#imgAstroPi1 { + background-image: url('../img/imgCodePython.jpg'); +} + +#imgAstroPi2 { + background-image: url('../img/Hyrome1.jpg'); + background-size: cover; + background-position: 50%; +} + +#imgAstroPi3 { + background-image: url('../img/knnImg.jpg'); + background-size: cover; + background-position: 90%; +} + +#imgPortfolio1 { + background-image: url('../img/imgPortfolioMouvementUn.jpg'); + background-size: cover; + background-position: 90%; +} + +#imgPortfolio2 { + background-image: url('../img/imgCodeWeb.jpg'); + background-size: cover; + background-position: 90%; +} + +#imgProjetIT1 { + background-image: url('../img/imgProjetIT_num1.jpg'); + background-size: cover; + background-position: 22%; +} + +#imgProjetIT2 { + background-image: url('../img/bgProjetIT_num1.jpg'); + background-size: cover; + background-position: 50%; +} + +.descText { + width: 40%; + margin-right: 5%; +} + +.descText h2 { + color: #ff7700; + font-size: 2.5em; + font-weight: bold; + font: italic; + font-family: 'Source Code Pro', monospace; +} + +.descText p { + font-size: clamp(15px, 5vw, 30px); + font-family: 'Source Code Pro', monospace; + text-align: justify; +} + +.descText p a { + text-decoration: underline; +} + +.descText button { + background-color: #fff; + border-radius: 5px; + border-style: none; + padding: 10px; + color: #111; + font-size: 2em; + font-family: 'Aboreto', cursive; + text-decoration: none; +} + +.descText button:hover { + background-color: transparent; + border: solid 3px; + border-color: #f1f1f1; + color: #f1f1f1; +} + +.descText button a { + text-decoration: none; + color: #111; +} + +.descText button a:hover { + color: #f1f1f1; +} + + +@media screen and (max-width:1023px) { + .projectName-container { + visibility: hidden; + } + + .spaceLabTitle-container h1 { + margin-left: 10%; + margin-right: 10%; + } +} + +@media screen and (max-width:1375px) { + .name { + visibility: hidden; + } + + #sltc1 { + background-position: 80%; + } + + .imgRight { + visibility: hidden; + width: 0px; + height: 0px; + } + + .descText { + width: 100%; + height: fit-content; + margin-left: 5%; + } +} \ No newline at end of file diff --git a/css/spanProjects.css b/css/spanProjects.css new file mode 100644 index 0000000..74a66ba --- /dev/null +++ b/css/spanProjects.css @@ -0,0 +1,104 @@ +@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap'); + +body { + margin: 0px; + padding: 0px; +} + +/* projectsSpace-bigContainer */ +.projectsSpace-bigContainer { + width: 100vw; + height: fit-content; + display: flex; + flex-direction: column; + background-color: #111; +} + +.projectsSpace { + width: 100vw; + min-height: 100vh; + display: flex; + justify-content: center; +} + +.divs-container { + width: 80vw; + min-height: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; +} + +.spanProjects { + background-color: #fff; + width: 400px; + height: 500px; + margin-bottom: 2.5%; + margin-top: 2.5%; + border-radius: 30px; + text-decoration: none; +} + +.spanProjects:hover { + box-shadow: 10px 5px 5px #f1f1f1; + transition: 0.05s ease-in-out; + transform: translateX(-5px); + transform: translateY(-5px); +} + +.titleSpace { + width: 100%; + height: 100%; + border-top-right-radius: 28px; + border-top-left-radius: 28px; + border-bottom-left-radius: 28px; + border-bottom-right-radius: 28px; + display: flex; + align-items: top; +} + +#span1 { + background-image: url("../img/bgSpace.svg"); + background-size: cover; + background-repeat: no-repeat; + background-position: 25%; +} + +#span2 { + background-image: url("../img/bgCodeHtmlFlou.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: 25%; +} + +#span3 { + background-image: url("../img/imgCodeAppInventorFlou.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: 25%; +} + +.title h2 { + width: 100%; + margin-left: 10%; + margin-top: 60%; + text-align: left; + font-size: 2.5em; + color: #f1f1f1; + text-transform: uppercase; + font-family: 'Tilt Warp', cursive; + -webkit-text-stroke: 0.5px #111; +} + +@media screen and (max-width:1023px) { + .projectsSpace { + padding-top: 7%; + padding-bottom: 7%; + } + + .spanProjects { + margin-top: 5%; + margin-bottom: 5%; + } +} \ No newline at end of file diff --git a/css/swiper.css b/css/swiper.css new file mode 100644 index 0000000..08dba52 --- /dev/null +++ b/css/swiper.css @@ -0,0 +1,731 @@ +@font-face { + font-family: swiper-icons; + font-style: normal; + font-weight: 400; + src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); +} + +:root { + --swiper-theme-color: #ff7700; +} + +.swiper { + z-index: 1; + position: relative; + margin-right: auto; + margin-left: auto; + margin-top: 3%; + padding: 0; + overflow: hidden; + list-style: none; + width: 100%; + height: 70vh; +} + +.swiper-vertical>.swiper-wrapper { + flex-direction: column; +} + +.swiper-wrapper { + display: flex; + z-index: 1; + position: relative; + box-sizing: content-box; + width: 20vw; + height: 60vh; + transition-property: transform; +} + +.swiper-android .swiper-slide, +.swiper-wrapper { + transform: translate3d(0px, 0, 0); +} + +.swiper-pointer-events { + touch-action: pan-y; +} + +.swiper-pointer-events.swiper-vertical { + touch-action: pan-x; +} + +.swiper-slide { + position: relative; + flex-shrink: 0; + width: 375px; + height: 100%; + transition-property: transform; + border: 3px solid; + border-color: #111; + border-radius: 30px; +} + +.swiper-slide-invisible-blank { + visibility: hidden; +} + +.swiper-autoheight, +.swiper-autoheight .swiper-slide { + height: auto; +} + +.swiper-autoheight .swiper-wrapper { + align-items: flex-start; + transition-property: transform, height; +} + +.swiper-backface-hidden .swiper-slide { + transform: translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.swiper-3d, +.swiper-3d.swiper-css-mode .swiper-wrapper { + perspective: 1200px; +} + +.swiper-3d .swiper-cube-shadow, +.swiper-3d .swiper-slide, +.swiper-3d .swiper-slide-shadow, +.swiper-3d .swiper-slide-shadow-bottom, +.swiper-3d .swiper-slide-shadow-left, +.swiper-3d .swiper-slide-shadow-right, +.swiper-3d .swiper-slide-shadow-top, +.swiper-3d .swiper-wrapper { + transform-style: preserve-3d; +} + +.swiper-3d .swiper-slide-shadow, +.swiper-3d .swiper-slide-shadow-bottom, +.swiper-3d .swiper-slide-shadow-left, +.swiper-3d .swiper-slide-shadow-right, +.swiper-3d .swiper-slide-shadow-top { + z-index: 10; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.swiper-3d .swiper-slide-shadow { + background: rgba(0, 0, 0, .15); +} + +.swiper-3d .swiper-slide-shadow-left { + background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); + border-radius: 30px; +} + +.swiper-3d .swiper-slide-shadow-right { + background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); + border-radius: 30px; +} + +.swiper-3d .swiper-slide-shadow-top { + background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); + border-radius: 30px; +} + +.swiper-3d .swiper-slide-shadow-bottom { + background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); + border-radius: 30px; +} + +.swiper-css-mode>.swiper-wrapper { + overflow: auto; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar { + display: none; +} + +.swiper-css-mode>.swiper-wrapper>.swiper-slide { + scroll-snap-align: start start; +} + +.swiper-horizontal.swiper-css-mode>.swiper-wrapper { + scroll-snap-type: x mandatory; +} + +.swiper-vertical.swiper-css-mode>.swiper-wrapper { + scroll-snap-type: y mandatory; +} + +.swiper-centered>.swiper-wrapper::before { + content: ''; + flex-shrink: 0; + order: 9999; +} + +.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { + margin-inline-start: var(--swiper-centered-offset-before); +} + +.swiper-centered.swiper-horizontal>.swiper-wrapper::before { + width: var(--swiper-centered-offset-after); + height: 100%; + min-height: 1px; +} + +.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { + margin-block-start: var(--swiper-centered-offset-before); +} + +.swiper-centered.swiper-vertical>.swiper-wrapper::before { + width: 100%; + height: var(--swiper-centered-offset-after); + min-width: 1px; +} + +.swiper-centered>.swiper-wrapper>.swiper-slide { + scroll-snap-align: center center; + scroll-snap-stop: always; +} + +.swiper-virtual .swiper-slide { + transform: translateZ(0); + -webkit-backface-visibility: hidden; +} + +.swiper-virtual.swiper-css-mode .swiper-wrapper::after { + content: ''; + position: absolute; + top: 0; + left: 0; + pointer-events: none; +} + +.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { + width: var(--swiper-virtual-size); + height: 1px; +} + +.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { + width: 1px; + height: var(--swiper-virtual-size); +} + +:root { + --swiper-navigation-size: 44px; +} + +.swiper-button-next, +.swiper-button-prev { + display: flex; + z-index: 10; + position: absolute; + top: 50%; + align-items: center; + justify-content: center; + width: calc(var(--swiper-navigation-size) / 44 * 27); + height: var(--swiper-navigation-size); + margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); + color: var(--swiper-navigation-color, var(--swiper-theme-color)); + cursor: pointer; +} + +.swiper-button-next.swiper-button-disabled, +.swiper-button-prev.swiper-button-disabled { + opacity: .35; + cursor: auto; + pointer-events: none; +} + +.swiper-button-next.swiper-button-hidden, +.swiper-button-prev.swiper-button-hidden { + opacity: 0; + cursor: auto; + pointer-events: none; +} + +.swiper-navigation-disabled .swiper-button-next, +.swiper-navigation-disabled .swiper-button-prev { + display: none !important; +} + +.swiper-button-next:after, +.swiper-button-prev:after { + text-transform: none !important; + font-family: swiper-icons; + font-size: var(--swiper-navigation-size); + font-variant: initial; + line-height: 1; + letter-spacing: 0; +} + +.swiper-button-prev, +.swiper-rtl .swiper-button-next { + right: auto; + left: 10px; +} + +.swiper-button-prev:after, +.swiper-rtl .swiper-button-next:after { + content: 'prev'; +} + +.swiper-button-next, +.swiper-rtl .swiper-button-prev { + right: 10px; + left: auto; +} + +.swiper-button-next:after, +.swiper-rtl .swiper-button-prev:after { + content: 'next'; +} + +.swiper-button-lock { + display: none; +} + +.swiper-pagination { + z-index: 10; + position: absolute; + text-align: center; + transition: .3s opacity; + transform: translate3d(0, 0, 0); +} + +.swiper-pagination.swiper-pagination-hidden { + opacity: 0; +} + +.swiper-pagination-disabled>.swiper-pagination, +.swiper-pagination.swiper-pagination-disabled { + display: none !important; +} + +.swiper-horizontal>.swiper-pagination-bullets, +.swiper-pagination-bullets.swiper-pagination-horizontal, +.swiper-pagination-custom, +.swiper-pagination-fraction { + bottom: 10px; + left: 0; + width: 100%; +} + +.swiper-pagination-bullets-dynamic { + overflow: hidden; + font-size: 0; +} + +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { + position: relative; + transform: scale(.33); +} + +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { + transform: scale(1); +} + +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { + transform: scale(1); +} + +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { + transform: scale(.66); +} + +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { + transform: scale(.33); +} + +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { + transform: scale(.66); +} + +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { + transform: scale(.33); +} + +.swiper-pagination-bullet { + display: inline-block; + width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); + height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); + border-radius: 50%; + opacity: var(--swiper-pagination-bullet-inactive-opacity, .2); + background: var(--swiper-pagination-bullet-inactive-color, #000); +} + +button.swiper-pagination-bullet { + -webkit-appearance: none; + appearance: none; + margin: 0; + padding: 0; + border: none; + box-shadow: none; +} + +.swiper-pagination-clickable .swiper-pagination-bullet { + cursor: pointer; +} + +.swiper-pagination-bullet:only-child { + display: none !important; +} + +.swiper-pagination-bullet-active { + opacity: var(--swiper-pagination-bullet-opacity, 1); + background: var(--swiper-pagination-color, var(--swiper-theme-color)); +} + +.swiper-pagination-vertical.swiper-pagination-bullets, +.swiper-vertical>.swiper-pagination-bullets { + top: 50%; + right: 10px; + transform: translate3d(0px, -50%, 0); +} + +.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, +.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { + display: block; + margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; +} + +.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, +.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { + top: 50%; + width: 8px; + transform: translateY(-50%); +} + +.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, +.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { + display: inline-block; + transition: .2s transform, .2s top; +} + +.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, +.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { + margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); +} + +.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, +.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { + left: 50%; + white-space: nowrap; + transform: translateX(-50%); +} + +.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, +.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { + transition: .2s transform, .2s left; +} + +.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { + transition: .2s transform, .2s right; +} + +.swiper-pagination-progressbar { + position: absolute; + background: rgba(0, 0, 0, .25); +} + +.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--swiper-pagination-color, var(--swiper-theme-color)); + transform: scale(0); + transform-origin: left top; +} + +.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { + transform-origin: right top; +} + +.swiper-horizontal>.swiper-pagination-progressbar, +.swiper-pagination-progressbar.swiper-pagination-horizontal, +.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, +.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { + top: 0; + left: 0; + width: 100%; + height: 4px; +} + +.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, +.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, +.swiper-pagination-progressbar.swiper-pagination-vertical, +.swiper-vertical>.swiper-pagination-progressbar { + top: 0; + left: 0; + width: 4px; + height: 100%; +} + +.swiper-pagination-lock { + display: none; +} + +.swiper-scrollbar { + position: relative; + border-radius: 10px; + background: rgba(0, 0, 0, .1); + -ms-touch-action: none; +} + +.swiper-scrollbar-disabled>.swiper-scrollbar, +.swiper-scrollbar.swiper-scrollbar-disabled { + display: none !important; +} + +.swiper-horizontal>.swiper-scrollbar, +.swiper-scrollbar.swiper-scrollbar-horizontal { + z-index: 50; + position: absolute; + bottom: 3px; + left: 1%; + width: 98%; + height: 5px; +} + +.swiper-scrollbar.swiper-scrollbar-vertical, +.swiper-vertical>.swiper-scrollbar { + z-index: 50; + position: absolute; + top: 1%; + right: 3px; + width: 5px; + height: 98%; +} + +.swiper-scrollbar-drag { + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 10px; + background: rgba(0, 0, 0, .5); +} + +.swiper-scrollbar-cursor-drag { + cursor: move; +} + +.swiper-scrollbar-lock { + display: none; +} + +.swiper-zoom-container { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + text-align: center; +} + +.swiper-zoom-container>canvas, +.swiper-zoom-container>img, +.swiper-zoom-container>svg { + max-height: 100%; + max-width: 100%; + object-fit: contain; +} + +.swiper-slide-zoomed { + cursor: move; +} + +.swiper-lazy-preloader { + z-index: 10; + position: absolute; + top: 50%; + left: 50%; + box-sizing: border-box; + width: 42px; + height: 42px; + margin-top: -21px; + margin-left: -21px; + border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); + border-top-color: transparent; + border-radius: 50%; + transform-origin: 50%; +} + +.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, +.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader { + animation: swiper-preloader-spin 1s infinite linear; +} + +.swiper-lazy-preloader-white { + --swiper-preloader-color: #fff; +} + +.swiper-lazy-preloader-black { + --swiper-preloader-color: #000; +} + +@keyframes swiper-preloader-spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.swiper .swiper-notification { + z-index: -1000; + position: absolute; + top: 0; + left: 0; + opacity: 0; + pointer-events: none; +} + +.swiper-free-mode>.swiper-wrapper { + margin: 0 auto; + transition-timing-function: ease-out; +} + +.swiper-grid>.swiper-wrapper { + flex-wrap: wrap; +} + +.swiper-grid-column>.swiper-wrapper { + flex-direction: column; + flex-wrap: wrap; +} + +.swiper-fade.swiper-free-mode .swiper-slide { + transition-timing-function: ease-out; +} + +.swiper-fade .swiper-slide { + pointer-events: none; + transition-property: opacity; +} + +.swiper-fade .swiper-slide .swiper-slide { + pointer-events: none; +} + +.swiper-fade .swiper-slide-active, +.swiper-fade .swiper-slide-active .swiper-slide-active { + pointer-events: auto; +} + +.swiper-cube { + overflow: visible; +} + +.swiper-cube .swiper-slide { + visibility: hidden; + z-index: 1; + width: 100%; + height: 100%; + transform-origin: 0 0; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + pointer-events: none; +} + +.swiper-cube .swiper-slide .swiper-slide { + pointer-events: none; +} + +.swiper-cube.swiper-rtl .swiper-slide { + transform-origin: 100% 0; +} + +.swiper-cube .swiper-slide-active, +.swiper-cube .swiper-slide-active .swiper-slide-active { + pointer-events: auto; +} + +.swiper-cube .swiper-slide-active, +.swiper-cube .swiper-slide-next, +.swiper-cube .swiper-slide-next+.swiper-slide, +.swiper-cube .swiper-slide-prev { + visibility: visible; + pointer-events: auto; +} + +.swiper-cube .swiper-slide-shadow-bottom, +.swiper-cube .swiper-slide-shadow-left, +.swiper-cube .swiper-slide-shadow-right, +.swiper-cube .swiper-slide-shadow-top { + z-index: 0; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.swiper-cube .swiper-cube-shadow { + z-index: 0; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .6; +} + +.swiper-cube .swiper-cube-shadow:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #000; + filter: blur(50px); +} + +.swiper-flip { + overflow: visible; +} + +.swiper-flip .swiper-slide { + z-index: 1; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + pointer-events: none; +} + +.swiper-flip .swiper-slide .swiper-slide { + pointer-events: none; +} + +.swiper-flip .swiper-slide-active, +.swiper-flip .swiper-slide-active .swiper-slide-active { + pointer-events: auto; +} + +.swiper-flip .swiper-slide-shadow-bottom, +.swiper-flip .swiper-slide-shadow-left, +.swiper-flip .swiper-slide-shadow-right, +.swiper-flip .swiper-slide-shadow-top { + z-index: 0; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.swiper-creative .swiper-slide { + overflow: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transition-property: transform, opacity, height; +} + +.swiper-cards { + overflow: visible; +} + +.swiper-cards .swiper-slide { + overflow: hidden; + transform-origin: center bottom; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} \ No newline at end of file diff --git a/footer.html b/footer.html new file mode 100644 index 0000000..839e6a8 --- /dev/null +++ b/footer.html @@ -0,0 +1,44 @@ + + + + + + + + + Footer + + + +
+
+
+
+ github logo + linkedin logo + awwwards logo + fiverr logo +
+ +
+
+
+ +

Arrows icons created by Pixel perfect - Flaticon

+

Image par Sergey Prusakov de Pixabay

+

Arrow icons created by Freepik - Flaticon

+

Image par Daniel Roberts de Pixabay

+

Image par krzysztof-m de Pixabay

+

Pointing icons created by Freepik - Flaticon

+

Technology illustrations by Storyset

+

Work illustrations by Storyset

+

Image par naobim de Pixabay

+ +
+
+
+ + + \ No newline at end of file diff --git a/img/Hyrome1.jpg b/img/Hyrome1.jpg new file mode 100644 index 0000000..2bb8795 Binary files /dev/null and b/img/Hyrome1.jpg differ diff --git a/img/astroPiLogo.svg b/img/astroPiLogo.svg new file mode 100644 index 0000000..837c30e --- /dev/null +++ b/img/astroPiLogo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/awwwardsLogo.svg b/img/awwwardsLogo.svg new file mode 100644 index 0000000..75f2635 --- /dev/null +++ b/img/awwwardsLogo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/img/backArrow.png b/img/backArrow.png new file mode 100644 index 0000000..4bf3668 Binary files /dev/null and b/img/backArrow.png differ diff --git a/img/backgroundProjectPage.jpg b/img/backgroundProjectPage.jpg new file mode 100644 index 0000000..e6c8bfa Binary files /dev/null and b/img/backgroundProjectPage.jpg differ diff --git a/img/backgroundProjectPageOmbrage.jpg b/img/backgroundProjectPageOmbrage.jpg new file mode 100644 index 0000000..14d2abd Binary files /dev/null and b/img/backgroundProjectPageOmbrage.jpg differ diff --git a/img/bgCodeHtml.jpg b/img/bgCodeHtml.jpg new file mode 100644 index 0000000..f539d58 Binary files /dev/null and b/img/bgCodeHtml.jpg differ diff --git a/img/bgCodeHtmlFlou.jpg b/img/bgCodeHtmlFlou.jpg new file mode 100644 index 0000000..8db66d6 Binary files /dev/null and b/img/bgCodeHtmlFlou.jpg differ diff --git a/img/bgHtmlAndCss.svg b/img/bgHtmlAndCss.svg new file mode 100644 index 0000000..e88c9f6 --- /dev/null +++ b/img/bgHtmlAndCss.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/img/bgMountain.svg b/img/bgMountain.svg new file mode 100644 index 0000000..fd9a8f7 --- /dev/null +++ b/img/bgMountain.svg @@ -0,0 +1,802 @@ + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/bgProjetIT_num1.jpg b/img/bgProjetIT_num1.jpg new file mode 100644 index 0000000..b41784f Binary files /dev/null and b/img/bgProjetIT_num1.jpg differ diff --git a/img/bgProjetIT_num2.jpg b/img/bgProjetIT_num2.jpg new file mode 100644 index 0000000..24669ee Binary files /dev/null and b/img/bgProjetIT_num2.jpg differ diff --git a/img/bgProjetIT_sombre.jpg b/img/bgProjetIT_sombre.jpg new file mode 100644 index 0000000..eeb8d3f Binary files /dev/null and b/img/bgProjetIT_sombre.jpg differ diff --git a/img/bgSpace.svg b/img/bgSpace.svg new file mode 100644 index 0000000..7be667b --- /dev/null +++ b/img/bgSpace.svg @@ -0,0 +1,401 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/borderBottom.png b/img/borderBottom.png new file mode 100644 index 0000000..0d426ff Binary files /dev/null and b/img/borderBottom.png differ diff --git a/img/borderBottom.svg b/img/borderBottom.svg new file mode 100644 index 0000000..dbeccf9 --- /dev/null +++ b/img/borderBottom.svg @@ -0,0 +1,1869 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/codeIllustration.svg b/img/codeIllustration.svg new file mode 100644 index 0000000..480b8b4 --- /dev/null +++ b/img/codeIllustration.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/computingIllustration.svg b/img/computingIllustration.svg new file mode 100644 index 0000000..9eae5aa --- /dev/null +++ b/img/computingIllustration.svg @@ -0,0 +1 @@ + diff --git a/img/downArrowIcon.png b/img/downArrowIcon.png new file mode 100644 index 0000000..2d788ee Binary files /dev/null and b/img/downArrowIcon.png differ diff --git a/img/fiverrLogo.svg b/img/fiverrLogo.svg new file mode 100644 index 0000000..af59a3a --- /dev/null +++ b/img/fiverrLogo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/githubLogo.svg b/img/githubLogo.svg new file mode 100644 index 0000000..cb1101d --- /dev/null +++ b/img/githubLogo.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/handPointing.png b/img/handPointing.png new file mode 100644 index 0000000..07967b1 Binary files /dev/null and b/img/handPointing.png differ diff --git a/img/imgCity.png b/img/imgCity.png new file mode 100644 index 0000000..6d5e3f9 Binary files /dev/null and b/img/imgCity.png differ diff --git a/img/imgCodeAppInventor.jpg b/img/imgCodeAppInventor.jpg new file mode 100644 index 0000000..83583e2 Binary files /dev/null and b/img/imgCodeAppInventor.jpg differ diff --git a/img/imgCodeAppInventorFlou.jpg b/img/imgCodeAppInventorFlou.jpg new file mode 100644 index 0000000..899771c Binary files /dev/null and b/img/imgCodeAppInventorFlou.jpg differ diff --git a/img/imgCodePython.jpg b/img/imgCodePython.jpg new file mode 100644 index 0000000..6972d51 Binary files /dev/null and b/img/imgCodePython.jpg differ diff --git a/img/imgCodeWeb.jpg b/img/imgCodeWeb.jpg new file mode 100644 index 0000000..b217766 Binary files /dev/null and b/img/imgCodeWeb.jpg differ diff --git a/img/imgPortfolioMouvementUn.jpg b/img/imgPortfolioMouvementUn.jpg new file mode 100644 index 0000000..be551e6 Binary files /dev/null and b/img/imgPortfolioMouvementUn.jpg differ diff --git a/img/imgPortfolioUn.jpg b/img/imgPortfolioUn.jpg new file mode 100644 index 0000000..30b25c4 Binary files /dev/null and b/img/imgPortfolioUn.jpg differ diff --git a/img/imgProjetIT_num1.jpg b/img/imgProjetIT_num1.jpg new file mode 100644 index 0000000..fc7136a Binary files /dev/null and b/img/imgProjetIT_num1.jpg differ diff --git a/img/infoStudent.svg b/img/infoStudent.svg new file mode 100644 index 0000000..8907eb9 --- /dev/null +++ b/img/infoStudent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/knnImg.jpg b/img/knnImg.jpg new file mode 100644 index 0000000..1aa42e5 Binary files /dev/null and b/img/knnImg.jpg differ diff --git a/img/linkedinLogo.svg b/img/linkedinLogo.svg new file mode 100644 index 0000000..875694f --- /dev/null +++ b/img/linkedinLogo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/photoProfil.jpg b/img/photoProfil.jpg new file mode 100644 index 0000000..5edbb82 Binary files /dev/null and b/img/photoProfil.jpg differ diff --git a/img/timeMachine.svg b/img/timeMachine.svg new file mode 100644 index 0000000..0e732c9 --- /dev/null +++ b/img/timeMachine.svg @@ -0,0 +1 @@ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..9491091 --- /dev/null +++ b/index.html @@ -0,0 +1,186 @@ + + + + + + + + + + + Home Page + + + +
+
+ +
+
+ + +
+

♠♥

+
+
+ +
+
+

Bonjour et bienvenue sur mon portfolio !

+
+
+
+
+
+
+

Mes projets récents

+
+
+ + +
+
+ +
+
+

#AstroPi

+
+
+

Le projet consistait à prendre des photos de la terre à partir de l'ISS pour ensuite + y détecter les fumées d'incendie ...

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

#MonPortfolio

+
+
+

Ce site m'a permis de me faire de l'expérience avec les langages du web ...

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

#ProjetIT2022

+
+
+

Nous devions trouver un moyen de communiquer avec le véhicule derrière le nôtre.

+
+
+ +
+
+
+
+
+ + + + +
+
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/js/backBtn.js b/js/backBtn.js new file mode 100644 index 0000000..b879904 --- /dev/null +++ b/js/backBtn.js @@ -0,0 +1,3 @@ +function rtn() { + window.history.back(); +} diff --git a/js/homePage.js b/js/homePage.js new file mode 100644 index 0000000..cedc1d8 --- /dev/null +++ b/js/homePage.js @@ -0,0 +1,11 @@ +const hamburgerBtn = document.querySelector(".nav-toggler") +const navigation = document.querySelector("nav") +const html = document.querySelector("html") + +hamburgerBtn.addEventListener("click", toggleNav) + +function toggleNav() { + hamburgerBtn.classList.toggle("active") + navigation.classList.toggle("active") + html.classList.toggle("active") +} \ No newline at end of file diff --git a/json/package.json b/json/package.json new file mode 100644 index 0000000..208ba24 --- /dev/null +++ b/json/package.json @@ -0,0 +1,10 @@ +{ + "dependencies": { + "parcel-bundler": "^1.6.1", + "swiper": "latest" + }, + "name": "Swiper - Effect coverflow", + "tags": [ + "swiper" + ] +} \ No newline at end of file diff --git a/myPortfolio.html b/myPortfolio.html new file mode 100644 index 0000000..f6e7480 --- /dev/null +++ b/myPortfolio.html @@ -0,0 +1,137 @@ + + + + + + + + + + + + Astro Pi + + + + +
+ +
+
+ +
+
+

Mon site web

+
+
+ +
+
+ +
+

Mon Portfolio

+
+
+ + +
+
+ +
+

Pourquoi ?

+

Il y à quelque temps, je me suis lancé dans ce projet dans l'objectif de le mettre en + lien dans mes projets motivés sur Parcoursup. En effet je me suis dit que cela pourrait être un plus + dans la prise en compte de mon dossier et que cela permettrait aux IUT d'avoir un aperçu de ce que + je fais déjà. Ce site me permet aussi de me faire de l'expérience avec les langages du web et + ensuite proposer des sites web sur Fiverr (lien vers Fiverr). Enfin acquérir plus de visibilité sur internet quoi !

+
+
+ + +
+
+ +
+

Comment ?

+

En développant ce site j'ai pu perfectionner ma maîtrise des langages HTML et CSS. J'ai + utilisé un petit peu de JavaScript pour deux trois animations sur le site. Je me suis également + servi d'un tout tout petit peu de PHP ... juste les bases.

+
+
+ + +
+ + + + + + + + + \ No newline at end of file diff --git a/myProjectsPage.html b/myProjectsPage.html new file mode 100644 index 0000000..dc2a23f --- /dev/null +++ b/myProjectsPage.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + Mes projets + + + +
+ + +
+
+

ici, découvrez tout mes projets ...

+
+
+ down arrow +
+
+
+ +
+
+
+ + +
+
+

Le concours
Astro PI

+
+
+ + + + +
+
+

Mon Portfolio

+
+
+ + + + +
+
+

Projet de
fin d'année
2022

+
+
+ + +
+
+
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/pdf/cv.pdf b/pdf/cv.pdf new file mode 100644 index 0000000..8026287 Binary files /dev/null and b/pdf/cv.pdf differ diff --git a/projetIT.html b/projetIT.html new file mode 100644 index 0000000..bf93290 --- /dev/null +++ b/projetIT.html @@ -0,0 +1,132 @@ + + + + + + + + + + + + Projet de fin d'année 2022 + + + + +
+ +
+
+ +
+
+

Projet de fin d'année

+
+
+ +
+
+ +
+

PROJET IT 2022

+
+
+ + +
+
+ +
+

Le projet

+

Le projet portait sur la sécurité routière. Nous devions trouver un moyen de + communiquer avec le véhicule derrière le nôtre. Nous avons opté pour un message visuel qui affiche + un rond vert lorsque le véhicule suiveur est à bonne distance du nôtre et un rouge lorsque qu'il est + trop près. Tout cela en fonction de la vitesse bien entendu.
Nous devions également créer une + application mobile pour en alerter l'utilisateur.

+
+
+ + +
+
+ +
+

Mes tâches

+

Je devais faire l'application et transférer des informations récoltées par un capteur + ultrason depuis la carte Adafruit vers le téléphone, le tout via un module bluetooth HC-05. Nous + avons coder en Micro-Python. Pour ce qui est de l'application mobile je me suis servi de MIT AppInventor.

+
+
+ + +
+ + + + \ No newline at end of file diff --git a/spanProjects.html b/spanProjects.html new file mode 100644 index 0000000..0552741 --- /dev/null +++ b/spanProjects.html @@ -0,0 +1,50 @@ + + + + + + + + + spanProjects + + + + +
+
+
+ + +
+
+

Le concours
Astro PI

+
+
+ + + + +
+
+

Mon Portfolio

+
+
+ + + + +
+
+

Projet de
fin d'année
2022

+
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/swiperSlide.html b/swiperSlide.html new file mode 100644 index 0000000..32253f5 --- /dev/null +++ b/swiperSlide.html @@ -0,0 +1,90 @@ + + + + + + + + + + Slide Astro Pi + + + +
+
+ + +
+
+ +
+
+

#AstroPi

+
+
+

Le projet consistait à prendre des photos de la terre à partir de l'ISS pour ensuite y détecter les fumées d'incendie ...

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

#MonPortfolio

+
+
+

Ce site m'a permis de me faire de l'expérience avec les langages du web ...

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

#ProjetIT2022

+
+
+

Nous devions trouver un moyen de communiquer avec le véhicule derrière le nôtre.

+
+
+ +
+
+
+
+
+ + + + + + + \ No newline at end of file