Giovanni-Josserand/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add of variable for main colors

Browse Source
This commit is contained in:
Giovanni-Josserand 2025-09-03 21:39:44 +02:00
parent b0b104b500
commit 852d616678
8 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Footer/Footer.css
View File

@ -2,7 +2,7 @@
padding: 2rem 0; padding: 2rem 0;
margin-top: 4rem; margin-top: 4rem;
border-top: 1px solid #333; border-top: 1px solid #333;
color: #B0B0B0; color: var(--text-color);
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -22,7 +22,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #B0B0B0; color: var(--text-color);
transition: color 0.3s ease, transform 0.3s ease; transition: color 0.3s ease, transform 0.3s ease;
svg{ svg{
width: 24px; width: 24px;
@ -32,6 +32,6 @@
} }
.footer-links a:hover { .footer-links a:hover {
color: #EAEAEA; color: var(--title-color);
transform: translateY(-3px); transform: translateY(-3px);
} }

10
src/components/Home/Home.css
View File

@ -16,19 +16,19 @@
#home-section h2 { #home-section h2 {
font-size: 1.8rem; font-size: 1.8rem;
color: #EAEAEA; color: var(--title-color);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
#home-section p { #home-section p {
margin-bottom: 2rem; margin-bottom: 2rem;
color: #EAEAEA; color: var(--title-color);
max-width: 40%; max-width: 40%;
} }
.highlight { .highlight {
color: #D95F46; color: var(--important-color);
} }
.btn { .btn {
@ -37,8 +37,8 @@
border-radius: 5px; border-radius: 5px;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
background-color: #D95F46; background-color: var(--important-color);
color: #fff; color: white;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
margin-bottom: 200px; margin-bottom: 200px;
} }

6
src/components/NavBar/NavBar.css
View File

@ -25,7 +25,7 @@
text-decoration: none; text-decoration: none;
padding: 0.3rem 0.8rem; padding: 0.3rem 0.8rem;
border-radius: 20px; border-radius: 20px;
color: #B0B0B0; color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
cursor: pointer; cursor: pointer;
border: none; border: none;
@ -34,10 +34,10 @@
} }
.nav-link:hover { .nav-link:hover {
color: #D95F46; color: var(--important-color);
} }
.nav-link.active { .nav-link.active {
background-color: rgba(217, 95, 70, 0.3); background-color: rgba(217, 95, 70, 0.3);
color: #D95F46; color: var(--important-color);
} }

8
src/components/Projects/Projects.css
View File

@ -12,8 +12,8 @@
.projects-link { .projects-link {
display: inline-block; display: inline-block;
color: #B0B0B0; color: var(--text-color);
border: 1px solid #B0B0B0; border: 1px solid var(--text-color);
background-color: transparent; background-color: transparent;
padding: 12px 28px; padding: 12px 28px;
border-radius: 8px; border-radius: 8px;
@ -23,7 +23,7 @@
} }
.projects-link:hover { .projects-link:hover {
background-color: #B0B0B0; background-color: var(--text-color);
color: #1E1E1E; color: #1E1E1E;
transform: translateY(-3px); transform: translateY(-3px);
cursor: pointer; cursor: pointer;
@ -50,7 +50,7 @@
.projects-section-subtitle { .projects-section-subtitle {
font-size: 1.2rem; font-size: 1.2rem;
color: #B0B0B0; color: var(--title-color);
} }
.projects-back-link { .projects-back-link {

10
src/components/SingleExperience/SingleExperience.css
View File

@ -31,7 +31,7 @@
} }
.experience-company { .experience-company {
color: #D95F46; color: var(--important-color);
font-size: 1.2rem; font-size: 1.2rem;
margin: 0; margin: 0;
} }
@ -39,14 +39,14 @@
.experience-role { .experience-role {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
color: #EAEAEA; color: var(--title-color);
margin: 0; margin: 0;
} }
.experience-location, .experience-location,
.experience-duration { .experience-duration {
font-size: 0.95rem; font-size: 0.95rem;
color: #B0B0B0; color: var(--text-color);
margin: 0.25rem 0 0; margin: 0.25rem 0 0;
white-space: nowrap; white-space: nowrap;
} }
@ -61,7 +61,7 @@
position: relative; position: relative;
padding-left: 1.5rem; padding-left: 1.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: #B0B0B0; color: var(--text-color);
text-align: left; text-align: left;
} }
@ -70,7 +70,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
color: #D95F46; color: var(--important-color);
font-weight: bold; font-weight: bold;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1; line-height: 1;

16
src/components/SingleProject/SingleProject.css
View File

