JustalK/PORTFOLIO

View on GitHub
src/assets/less/resume.less

Summary

Maintainability
Test Coverage
@import (reference) "libs/constants.less";
@import (reference) "libs/mixins.less";
 
#SVG_EFFECT {
display: none;
}
 
.options {
position: relative;
padding: 10px 0 20px 0;
display: flex;
align-items: normal;
flex-wrap: wrap;
 
&-option {
font-family: 'Lato-Bold', sans-serif;
.font-size(1.2);
.transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
display: block !important;
padding: 10px;
margin-right: 10px;
margin-bottom: 10px;
user-select: none;
cursor: pointer;
color: @background-bloc-0;
background: white;
border: 1px solid @background-shadow;
min-width: 50px;
text-align: center;
position: relative;
overflow: hidden;
 
&-linkedin {
position: absolute;
right: 0;
}
 
& span {
position: relative;
pointer-events: none;
z-index: @LAYER-COUCHE-1;
}
 
&.invisible {
opacity: 0;
}
 
&.desactivate {
pointer-events: none;
}
 
&.desactivate:not(&--active) {
opacity: 0.2;
}
 
&::before {
content: ' ';
position: absolute;
background: #1d1d23;
top: 0;
left: 0;
width: 100%;
height: 100%;
.transition(all 0.35s cubic-bezier(0.8, 0, 0.25, 1));
}
 
&--active {
background: @text-color;
color: @text-color-white;
box-shadow: none;
opacity: 1;
}
}
 
&.mounted {
& .tags-tag {
opacity: 1;
}
}
}
 
@media screen and (min-width: @SCREEN_900) {
.options {
&-option {
&:hover {
color: @text-color-white;
background: @background-bloc-0;
box-shadow: none;
 
&::before {
filter: url('#wave');
}
}
 
&--active {
&::before {
background: @text-color;
}
}
}
}
}
 
#RESUME {
position: relative;
overflow: hidden;
 
& > canvas {
position: absolute;
top: 0;
}
 
& .mask {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
max-width: initial;
background: linear-gradient(0deg, rgba(17, 17, 22, 1) 19%, rgba(0, 0, 0, 0) 100%);
}
 
&.locked {
pointer-events: none;
}
 
& h1 {
padding-top: 100px;
margin: 0;
color: @text-color-white;
text-transform: uppercase;
.font-size(5);
}
 
& > div {
margin: auto;
max-width: 1200px;
width: 100%;
position: relative;
z-index: 1;
 
& > span {
margin: 20px 0 20px;
text-align: justify;
.font-size(2);
}
}
 
& iframe {
height: 1460px;
width: 100%;
opacity: 1;
border: 1px solid #000;
.transition(all 0.4s cubic-bezier(0.87, 0.32, 0.81, 0.36));
 
&.invisible {
opacity: 0;
}
}
}
 
@media screen and (max-width: @SCREEN_1800) {
#RESUME > div {
max-width: 1200px;
}
}
 
@media screen and (max-width: @SCREEN_1500) {
#RESUME > div {
max-width: 1000px;
}
}
 
@media screen and (max-width: @SCREEN_1400) {
#RESUME {
& > div {
max-width: 900px;
}
 
& iframe {
height: 1270px;
}
}
}
 
@media screen and (max-width: @SCREEN_1200) {
#RESUME {
& > div {
max-width: 800px;
}
 
& iframe {
height: 1140px;
}
}
}
 
@media screen and (max-width: @SCREEN_1100) {
#RESUME {
& > div {
max-width: 600px;
}
 
& iframe {
height: 850px;
}
}
}
 
@media screen and (max-width: @SCREEN_900) {
#RESUME {
& > div {
width: 90%;
margin: auto;
}
 
& h1 {
padding-top: 135px;
text-align: center;
.font-size(6);
}
 
& iframe {
height: 500px;
}
 
& span:nth-child(3) {
.font-size(2);
}
 
& .options-option-linkedin {
position: relative;
right: unset;
}
}
}