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

refactoring

This commit is contained in:
Sascha Bach 2025-08-14 16:12:57 +02:00
parent 15c1ec5839
commit f51947f79a
5 changed files with 157 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/sections/AboutSection.tsx
View File

@ -20,29 +20,29 @@ export default function AboutSection({
bio = "As a dedicated frontend developer, I specialize in creating modern, responsive web applications using both Angular and React frameworks with TypeScript. I'm passionate about writing clean, maintainable code and ensuring exceptional user experiences across all devices and browsers. I have extensive experience with Angular and am actively developing my React expertise, while maintaining proficiency in SCSS, testing with Cypress, and working with XSLT templates.", bio = "As a dedicated frontend developer, I specialize in creating modern, responsive web applications using both Angular and React frameworks with TypeScript. I'm passionate about writing clean, maintainable code and ensuring exceptional user experiences across all devices and browsers. I have extensive experience with Angular and am actively developing my React expertise, while maintaining proficiency in SCSS, testing with Cypress, and working with XSLT templates.",
profileImage = saschaImage, profileImage = saschaImage,
skillBadges = [ skillBadges = [
{ text: "Angular & React Developer", colorClass: "blue" }, { text: "Angular & React Developer", colorClass: "primary" },
{ text: "Responsive Design Expert", colorClass: "green" }, { text: "Responsive Design Expert", colorClass: "secondary" },
{ text: "Cross-Browser Compatible", colorClass: "purple" }, { text: "Cross-Browser Compatible", colorClass: "tertiary" },
{ text: "Continuous Learner", colorClass: "orange" } { text: "Continuous Learner", colorClass: "quaternary" }
], ],
featureCards = [ featureCards = [
{ {
icon: Code, icon: Code,
title: "Frontend Development", title: "Frontend Development",
description: "Building modern web applications with Angular and React frameworks, leveraging TypeScript and JavaScript for robust, scalable solutions.", description: "Building modern web applications with Angular and React frameworks, leveraging TypeScript and JavaScript for robust, scalable solutions.",
colorClass: "blue" colorClass: "primary"
}, },
{ {
icon: Palette, icon: Palette,
title: "Responsive Design", title: "Responsive Design",
description: "Creating pixel-perfect, responsive interfaces that work seamlessly across all devices and screen sizes.", description: "Creating pixel-perfect, responsive interfaces that work seamlessly across all devices and screen sizes.",
colorClass: "purple" colorClass: "secondary"
}, },
{ {
icon: ShieldCheck, icon: ShieldCheck,
title: "Cross-Browser Compatibility", title: "Cross-Browser Compatibility",
description: "Ensuring consistent user experiences across all major browsers with thorough testing and optimization.", description: "Ensuring consistent user experiences across all major browsers with thorough testing and optimization.",
colorClass: "teal" colorClass: "tertiary"
} }
] ]
}: AboutSectionProps) { }: AboutSectionProps) {

4
src/data/FeatureCard.ts
View File

@ -1,8 +1,8 @@
import { LucideIcon } from 'lucide-react'; import type { LucideIcon } from 'lucide-react';
export interface FeatureCard { export interface FeatureCard {
icon: LucideIcon; icon: LucideIcon;
title: string; title: string;
description: string; description: string;
colorClass: 'blue' | 'purple' | 'teal'; colorClass: 'primary' | 'secondary' | 'tertiary';
} }

2
src/data/SkillBadge.ts
View File

@ -1,4 +1,4 @@
export interface SkillBadge { export interface SkillBadge {
text: string; text: string;
colorClass: 'blue' | 'green' | 'purple' | 'orange'; colorClass: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
} }

74
src/scss/about-section.scss
View File

@ -60,7 +60,7 @@
} }
&__image { &__image {
width: 17rem; width: 16rem;
height: 21rem; height: 21rem;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
@ -129,24 +129,24 @@
box-shadow: 0 4px 12px var(--box-shadow-hover); box-shadow: 0 4px 12px var(--box-shadow-hover);
} }
&--blue { &--primary {
background: var(--skill-badge-blue-bg); background: var(--skill-badge-primary-bg);
color: var(--skill-badge-blue-text); color: var(--skill-badge-primary-text);
} }
&--green { &--secondary {
background: var(--skill-badge-green-bg); background: var(--skill-badge-secondary-bg);
color: var(--skill-badge-green-text); color: var(--skill-badge-secondary-text);
} }
&--purple { &--tertiary {
background: var(--skill-badge-purple-bg); background: var(--skill-badge-tertiary-bg);
color: var(--skill-badge-purple-text); color: var(--skill-badge-tertiary-text);
} }
&--orange { &--quaternary {
background: var(--skill-badge-orange-bg); background: var(--skill-badge-quaternary-bg);
color: var(--skill-badge-orange-text); color: var(--skill-badge-quaternary-text);
} }
} }
@ -173,16 +173,16 @@
transform: translateY(-2px); transform: translateY(-2px);
} }
&--blue { &--primary {
background: var(--feature-card-blue-bg); background: var(--feature-card-primary-bg);
} }
&--purple { &--secondary {
background: var(--feature-card-purple-bg); background: var(--feature-card-secondary-bg);
} }
&--teal { &--tertiary {
background: var(--feature-card-teal-bg); background: var(--feature-card-tertiary-bg);
} }
} }
@ -195,16 +195,16 @@
height: 3rem; height: 3rem;
margin: 0 auto 1rem auto; margin: 0 auto 1rem auto;
&--blue { &--primary {
color: var(--feature-icon-blue); color: var(--feature-icon-primary);
} }
&--purple { &--secondary {
color: var(--feature-icon-purple); color: var(--feature-icon-secondary);
} }
&--teal { &--tertiary {
color: var(--feature-icon-teal); color: var(--feature-icon-tertiary);
} }
} }
@ -213,16 +213,16 @@
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
&--blue { &--primary {
color: var(--feature-title-blue); color: var(--feature-title-primary);
} }
&--purple { &--secondary {
color: var(--feature-title-purple); color: var(--feature-title-secondary);
} }
&--teal { &--tertiary {
color: var(--feature-title-teal); color: var(--feature-title-tertiary);
} }
} }
@ -233,16 +233,16 @@
&__feature-description { &__feature-description {
margin: 0; margin: 0;
&--blue { &--primary {
color: var(--feature-description-blue); color: var(--feature-description-primary);
} }
&--purple { &--secondary {
color: var(--feature-description-purple); color: var(--feature-description-secondary);
} }
&--teal { &--tertiary {
color: var(--feature-description-teal); color: var(--feature-description-tertiary);
} }
} }
} }

