first commit
This commit is contained in:
piair
commit
76ef52a998
|
|
@ -0,0 +1,2 @@
|
|||
copy.sh
|
||||
.idea
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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
|
||||
</p>
|
||||
<h1>
|
||||
Pierre TELLIER
|
||||
</h1>
|
||||
<p>La majorité de mes projets sont sur mon <a href="https://gitea.piair.dev/piair" target=”_blank”>Gitea</a>.</p>
|
||||
<p class="spacer" id="spacer1" style="height: 0"></p>
|
||||
<h2 id="startTime">
|
||||
Mon parcours
|
||||
</h2>
|
||||
<div class="timeline" id="timeline">
|
||||
<div class="container left">
|
||||
<div class="content">
|
||||
<h2>2014</h2>
|
||||
<p>Écriture de mon premier programme en java.</p>
|
||||
<p class="comment">Hello World!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container left">
|
||||
<div class="content">
|
||||
<h2>2016</h2>
|
||||
<p>Je découvre la programmation en python grace à <a href="https://www.amazon.fr/dp/2340004594" target=”_blank”>ce livre</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container right">
|
||||
<div class="content">
|
||||
<h2>2018</h2>
|
||||
<p>Entrée au <a href="https://lyc-vernant-sevres.ac-versailles.fr/" target=”_blank”>Lycée de Sèvres</a>, option SNT (Sciences Numériques et Technologiques)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container right">
|
||||
<div class="content">
|
||||
<h2>2019</h2>
|
||||
<p>Entrée en 1ère. Choix des options NSI (Numérique et Science de l'Informatique), Mathématiques, et Physique-Chimie</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container right">
|
||||
<div class="content">
|
||||
<h2>2020</h2>
|
||||
<p>Terminale, Spécialité Maths et Physique-Chimie, option Maths expertes.</p>
|
||||
<p class="comment">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container right">
|
||||
<div class="content">
|
||||
<h2>2021</h2>
|
||||
<p>Bac Mention Bien, spécialité Maths Physique (et COVID, je n'ai presque pas passé d'épreuves).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container left">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container right">
|
||||
<div class="content">
|
||||
<h2>2021</h2>
|
||||
<p>Sup MP2I à <a href="https://www.fenelonsaintemarie.org/classes-preparatoires/page/mp2i/" target=”_blank”>Fénelon St Marie.</a></p>
|
||||
<p class="comment">Beta testeur de cette nouvelle filière. Et j'ai bien fait.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container right">
|
||||
<div class="content">
|
||||
<h2>2022</h2>
|
||||
<p>Spé en MPI*, toujours à Fénelon St Marie.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container right">
|
||||
<div class="content">
|
||||
<h2>2023</h2>
|
||||
<p>Entrée à l'ENSEIRB-MATMECA, en option Informatique.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container right">
|
||||
<div class="content">
|
||||
<h2>2024</h2>
|
||||
<p>Développement de <a href="https://piair.dev" target=”_blank”>ce site web.</a></p>
|
||||
<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="content">
|
||||
<h2>Et bien plus, avec vous ?</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="projetPerso">Mes projets personnels</h2>
|
||||
<script src="src/js/annimateTimeLine.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -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);
|
||||
|
|
@ -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<elements.length; i++){
|
||||
elements[i].id = "card" + i;
|
||||
}
|
||||
}
|
||||
|
||||
function changeWidth()
|
||||
{
|
||||
// Variables
|
||||
let speedFactor = 1/6;
|
||||
let nb_div = document.getElementsByClassName("container").length;
|
||||
let offset = 2.5/speedFactor; // this is the number of false data-points added at the end
|
||||
|
||||
// Elements
|
||||
let timeLineElm = document.getElementById("timeline");
|
||||
let startTimeElm = document.getElementById("startTime");
|
||||
let spacer1 = document.getElementById("spacer1");
|
||||
let projetPerso = document.getElementById("projetPerso");
|
||||
|
||||
|
||||
// Positions
|
||||
let startTimeBoxSize = startTimeElm.getBoundingClientRect()
|
||||
let ymin = startTimeBoxSize.top + window.scrollY;
|
||||
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[] = []
|
||||
for (let i = 0; i<nb_div; i++){
|
||||
let cardElem = document.getElementById("card"+i);
|
||||
let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
||||
cardSizes.push(cardSize);
|
||||
}
|
||||
|
||||
|
||||
// Initial scaling of all cards
|
||||
for (let i = 0; i<nb_div; i++){
|
||||
let cardElem = document.getElementById("card"+i);
|
||||
let s = getSize(i, 0);
|
||||
cardElem.style.transform = `scale(${s})`
|
||||
//let cardSize = cardElem.getBoundingClientRect().bottom - cardElem.getBoundingClientRect().top;
|
||||
cardElem.style.height = `${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(){
|
||||
let 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 (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`
|
||||
|
||||
}
|
||||
}
|
||||
else {
|
||||
all();
|
||||
if (scrollVal < 2){
|
||||
backToTop();
|
||||
}
|
||||
else {
|
||||
under();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
return changeWidthParam;
|
||||
}
|
||||
|
||||
setupPage();
|
||||
let f = changeWidth();
|
||||
|
||||
|
||||
window.addEventListener('scroll', function()
|
||||
{
|
||||
requestAnimationFrame(f);
|
||||
}, false);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue