piair
/
piair.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

smol update

This commit is contained in:
piair 2024-02-23 20:14:10 +01:00
parent c24b09a105
commit 0a8f6621fc
10 changed files with 256 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -5,11 +5,13 @@
<title>Piair.dev</title>
<link type="text/css" href="src/css/style.css" rel="stylesheet" >
<link rel="icon" type="image/x-icon" href="src/img/favicon.ico">
</head>
<body>
<p>
Ce site est en cours de construction. Il devrait s'améliorer de jour en jour
Ce site est en cours de construction. Il devrait s'améliorer de jour en jour.
</p>
<p style="color: #FF9F55">
Il est conçu pour les ordinateurs. La version mobile arrivera (peut être) plus tard.
</p>
<h1>
Pierre TELLIER
@ -64,7 +66,7 @@
<div class="content">
<h2>2021</h2>
<p>Programmation d'un logiciel permettant d'obtenir les données de Parcoursup automatiquement</p>
<p class="comment">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.</p>
<p class="comment">Très utile pour voir le nombre de personnes devant moi sur la liste d'attente de Fénelon St Marie, sur Excel.</p>
</div>
</div>
<div class="container right">
@ -83,7 +85,7 @@
<div class="container left">
<div class="content">
<h2>2022</h2>
<p>TIPE, projet de groupe en Python en et C sur du traitement d'images.</p>
<p>TIPE, projet de groupe en Python et en C sur du traitement d'images.</p>
</div>
</div>
<div class="container right">
@ -99,7 +101,7 @@
<p class="comment">Je sais qu'il est pas beau, mais je ne suis pas un créatif.</p>
</div>
</div>
<div class="container right">
<div class="container left">
<div class="content">
<h2>Et bien plus, avec vous ?</h2>
</div>

40
src/css/fonts/Montserrat.css Normal file
View File

