commit 76ef52a99846c437ea34a2a39b246833282ab7ef Author: piair Date: Sun Feb 18 18:52:51 2024 +0100 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e45165d --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +copy.sh +.idea \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..2c42adb --- /dev/null +++ b/index.html @@ -0,0 +1,112 @@ + + + + + Piair.dev + + + + + +

+ Ce site est en cours de construction. Il devrait s'améliorer de jour en jour +

+

+ Pierre TELLIER +

+

La majorité de mes projets sont sur mon Gitea.

+

+

+ Mon parcours +

+
+
+
+

2014

+

Écriture de mon premier programme en java.

+

Hello World!

+
+
+
+
+

2016

+

Je découvre la programmation en python grace à ce livre

+
+
+
+
+

2018

+

Entrée au Lycée de Sèvres, option SNT (Sciences Numériques et Technologiques)

+
+
+
+
+

2019

+

Entrée en 1ère. Choix des options NSI (Numérique et Science de l'Informatique), Mathématiques, et Physique-Chimie

+
+
+
+
+

2020

+

Terminale, Spécialité Maths et Physique-Chimie, option Maths expertes.

+

+ J'ai du abandonner à contre-coeur l'option NSI. En effet, je voulais déjà aller en prépa, et la physique est presque obligatoire, même en MPI. +

+
+
+
+
+

2021

+

Bac Mention Bien, spécialité Maths Physique (et COVID, je n'ai presque pas passé d'épreuves).

+
+
+
+
+

2021

+

Programmation d'un logiciel permettant d'obtenir les données de Parcoursup automatiquement

+

Très utile pour voir le nombre de personnes devant moi sur la liste d'attente de Fénelon St Marie, sous la forme d'un graphe.

+
+
+
+
+

2021

+

Sup MP2I à Fénelon St Marie.

+

Beta testeur de cette nouvelle filière. Et j'ai bien fait.

+
+
+
+
+

2022

+

Spé en MPI*, toujours à Fénelon St Marie.

+
+
+
+
+

2022

+

TIPE, projet de groupe en Python en et C sur du traitement d'images.

+
+
+
+
+

2023

+

Entrée à l'ENSEIRB-MATMECA, en option Informatique.

+
+
+
+
+

2024

+

Développement de ce site web.

+

Je sais qu'il est pas beau, mais je ne suis pas un créatif.

+
+
+
+
+

Et bien plus, avec vous ?

+
+
+
+ +

Mes projets personnels

+ + + \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..b211081 --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,187 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat'); + +:root { + --color-background0: #0e0e0e; + --color-background1: #070631; + --color-background2: dimgray; + --color-border0: #FFFFFF; + --color-border1: grey; + --color-text: #FFFFFF; + --color-transparent: rgba(0, 0, 0, 0); +} + +body { + text-align: center; + height: 100000px; +} + +html { + font-family: Montserrat, sans-serif; + min-height: 100%; + background: var(--color-background0); + background: -moz-linear-gradient(217deg, var(--color-background0) 0%, var(--color-background1) 100%); + background: -webkit-linear-gradient(217deg, var(--color-background0) 0%, var(--color-background1) 100%); + background: linear-gradient(217deg, var(--color-background0) 0%, var(--color-background1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#136a77", endColorstr="#06121c", GradientType=1); +} + +p { + color: var(--color-text); +} + +h1, h2 { + color: var(--color-text) +} + +a { + color: var(--color-text); +} +a:visited{ + color: var(--color-text); +} + + +/* Timeline stuff */ +/* Source: https://www.w3schools.com/howto/howto_css_timeline.asp */ +/* Modified by Pierre TELLIER */ +.comment{ + color: dimgrey; + font-size: small; +} +* { + box-sizing: border-box; +} +/* The actual timeline (the vertical ruler) */ +.timeline { + position: relative; + /* max-width: 1200px; */ + margin: 0 auto; +} + + +.timeline::after { + content: ''; + position: absolute; + width: 6px; + background-color: white; + top: 0; + bottom: 0; + left: 50%; + margin-left: -3px; +} + +/* Container around content */ +.container { + padding: 10px 40px; + position: relative; + background-color: inherit; + width: 50%; + +} + +/* The circles on the timeline */ +.container::after { + content: ''; + position: absolute; + width: 25px; + height: 25px; + right: -17px; + background-color: white; + border: 4px solid #FF9F55; + top: 15px; + border-radius: 50%; + z-index: 1; +} + +/* Place the container to the left */ +.left { + transform-origin: top right; + left: 0; +} + +/* Place the container to the right */ +.right { + transform-origin: top left; + left: 50%; +} + +/* Add arrows to the left container (pointing right) */ +.left::before { + content: " "; + height: 0; + position: absolute; + top: 22px; + width: 0; + z-index: 1; + right: 30px; + border: medium solid white; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent white; +} + +/* Add arrows to the right container (pointing left) */ +.right::before { + content: " "; + height: 0; + position: absolute; + top: 22px; + width: 0; + z-index: 1; + left: 30px; + border: medium solid white; + border-width: 10px 10px 10px 0; + border-color: transparent white transparent transparent; +} + +/* Fix the circle for containers on the right side */ +.right::after { + left: -16px; +} + +/* The actual content */ +.content { + padding: 20px 30px; + background-color: black; + position: relative; + border-radius: 6px; + border: solid white; +} + +/* Media queries - Responsive timeline on screens less than 600px wide */ +@media screen and (max-width: 600px) { + /* + Place the timelime to the left + the timeline left position is hardcoded to 31px + */ + .timeline::after { + left: 31px; + } + + /* Full-width containers */ + .container { + width: 100%; + padding-left: 70px; + padding-right: 25px; + } + + /* Make sure that all arrows are pointing leftwards */ + .container::before { + left: 60px; + border: medium solid white; + border-width: 10px 10px 10px 0; + border-color: transparent white transparent transparent; + } + + /* + Make sure all circles are at the same spot + the left position is hardcoded at 15px + */ + .left::after, .right::after { + left: 15px; + } + + /* Make all right containers behave like the left ones */ + .right { + left: 0; + } +} \ No newline at end of file diff --git a/src/img/baton.png b/src/img/baton.png new file mode 100644 index 0000000..76f023b Binary files /dev/null and b/src/img/baton.png differ diff --git a/src/img/favicon.ico b/src/img/favicon.ico new file mode 100644 index 0000000..ffab6e3 Binary files /dev/null and b/src/img/favicon.ico differ diff --git a/src/js/annimateTimeLine.js b/src/js/annimateTimeLine.js new file mode 100644 index 0000000..c8c71ee --- /dev/null +++ b/src/js/annimateTimeLine.js @@ -0,0 +1,112 @@ +// source : https://stackoverflow.com/questions/68732160/make-a-div-bigger-and-wider-while-scrolling +var cardSizes = []; +window.onresize = function () { + cardSizes = []; + for (var i = 0; i < document.getElementsByClassName("container").length; i++) { + var cardElem = document.getElementById("card" + i); + var cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top; + cardSizes.push(cardSize); + } +}; +function getSize(curbID, yValue) { + var factor = 2 / 5; // difference between each curve + return (-Math.abs(yValue - curbID * factor) + 1) / 2 + Math.abs((-Math.abs(yValue - curbID * factor) + 1) / 2); +} +function setupPage() { + var elements = document.getElementsByClassName("container"); + for (var i = 0; i < elements.length; i++) { + elements[i].id = "card" + i; + } +} +function changeWidth() { + // Variables + var speedFactor = 1 / 6; + var nb_div = document.getElementsByClassName("container").length; + var offset = 2.5 / speedFactor; // this is the number of false data-points added at the end + // Elements + var timeLineElm = document.getElementById("timeline"); + var startTimeElm = document.getElementById("startTime"); + var spacer1 = document.getElementById("spacer1"); + var projetPerso = document.getElementById("projetPerso"); + // Positions + var startTimeBoxSize = startTimeElm.getBoundingClientRect(); + var ymin = startTimeBoxSize.top + window.scrollY; + var ymax = document.getElementById("card".concat(nb_div - 1)).getBoundingClientRect().bottom + window.scrollY; + // todo: change the height of the timeline to value depending on the screen size + timeLineElm.style.height = "".concat(nb_div * 50, "px"); + // get each maximum card size + for (var i = 0; i < nb_div; i++) { + var cardElem = document.getElementById("card" + i); + var cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top; + cardSizes.push(cardSize); + } + // Initial scaling of all cards + for (var i = 0; i < nb_div; i++) { + var cardElem = document.getElementById("card" + i); + var s = getSize(i, 0); + cardElem.style.transform = "scale(".concat(s, ")"); + //let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top; + cardElem.style.height = "".concat(cardSizes[i] * s, "px"); + } + // action to take whenever we go above the timeline or under + function all() { + startTimeElm.style.position = "relative"; + timeLineElm.style.position = "relative"; + startTimeElm.style.top = ""; + timeLineElm.style.top = ""; + projetPerso.style.top = ""; + projetPerso.style.position = "relative"; + } + // action to take whenever we go above the timeline + function backToTop() { + spacer1.style.height = "0px"; + } + // action to take whenever we go under the timeline + function under() { + if (spacer1.style.height.replace("px", "") < "100") { + spacer1.style.height = -spacer1.getBoundingClientRect().bottom + "px"; + } + } + function changeWidthParam() { + var scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div; + if (window.scrollY > ymin && scrollVal < nb_div + offset) { + if (timeLineElm.style.position !== "fixed") { // apply once + startTimeElm.style.position = "fixed"; + startTimeElm.style.right = "0%"; + startTimeElm.style.left = "0%"; + startTimeElm.style.top = 0 + "px"; + timeLineElm.style.position = "fixed"; + timeLineElm.style.right = "0%"; + timeLineElm.style.left = "0%"; + timeLineElm.style.top = startTimeElm.getBoundingClientRect().bottom + 20 + "px"; + projetPerso.style.position = "fixed"; + projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px'; + projetPerso.style.right = "0%"; + projetPerso.style.left = "0%"; + } + for (var i = 0; i < nb_div; i++) { + var cardElem = document.getElementById("card" + i); + var s = getSize(i, scrollVal * speedFactor); // scrollval / 4 is used to slow down the movement + console.log("scale " + i + " : " + s); + cardElem.style.display = s < 0.01 ? "none" : ""; + cardElem.style.transform = "scale(".concat(s, ")"); + cardElem.style.height = "".concat(cardSizes[i] * s, "px"); + } + } + else { + all(); + if (scrollVal < 2) { + backToTop(); + } + else { + under(); + } + } + } + return changeWidthParam; +} +setupPage(); +var f = changeWidth(); +window.addEventListener('scroll', function () { + requestAnimationFrame(f); +}, false); diff --git a/src/js/annimateTimeLine.ts b/src/js/annimateTimeLine.ts new file mode 100644 index 0000000..ae12801 --- /dev/null +++ b/src/js/annimateTimeLine.ts @@ -0,0 +1,134 @@ +// source : https://stackoverflow.com/questions/68732160/make-a-div-bigger-and-wider-while-scrolling + +function getSize(curbID: number, yValue: number): number{ + let factor = 2/5; // difference between each curve + return (-Math.abs(yValue - curbID*factor)+1)/2 + Math.abs((-Math.abs(yValue - curbID*factor)+1)/2) +} + +function setupPage(){ + let elements = document.getElementsByClassName("container"); + for (let i = 0; i ymin && scrollVal < nb_div + offset){ + if (timeLineElm.style.position !== "fixed"){ // apply once + + startTimeElm.style.position = "fixed" + startTimeElm.style.right = "0%"; + startTimeElm.style.left = "0%"; + startTimeElm.style.top = 0 + "px"; + + timeLineElm.style.position = "fixed"; + timeLineElm.style.right = "0%"; + timeLineElm.style.left = "0%"; + timeLineElm.style.top = startTimeElm.getBoundingClientRect().bottom + 20 + "px"; + + projetPerso.style.position = "fixed"; + projetPerso.style.top = timeLineElm.getBoundingClientRect().bottom + 'px' + projetPerso.style.right = "0%"; + projetPerso.style.left = "0%"; + + } + + + for (let i = 0; i