From 76ef52a99846c437ea34a2a39b246833282ab7ef Mon Sep 17 00:00:00 2001 From: piair Date: Sun, 18 Feb 2024 18:52:51 +0100 Subject: [PATCH] first commit --- .gitignore | 2 + index.html | 112 ++++++++++++++++++++++ src/css/style.css | 187 +++++++++++++++++++++++++++++++++++++ src/img/baton.png | Bin 0 -> 26651 bytes src/img/favicon.ico | Bin 0 -> 3976 bytes src/js/annimateTimeLine.js | 112 ++++++++++++++++++++++ src/js/annimateTimeLine.ts | 134 ++++++++++++++++++++++++++ 7 files changed, 547 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 src/css/style.css create mode 100644 src/img/baton.png create mode 100644 src/img/favicon.ico create mode 100644 src/js/annimateTimeLine.js create mode 100644 src/js/annimateTimeLine.ts 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 0000000000000000000000000000000000000000..76f023bf18d7c716a0913a16c23167daa8c1fe1d GIT binary patch literal 26651 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 o8(apW6FlyEf+FIS#fBKZ?$&=jg z-t(UKyyyMCd)S~&jP-DP!VLgC;^ShT2cQM~04v6o!K**J3qY+)SF5%0YBiskwRm27 zMjAkH;p)OEac8vhbxAYJUK;J`En9L{`^Fek{=@}C^0k2xw5Ex5;0r)HhqF)}6T4*|=JGfA+k0E{1vT-JZ5* z@RGnSKOd5F@VZeN=+2J_d!fY3GGg+L8#`CN-JUwR=0r#RKVHllDaxj;V?OdI(C6w` ze)PA<4zJi5$-iH_&{o3^8=waTe?=IX^6!+H^4QG^B zY?`d*EHC8~8A_C=hU5E}!1_zRv1%I?B1 z*UY$=mtqSqkPj6dyhD$Rl4bEf(@5F|QEo0zoIUJt$9rqzW1^<(FWqWLPHYX8tCEX* zJ0i1R7k})1WK-*^Im8Vt|+V0Q<`g{6oOl@eBOsVh6w$*G5%Ps?$;9;Jhlf==G z!3iC#GLVJLT(HO3T%$m65oJzu{?O2!`8F>j2;lyg5|#l*7wU-Nfrngc5KRH)vr#Ey zfi>&w8&seIacdGo10CvPP;kHr75{DMS&1%;udZ}})*Gmfjcp#z=5*X&}-#Cr2pxKGJVrWAQ_0&@G0 zMao1JkO*NyP$MOzcmy7*9-8jO!sKdkrWfrG z`tzJ@$Ld{#lqf>jA+v&cxLTEQ$8re^s27*Aa=g=cl5Q;8EP*voSE`#5j=D0i(^Vxy zdV&s_q9lw+%OGXmM^I=nt^(vnqGo@%Dik!NiX1FRgKE0}82UZQMEN{P6lPU2;sumj zX2cz(Ax1$T#W46PkQ>o3#822YTFanuh_BG(j}nBv6(ELmniEWajX`JqeKs+b=nrwqv`KU|DbLUN4i%4 ziv1|*$@UnK)_E~Nibq5msNelTwX0(VqAjc9h_)0Nmzc^ zRsJRHKPTpz0gjxwB2wn&M6l;qfQV35fs>R+_2>pQdF*4jfg8^Y;~YB6V(V4o@j z;AZWOpHv1YrILdN>S&q>1B6TJQ^Qqu>t)>^dqtmY_aK-Hq<1!fwMwb3=$2w?o0kFo z#2N4orcm1{Y^VXVlKfT)y1^dkaPq(eG-u7Ti3lH#1XTtM2qG73OVa;<(4Q6&NZJib zOxsdF3K#MFF}Xa5WKt5Dw4@r`hf1u5Rgr37+ve}CI>=FsZ&l73M1mELuY>W$hf?rh zAyP1<1PRX$qTj!9;ra?HnG0@O2O(5aRt+c-{NHznaHH zLJ6>!P~MNrlDE8}e`dhC$;^N%IA;b22xMl!203R2CGccsz)&)7Af+E6qHf_{J{t=S;pVCHv?CWG0{iBd9{?XHRh5~^HdAeU|IV2q7`g0K;oE*pNg zI}V}gP1I${Aso%}Wqi#$+i0W-YG@wlh4>P^ry9K!vef{?z~Tzd`NS Ze2;X`jQz#0e5VlPcuiu=foNUMKLOgRkYE4+ literal 0 HcmV?d00001 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