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

feat: update accessibility text and improve color consistency across sections

This commit is contained in:
Sascha 2026-03-30 16:02:18 +02:00
parent 1fbc500c19
commit ea5507b51f
17 changed files with 51 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/config/locales/de/landing-experience.ts
View File

@ -4,6 +4,6 @@ export const landingExperience = {
'Ich habe Unternehmen wie deins geholfen – von kleinen Läden bis hin zu Dienstleistern – ihre Webseiten barrierefrei zu machen.',
'Bei ORWO habe ich einen Fotobuch-Designer entwickelt, der für tausende Kunden funktionierte, auch für Menschen mit Sehbeeinträchtigungen. Ich habe ihn nicht nur gut aussehen lassen, ich habe ihn für alle zum Laufen gebracht.',
'Diese Sorgfalt bringe ich jetzt zu deiner Webseite, egal ob Bäckerei, Therapeut, Handwerker oder Kiosk.',
'Barrierefreiheit geht alle was an.',
'Barrierefreiheit bedeutet Respekt und mehr Reichweite für dich und deine Produkte.',
],
};

4
src/config/locales/en/landing-experience.ts
View File

@ -2,8 +2,8 @@ export const landingExperience = {
title: 'My Experience',
paragraphs: [
"I've helped businesses like yours — from small shops to service providers — make their websites accessible.",
"At ORWO, I built a photo book designer that worked for thousands of customers, even those with visual impairments. I didn't just make it look good, I made it work for everyone.",
"At ORWO, I built a photo book designer that worked for thousands of customers, even those with visual impairments.",
'Now, I bring that same care to your website, whether you are a bakery, a therapist, a craftsman, or a local shop.',
'You do not need to be big. You just need to be accessible.',
'Accessibility means respect and more reach for you and your products.',
],
};

16
src/scss/mixins.scss
View File