@ -42,7 +42,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: 2rem 2rem 2rem 0rem; padding: 2rem 2rem 2rem 0;
align-items: flex-start; align-items: flex-start;
height: 100%; height: 100%;
} }
@ -96,7 +96,7 @@
.single-project-title { .single-project-title {
font-size: 2rem; font-size: 2rem;
color: #EAEAEA; color: var(--title-color);
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
display: flex; display: flex;
@ -105,7 +105,7 @@
} }
.single-project-description { .single-project-description {
color: #B0B0B0; color: var(--text-color);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
text-align: justify; text-align: justify;
} }
@ -120,7 +120,7 @@
} }
.single-project-link { .single-project-link {
color: #B0B0B0; color: var(--text-color);
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
margin-bottom : 0; margin-bottom : 0;
@ -128,7 +128,7 @@
.single-project-link:hover { .single-project-link:hover {
cursor: pointer; cursor: pointer;
color: #EAEAEA; color: var(--title-color);
} }
.arrow { .arrow {
@ -137,7 +137,7 @@
transform: translateY(-50%); transform: translateY(-50%);
background: none; background: none;
border: none; border: none;
color: #EAEAEA; color: var(--title-color);
font-size: 35px; font-size: 35px;
display: none; display: none;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -145,7 +145,7 @@
} }
.arrow:hover { .arrow:hover {
color: #D95F46; color: var(--important-color);
opacity: 0.8; opacity: 0.8;
transform: translateY(-50%) scale(1.2); transform: translateY(-50%) scale(1.2);
cursor: pointer; cursor: pointer;
@ -165,7 +165,7 @@
.single-project-right-top-date{ .single-project-right-top-date{
color : #B0B0B0; color : var(--text-color);
margin : 0; margin : 0;
margin-left : 2em; margin-left : 2em;
font-weight: bold; font-weight: bold;

2
src/components/SingleProject/SingleProject.jsx
View File

@ -58,7 +58,7 @@ function SingleProject({ image, title, description, skills, id, nbImage, school,
<h3 className="single-project-title"> <h3 className="single-project-title">
{title} {title}
{school ? ( {school ? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="#B0B0B0" width="1.25em" height="1.25em"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="#D95F46" width="1.25em" height="1.25em">
<path d="M80 259.8L289.2 345.9C299 349.9 309.4 352 320 352C330.6 352 341 349.9 350.8 345.9L593.2 246.1C602.2 242.4 608 233.7 608 224C608 214.3 602.2 205.6 593.2 201.9L350.8 102.1C341 98.1 330.6 96 320 96C309.4 96 299 98.1 289.2 102.1L46.8 201.9C37.8 205.6 32 214.3 32 224L32 520C32 533.3 42.7 544 56 544C69.3 544 80 533.3 80 520L80 259.8zM128 331.5L128 448C128 501 214 544 320 544C426 544 512 501 512 448L512 331.4L369.1 390.3C353.5 396.7 336.9 400 320 400C303.1 400 286.5 396.7 270.9 390.3L128 331.4z"/> <path d="M80 259.8L289.2 345.9C299 349.9 309.4 352 320 352C330.6 352 341 349.9 350.8 345.9L593.2 246.1C602.2 242.4 608 233.7 608 224C608 214.3 602.2 205.6 593.2 201.9L350.8 102.1C341 98.1 330.6 96 320 96C309.4 96 299 98.1 289.2 102.1L46.8 201.9C37.8 205.6 32 214.3 32 224L32 520C32 533.3 42.7 544 56 544C69.3 544 80 533.3 80 520L80 259.8zM128 331.5L128 448C128 501 214 544 320 544C426 544 512 501 512 448L512 331.4L369.1 390.3C353.5 396.7 336.9 400 320 400C303.1 400 286.5 396.7 270.9 390.3L128 331.4z"/>
</svg> </svg>
) : null} ) : null}

10
src/index.css
View File

@ -2,6 +2,9 @@
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
font-weight: 400; font-weight: 400;
background-color: #0D0D0D; background-color: #0D0D0D;
--title-color: #EAEAEA;
--text-color: #B0B0B0;
--important-color: #D95F46;
} }
html{ html{
@ -25,9 +28,8 @@ h1{
} }
.section-title { .section-title {
font-family: Arial;
font-size: 2.5rem; font-size: 2.5rem;
color: #f0f0f0; color: var(--title-color);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.15rem; letter-spacing: 0.15rem;
text-align: center; text-align: center;
@ -39,7 +41,7 @@ h1{
display: block; display: block;
width: 60px; width: 60px;
height: 3px; height: 3px;
background-color: #D95F46; background-color: var(--important-color);
margin: 1rem auto 0; margin: 1rem auto 0;
border-radius: 2px; border-radius: 2px;
} }
@ -47,5 +49,5 @@ h1{
h2{ h2{
color: #f0f0f0; color : var(--title-color);
} }