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

89
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 {
@ -39,7 +38,7 @@
margin: 0; margin: 0;
@include gradient-text(var(--gradient-text)); @include gradient-text(var(--gradient-text));
} }
&__description { &__description {
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1.6; line-height: 1.6;
@ -53,48 +52,48 @@
gap: $spacing-lg; gap: $spacing-lg;
flex-wrap: wrap; flex-wrap: wrap;
} }
&__button { &__button {
@extend %hero-button-base; @extend %hero-button-base;
&--primary { &--primary {
background: var(--gradient-primary); background: var(--gradient-primary);
color: var(--color-background); color: var(--color-background);
&:hover { &:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm);
filter: brightness(1.1); filter: brightness(1.1);
} }
} }
&--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);
} }
} }
} }
&__button-icon { &__button-icon {
width: $spacing-md; width: $spacing-md;
height: $spacing-md; height: $spacing-md;
flex-shrink: 0; flex-shrink: 0;
} }
&__stats { &__stats {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: $spacing-xl; gap: $spacing-xl;
margin-top: $spacing-3xl; margin-top: $spacing-3xl;
@include globals.desktop-only { @include globals.desktop-only {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
@ -104,33 +103,49 @@
text-align: center; text-align: center;
padding: $spacing-md; padding: $spacing-md;
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);
}
} }
} }
@ -155,19 +170,19 @@
&__title { &__title {
font-size: 2.5rem; font-size: 2.5rem;
} }
&__description { &__description {
font-size: 1.1rem; font-size: 1.1rem;
} }
&__buttons { &__buttons {
flex-direction: column; flex-direction: column;
gap: $spacing-md; gap: $spacing-md;
} }
&__button { &__button {
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
} }
} }
} }

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