saschabach
/
portfolio-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring

This commit is contained in:
Sascha 2025-08-18 14:44:59 +02:00
parent 63b2ab32df
commit 3fbe565c17
2 changed files with 77 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/scss/hero-section.scss
View File

@ -10,7 +10,6 @@
line-height: 1.5; line-height: 1.5;
border-radius: $border-radius-sm; border-radius: $border-radius-sm;
gap: $spacing-xs; gap: $spacing-xs;
border: 2px solid transparent;
box-sizing: border-box; box-sizing: border-box;
&:focus { &:focus {
@ -71,11 +70,11 @@
&--secondary { &--secondary {
background: transparent; background: transparent;
color: var(--color-text); color: var(--color-text);
border-color: $purple-primary; border: 2px solid $color-primary;
padding: calc(#{$spacing-sm} - 1px) $spacing-xl; padding: calc(#{$spacing-sm} - 2px) $spacing-xl;
&:hover { &:hover {
background: $purple-primary; background: $color-primary;
color: var(--color-background); color: var(--color-background);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm);
@ -106,31 +105,47 @@
border-radius: $border-radius-md; border-radius: $border-radius-md;
&--1 { &--1 {
background: var(--stat-experience-bg); background: var(--stat-primary-bg);
.hero-section__stat-value { color: var(--stat-experience-value); } .hero-section__stat-value {
.hero-section__stat-label { color: var(--stat-experience-label); } color: var(--stat-primary-value);
}
.hero-section__stat-label {
color: var(--stat-primary-label);
}
} }
&--2 { &--2 {
background: var(--stat-design-bg); background: var(--stat-secondary-bg);
.hero-section__stat-value { color: var(--stat-design-value); } .hero-section__stat-value {
.hero-section__stat-label { color: var(--stat-design-label); } color: var(--stat-secondary-value);
}
.hero-section__stat-label {
color: var(--stat-secondary-label);
}
} }
&--3 { &--3 {
background: var(--stat-technologies-bg); background: var(--stat-tertiary-bg);
.hero-section__stat-value { color: var(--stat-technologies-value); } .hero-section__stat-value {
.hero-section__stat-label { color: var(--stat-technologies-label); } color: var(--stat-tertiary-value);
}
.hero-section__stat-label {
color: var(--stat-tertiary-label);
}
} }
&--4 { &--4 {
background: var(--stat-motivation-bg); background: var(--stat-quaternary-bg);
.hero-section__stat-value { color: var(--stat-motivation-value); } .hero-section__stat-value {
.hero-section__stat-label { color: var(--stat-motivation-label); } color: var(--stat-quaternary-value);
}
.hero-section__stat-label {
color: var(--stat-quaternary-label);
}
} }
} }

31
src/scss/variables.scss
View File

@ -3,8 +3,8 @@ $mobile-breakpoint: 768px;
$desktop-breakpoint: 769px; $desktop-breakpoint: 769px;
// Color variables // Color variables
$purple-primary: #9333ea; $color-primary: #9333ea;
$blue-primary: #2563eb; $color-secondary: #2563eb;
// Shadow variables // Shadow variables
$shadow-sm: 0 4px 12px; $shadow-sm: 0 4px 12px;
@ -26,9 +26,28 @@ $spacing-2xl: 3rem;
$spacing-3xl: 4rem; $spacing-3xl: 4rem;
// Gradient variables // Gradient variables
$gradient-primary: linear-gradient(90deg, $blue-primary 0%, $purple-primary 100%); $gradient-primary: linear-gradient(
$gradient-text: linear-gradient(to right, $blue-primary, $purple-primary, #0d9488); 90deg,
$gradient-hero-light: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f3e8ff 100%); $color-secondary 0%,
$gradient-hero-dark: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(55, 48, 163, 0.3) 50%, rgba(88, 28, 135, 0.3) 100%); $color-primary 100%
);
$gradient-text: linear-gradient(
to right,
$color-secondary,
$color-primary,
#0d9488
);
$gradient-hero-light: linear-gradient(
135deg,
#dbeafe 0%,
#e0e7ff 50%,
#f3e8ff 100%
);
$gradient-hero-dark: linear-gradient(
135deg,
rgba(30, 58, 138, 0.3) 0%,
rgba(55, 48, 163, 0.3) 50%,
rgba(88, 28, 135, 0.3) 100%
);
// Add any other global variables here // Add any other global variables here