215
src/scss/themes.scss
View File

@ -13,22 +13,22 @@ $light-theme: (
gradient-primary: $gradient-primary, gradient-primary: $gradient-primary,
gradient-text: $gradient-text, gradient-text: $gradient-text,
// Stat colors for light theme // Stat colors using visual hierarchy
stat-experience-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), stat-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe),
stat-experience-value: #2563eb, stat-primary-value: #2563eb,
stat-experience-label: #1d4ed8, stat-primary-label: #1d4ed8,
stat-design-bg: linear-gradient(135deg, #dcfce7, #bbf7d0), stat-secondary-bg: linear-gradient(135deg, #dcfce7, #bbf7d0),
stat-design-value: #16a34a, stat-secondary-value: #16a34a,
stat-design-label: #15803d, stat-secondary-label: #15803d,
stat-technologies-bg: linear-gradient(135deg, #ccfbf1, #99f6e4), stat-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4),
stat-technologies-value: #0d9488, stat-tertiary-value: #0d9488,
stat-technologies-label: #0f766e, stat-tertiary-label: #0f766e,
stat-motivation-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe), stat-quaternary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe),
stat-motivation-value: #9333ea, stat-quaternary-value: #9333ea,
stat-motivation-label: #7c3aed, stat-quaternary-label: #7c3aed,
// About section colors // About section colors
about-background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdfa 100%), about-background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdfa 100%),
@ -36,34 +36,34 @@ $light-theme: (
about-greeting-color: #047857, about-greeting-color: #047857,
gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)), gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)),
// Skill badge colors // Skill badge colors using visual hierarchy
skill-badge-blue-bg: #dbeafe, skill-badge-primary-bg: #dbeafe,
skill-badge-blue-text: #1e40af, skill-badge-primary-text: #1e40af,
skill-badge-green-bg: #dcfce7, skill-badge-secondary-bg: #dcfce7,
skill-badge-green-text: #166534, skill-badge-secondary-text: #166534,
skill-badge-purple-bg: #e9d5ff, skill-badge-tertiary-bg: #e9d5ff,
skill-badge-purple-text: #7c2d12, skill-badge-tertiary-text: #7c2d12,
skill-badge-orange-bg: #fed7aa, skill-badge-quaternary-bg: #fed7aa,
skill-badge-orange-text: #9a3412, skill-badge-quaternary-text: #9a3412,
// Feature card colors // Feature card colors using visual hierarchy
feature-card-blue-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), feature-card-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe),
feature-card-purple-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe), feature-card-secondary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe),
feature-card-teal-bg: linear-gradient(135deg, #ccfbf1, #99f6e4), feature-card-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4),
feature-icon-blue: #2563eb, feature-icon-primary: #2563eb,
feature-icon-purple: #9333ea, feature-icon-secondary: #9333ea,
feature-icon-teal: #0d9488, feature-icon-tertiary: #0d9488,
feature-title-blue: #1e40af, feature-title-primary: #1e40af,
feature-title-purple: #7c3aed, feature-title-secondary: #7c3aed,
feature-title-teal: #0f766e, feature-title-tertiary: #0f766e,
feature-description-blue: #1d4ed8, feature-description-primary: #1d4ed8,
feature-description-purple: #6d28d9, feature-description-secondary: #6d28d9,
feature-description-teal: #115e59, feature-description-tertiary: #115e59,
// Shadow variables using CSS custom properties // Shadow variables
box-shadow-sm: #{$shadow-sm}, box-shadow-sm: #{$shadow-sm},
box-shadow-md: #{$shadow-md}, box-shadow-md: #{$shadow-md},
box-shadow-lg: #{$shadow-lg} box-shadow-lg: #{$shadow-lg}
@ -81,22 +81,22 @@ $dark-theme: (
gradient-primary: $gradient-primary, gradient-primary: $gradient-primary,
gradient-text: $gradient-text, gradient-text: $gradient-text,
// Stat colors for dark theme // Stat colors using visual hierarchy
stat-experience-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)), stat-primary-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
stat-experience-value: #2563eb, stat-primary-value: #2563eb,
stat-experience-label: #93c5fd, stat-primary-label: #93c5fd,
stat-design-bg: linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)), stat-secondary-bg: linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)),
stat-design-value: #16a34a, stat-secondary-value: #16a34a,
stat-design-label: #86efac, stat-secondary-label: #86efac,
stat-technologies-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)), stat-tertiary-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
stat-technologies-value: #0d9488, stat-tertiary-value: #0d9488,
stat-technologies-label: #5eead4, stat-tertiary-label: #5eead4,
stat-motivation-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)), stat-quaternary-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
stat-motivation-value: #9333ea, stat-quaternary-value: #9333ea,
stat-motivation-label: #c4b5fd, stat-quaternary-label: #c4b5fd,
// About section colors // About section colors
about-background: linear-gradient(135deg, rgba(20, 83, 45, 0.2) 0%, rgba(6, 78, 59, 0.2) 100%), about-background: linear-gradient(135deg, rgba(20, 83, 45, 0.2) 0%, rgba(6, 78, 59, 0.2) 100%),
@ -104,32 +104,32 @@ $dark-theme: (
about-greeting-color: #34d399, about-greeting-color: #34d399,
gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)), gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)),
// Skill badge colors // Skill badge colors using visual hierarchy
skill-badge-blue-bg: rgba(30, 58, 138, 0.3), skill-badge-primary-bg: rgba(30, 58, 138, 0.3),
skill-badge-blue-text: #93c5fd, skill-badge-primary-text: #93c5fd,
skill-badge-green-bg: rgba(20, 83, 45, 0.3), skill-badge-secondary-bg: rgba(20, 83, 45, 0.3),
skill-badge-green-text: #86efac, skill-badge-secondary-text: #86efac,
skill-badge-purple-bg: rgba(88, 28, 135, 0.3), skill-badge-tertiary-bg: rgba(88, 28, 135, 0.3),
skill-badge-purple-text: #c4b5fd, skill-badge-tertiary-text: #c4b5fd,
skill-badge-orange-bg: rgba(154, 52, 18, 0.3), skill-badge-quaternary-bg: rgba(154, 52, 18, 0.3),
skill-badge-orange-text: #fdba74, skill-badge-quaternary-text: #fdba74,
// Feature card colors // Feature card colors using visual hierarchy
feature-card-blue-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)), feature-card-primary-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
feature-card-purple-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)), feature-card-secondary-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
feature-card-teal-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)), feature-card-tertiary-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
feature-icon-blue: #3b82f6, feature-icon-primary: #3b82f6,
feature-icon-purple: #a855f7, feature-icon-secondary: #a855f7,
feature-icon-teal: #14b8a6, feature-icon-tertiary: #14b8a6,
feature-title-blue: #93c5fd, feature-title-primary: #93c5fd,
feature-title-purple: #c4b5fd, feature-title-secondary: #c4b5fd,
feature-title-teal: #5eead4, feature-title-tertiary: #5eead4,
feature-description-blue: #dbeafe, feature-description-primary: #dbeafe,
feature-description-purple: #e9d5ff, feature-description-secondary: #e9d5ff,
feature-description-teal: #ccfbf1, feature-description-tertiary: #ccfbf1,
// Shadow variables // Shadow variables
box-shadow-sm: #{$shadow-sm}, box-shadow-sm: #{$shadow-sm},
@ -149,22 +149,22 @@ $dark-theme: (
--gradient-primary: #{map.get($theme, gradient-primary)}; --gradient-primary: #{map.get($theme, gradient-primary)};
--gradient-text: #{map.get($theme, gradient-text)}; --gradient-text: #{map.get($theme, gradient-text)};
// Stat variables // Stat variables using semantic naming
--stat-experience-bg: #{map.get($theme, stat-experience-bg)}; --stat-primary-bg: #{map.get($theme, stat-primary-bg)};
--stat-experience-value: #{map.get($theme, stat-experience-value)}; --stat-primary-value: #{map.get($theme, stat-primary-value)};
--stat-experience-label: #{map.get($theme, stat-experience-label)}; --stat-primary-label: #{map.get($theme, stat-primary-label)};
--stat-design-bg: #{map.get($theme, stat-design-bg)}; --stat-secondary-bg: #{map.get($theme, stat-secondary-bg)};
--stat-design-value: #{map.get($theme, stat-design-value)}; --stat-secondary-value: #{map.get($theme, stat-secondary-value)};
--stat-design-label: #{map.get($theme, stat-design-label)}; --stat-secondary-label: #{map.get($theme, stat-secondary-label)};
--stat-technologies-bg: #{map.get($theme, stat-technologies-bg)}; --stat-tertiary-bg: #{map.get($theme, stat-tertiary-bg)};
--stat-technologies-value: #{map.get($theme, stat-technologies-value)}; --stat-tertiary-value: #{map.get($theme, stat-tertiary-value)};
--stat-technologies-label: #{map.get($theme, stat-technologies-label)}; --stat-tertiary-label: #{map.get($theme, stat-tertiary-label)};
--stat-motivation-bg: #{map.get($theme, stat-motivation-bg)}; --stat-quaternary-bg: #{map.get($theme, stat-quaternary-bg)};
--stat-motivation-value: #{map.get($theme, stat-motivation-value)}; --stat-quaternary-value: #{map.get($theme, stat-quaternary-value)};
--stat-motivation-label: #{map.get($theme, stat-motivation-label)}; --stat-quaternary-label: #{map.get($theme, stat-quaternary-label)};
// About section variables // About section variables
--about-background: #{map.get($theme, about-background)}; --about-background: #{map.get($theme, about-background)};
@ -172,29 +172,32 @@ $dark-theme: (
--about-greeting-color: #{map.get($theme, about-greeting-color)}; --about-greeting-color: #{map.get($theme, about-greeting-color)};
--gradient-image-overlay: #{map.get($theme, gradient-image-overlay)}; --gradient-image-overlay: #{map.get($theme, gradient-image-overlay)};
// Skill badge variables // Skill badge variables using semantic naming
--skill-badge-blue-bg: #{map.get($theme, skill-badge-blue-bg)}; --skill-badge-primary-bg: #{map.get($theme, skill-badge-primary-bg)};
--skill-badge-blue-text: #{map.get($theme, skill-badge-blue-text)}; --skill-badge-primary-text: #{map.get($theme, skill-badge-primary-text)};
--skill-badge-green-bg: #{map.get($theme, skill-badge-green-bg)}; --skill-badge-secondary-bg: #{map.get($theme, skill-badge-secondary-bg)};
--skill-badge-green-text: #{map.get($theme, skill-badge-green-text)}; --skill-badge-secondary-text: #{map.get($theme, skill-badge-secondary-text)};
--skill-badge-purple-bg: #{map.get($theme, skill-badge-purple-bg)}; --skill-badge-tertiary-bg: #{map.get($theme, skill-badge-tertiary-bg)};
--skill-badge-purple-text: #{map.get($theme, skill-badge-purple-text)}; --skill-badge-tertiary-text: #{map.get($theme, skill-badge-tertiary-text)};
--skill-badge-orange-bg: #{map.get($theme, skill-badge-orange-bg)}; --skill-badge-quaternary-bg: #{map.get($theme, skill-badge-quaternary-bg)};
--skill-badge-orange-text: #{map.get($theme, skill-badge-orange-text)}; --skill-badge-quaternary-text: #{map.get($theme, skill-badge-quaternary-text)};
// Feature card variables // Feature card variables using semantic naming
--feature-card-blue-bg: #{map.get($theme, feature-card-blue-bg)}; --feature-card-primary-bg: #{map.get($theme, feature-card-primary-bg)};
--feature-card-purple-bg: #{map.get($theme, feature-card-purple-bg)}; --feature-card-secondary-bg: #{map.get($theme, feature-card-secondary-bg)};
--feature-card-teal-bg: #{map.get($theme, feature-card-teal-bg)}; --feature-card-tertiary-bg: #{map.get($theme, feature-card-tertiary-bg)};
--feature-icon-blue: #{map.get($theme, feature-icon-blue)};
--feature-icon-purple: #{map.get($theme, feature-icon-purple)}; --feature-icon-primary: #{map.get($theme, feature-icon-primary)};
--feature-icon-teal: #{map.get($theme, feature-icon-teal)}; --feature-icon-secondary: #{map.get($theme, feature-icon-secondary)};
--feature-title-blue: #{map.get($theme, feature-title-blue)}; --feature-icon-tertiary: #{map.get($theme, feature-icon-tertiary)};
--feature-title-purple: #{map.get($theme, feature-title-purple)};
--feature-title-teal: #{map.get($theme, feature-title-teal)}; --feature-title-primary: #{map.get($theme, feature-title-primary)};
--feature-description-blue: #{map.get($theme, feature-description-blue)}; --feature-title-secondary: #{map.get($theme, feature-title-secondary)};
--feature-description-purple: #{map.get($theme, feature-description-purple)}; --feature-title-tertiary: #{map.get($theme, feature-title-tertiary)};
--feature-description-teal: #{map.get($theme, feature-description-teal)};
--feature-description-primary: #{map.get($theme, feature-description-primary)};
--feature-description-secondary: #{map.get($theme, feature-description-secondary)};
--feature-description-tertiary: #{map.get($theme, feature-description-tertiary)};
// Shadow variables // Shadow variables
--box-shadow-sm: #{map.get($theme, box-shadow-sm)} var(--box-shadow-hover); --box-shadow-sm: #{map.get($theme, box-shadow-sm)} var(--box-shadow-hover);