html {
scroll-behavior : smooth;
}
body {
padding : 0;
margin : 0;
min-height : 100vh;
font-family : Verdana, Geneva, Tahoma, sans-serif;
color : #ffffff;
background : black;
background-image : url("fond.png");
background-size : cover;
display : flex;
flex-direction : column;
}
.main {
flex : 1;
}
h1, h2, h3, h4 {
font-family : 'Montserrat', sans-serif;
font-weight : 700;
}
a {
color : #ffffff;
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
hr.divider {
border : 0;
height : 1px;
background : #555;
margin : 1rem 0;
}
.navbar {
position : fixed;
top : 0;
width : 100%;
display : flex;
align-items : center;
justify-content : center;
padding : 0.5rem 2rem;
background : rgb(0, 0, 0, 0.7);
z-index : 10;
height : 80px;
box-shadow : 0 2px 5px rgb(0, 0, 0, 0.5);
}
.logo-container {
position : absolute;
left : 1rem;
display : flex;
align-items : center;
gap : 1rem;
}
.navbar-logo {
width : 50px;
height : 50px;
border-radius : 50%;
object-fit : cover;
border : white solid 2px;
}
.logo {
font-size : 1.5rem;
font-weight : bold;
color : white;
}
.navbar nav {
display : flex;
gap : 2rem;
}
.navbar nav a {
position : relative;
font-weight : 500;
font-size : 1rem;
color : white;
text-decoration : none;
padding : 0.5rem 1rem;
transition : color 0.3s ease;
}
.navbar nav a:hover {
color : white;
}
.navbar nav a::before {
content : "";
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color : rgb(255, 255, 255, 0.2);
border-radius : 5px;
transform : scale(0);
transition : transform 0.3s ease;
z-index : -1;
}
.navbar nav a:hover::before {
transform : scale(1);
}
.about-container {
display : flex;
align-items : center;
gap : 3rem;
}
.image-container {
flex : 0 0 auto;
}
.profile-picture {
width : 250px;
height : 250px;
border-radius : 50%;
border : white solid 5px;
object-fit : cover;
}
.about-text {
flex : 1;
}
.about-text h1 {
margin-bottom : 1rem;
font-size : 2.5rem;
}
.about-text p {
text-align : center;
line-height : 1.6;
}
main {
padding-top : 5rem;
}
.about {
max-width : 800px;
margin : 0 auto;
padding : 2rem;
}
.about h1 {
font-size : 3rem;
text-align : center;
margin-bottom : 2rem;
}
.education {
text-align : center;
padding : 3rem 1rem;
display : flex;
flex-wrap : wrap;
gap : 2rem;
justify-content : space-between;
align-items : flex-start;
}
.education h1 {
font-size : 2.5rem;
margin-bottom : 1rem;
color : white;
}
.education .divider {
width : 100%;
height : 5px;
background-color : white;
margin : 1rem 0 2rem 0;
}
.education-item {
flex : 1 1 calc(50% - 1rem);
text-align : left;
max-width : 800px;
margin-left : auto;
margin-right : auto;
color : white;
}
.education-item p {
font-size : 1rem;
line-height : 1.6;
}
.education-item h3 {
font-size : 1.5rem;
font-weight : bold;
color : white;
display : inline-block;
transition : transform 0.3s ease, color 0.3s ease;
}
.education-item h3:hover {
transform : scale(1.1);
color : grey;
}
.education-item h3 a {
color : inherit;
text-decoration : none;
transition : color 0.3s ease;
}
.education-item h3 a:hover {
color : #575353;
}
.subtitle-and-date {
display : flex;
justify-content : space-between;
align-items : center;
font-size : 1rem;
}
.subtitle {
font-weight : 500;
color : #cccccc;
}
.date {
font-size : 0.9rem;
font-weight : 300;
color : #999;
}
.skills-container {
display : flex;
flex-wrap : wrap;
gap : 2rem;
}
.skills-column {
flex : 1 1 calc(50% - 2rem);
min-width : 200px;
margin-bottom : 1rem;
}
.skills-column h4 {
margin-bottom : 0.5rem;
}
.skill-tags {
display : flex;
flex-wrap : wrap;
gap : 1rem;
}
.skill-tags span {
padding : 0.5rem 1rem;
background : #444;
border-radius : 20px;
font-size : 0.9rem;
font-weight : 500;
transition : transform 0.3s ease, background-color 0.3s ease;
cursor : pointer;
}
.skill-tags span:hover {
transform : scale(1.05);
background-color : #666;
}
.transparent-footer {
background-color : rgb(0, 0, 0, 0.8);
padding : 1.5rem 0;
color : white;
text-align : center;
font-size : 0.9rem;
}
.transparent-footer a {
color : white;
transition : color 0.3s ease;
}
.transparent-footer a:hover {
color : gray;
}
.footer-line {
height : 1px;
background-color : white;
width : 100%;
margin : 0 auto 10px auto;
}
.transparent-footer p {
margin : 0;
}
.work-experience {
max-width : 800px;
margin : 0 auto;
padding : 2rem;
}
.work-item {
margin-bottom : 2rem;
}
.work-item h3 {
font-size : 1.5rem;
font-weight : bold;
color : white;
transition : transform 0.3s ease, color 0.3s ease;
}
.work-item h3:hover {
transform : scale(1.1);
color : grey;
}
.work-item h3 a {
color : inherit;
text-decoration : none;
}
.work-item h3 a:hover {
color : #d6120c;
}
.work-item .date {
font-size : 0.9rem;
color : #999;
font-weight : 300;
}
.work-item p {
line-height : 1.6;
color : #cccccc;
}
@media (max-width: 600px) {
.navbar {
height : 60px;
}
.about-container {
flex-direction : column;
align-items : center;
}
.education-item, .skills-column {
flex : 1 1 100%;
}
}
.projects {
max-width : 1200px;
margin : 0 auto;
padding : 2rem;
display : flex;
flex-direction : column;
align-items : center;
}
.projects h1 {
font-size : 3rem;
text-align : center;
margin-bottom : 2rem;
}
.project-cards {
display : grid;
grid-template-columns : repeat(3,1fr);
gap : 2rem;
justify-content : center;
}
.project-card {
background : rgb(255, 255, 255, 0.1);
border-radius : 10px;
overflow : hidden;
transition : transform 0.3s ease, box-shadow 0.3s ease;
display : flex;
flex-direction : column;
}
.project-card:hover {
transform : scale(1.05);
box-shadow : 0 10px 15px rgb(0, 0, 0, 0.3);
}
.project-card img {
width : 100%;
height : 200px;
object-fit : cover;
}
.project-card .card-content {
padding : 1rem;
}
.project-card h3 {
font-size : 1.5rem;
margin-bottom : 0.5rem;
}
.project-card p {
font-size : 1rem;
color : #ccc;
line-height : 1.5;
}
@media (max-width: 768px) {
.project-cards {
grid-template-columns : repeat(2,1fr);
}
}
@media (max-width: 480px) {
.project-cards {
grid-template-columns : 1fr;
}
}
.carousel-container {
position : relative;
width : 100%;
max-width : 1200px;
margin : 2rem auto;
overflow : hidden;
border-radius : 10px;
}
.carousel {
display : flex;
transition : transform 0.5s ease;
}
.carousel img {
min-width : 100%;
height : 400px;
object-fit : cover;
}
.carousel-buttons {
position : absolute;
top : 50%;
width : 100%;
display : flex;
justify-content : space-between;
transform : translateY(-50%);
}
.carousel-buttons button {
background-color : rgb(0, 0, 0, 0.5);
color : white;
border : none;
padding : 1rem;
cursor : pointer;
transition : background-color 0.3s ease;
}
.carousel-buttons button:hover {
background-color : rgb(0, 0, 0, 0.8);
}
.carousel-buttons .prev {
left : 0;
}
.carousel-buttons .next {
right : 0;
}
@media (max-width: 768px) {
.project-card {
width : 100%;
}
.carousel img {
height : 300px;
}
}
.interactive-image {
display : block;
max-width : 100%;
border : #fff solid 5px;
border-radius : 10px;
box-shadow : 0 4px 10px rgb(0, 0, 0, 0.3);
transition : transform 0.3s ease, box-shadow 0.3s ease;
}
.interactive-image:hover {
transform : scale(1.03);
box-shadow : 0 8px 20px rgb(0, 0, 0, 0.5);
}
map area {
outline : none;
}
map area:hover {
cursor : pointer;
}
.interactive-image:hover + .map-hint::before {
content : 'Survolez une zone pour plus de détails';
position : absolute;
top : 5px;
left : 10px;
background : rgb(0, 0, 0, 0.7);
color : #fff;
padding : 5px 10px;
border-radius : 5px;
font-size : 0.9rem;
}
.developer-job-section {
padding : 5rem 2rem;
background-color : rgb(0, 0, 0, 0.8);
color : white;
text-align : center;
border-radius : 10px;
max-width : 1200px;
margin : 0 auto;
}
.developer-job-section h1 {
font-size : 2.8rem;
margin-bottom : 1rem;
font-family : 'Montserrat', sans-serif;
animation : fadeIn 1s ease-out;
}
.developer-job-section p {
font-size : 1.2rem;
line-height : 1.8;
margin-bottom : 2rem;
animation : fadeIn 1.5s ease-out;
}
.developer-job-section .interactive-image {
max-width : 100%;
border-radius : 10px;
box-shadow : 0 4px 8px rgb(0, 0, 0, 0.1);
animation : zoomIn 1s ease-out;
}
@keyframes fadeIn {
0% {
opacity : 0;
transform : translateY(20px);
}
100% {
opacity : 1;
transform : translateY(0);
}
}
@keyframes zoomIn {
0% {
transform : scale(0.8);
opacity : 0;
}
100% {
transform : scale(1);
opacity : 1;
}
}
.developer-job-section img {
max-width : 80%;
height : auto;
border-radius : 10px;
margin-top : 20px;
transition : transform 0.3s ease;
}
.developer-job-section img:hover {
transform : scale(1.05);
cursor : pointer;
}
.developer-job-section area {
cursor : pointer;
}
@media (max-width: 768px) {
.developer-job-section h1 {
font-size : 2.2rem;
}
.skills-container {
flex-direction : column;
align-items : center;
}
.skills-column {
width : 100%;
margin-bottom : 1rem;
}
}