fsylvain/portfolio
1
0
Fork 0
mirror of https://github.com/Floriansylvain/portfolio.git synced 2026-08-19 11:43:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

🚧 Added projects

Browse Source
This commit is contained in:
Florian Sylvain
2022-01-31 23:58:23 +01:00
parent 594487ff63
commit 204220be58
8 changed files with 122 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/imgs/Pong3D.gif
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 MiB

After

Width:  |  Height:  |  Size: 2.9 MiB

assets/imgs/Riverwood.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 222 KiB

assets/imgs/ThesesFr.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 832 KiB

assets/imgs/ThesesFr.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

assets/imgs/ThesesFr_blur.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 368 KiB

index.html
+61 -47
View File
@@ -90,59 +90,73 @@
<div class="to-fade" id="projects"> <div class="to-fade" id="projects">
<h2>Projects</h2> <h2>Projects</h2>
<div class="projects-list">
<div> <div>
<article id="pong2D"> <article id="pong2D" class="to-slide">
<div class="plus-button"> <div class="plus-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
</div> </div>
<div class="article-content"> <div class="article-content">
<p> <p>
My first project in Python (with Pygame). It's a simple pong, with a main menu, a pause menu and a game over. My first project in Python (with Pygame). It's a simple pong, with a main menu, a pause menu and a game over.
</p> </p>
</div> </div>
</article> </article>
</div>
<div>
<article id="pong3D">
<div class="plus-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
</div>
<div class="article-content">
<p>
My very first project on Unity. It's a simple pong with some effects and a rather calm atmosphere.
</p>
</div>
</div> </div>
</article>
<div> <div>
<article id="risitasBot"> <article id="pong3D" class="to-slide">
<div class="plus-button"> <div class="plus-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
</div> </div>
<div class="article-content"> <div class="article-content">
<p> <p>
Risitas_Bot is a Discord bot that can connect your Twitch chat to a Discord channel in real time, make your friends laugh by playing the meme "Issou!" on command in a voice channel and even give you some statistics about your Osu! account and last ranked games. My very first project on Unity. It's a simple pong with some effects and a rather calm atmosphere.
</p> </p>
</div>
</div> </div>
</article> </article>
</div>
<div> <div>
<article id="riverwood"> <article id="risitasBot" class="to-slide">
<div class="plus-button"> <div class="plus-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
</div> </div>
<div class="article-content"> <div class="article-content">
<p> <p>
Work of students of DUT info 1 (IUT of Marne-la-Vallée). The students had to create a sound production inspired by the short film "Calls" by Timothée Hochet. Risitas_Bot is a Discord bot that can connect your Twitch chat to a Discord channel in real time, make your friends laugh by playing the meme "Issou!" on command in a voice channel and even give you some statistics about your Osu! account and last ranked games.
</p> </p>
</div> </div>
</article> </article>
</div> </div>
<div>
<article id="riverwood" class="to-slide">
<div class="plus-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
</div>
<div class="article-content">
<p>
Work of students of DUT info 1 (IUT of Marne-la-Vallée). The students had to create a sound production inspired by the short film "Calls" by Timothée Hochet.
</p>
</div>
</article>
</div>
<div>
<article id="thesesFr" class="to-slide">
<div class="plus-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
</div>
<div class="article-content">
<p>
The goal was to retrieve the dataset provided by theses.fr, to normalize it, and to create a site allowing to consult these data, first in the form of a simple but visually pleasant list, then in a second time to summarize the research in the form of graphics (and a map).
</p>
</div>
</article>
</div>
</div>
</div> </div>
<div class="to-fade" id="contact"> <div class="to-fade" id="contact">
script.js
+9 -10
View File
@@ -5,16 +5,15 @@ const mainTitle = document.querySelector('.main-title');
const navBarElems = document.querySelector('body > header > nav'); const navBarElems = document.querySelector('body > header > nav');
const contentElems = document.querySelectorAll('#content > div, .main-title'); const contentElems = document.querySelectorAll('#content > div, .main-title');
function toMove(toClass, inClass) { function toAddClass(toClass, inClass) {
"use strict"; "use strict";
const elementsToMove = document.querySelectorAll(toClass); const elementsToAddClass = document.querySelectorAll(toClass);
if (elementsToMove !== null) { if (elementsToAddClass !== null) {
elementsToMove.forEach(function (elem) { elementsToAddClass.forEach(function (elem) {
const distInView = ( const distInView = elem.getBoundingClientRect().top
elem.getBoundingClientRect().bottom - (elem.offsetHeight) / 2 - window.innerHeight + 100;
) - window.innerHeight;
if (distInView < 0) { if (distInView < 0) {
elem.classList.add(inClass); elem.classList.add(inClass);
} }
@@ -73,9 +72,9 @@ function updateUrl() {
function scrollHandler() { function scrollHandler() {
"use strict"; "use strict";
toMove('.to-fade', 'fade-in'); toAddClass('.to-fade', 'fade-in');
toMove('.to-grow', 'grow-in'); toAddClass('.to-grow', 'grow-in');
toMove('.to-slide', 'slide-in'); toAddClass('.to-slide', 'slide-in');
updateTitle(); updateTitle();
stylesheet.css
+52 -15
View File
@@ -36,9 +36,11 @@ header {
} }
nav { nav {
display: flex; display: inline-flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
gap: 10px; gap: 10px;
font-size: 1.6em; font-size: 1.6em;
letter-spacing: 4px; letter-spacing: 4px;
} }
@@ -49,15 +51,33 @@ nav a:first-letter {
} }
nav a { nav a {
position: relative;
font-family: Manrope; font-family: Manrope;
transform: translateX(-100%);
opacity: 0; opacity: 0;
transform: translateX(-100%);
transition: transform 600ms, opacity 600ms, letter-spacing 200ms; transition: transform 600ms, opacity 600ms, letter-spacing 200ms;
} }
nav a:hover { nav a::after {
letter-spacing: 6px; content: '';
position: absolute;
left: 0;
bottom: -3px;
background: #3AC414;
width: 0;
height: 3px;
transition: width 200ms ease-in-out;
}
nav a:hover::after {
width: 100%;
} }
nav a:nth-child(0n+2) { nav a:nth-child(0n+2) {
@@ -274,18 +294,22 @@ header:hover {
font-size: smaller; font-size: smaller;
} }
#projects { .projects-list {
display: grid; display: flex;
gap: 30px; justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
} }
#projects > div { .projects-list > div {
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 300px;
height: 250px; height: 250px;
border-radius: 0.5em; border-radius: 0.5em;
@@ -293,7 +317,7 @@ header:hover {
overflow: hidden; overflow: hidden;
} }
#projects > div::before, #projects > div::after { .projects-list > div::before, .projects-list > div::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@@ -302,26 +326,26 @@ header:hover {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #D6FFC9; background-color: #fff;
border-radius: inherit; border-radius: inherit;
transition: transform 500ms; transition: transform 500ms;
} }
#projects > div::before { .projects-list > div::before {
transform: translate(-100%, -100%); transform: translate(-100%, -100%);
} }
#projects > div::after { .projects-list > div::after {
z-index: -1; z-index: -1;
transform: translate(100%, 100%); transform: translate(100%, 100%);
} }
#projects > div:hover::before { .projects-list > div:hover::before {
transform: translate(-0.5em, -0.5em); transform: translate(-0.5em, -0.5em);
} }
#projects > div:hover::after { .projects-list > div:hover::after {
transform: translate(0, 0); transform: translate(0, 0);
} }
@@ -333,10 +357,14 @@ header:hover {
border-radius: inherit; border-radius: inherit;
cursor: pointer; cursor: pointer;
transform: translateX(-150%);
transition: transform 200ms;
} }
#projects article:hover .plus-button { #projects article:hover .plus-button {
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
background-color: #0005;
box-shadow: inset #121212 0 0 100px; box-shadow: inset #121212 0 0 100px;
} }
@@ -360,7 +388,8 @@ header:hover {
.plus-button svg { .plus-button svg {
opacity: 0; opacity: 0;
fill: #CAEBC0; fill: #fff;
filter: drop-shadow(0 0 10px #0003);
width: 20%; width: 20%;
height: 20%; height: 20%;
transition: opacity 200ms; transition: opacity 200ms;
@@ -402,6 +431,14 @@ header:hover {
background: center / cover no-repeat url('assets/imgs/Riverwood.gif'); background: center / cover no-repeat url('assets/imgs/Riverwood.gif');
} }
#thesesFr {
background: center / contain no-repeat url('assets/imgs/ThesesFr.png'), center / cover url('assets/imgs/ThesesFr_blur.png');
}
#thesesFr:hover {
background: center / cover no-repeat url('assets/imgs/ThesesFr.gif');
}
.degree { .degree {
font-variation-settings: 'wght' 400; font-variation-settings: 'wght' 400;
} }