mirror of
https://github.com/Floriansylvain/portfolio.git
synced 2026-08-19 19:53:18 +02:00
🚧 WIP Section projets
This commit is contained in:
Florian Sylvain
+145
-13
@@ -1,11 +1,11 @@
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
src: url('assets/Manrope-VariableFont_wght.ttf') format('truetype');
|
||||
src: url('assets/fonts/Manrope-VariableFont_wght.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: url('assets/OverpassMono-VariableFont_wght.ttf') format('truetype');
|
||||
src: url('assets/fonts/OverpassMono-VariableFont_wght.ttf') format('truetype');
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -15,14 +15,14 @@
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 2000px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
||||
color: #fff;
|
||||
font-family: Manrope;
|
||||
font-variation-settings: 'wght' 500;
|
||||
|
||||
background-color: #101010;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
header {
|
||||
@@ -32,7 +32,7 @@ header {
|
||||
padding: 10px 10px 10px 110px;
|
||||
background-color: #253622;
|
||||
transform: translateY(-100%);
|
||||
transition: transform 200ms ease-in-out;
|
||||
transition: transform 200ms ease-in-out, gap 200ms ease-in-out;
|
||||
}
|
||||
|
||||
nav {
|
||||
@@ -76,7 +76,7 @@ nav a:nth-child(0n+5) {
|
||||
h2 {
|
||||
letter-spacing: 2px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #101010;
|
||||
border-bottom: 2px solid #121212;
|
||||
}
|
||||
|
||||
h2:first-letter {
|
||||
@@ -134,7 +134,11 @@ a {
|
||||
}
|
||||
|
||||
.hamburger:hover > span {
|
||||
background: #D0DBCC;
|
||||
background: #D6FFC9;
|
||||
}
|
||||
|
||||
header:hover {
|
||||
transform: translateY(calc(-100% + 25px));
|
||||
}
|
||||
|
||||
.to-cross .hamburger {
|
||||
@@ -177,12 +181,12 @@ a {
|
||||
|
||||
.main-title h1 {
|
||||
cursor: pointer;
|
||||
transition: text-shadow 200ms ease-in-out, transform 200ms ease-in-out;
|
||||
transition: text-shadow 200ms, transform 200ms;
|
||||
}
|
||||
|
||||
.main-title h1:hover {
|
||||
transform: translateX(-5px) translateY(-5px);
|
||||
text-shadow: #253622 10px 10px 10px;
|
||||
transform: translateX(-2.5px) translateY(-2.5px);
|
||||
text-shadow: #253622 5px 5px 0;
|
||||
}
|
||||
|
||||
.to-fade {
|
||||
@@ -195,11 +199,11 @@ a {
|
||||
}
|
||||
|
||||
#content > div {
|
||||
padding: 55px 10%;
|
||||
padding: 50px 10%;
|
||||
}
|
||||
|
||||
#content > div:nth-child(2n-1) {
|
||||
color: #101010;
|
||||
color: #121212;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@@ -207,7 +211,7 @@ a {
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
|
||||
#content img {
|
||||
#about img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
|
||||
@@ -270,6 +274,134 @@ a {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
#projects {
|
||||
display: grid;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
#projects > div {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
height: 250px;
|
||||
|
||||
border-radius: 0.5em;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#projects > div::before, #projects > div::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #D6FFC9;
|
||||
|
||||
border-radius: inherit;
|
||||
transition: transform 500ms;
|
||||
}
|
||||
|
||||
#projects > div::before {
|
||||
transform: translate(-100%, -100%);
|
||||
}
|
||||
|
||||
#projects > div::after {
|
||||
z-index: -1;
|
||||
transform: translate(100%, 100%);
|
||||
}
|
||||
|
||||
#projects > div:hover::before {
|
||||
transform: translate(-0.5em, -0.5em);
|
||||
}
|
||||
|
||||
#projects > div:hover::after {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
#projects article {
|
||||
position: relative;
|
||||
|
||||
width: calc(100% - 0.5em);
|
||||
height: calc(100% - 0.5em);
|
||||
border-radius: inherit;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#projects article:hover .plus-button {
|
||||
backdrop-filter: blur(2px);
|
||||
box-shadow: inset #121212 0 0 100px;
|
||||
}
|
||||
|
||||
#projects article:hover .plus-button svg {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
|
||||
transition: box-shadow 200ms;
|
||||
}
|
||||
|
||||
.plus-button svg {
|
||||
opacity: 0;
|
||||
fill: #CAEBC0;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pong2D {
|
||||
background: center / contain no-repeat url('assets/imgs/Pong2D.png'), center / cover url('assets/imgs/Pong2D_blur.png');
|
||||
}
|
||||
|
||||
#pong2D:hover {
|
||||
background: center / cover no-repeat url('assets/imgs/Pong2D.gif');
|
||||
}
|
||||
|
||||
#pong3D {
|
||||
background: center / contain no-repeat url('assets/imgs/Pong3D.png'), center / cover url('assets/imgs/Pong3D_blur.png');
|
||||
}
|
||||
|
||||
#pong3D:hover {
|
||||
background: center / cover no-repeat url('assets/imgs/Pong3D.gif');
|
||||
}
|
||||
|
||||
#risitasBot {
|
||||
background: center / contain no-repeat url('assets/imgs/RisitasBot.png'), center / cover url('assets/imgs/RisitasBot_blur.png');
|
||||
}
|
||||
|
||||
#risitasBot:hover {
|
||||
background: center / cover no-repeat url('assets/imgs/RisitasBot.gif');
|
||||
}
|
||||
|
||||
#riverwood {
|
||||
background: center / contain no-repeat url('assets/imgs/Riverwood.png'), center / cover url('assets/imgs/Riverwood_blur.png');
|
||||
}
|
||||
|
||||
#riverwood:hover {
|
||||
background: center / cover no-repeat url('assets/imgs/Riverwood.gif');
|
||||
}
|
||||
|
||||
.degree {
|
||||
font-variation-settings: 'wght' 400;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user