From f51947f79a93c2e749966a14ae10d0b8bedffd25 Mon Sep 17 00:00:00 2001 From: Sascha Bach Date: Thu, 14 Aug 2025 16:12:57 +0200 Subject: [PATCH] refactoring --- src/components/sections/AboutSection.tsx | 14 +- src/data/FeatureCard.ts | 4 +- src/data/SkillBadge.ts | 2 +- src/scss/about-section.scss | 74 ++++---- src/scss/themes.scss | 217 ++++++++++++----------- 5 files changed, 157 insertions(+), 154 deletions(-) diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx index 8ba4547..0fb1032 100644 --- a/src/components/sections/AboutSection.tsx +++ b/src/components/sections/AboutSection.tsx @@ -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.", profileImage = saschaImage, skillBadges = [ - { text: "Angular & React Developer", colorClass: "blue" }, - { text: "Responsive Design Expert", colorClass: "green" }, - { text: "Cross-Browser Compatible", colorClass: "purple" }, - { text: "Continuous Learner", colorClass: "orange" } + { text: "Angular & React Developer", colorClass: "primary" }, + { text: "Responsive Design Expert", colorClass: "secondary" }, + { text: "Cross-Browser Compatible", colorClass: "tertiary" }, + { text: "Continuous Learner", colorClass: "quaternary" } ], featureCards = [ { icon: Code, title: "Frontend Development", description: "Building modern web applications with Angular and React frameworks, leveraging TypeScript and JavaScript for robust, scalable solutions.", - colorClass: "blue" + colorClass: "primary" }, { icon: Palette, title: "Responsive Design", description: "Creating pixel-perfect, responsive interfaces that work seamlessly across all devices and screen sizes.", - colorClass: "purple" + colorClass: "secondary" }, { icon: ShieldCheck, title: "Cross-Browser Compatibility", description: "Ensuring consistent user experiences across all major browsers with thorough testing and optimization.", - colorClass: "teal" + colorClass: "tertiary" } ] }: AboutSectionProps) { diff --git a/src/data/FeatureCard.ts b/src/data/FeatureCard.ts index 285071a..a4ec7d5 100644 --- a/src/data/FeatureCard.ts +++ b/src/data/FeatureCard.ts @@ -1,8 +1,8 @@ -import { LucideIcon } from 'lucide-react'; +import type { LucideIcon } from 'lucide-react'; export interface FeatureCard { icon: LucideIcon; title: string; description: string; - colorClass: 'blue' | 'purple' | 'teal'; + colorClass: 'primary' | 'secondary' | 'tertiary'; } \ No newline at end of file diff --git a/src/data/SkillBadge.ts b/src/data/SkillBadge.ts index b54c5c3..804b12c 100644 --- a/src/data/SkillBadge.ts +++ b/src/data/SkillBadge.ts @@ -1,4 +1,4 @@ export interface SkillBadge { text: string; - colorClass: 'blue' | 'green' | 'purple' | 'orange'; + colorClass: 'primary' | 'secondary' | 'tertiary' | 'quaternary'; } \ No newline at end of file diff --git a/src/scss/about-section.scss b/src/scss/about-section.scss index 7a8fd08..72e6ac8 100644 --- a/src/scss/about-section.scss +++ b/src/scss/about-section.scss @@ -60,7 +60,7 @@ } &__image { - width: 17rem; + width: 16rem; height: 21rem; border-radius: 50%; object-fit: cover; @@ -129,24 +129,24 @@ box-shadow: 0 4px 12px var(--box-shadow-hover); } - &--blue { - background: var(--skill-badge-blue-bg); - color: var(--skill-badge-blue-text); + &--primary { + background: var(--skill-badge-primary-bg); + color: var(--skill-badge-primary-text); } - &--green { - background: var(--skill-badge-green-bg); - color: var(--skill-badge-green-text); + &--secondary { + background: var(--skill-badge-secondary-bg); + color: var(--skill-badge-secondary-text); } - &--purple { - background: var(--skill-badge-purple-bg); - color: var(--skill-badge-purple-text); + &--tertiary { + background: var(--skill-badge-tertiary-bg); + color: var(--skill-badge-tertiary-text); } - &--orange { - background: var(--skill-badge-orange-bg); - color: var(--skill-badge-orange-text); + &--quaternary { + background: var(--skill-badge-quaternary-bg); + color: var(--skill-badge-quaternary-text); } } @@ -173,16 +173,16 @@ transform: translateY(-2px); } - &--blue { - background: var(--feature-card-blue-bg); + &--primary { + background: var(--feature-card-primary-bg); } - &--purple { - background: var(--feature-card-purple-bg); + &--secondary { + background: var(--feature-card-secondary-bg); } - &--teal { - background: var(--feature-card-teal-bg); + &--tertiary { + background: var(--feature-card-tertiary-bg); } } @@ -195,16 +195,16 @@ height: 3rem; margin: 0 auto 1rem auto; - &--blue { - color: var(--feature-icon-blue); + &--primary { + color: var(--feature-icon-primary); } - &--purple { - color: var(--feature-icon-purple); + &--secondary { + color: var(--feature-icon-secondary); } - &--teal { - color: var(--feature-icon-teal); + &--tertiary { + color: var(--feature-icon-tertiary); } } @@ -213,16 +213,16 @@ font-weight: 600; margin: 0; - &--blue { - color: var(--feature-title-blue); + &--primary { + color: var(--feature-title-primary); } - &--purple { - color: var(--feature-title-purple); + &--secondary { + color: var(--feature-title-secondary); } - &--teal { - color: var(--feature-title-teal); + &--tertiary { + color: var(--feature-title-tertiary); } } @@ -233,16 +233,16 @@ &__feature-description { margin: 0; - &--blue { - color: var(--feature-description-blue); + &--primary { + color: var(--feature-description-primary); } - &--purple { - color: var(--feature-description-purple); + &--secondary { + color: var(--feature-description-secondary); } - &--teal { - color: var(--feature-description-teal); + &--tertiary { + color: var(--feature-description-tertiary); } } } diff --git a/src/scss/themes.scss b/src/scss/themes.scss index b350e8d..cd0605d 100644 --- a/src/scss/themes.scss +++ b/src/scss/themes.scss @@ -13,22 +13,22 @@ $light-theme: ( gradient-primary: $gradient-primary, gradient-text: $gradient-text, - // Stat colors for light theme - stat-experience-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), - stat-experience-value: #2563eb, - stat-experience-label: #1d4ed8, + // Stat colors using visual hierarchy + stat-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), + stat-primary-value: #2563eb, + stat-primary-label: #1d4ed8, - stat-design-bg: linear-gradient(135deg, #dcfce7, #bbf7d0), - stat-design-value: #16a34a, - stat-design-label: #15803d, + stat-secondary-bg: linear-gradient(135deg, #dcfce7, #bbf7d0), + stat-secondary-value: #16a34a, + stat-secondary-label: #15803d, - stat-technologies-bg: linear-gradient(135deg, #ccfbf1, #99f6e4), - stat-technologies-value: #0d9488, - stat-technologies-label: #0f766e, + stat-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4), + stat-tertiary-value: #0d9488, + stat-tertiary-label: #0f766e, - stat-motivation-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe), - stat-motivation-value: #9333ea, - stat-motivation-label: #7c3aed, + stat-quaternary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe), + stat-quaternary-value: #9333ea, + stat-quaternary-label: #7c3aed, // About section colors about-background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdfa 100%), @@ -36,34 +36,34 @@ $light-theme: ( about-greeting-color: #047857, gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)), - // Skill badge colors - skill-badge-blue-bg: #dbeafe, - skill-badge-blue-text: #1e40af, - skill-badge-green-bg: #dcfce7, - skill-badge-green-text: #166534, - skill-badge-purple-bg: #e9d5ff, - skill-badge-purple-text: #7c2d12, - skill-badge-orange-bg: #fed7aa, - skill-badge-orange-text: #9a3412, + // Skill badge colors using visual hierarchy + skill-badge-primary-bg: #dbeafe, + skill-badge-primary-text: #1e40af, + skill-badge-secondary-bg: #dcfce7, + skill-badge-secondary-text: #166534, + skill-badge-tertiary-bg: #e9d5ff, + skill-badge-tertiary-text: #7c2d12, + skill-badge-quaternary-bg: #fed7aa, + skill-badge-quaternary-text: #9a3412, - // Feature card colors - feature-card-blue-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), - feature-card-purple-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe), - feature-card-teal-bg: linear-gradient(135deg, #ccfbf1, #99f6e4), + // Feature card colors using visual hierarchy + feature-card-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), + feature-card-secondary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe), + feature-card-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4), - feature-icon-blue: #2563eb, - feature-icon-purple: #9333ea, - feature-icon-teal: #0d9488, + feature-icon-primary: #2563eb, + feature-icon-secondary: #9333ea, + feature-icon-tertiary: #0d9488, - feature-title-blue: #1e40af, - feature-title-purple: #7c3aed, - feature-title-teal: #0f766e, + feature-title-primary: #1e40af, + feature-title-secondary: #7c3aed, + feature-title-tertiary: #0f766e, - feature-description-blue: #1d4ed8, - feature-description-purple: #6d28d9, - feature-description-teal: #115e59, + feature-description-primary: #1d4ed8, + feature-description-secondary: #6d28d9, + feature-description-tertiary: #115e59, - // Shadow variables using CSS custom properties + // Shadow variables box-shadow-sm: #{$shadow-sm}, box-shadow-md: #{$shadow-md}, box-shadow-lg: #{$shadow-lg} @@ -81,22 +81,22 @@ $dark-theme: ( gradient-primary: $gradient-primary, gradient-text: $gradient-text, - // Stat colors for dark theme - stat-experience-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)), - stat-experience-value: #2563eb, - stat-experience-label: #93c5fd, + // Stat colors using visual hierarchy + stat-primary-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)), + stat-primary-value: #2563eb, + stat-primary-label: #93c5fd, - stat-design-bg: linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)), - stat-design-value: #16a34a, - stat-design-label: #86efac, + stat-secondary-bg: linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)), + stat-secondary-value: #16a34a, + stat-secondary-label: #86efac, - stat-technologies-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)), - stat-technologies-value: #0d9488, - stat-technologies-label: #5eead4, + stat-tertiary-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)), + stat-tertiary-value: #0d9488, + stat-tertiary-label: #5eead4, - stat-motivation-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)), - stat-motivation-value: #9333ea, - stat-motivation-label: #c4b5fd, + stat-quaternary-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)), + stat-quaternary-value: #9333ea, + stat-quaternary-label: #c4b5fd, // About section colors 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, gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)), - // Skill badge colors - skill-badge-blue-bg: rgba(30, 58, 138, 0.3), - skill-badge-blue-text: #93c5fd, - skill-badge-green-bg: rgba(20, 83, 45, 0.3), - skill-badge-green-text: #86efac, - skill-badge-purple-bg: rgba(88, 28, 135, 0.3), - skill-badge-purple-text: #c4b5fd, - skill-badge-orange-bg: rgba(154, 52, 18, 0.3), - skill-badge-orange-text: #fdba74, + // Skill badge colors using visual hierarchy + skill-badge-primary-bg: rgba(30, 58, 138, 0.3), + skill-badge-primary-text: #93c5fd, + skill-badge-secondary-bg: rgba(20, 83, 45, 0.3), + skill-badge-secondary-text: #86efac, + skill-badge-tertiary-bg: rgba(88, 28, 135, 0.3), + skill-badge-tertiary-text: #c4b5fd, + skill-badge-quaternary-bg: rgba(154, 52, 18, 0.3), + skill-badge-quaternary-text: #fdba74, - // Feature card colors - feature-card-blue-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-teal-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)), + // Feature card colors using visual hierarchy + feature-card-primary-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)), + feature-card-secondary-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 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-purple: #a855f7, - feature-icon-teal: #14b8a6, + feature-icon-primary: #3b82f6, + feature-icon-secondary: #a855f7, + feature-icon-tertiary: #14b8a6, - feature-title-blue: #93c5fd, - feature-title-purple: #c4b5fd, - feature-title-teal: #5eead4, + feature-title-primary: #93c5fd, + feature-title-secondary: #c4b5fd, + feature-title-tertiary: #5eead4, - feature-description-blue: #dbeafe, - feature-description-purple: #e9d5ff, - feature-description-teal: #ccfbf1, + feature-description-primary: #dbeafe, + feature-description-secondary: #e9d5ff, + feature-description-tertiary: #ccfbf1, // Shadow variables box-shadow-sm: #{$shadow-sm}, @@ -149,22 +149,22 @@ $dark-theme: ( --gradient-primary: #{map.get($theme, gradient-primary)}; --gradient-text: #{map.get($theme, gradient-text)}; - // Stat variables - --stat-experience-bg: #{map.get($theme, stat-experience-bg)}; - --stat-experience-value: #{map.get($theme, stat-experience-value)}; - --stat-experience-label: #{map.get($theme, stat-experience-label)}; + // Stat variables using semantic naming + --stat-primary-bg: #{map.get($theme, stat-primary-bg)}; + --stat-primary-value: #{map.get($theme, stat-primary-value)}; + --stat-primary-label: #{map.get($theme, stat-primary-label)}; - --stat-design-bg: #{map.get($theme, stat-design-bg)}; - --stat-design-value: #{map.get($theme, stat-design-value)}; - --stat-design-label: #{map.get($theme, stat-design-label)}; + --stat-secondary-bg: #{map.get($theme, stat-secondary-bg)}; + --stat-secondary-value: #{map.get($theme, stat-secondary-value)}; + --stat-secondary-label: #{map.get($theme, stat-secondary-label)}; - --stat-technologies-bg: #{map.get($theme, stat-technologies-bg)}; - --stat-technologies-value: #{map.get($theme, stat-technologies-value)}; - --stat-technologies-label: #{map.get($theme, stat-technologies-label)}; + --stat-tertiary-bg: #{map.get($theme, stat-tertiary-bg)}; + --stat-tertiary-value: #{map.get($theme, stat-tertiary-value)}; + --stat-tertiary-label: #{map.get($theme, stat-tertiary-label)}; - --stat-motivation-bg: #{map.get($theme, stat-motivation-bg)}; - --stat-motivation-value: #{map.get($theme, stat-motivation-value)}; - --stat-motivation-label: #{map.get($theme, stat-motivation-label)}; + --stat-quaternary-bg: #{map.get($theme, stat-quaternary-bg)}; + --stat-quaternary-value: #{map.get($theme, stat-quaternary-value)}; + --stat-quaternary-label: #{map.get($theme, stat-quaternary-label)}; // About section variables --about-background: #{map.get($theme, about-background)}; @@ -172,32 +172,35 @@ $dark-theme: ( --about-greeting-color: #{map.get($theme, about-greeting-color)}; --gradient-image-overlay: #{map.get($theme, gradient-image-overlay)}; - // Skill badge variables - --skill-badge-blue-bg: #{map.get($theme, skill-badge-blue-bg)}; - --skill-badge-blue-text: #{map.get($theme, skill-badge-blue-text)}; - --skill-badge-green-bg: #{map.get($theme, skill-badge-green-bg)}; - --skill-badge-green-text: #{map.get($theme, skill-badge-green-text)}; - --skill-badge-purple-bg: #{map.get($theme, skill-badge-purple-bg)}; - --skill-badge-purple-text: #{map.get($theme, skill-badge-purple-text)}; - --skill-badge-orange-bg: #{map.get($theme, skill-badge-orange-bg)}; - --skill-badge-orange-text: #{map.get($theme, skill-badge-orange-text)}; + // Skill badge variables using semantic naming + --skill-badge-primary-bg: #{map.get($theme, skill-badge-primary-bg)}; + --skill-badge-primary-text: #{map.get($theme, skill-badge-primary-text)}; + --skill-badge-secondary-bg: #{map.get($theme, skill-badge-secondary-bg)}; + --skill-badge-secondary-text: #{map.get($theme, skill-badge-secondary-text)}; + --skill-badge-tertiary-bg: #{map.get($theme, skill-badge-tertiary-bg)}; + --skill-badge-tertiary-text: #{map.get($theme, skill-badge-tertiary-text)}; + --skill-badge-quaternary-bg: #{map.get($theme, skill-badge-quaternary-bg)}; + --skill-badge-quaternary-text: #{map.get($theme, skill-badge-quaternary-text)}; - // Feature card variables - --feature-card-blue-bg: #{map.get($theme, feature-card-blue-bg)}; - --feature-card-purple-bg: #{map.get($theme, feature-card-purple-bg)}; - --feature-card-teal-bg: #{map.get($theme, feature-card-teal-bg)}; - --feature-icon-blue: #{map.get($theme, feature-icon-blue)}; - --feature-icon-purple: #{map.get($theme, feature-icon-purple)}; - --feature-icon-teal: #{map.get($theme, feature-icon-teal)}; - --feature-title-blue: #{map.get($theme, feature-title-blue)}; - --feature-title-purple: #{map.get($theme, feature-title-purple)}; - --feature-title-teal: #{map.get($theme, feature-title-teal)}; - --feature-description-blue: #{map.get($theme, feature-description-blue)}; - --feature-description-purple: #{map.get($theme, feature-description-purple)}; - --feature-description-teal: #{map.get($theme, feature-description-teal)}; + // Feature card variables using semantic naming + --feature-card-primary-bg: #{map.get($theme, feature-card-primary-bg)}; + --feature-card-secondary-bg: #{map.get($theme, feature-card-secondary-bg)}; + --feature-card-tertiary-bg: #{map.get($theme, feature-card-tertiary-bg)}; + + --feature-icon-primary: #{map.get($theme, feature-icon-primary)}; + --feature-icon-secondary: #{map.get($theme, feature-icon-secondary)}; + --feature-icon-tertiary: #{map.get($theme, feature-icon-tertiary)}; + + --feature-title-primary: #{map.get($theme, feature-title-primary)}; + --feature-title-secondary: #{map.get($theme, feature-title-secondary)}; + --feature-title-tertiary: #{map.get($theme, feature-title-tertiary)}; + + --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 --box-shadow-sm: #{map.get($theme, box-shadow-sm)} var(--box-shadow-hover); --box-shadow-md: #{map.get($theme, box-shadow-md)}; --box-shadow-lg: #{map.get($theme, box-shadow-lg)}; -} +} \ No newline at end of file