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;
border-radius: $border-radius-sm;
gap: $spacing-xs;
border: 2px solid transparent;
box-sizing: border-box;
&:focus {
@ -71,11 +70,11 @@
&--secondary {
background: transparent;
color: var(--color-text);
border-color: $purple-primary;
padding: calc(#{$spacing-sm} - 1px) $spacing-xl;
border: 2px solid $color-primary;
padding: calc(#{$spacing-sm} - 2px) $spacing-xl;
&:hover {
background: $purple-primary;
background: $color-primary;
color: var(--color-background);
transform: translateY(-1px);
box-shadow: var(--box-shadow-sm);
@ -106,31 +105,47 @@
border-radius: $border-radius-md;
&--1 {
background: var(--stat-experience-bg);
background: var(--stat-primary-bg);
.hero-section__stat-value { color: var(--stat-experience-value); }
.hero-section__stat-label { color: var(--stat-experience-label); }
.hero-section__stat-value {
color: var(--stat-primary-value);
}
.hero-section__stat-label {
color: var(--stat-primary-label);
}
}
&--2 {
background: var(--stat-design-bg);
background: var(--stat-secondary-bg);
.hero-section__stat-value { color: var(--stat-design-value); }
.hero-section__stat-label { color: var(--stat-design-label); }
.hero-section__stat-value {
color: var(--stat-secondary-value);
}
.hero-section__stat-label {
color: var(--stat-secondary-label);
}
}
&--3 {
background: var(--stat-technologies-bg);
background: var(--stat-tertiary-bg);
.hero-section__stat-value { color: var(--stat-technologies-value); }
.hero-section__stat-label { color: var(--stat-technologies-label); }
.hero-section__stat-value {
color: var(--stat-tertiary-value);
}
.hero-section__stat-label {
color: var(--stat-tertiary-label);
}
}
&--4 {
background: var(--stat-motivation-bg);
background: var(--stat-quaternary-bg);
.hero-section__stat-value { color: var(--stat-motivation-value); }
.hero-section__stat-label { color: var(--stat-motivation-label); }
.hero-section__stat-value {
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;
// Color variables
$purple-primary: #9333ea;
$blue-primary: #2563eb;
$color-primary: #9333ea;
$color-secondary: #2563eb;
// Shadow variables
$shadow-sm: 0 4px 12px;
@ -26,9 +26,28 @@ $spacing-2xl: 3rem;
$spacing-3xl: 4rem;
// Gradient variables
$gradient-primary: linear-gradient(90deg, $blue-primary 0%, $purple-primary 100%);
$gradient-text: linear-gradient(to right, $blue-primary, $purple-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%);
$gradient-primary: linear-gradient(
90deg,
$color-secondary 0%,
$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