@ -11,7 +11,7 @@
cursor: pointer;
transition: all 0.3s ease;
border-radius: $border-radius-sm;
&:focus {
outline: none;
box-shadow: var(--box-shadow-sm);
@ -21,7 +21,7 @@
// Card hover effect mixin
@mixin card-hover {
transition: all 0.3s ease;
&:hover {
transform: translateY(-2px);
box-shadow: var(--box-shadow-lg);
@ -47,14 +47,14 @@
// Aspect ratio mixin
@mixin aspect-ratio($ratio: 1) {
aspect-ratio: $ratio;
@supports not (aspect-ratio: 1) {
&::before {
content: '';
float: left;
padding-top: calc(100% / #{$ratio});
}
&::after {
content: '';
display: table;
@ -65,13 +65,13 @@
// Responsive breakpoint mixins
@mixin mobile-only {
@media (max-width: $mobile-breakpoint) {
@media (max-width: $mobile-breakpoint) {
@content;
}
}
@mixin desktop-only {
@media (min-width: $desktop-breakpoint) {
@media (min-width: $desktop-breakpoint) {
@content;
}
}
@ -96,7 +96,7 @@
font-size: 1.875rem;
font-weight: bold;
margin-bottom: 1rem;
color: var(--color-text);
color: $color-heading;
@include desktop-only {
font-size: 2.25rem;
@ -108,4 +108,4 @@
color: var(--color-text-muted);
max-width: 48rem;
margin: 0 auto;
}
}

7
src/scss/sections/about-section.scss
View File

@ -34,11 +34,6 @@
@include section-title;
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 800;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
&__subtitle {
@ -101,7 +96,7 @@
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
color: var(--about-greeting-color);
color: $color-heading;
}
&__bio-text {

7
src/scss/sections/certifications-section.scss
View File

@ -34,11 +34,6 @@
@include section-title;
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 800;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
&__subtitle {
@ -128,7 +123,7 @@
&__card-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
color: $color-heading;
margin-bottom: 0.5rem;
line-height: 1.4;
}

7
src/scss/sections/contact-section.scss
View File

@ -34,11 +34,6 @@
@include section-title;
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 800;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
&__subtitle {
@ -100,7 +95,7 @@
&__email-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text);
color: $color-heading;
margin-bottom: 0.75rem;
}

7
src/scss/sections/experience-section.scss
View File

@ -1,3 +1,5 @@
@use '../variables' as *;
.experience-section {
padding-block: var(--space-20);
padding-inline: var(--space-4);
@ -38,10 +40,7 @@
font-weight: 800;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: $color-heading;
}
// ── Body ──────────────────────────────────────────────────────

2
src/scss/sections/hero-section.scss
View File

@ -63,7 +63,7 @@
margin: 0;
letter-spacing: -0.03em;
line-height: 1.1;
@include gradient-text(var(--gradient-text));
color: $color-heading;
}
&__description {

8
src/scss/sections/imprint-page.scss
View File

@ -23,7 +23,7 @@
&__title {
font-size: 2.5rem;
font-weight: bold;
color: var(--color-text);
color: globals.$color-heading;
margin-bottom: 0.5rem;
@include globals.desktop-only {
@ -52,7 +52,7 @@
&__section-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text);
color: globals.$color-heading;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--color-primary);
padding-bottom: 0.5rem;
@ -69,7 +69,7 @@
&__subsection-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
color: globals.$color-heading;
margin-bottom: 1rem;
}
@ -120,7 +120,7 @@
&__privacy-subtitle {
font-size: 1.375rem;
font-weight: 600;
color: var(--color-text);
color: globals.$color-heading;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);

7
src/scss/sections/processes-section.scss
View File

@ -1,3 +1,5 @@
@use '../variables' as *;
.processes-section {
padding-block: var(--space-20);
padding-inline: var(--space-4);
@ -38,10 +40,7 @@
font-weight: 800;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: $color-heading;
}
// ── Intro line ────────────────────────────────────────────────

7
src/scss/sections/projects-section.scss
View File

@ -34,11 +34,6 @@
@include section-title;
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 800;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
&__subtitle {
@ -245,7 +240,7 @@
&__card-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
color: $color-heading;
margin-bottom: 0.5rem;
line-height: 1.4;
}

7
src/scss/sections/reasons-section.scss
View File

@ -1,3 +1,5 @@
@use '../variables' as *;
.reasons-section {
padding-block: var(--space-20);
padding-inline: var(--space-4);
@ -38,10 +40,7 @@
font-weight: 800;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: $color-heading;
}
// ── Intro quote ───────────────────────────────────────────────

7
src/scss/sections/references-section.scss
View File

@ -1,3 +1,5 @@
@use '../variables' as *;
.references-section {
padding-block: var(--space-20);
padding-inline: var(--space-4);
@ -38,10 +40,7 @@
font-weight: 800;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: $color-heading;
}
// ── List ──────────────────────────────────────────────────────

32
src/scss/sections/services-section.scss
View File

@ -49,11 +49,6 @@
@include section-title;
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 800;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
&__subtitle {
@ -348,28 +343,13 @@
font-size: 1.25rem;
}
&--primary {
color: var(--service-title-primary);
}
&--secondary {
color: var(--service-title-secondary);
}
&--tertiary {
color: var(--service-title-tertiary);
}
&--quaternary {
color: var(--service-title-quaternary);
}
&--quinary {
color: var(--service-title-quinary);
}
&--primary,
&--secondary,
&--tertiary,
&--quaternary,
&--quinary,
&--senary {
color: var(--service-title-senary);
color: $color-heading;
}
}

7
src/scss/sections/skills-section.scss
View File

@ -62,11 +62,6 @@
@include section-title;
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 800;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
&__subtitle {
@ -239,7 +234,7 @@
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--skills-category-title-color);
color: $color-heading;
text-align: center;
position: relative;
z-index: 2;

7
src/scss/sections/winnings-section.scss
View File

@ -1,3 +1,5 @@
@use '../variables' as *;
.winnings-section {
padding-block: var(--space-20);
padding-inline: var(--space-4);
@ -38,10 +40,7 @@
font-weight: 800;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: $color-heading;
}
// ── Intro line ────────────────────────────────────────────────

13
src/scss/variables.scss
View File

@ -5,6 +5,7 @@ $desktop-breakpoint: 769px;
// Color variables
$color-primary: #9333ea;
$color-secondary: #2563eb;
$color-heading: #0f4d46;
// Shadow variables
$shadow-sm: 0 4px 12px;
@ -48,13 +49,17 @@ $transition-fast: all 0.2s ease;
$transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
// Common shadow variables
$shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
$shadow-card:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
$shadow-card-hover:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-card-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
$shadow-card-lg:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-button: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
$shadow-button:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
// Gradient variables