@ -0,0 +1,40 @@
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(./montserrat1.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(./montserrat2.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(./montserrat3.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(./montserrat4.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(./montserrat5.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

BIN
src/css/fonts/montserrat1.woff2 Normal file
View File

Binary file not shown.

BIN
src/css/fonts/montserrat2.woff2 Normal file
View File

Binary file not shown.

BIN
src/css/fonts/montserrat3.woff2 Normal file
View File

Binary file not shown.

BIN
src/css/fonts/montserrat4.woff2 Normal file
View File

Binary file not shown.

BIN
src/css/fonts/montserrat5.woff2 Normal file
View File

Binary file not shown.

47
src/css/style.css
View File

@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url(./fonts/Montserrat.css);
/* This font is from https://fonts.googleapis.com/css?family=Montserrat */
:root {
--color-background0: #0e0e0e;
@ -13,8 +14,11 @@
body {
text-align: center;
height: 100000px;
color: var(--color-text);
font-size: 1.4em;
}
html {
font-family: Montserrat, sans-serif;
min-height: 100%;
@ -25,36 +29,32 @@ html {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#136a77", endColorstr="#06121c", GradientType=1);
}
p {
color: var(--color-text);
h1{
font-size: xxx-large;
}
h1, h2 {
color: var(--color-text)
}
a {
color: var(--color-text);
}
a:visited{
a, a:visited{
color: var(--color-text);
}
/* Timeline stuff */
/* Source: https://www.w3schools.com/howto/howto_css_timeline.asp */
/* Modified by Pierre TELLIER */
/* Modified by Pierre Tellier */
.comment{
color: dimgrey;
font-size: small;
font-size: 1em;
}
* {
box-sizing: border-box;
}
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
/* max-width: 1200px; */
width: 100%;
margin: 0 auto;
}
@ -63,11 +63,12 @@ a:visited{
content: '';
position: absolute;
width: 6px;
background-color: white;
background-color: var(--color-border0);
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
@ -147,8 +148,8 @@ a:visited{
border: solid white;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Media queries - Responsive timeline on screens less than 700px wide */
@media screen and (max-width: 1000px) {
/*
Place the timelime to the left
the timeline left position is hardcoded to 31px
@ -156,12 +157,15 @@ a:visited{
.timeline::after {
left: 31px;
}
.timeline{
left:23px; /*TODO: find why it's moving on mobile version*/
width: 90%;
}
/* Full-width containers */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
@ -177,11 +181,16 @@ a:visited{
the left position is hardcoded at 15px
*/
.left::after, .right::after {
left: 15px;
left: 0;
}
/* Make all right containers behave like the left ones */
.right {
left: 0;
transform-origin: top left;
}
.left {
left: 0;
transform-origin: top left;
}
}

99
src/js/annimateTimeLine.js
View File

@ -1,16 +1,20 @@
// 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);
var offset = 2 / 5; // difference between each curve
var stableLen = 0.1;
var mainFunc = (-Math.abs(yValue - curbID * offset) + 1 + stableLen) / 2 + Math.abs((-Math.abs(yValue - curbID * offset) + 1 + stableLen) / 2);
/* basically do that :
/\
_____/ \______
*/
var secoFunc = (-Math.abs(yValue - curbID * offset) + stableLen) / 2 + Math.abs((-Math.abs(yValue - curbID * offset) + stableLen) / 2);
/* basically do that :
______/\______
so the difference do
__
______/ \______
*/
return mainFunc - secoFunc;
}
function setupPage() {
var elements = document.getElementsByClassName("container");
@ -20,9 +24,9 @@ function setupPage() {
}
function changeWidth() {
// Variables
var speedFactor = 1 / 6;
var speedFactor = 1 / 10;
var nb_div = document.getElementsByClassName("container").length;
var offset = 2.5 / speedFactor; // this is the number of false data-points added at the end
var offset = 3.5 / speedFactor; // this is the number of false data-points added at the end. it doesn't work well when modifying speed_factor
// Elements
var timeLineElm = document.getElementById("timeline");
var startTimeElm = document.getElementById("startTime");
@ -32,22 +36,49 @@ function changeWidth() {
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
var cardSizes = [];
// fill the cardSizes array with original height of each card
function calculateCardSizes() {
timeLineElm.style.height = "".concat(0.8 * window.screen.height, "px");
console.log("taille de la fenetre: " + window.screen.height);
console.log("taille de la barre" + timeLineElm.style.height);
spacer1.innerText = timeLineElm.style.height;
cardSizes = [];
for (var i = 0; i < nb_div; i++) {
var cardElem = document.getElementById("card" + i);
cardElem.style.transform = 'scale(1)';
cardElem.style.display = "";
cardElem.style.height = "";
var cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
cardSizes.push(cardSize);
}
// Initial scaling of all cards
}
calculateCardSizes();
function scaleAllCards(scrollVal) {
console.log(timeLineElm.style.height);
var shownCardsSizes = [];
for (var i = 0; i < nb_div; i++) {
var s = getSize(i, scrollVal * speedFactor);
if (s > 0.01)
shownCardsSizes.push([cardSizes[i], s]);
}
var c = timeLineElm.style.height.replace("px", "");
// @ts-ignore
var scaleOffset = (c - shownCardsSizes.reduce(function (x, y) { return x + y[0] * y[1]; }, 0)) / shownCardsSizes.map(function (x) { return x[0]; }).reduce(function (x, y) { return x + y; });
//x = c - sum(ai*si)/sum(ai)
for (var i = 0; i < nb_div; i++) {
var cardElem = document.getElementById("card" + i);
var s = getSize(i, 0);
var s = getSize(i, scrollVal * speedFactor);
cardElem.style.display = s < 0.01 ? "none" : "";
cardElem.style.transform = "scale(".concat(s, ")");
//let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
cardElem.style.height = "".concat(cardSizes[i] * s, "px");
cardElem.style.transform = "scale(".concat(s, ")");
cardElem.style.height = "".concat(cardSizes[i] * (s + Math.max(scaleOffset, 0)), "px");
if (window.matchMedia("(max-width: 1000px)").matches)
cardElem.style.left = "".concat(15 * (2 - s), "px"); // 15px + the size missing to the circle
}
}
scaleAllCards((timeLineElm.getBoundingClientRect().y - ymin) / (ymax - ymin) * nb_div);
// action to take whenever we go above the timeline or under
function all() {
startTimeElm.style.position = "relative";
@ -60,6 +91,8 @@ function changeWidth() {
// action to take whenever we go above the timeline
function backToTop() {
spacer1.style.height = "0px";
if (window.matchMedia("(max-width: 1000px)").matches)
timeLineElm.style.left = "23px"; // TODO this 23 shouldn't be hardcoded
}
// action to take whenever we go under the timeline
function under() {
@ -67,6 +100,7 @@ function changeWidth() {
spacer1.style.height = -spacer1.getBoundingClientRect().bottom + "px";
}
}
// main function, called each time we scroll
function changeWidthParam() {
var scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div;
if (window.scrollY > ymin && scrollVal < nb_div + offset) {
@ -76,22 +110,18 @@ function changeWidth() {
startTimeElm.style.left = "0%";
startTimeElm.style.top = 0 + "px";
timeLineElm.style.position = "fixed";
timeLineElm.style.right = "0%";
timeLineElm.style.left = "0%";
if (window.matchMedia("(max-width: 1000px)").matches) {
timeLineElm.style.left = "31px";
console.log("Mobile Version");
}
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");
}
scaleAllCards(scrollVal);
}
else {
all();
@ -103,10 +133,19 @@ function changeWidth() {
}
}
}
return changeWidthParam;
function updateSize() {
calculateCardSizes();
changeWidthParam();
}
return { "main": changeWidthParam, "updateSize": updateSize };
}
setupPage();
var f = changeWidth();
window.addEventListener('scroll', function () {
requestAnimationFrame(f);
requestAnimationFrame(f.main);
}, false);
// source: https://stackoverflow.com/a/26837814
window.onbeforeunload = function () {
window.scrollTo(0, 0);
};
addEventListener("resize", function (event) { return f.updateSize(); });

115
src/js/annimateTimeLine.ts
View File

@ -1,10 +1,25 @@
// 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)
let offset = 2/5; // difference between each curve
let stableLen = 0.1;
let mainFunc = (-Math.abs(yValue - curbID*offset)+1+stableLen)/2 + Math.abs((-Math.abs(yValue - curbID*offset)+1+stableLen)/2);
/* basically do that :
/\
_____/ \______
*/
let secoFunc = (-Math.abs(yValue - curbID*offset)+stableLen)/2 + Math.abs((-Math.abs(yValue - curbID*offset)+stableLen)/2);
/* basically do that :
______/\______
so the difference do
__
______/ \______
*/
return mainFunc - secoFunc
}
function setupPage(){
let elements = document.getElementsByClassName("container");
for (let i = 0; i<elements.length; i++){
@ -12,12 +27,13 @@ function setupPage(){
}
}
function changeWidth()
{
// Variables
let speedFactor = 1/6;
let speedFactor = 1/10;
let nb_div = document.getElementsByClassName("container").length;
let offset = 2.5/speedFactor; // this is the number of false data-points added at the end
let offset = 3.5/speedFactor; // this is the number of false data-points added at the end. it doesn't work well when modifying speed_factor
// Elements
let timeLineElm = document.getElementById("timeline");
@ -32,27 +48,64 @@ function changeWidth()
let ymax = document.getElementById(`card${nb_div-1}`).getBoundingClientRect().bottom + window.scrollY;
// todo: change the height of the timeline to value depending on the screen size
timeLineElm.style.height = `${nb_div*50}px`;
// get each maximum card size
let cardSizes: number[] = []
// fill the cardSizes array with original height of each card
function calculateCardSizes(){
timeLineElm.style.height = `${0.8*window.screen.height}px`;
console.log("taille de la fenetre: " + window.screen.height)
console.log("taille de la barre" + timeLineElm.style.height);
spacer1.innerText = timeLineElm.style.height;
cardSizes = []
for (let i = 0; i<nb_div; i++){
let cardElem = document.getElementById("card"+i);
cardElem.style.transform = 'scale(1)';
cardElem.style.display = ""
cardElem.style.height = ""
let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
cardSizes.push(cardSize);
}
// Initial scaling of all cards
}
calculateCardSizes()
function scaleAllCards(scrollVal: number){
console.log(timeLineElm.style.height);
let shownCardsSizes = []
for (let i = 0; i<nb_div; i++){
let s = getSize(i, scrollVal*speedFactor);
if (s>0.01)
shownCardsSizes.push([cardSizes[i], s])
}
let c = timeLineElm.style.height.replace("px", "");
// @ts-ignore
let scaleOffset = (c - shownCardsSizes.reduce((x, y) => x+y[0]*y[1], 0)) /shownCardsSizes.map((x) => x[0]).reduce((x, y) => x+y);
//x = c - sum(ai*si)/sum(ai)
for (let i = 0; i<nb_div; i++){
let cardElem = document.getElementById("card"+i);
let s = getSize(i, 0);
let s = getSize(i, scrollVal*speedFactor);
cardElem.style.display = s<0.01 ? "none" : ""
cardElem.style.transform = `scale(${s})`
//let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
cardElem.style.height = `${cardSizes[i] * s}px`
cardElem.style.transform = `scale(${s})`
cardElem.style.height = `${cardSizes[i] * (s+Math.max(scaleOffset, 0))}px`
if (window.matchMedia("(max-width: 1000px)").matches)
cardElem.style.left = `${15*(2-s)}px` // 15px + the size missing to the circle
}
}
scaleAllCards((timeLineElm.getBoundingClientRect().y - ymin) / (ymax - ymin) * nb_div);
// action to take whenever we go above the timeline or under
function all(){
startTimeElm.style.position = "relative";
@ -63,10 +116,16 @@ function changeWidth()
projetPerso.style.position = "relative";
}
// action to take whenever we go above the timeline
function backToTop(){
spacer1.style.height="0px";
if (window.matchMedia("(max-width: 1000px)").matches)
timeLineElm.style.left = "23px" // TODO this 23 shouldn't be hardcoded
}
// action to take whenever we go under the timeline
function under() {
if(spacer1.style.height.replace("px", "") < "100"){
@ -75,6 +134,8 @@ function changeWidth()
}
// main function, called each time we scroll
function changeWidthParam(){
let scrollVal = (window.scrollY - ymin) / (ymax - ymin) * nb_div
if (window.scrollY > ymin && scrollVal < nb_div + offset){
@ -86,8 +147,12 @@ function changeWidth()
startTimeElm.style.top = 0 + "px";
timeLineElm.style.position = "fixed";
timeLineElm.style.right = "0%";
timeLineElm.style.left = "0%";
if (window.matchMedia("(max-width: 1000px)").matches){
timeLineElm.style.left = "31px"
console.log("Mobile Version")
}
timeLineElm.style.top = startTimeElm.getBoundingClientRect().bottom + 20 + "px";
projetPerso.style.position = "fixed";
@ -97,16 +162,7 @@ function changeWidth()
}
for (let i = 0; i<nb_div; i++){
let cardElem = document.getElementById("card"+i);
let s = getSize(i, scrollVal*speedFactor);
cardElem.style.display = s<0.01 ? "none" : ""
cardElem.style.transform = `scale(${s})`
cardElem.style.height = `${cardSizes[i] * s}px`
}
scaleAllCards(scrollVal);
}
else {
all();
@ -119,7 +175,12 @@ function changeWidth()
}
}
return changeWidthParam;
function updateSize(){
calculateCardSizes()
changeWidthParam()
}
return {"main" : changeWidthParam, "updateSize" : updateSize};
}
setupPage();
@ -128,7 +189,11 @@ let f = changeWidth();
window.addEventListener('scroll', function()
{
requestAnimationFrame(f);
requestAnimationFrame(f.main);
}, false);
// source: https://stackoverflow.com/a/26837814
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
addEventListener("resize", (event) => f.updateSize());