Et bien plus, avec vous ?
diff --git a/src/css/fonts/Montserrat.css b/src/css/fonts/Montserrat.css
new file mode 100644
index 0000000..a30da81
--- /dev/null
+++ b/src/css/fonts/Montserrat.css
@@ -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;
+}
diff --git a/src/css/fonts/montserrat1.woff2 b/src/css/fonts/montserrat1.woff2
new file mode 100644
index 0000000..a2884fe
Binary files /dev/null and b/src/css/fonts/montserrat1.woff2 differ
diff --git a/src/css/fonts/montserrat2.woff2 b/src/css/fonts/montserrat2.woff2
new file mode 100644
index 0000000..7b90087
Binary files /dev/null and b/src/css/fonts/montserrat2.woff2 differ
diff --git a/src/css/fonts/montserrat3.woff2 b/src/css/fonts/montserrat3.woff2
new file mode 100644
index 0000000..65cf2fb
Binary files /dev/null and b/src/css/fonts/montserrat3.woff2 differ
diff --git a/src/css/fonts/montserrat4.woff2 b/src/css/fonts/montserrat4.woff2
new file mode 100644
index 0000000..dbc5aec
Binary files /dev/null and b/src/css/fonts/montserrat4.woff2 differ
diff --git a/src/css/fonts/montserrat5.woff2 b/src/css/fonts/montserrat5.woff2
new file mode 100644
index 0000000..f4b26df
Binary files /dev/null and b/src/css/fonts/montserrat5.woff2 differ
diff --git a/src/css/style.css b/src/css/style.css
index b211081..aec4dab 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -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;
}
}
\ No newline at end of file
diff --git a/src/js/annimateTimeLine.js b/src/js/annimateTimeLine.js
index c8c71ee..ce78625 100644
--- a/src/js/annimateTimeLine.js
+++ b/src/js/annimateTimeLine.js
@@ -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
- 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);
+ 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
- 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");
+ 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, scrollVal * speedFactor);
+ cardElem.style.display = s < 0.01 ? "none" : "";
+ cardElem.style.transform = "scale(".concat(s, ")");
+ 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(); });
diff --git a/src/js/annimateTimeLine.ts b/src/js/annimateTimeLine.ts
index ae12801..17abe89 100644
--- a/src/js/annimateTimeLine.ts
+++ b/src/js/annimateTimeLine.ts
@@ -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
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 ymin && scrollVal < nb_div + offset){
@@ -86,9 +147,13 @@ function changeWidth()
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";
+ 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'
@@ -97,16 +162,7 @@ function changeWidth()
}
-
- for (let i = 0; i f.updateSize());
\ No newline at end of file