diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..91a52fb --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + Sascha Bach + BARRIEREFREIE WEBENTWICKLUNG + diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx index e7e6b45..cace1ed 100644 --- a/src/components/layout/Navigation.tsx +++ b/src/components/layout/Navigation.tsx @@ -4,6 +4,7 @@ import ThemeToggle from '../ThemeToggle'; import LanguageToggle from '../LanguageToggle'; import MobileMenu from './MobileMenu'; import { personalConfig } from '../../config/personal'; +import logoUrl from '../../assets/logo.svg'; import { useLanguage } from '../../contexts/LanguageContext'; import { scrollToSection } from '../../utils/scrollUtils'; import type { Theme } from '../../data/types'; @@ -74,7 +75,7 @@ export default function Navbar({ window.scrollTo({ top: 0, behavior: 'smooth' }); }} > - {personalConfig.name} + {texts.navigation.logoAlt}
{menuItems.map((item) => ( diff --git a/src/config/locales/de/navigation.ts b/src/config/locales/de/navigation.ts index 7544e09..6fdb667 100644 --- a/src/config/locales/de/navigation.ts +++ b/src/config/locales/de/navigation.ts @@ -17,4 +17,5 @@ export const navigation = { { section: 'Contact', label: 'Kontakt' }, ], mobileMenuAriaLabel: 'Menü öffnen', + logoAlt: 'Sascha Bach – Barrierefreie Webentwicklung', }; diff --git a/src/config/locales/en/TextConfig.ts b/src/config/locales/en/TextConfig.ts index 1894060..b81ec89 100644 --- a/src/config/locales/en/TextConfig.ts +++ b/src/config/locales/en/TextConfig.ts @@ -6,6 +6,7 @@ export interface TextConfig { menuItems: MenuItem[]; landingMenuItems: MenuItem[]; mobileMenuAriaLabel: string; + logoAlt: string; }; // Theme Toggle diff --git a/src/config/locales/en/navigation.ts b/src/config/locales/en/navigation.ts index e7c2cb8..cc50b97 100644 --- a/src/config/locales/en/navigation.ts +++ b/src/config/locales/en/navigation.ts @@ -16,5 +16,6 @@ export const navigation = { { section: 'References', label: 'References' }, { section: 'Contact', label: 'Contact' }, ], - mobileMenuAriaLabel: 'Menü öffnen', + mobileMenuAriaLabel: 'Open menu', + logoAlt: 'Sascha Bach – Accessible Web Development', }; diff --git a/src/hooks/useScrollReveal.ts b/src/hooks/useScrollReveal.ts index aba4dd8..bc761c3 100644 --- a/src/hooks/useScrollReveal.ts +++ b/src/hooks/useScrollReveal.ts @@ -5,9 +5,8 @@ import { useEffect, useRef } from 'react'; * `.is-visible` when they enter the viewport, triggering the CSS transition * defined in globals.scss. * - * The observer only starts after the first user interaction (scroll, keydown, - * or pointer event), so elements already in the viewport on load stay hidden - * until the user actually engages with the page. + * The observer starts immediately so that elements already in the viewport + * become visible right away — including after language-change remounts. */ export function useScrollReveal() { const ref = useRef(null); @@ -16,42 +15,23 @@ export function useScrollReveal() { const container = ref.current; if (!container) return; - let observer: IntersectionObserver | null = null; - - const startObserving = () => { - if (observer) return; // already started - - observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - entry.target.classList.add('is-visible'); - observer!.unobserve(entry.target); - } - }); - }, - { threshold: 0.12 } - ); - - const items = container.querySelectorAll('.reveal-item'); - items.forEach((el) => observer!.observe(el)); - - // Clean up interaction listeners once started - INTERACTION_EVENTS.forEach((event) => - window.removeEventListener(event, startObserving, { capture: true }) - ); - }; - - const INTERACTION_EVENTS = ['scroll', 'keydown', 'pointerdown', 'touchstart'] as const; - INTERACTION_EVENTS.forEach((event) => - window.addEventListener(event, startObserving, { once: false, capture: true, passive: true }) + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.12 } ); + const items = container.querySelectorAll('.reveal-item'); + items.forEach((el) => observer.observe(el)); + return () => { - observer?.disconnect(); - INTERACTION_EVENTS.forEach((event) => - window.removeEventListener(event, startObserving, { capture: true }) - ); + observer.disconnect(); }; }, []); diff --git a/src/scss/App.scss b/src/scss/App.scss index 95cc589..43e303b 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -12,8 +12,7 @@ // Component styles @use 'components/back-to-top'; -// Import Geist font from Google Fonts or local files -@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&family=Quicksand:wght@400;500&display=swap'); // CSS Reset - Add this * { @@ -69,115 +68,292 @@ --radius-lg: 0.75rem; --radius-xl: 1rem; - // Shadows (light) - --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); - --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); - --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); + // Shadows (light) – brand-tinted + --shadow-xs: 0 1px 2px rgba(4, 44, 83, 0.05); + --shadow-sm: 0 2px 8px rgba(4, 44, 83, 0.08); + --shadow-md: 0 4px 16px rgba(4, 44, 83, 0.08); + --shadow-hover: 0 8px 24px rgba(4, 44, 83, 0.12); // Transitions --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); - // Landing section background gradients (light) – vivid & saturated - --bg-reasons: linear-gradient(160deg, #dbeafe 0%, #ede9fe 100%); - --bg-winnings: linear-gradient(160deg, #ede9fe 0%, #e0e7ff 100%); - --bg-experience: linear-gradient(160deg, #e0f2fe 0%, #ede9fe 100%); - --bg-processes: linear-gradient(160deg, #e0e7ff 0%, #dbeafe 100%); - --bg-references: linear-gradient(160deg, #ede9fe 0%, #dbeafe 100%); + // Brand accent & text-on-dark + --color-accent-text: #412402; + --color-accent-deco: #ef9f27; + --color-text-on-dark: #e6f1fb; + --font-headline: 'Comfortaa', sans-serif; + --font-body: 'Quicksand', sans-serif; + --contact-button-bg: #042c53; + --contact-button-text: #e6f1fb; + --contact-button-hover-bg: #0c447c; + + // Landing section backgrounds (light) – flat brand + --bg-reasons: #ffffff; + --bg-winnings: #f1efe8; + --bg-experience: #ffffff; + --bg-processes: #f1efe8; + --bg-references: #ffffff; // Reused section backgrounds (light) - --about-background: linear-gradient(160deg, #f0f9ff 0%, #dbeafe 100%); - --projects-background: linear-gradient(160deg, #dbeafe 0%, #ede9fe 100%); - --contact-background: linear-gradient(160deg, #ede9fe 0%, #e0f2fe 100%); + --about-background: #ffffff; + --projects-background: #ffffff; + --contact-background: #f1efe8; // Tech section backgrounds (light) - --hero-background: linear-gradient( - 160deg, - #f8faff 0%, - #f1f3ff 50%, - #f5f0ff 100% - ); - --services-background: linear-gradient(160deg, #ede9fe 0%, #dbeafe 100%); - --skills-background: linear-gradient(160deg, #dbeafe 0%, #e0f2fe 100%); - --certifications-background: linear-gradient( - 160deg, - #e0e7ff 0%, - #ede9fe 100% - ); + --hero-background: #f1efe8; + --services-background: #f1efe8; + --skills-background: #ffffff; + --certifications-background: #f1efe8; - // Glassmorphism card tokens (light) - --card-glass-bg: rgba(255, 255, 255, 0.65); - --card-glass-border: rgba(255, 255, 255, 0.9); + // Card tokens (light) + --card-glass-bg: #ffffff; + --card-glass-border: rgba(4, 44, 83, 0.12); - // Glow shadows (light) + // Functional shadows --shadow-glow: - 0 0 0 1px rgba(99, 102, 241, 0.12), 0 8px 24px rgba(99, 102, 241, 0.1); + 0 0 0 1px rgba(4, 44, 83, 0.1), 0 8px 24px rgba(4, 44, 83, 0.08); --shadow-glow-hover: - 0 0 0 1px rgba(99, 102, 241, 0.28), 0 16px 48px rgba(99, 102, 241, 0.2); + 0 0 0 1px rgba(4, 44, 83, 0.2), 0 16px 48px rgba(4, 44, 83, 0.15); } // Dark theme + shadow overrides [data-theme='dark'] { @include t.theme-vars(t.$dark-theme); - --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3); - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); + // Core colors + --color-primary: #e6f1fb; + --color-secondary: #b5d4f4; + --color-accent-text: #fac775; + --color-accent-deco: #ef9f27; + --color-background: #021829; + --color-surface: #042c53; + --color-text: #e6f1fb; + --color-text-muted: #b5d4f4; + --color-text-on-dark: #e6f1fb; + --color-border: rgba(230, 241, 251, 0.12); + --color-focus-ring: #ef9f27; + + // Section backgrounds + --hero-background: #021829; + --about-background: #042c53; + --services-background: #021829; + --skills-background: #042c53; + --certifications-background: #021829; + --projects-background: #042c53; + --contact-background: #021829; + --bg-reasons: #042c53; + --bg-winnings: #021829; + --bg-experience: #042c53; + --bg-processes: #021829; + --bg-references: #042c53; + + // Cards + shadows + --card-glass-bg: rgba(12, 68, 124, 0.5); + --card-glass-border: rgba(230, 241, 251, 0.1); + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5); - - // Landing section backgrounds (dark) – cinematic deep - --bg-reasons: linear-gradient(160deg, #0f172a 0%, #1a0f2e 100%); - --bg-winnings: linear-gradient(160deg, #1a0f2e 0%, #0d1a2e 100%); - --bg-experience: linear-gradient(160deg, #0d1a2e 0%, #0f172a 100%); - --bg-processes: linear-gradient(160deg, #0f172a 0%, #190b2e 100%); - --bg-references: linear-gradient(160deg, #190b2e 0%, #0f172a 100%); - - // Reused section backgrounds (dark) - --about-background: linear-gradient(160deg, #111827 0%, #0f172a 100%); - --projects-background: linear-gradient(160deg, #0f172a 0%, #1a0f2e 100%); - --contact-background: linear-gradient(160deg, #1a0f2e 0%, #0d1a2e 100%); - - // Tech section backgrounds (dark) – full cinematic - --hero-background: linear-gradient( - 160deg, - #06080f 0%, - #0c1220 50%, - #120720 100% - ); - --services-background: linear-gradient(160deg, #190b2e 0%, #0f172a 100%); - --skills-background: linear-gradient(160deg, #0f172a 0%, #0d1a2e 100%); - --certifications-background: linear-gradient( - 160deg, - #0d1a2e 0%, - #190b2e 100% - ); - - // Glassmorphism card tokens (dark) - --card-glass-bg: rgba(139, 92, 246, 0.06); - --card-glass-border: rgba(139, 92, 246, 0.22); - - // Glow shadows (dark) --shadow-glow: - 0 0 0 1px rgba(139, 92, 246, 0.2), 0 8px 32px rgba(139, 92, 246, 0.18); + 0 0 0 1px rgba(239, 159, 39, 0.15), 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-glow-hover: - 0 0 0 1px rgba(139, 92, 246, 0.45), 0 16px 56px rgba(139, 92, 246, 0.32); + 0 0 0 1px rgba(239, 159, 39, 0.3), 0 16px 48px rgba(0, 0, 0, 0.4); + + // Buttons + --contact-button-bg: #ef9f27; + --contact-button-text: #042c53; + --contact-button-hover-bg: #fac775; + + // Form inputs + --contact-input-bg: #042c53; + --contact-input-border: rgba(230, 241, 251, 0.2); + --contact-input-focus-ring: rgba(239, 159, 39, 0.3); + + // Stat cards + --stat-primary-bg: rgba(12, 68, 124, 0.4); + --stat-primary-value: #e6f1fb; + --stat-primary-label: #b5d4f4; + --stat-secondary-bg: rgba(12, 68, 124, 0.4); + --stat-secondary-value: #e6f1fb; + --stat-secondary-label: #b5d4f4; + --stat-tertiary-bg: rgba(12, 68, 124, 0.4); + --stat-tertiary-value: #e6f1fb; + --stat-tertiary-label: #b5d4f4; + --stat-quaternary-bg: rgba(12, 68, 124, 0.4); + --stat-quaternary-value: #e6f1fb; + --stat-quaternary-label: #b5d4f4; + + // Service cards + --service-card-primary-bg: rgba(12, 68, 124, 0.5); + --service-card-secondary-bg: rgba(4, 44, 83, 0.8); + --service-card-tertiary-bg: rgba(12, 68, 124, 0.5); + --service-card-quaternary-bg: rgba(4, 44, 83, 0.8); + --service-card-quinary-bg: rgba(12, 68, 124, 0.5); + --service-card-senary-bg: rgba(4, 44, 83, 0.8); + --service-icon-primary: #ef9f27; + --service-icon-secondary: #ef9f27; + --service-icon-tertiary: #ef9f27; + --service-icon-quaternary: #ef9f27; + --service-icon-quinary: #ef9f27; + --service-icon-senary: #ef9f27; + --service-title-primary: #e6f1fb; + --service-title-secondary: #e6f1fb; + --service-title-tertiary: #e6f1fb; + --service-title-quaternary: #e6f1fb; + --service-title-quinary: #e6f1fb; + --service-title-senary: #e6f1fb; + --service-description-primary: #b5d4f4; + --service-description-secondary: #b5d4f4; + --service-description-tertiary: #b5d4f4; + --service-description-quaternary: #b5d4f4; + --service-description-quinary: #b5d4f4; + --service-description-senary: #b5d4f4; + + // Skills + --skills-category-bg: rgba(12, 68, 124, 0.4); + --skills-category-border: rgba(230, 241, 251, 0.1); + --skills-skill-name-color: #e6f1fb; + --skills-skill-level-color: #b5d4f4; + --skills-skill-percentage-color: #b5d4f4; + --skills-progress-bg: rgba(230, 241, 251, 0.1); + --skills-category-bg-primary: rgba(12, 68, 124, 0.5); + --skills-category-bg-secondary: rgba(12, 68, 124, 0.5); + --skills-category-bg-tertiary: rgba(12, 68, 124, 0.5); + --skills-category-bg-quaternary: rgba(12, 68, 124, 0.5); + --skills-category-bg-quinary: rgba(12, 68, 124, 0.5); + --skills-category-bg-senary: rgba(12, 68, 124, 0.5); + --skills-progress-primary: #ef9f27; + --skills-progress-secondary: #ef9f27; + --skills-progress-tertiary: #ef9f27; + --skills-progress-quaternary: #ef9f27; + --skills-progress-quinary: #ef9f27; + --skills-progress-senary: #ef9f27; + + // Certifications + --certifications-card-background: #042c53; + --certifications-badge-background: rgba(239, 159, 39, 0.15); + --certifications-badge-border: rgba(239, 159, 39, 0.3); + --color-certifications-badge-text: #fac775; + + // Projects + --projects-card-background: #042c53; + --projects-card-border: rgba(239, 159, 39, 0.15); + --projects-button-primary-bg: #ef9f27; + --projects-button-primary-text: #042c53; + --projects-button-primary-border: rgba(239, 159, 39, 0.3); + --projects-button-primary-hover-bg: #fac775; + --projects-button-secondary-bg: #0c447c; + --projects-button-secondary-text: #e6f1fb; + --projects-button-secondary-border: rgba(230, 241, 251, 0.15); + --projects-button-secondary-hover-bg: #185fa5; + --projects-tech-badge-bg: rgba(12, 68, 124, 0.6); + --projects-tech-badge-text: #e6f1fb; + --projects-tech-badge-border: rgba(239, 159, 39, 0.2); + + // Contact + --contact-social-bg: #042c53; + --contact-social-text: #e6f1fb; + --contact-social-border: rgba(239, 159, 39, 0.3); + --contact-social-hover-bg: #0c447c; + --contact-social-hover-border: #ef9f27; + --contact-status-success-bg: rgba(4, 44, 83, 0.5); + --contact-status-success-border: #ef9f27; + --contact-status-success-text: #fac775; + + // Page backgrounds + --bg-primary: #021829; + --bg-secondary: #042c53; + --border-color: rgba(230, 241, 251, 0.12); + + // Skill badges + --skill-badge-primary-bg: rgba(12, 68, 124, 0.5); + --skill-badge-primary-text: #e6f1fb; + --skill-badge-secondary-bg: rgba(12, 68, 124, 0.5); + --skill-badge-secondary-text: #e6f1fb; + --skill-badge-tertiary-bg: rgba(12, 68, 124, 0.5); + --skill-badge-tertiary-text: #e6f1fb; + --skill-badge-quaternary-bg: rgba(65, 36, 2, 0.4); + --skill-badge-quaternary-text: #fac775; + + // Feature cards + --feature-card-primary-bg: rgba(12, 68, 124, 0.4); + --feature-card-secondary-bg: rgba(4, 44, 83, 0.6); + --feature-card-tertiary-bg: rgba(12, 68, 124, 0.4); + --feature-icon-primary: #ef9f27; + --feature-icon-secondary: #ef9f27; + --feature-icon-tertiary: #ef9f27; + --feature-title-primary: #e6f1fb; + --feature-title-secondary: #e6f1fb; + --feature-title-tertiary: #e6f1fb; + --feature-description-primary: #b5d4f4; + --feature-description-secondary: #b5d4f4; + --feature-description-tertiary: #b5d4f4; + + // Remove gradients + --gradient-primary: #ef9f27; +} + +// Dark mode: override hardcoded SASS-compiled colors on section headings +[data-theme='dark'] { + h1, + h2, + h3, + h4 { + color: #e6f1fb; + } + + .about-section__greeting { + color: #e6f1fb; + } + + .skills-section__category-title { + color: #e6f1fb; + } + + // Border-left accent colors + .reasons-section__item, + .references-section__item, + .experience-section__paragraph--outro, + .reasons-section__outro { + border-left-color: #ef9f27; + } + + .winnings-section__item, + .processes-section__item { + border-left-color: #b5d4f4; + } + + // Stat numbers in reasons section + .reasons-section__stat { + color: #ef9f27; + } + + // Navbar deepens in dark mode + .navbar { + background: #021829; + border-bottom: 1px solid rgba(230, 241, 251, 0.08); + } } body { - font-family: - 'Geist', - system-ui, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - 'Roboto', - sans-serif; + font-family: 'Quicksand', sans-serif; + font-weight: 400; + font-size: 1rem; background-color: var(--color-background); color: var(--color-text); - margin: 0; // Explicitly remove body margin - padding: 0; // Explicitly remove body padding + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4 { + font-family: 'Comfortaa', sans-serif; + font-weight: 600; + color: var(--color-primary); } section { diff --git a/src/scss/components/back-to-top.scss b/src/scss/components/back-to-top.scss index 6036915..ebdbaab 100644 --- a/src/scss/components/back-to-top.scss +++ b/src/scss/components/back-to-top.scss @@ -9,7 +9,7 @@ height: 3rem; border-radius: 50%; background: var(--color-primary); - color: #000000; + color: var(--color-text-on-dark); // #E6F1FB – white on dark navy border: none; cursor: pointer; display: flex; diff --git a/src/scss/globals.scss b/src/scss/globals.scss index af950de..32e6d0b 100644 --- a/src/scss/globals.scss +++ b/src/scss/globals.scss @@ -5,21 +5,25 @@ // Global CSS custom properties for accessibility :root { - --color-primary: #2563eb; - --color-secondary: #60a5fa; - --color-focus-ring: #2563eb; - --color-text-aaa-light: #111827; - --color-text-aaa-dark: #ffffff; - --box-shadow-hover: rgba(0, 0, 0, 0.15); + --color-primary: #042c53; + --color-secondary: #0c447c; + --color-accent-text: #412402; + --color-accent-deco: #ef9f27; + --color-text-on-dark: #e6f1fb; + --color-focus-ring: #042c53; + --color-text-aaa-light: #1a1a1a; + --color-text-aaa-dark: #e6f1fb; + --box-shadow-hover: rgba(4, 44, 83, 0.15); + --font-headline: 'Comfortaa', sans-serif; + --font-body: 'Quicksand', sans-serif; + --contact-button-bg: #042c53; + --contact-button-text: #e6f1fb; + --contact-button-hover-bg: #0c447c; } -@media (prefers-color-scheme: dark) { - :root { - --color-primary: #60a5fa; - --color-secondary: #93c5fd; - --color-focus-ring: #60a5fa; - } -} +// Dark mode is controlled via [data-theme='dark'] attribute on . +// OS-level prefers-color-scheme is intentionally NOT used here to avoid +// --color-primary flipping to #E6F1FB, which breaks the always-dark navbar. // Screen Reader Only Classes - Central Definition .sr-only { diff --git a/src/scss/language-toggle.scss b/src/scss/language-toggle.scss index 91ef1d8..ce5ffba 100644 --- a/src/scss/language-toggle.scss +++ b/src/scss/language-toggle.scss @@ -5,7 +5,7 @@ display: flex; gap: 0.25rem; background: transparent; - border: 1px solid var(--color-text-muted); + border: 1px solid rgba(230, 241, 251, 0.35); // light on always-dark navbar border-radius: $border-radius-sm; padding: 0.25rem; @@ -16,33 +16,32 @@ border: none; border-radius: 0.25rem; background: transparent; - color: var(--color-text); + color: var(--color-text-on-dark); // #E6F1FB – 10:1 on #042C53 navbar cursor: pointer; transition: all 0.2s ease; - @extend %hover-lift; &:hover { - color: var(--color-text); + background: rgba(230, 241, 251, 0.1); + color: var(--color-text-on-dark); } &:focus { - outline: 2px solid var(--color-primary); + outline: 2px solid var(--color-accent-deco); // ochre – always visible on dark outline-offset: 2px; } &:active { - box-shadow: 0 2px 4px var(--box-shadow-active); transform: translateY(0); } &--active { - background: var(--color-primary); - color: #000000; + background: var(--color-text-on-dark); // #E6F1FB bg → 10:1 contrast + color: #042c53; // night-blue text on light bg → AAA font-weight: 600; &:hover { - background: var(--color-primary); - color: #000000; + background: var(--color-text-on-dark); + color: #042c53; } } } diff --git a/src/scss/layout/footer.scss b/src/scss/layout/footer.scss index 7cc16fb..60d5c20 100644 --- a/src/scss/layout/footer.scss +++ b/src/scss/layout/footer.scss @@ -2,18 +2,17 @@ @use '../variables'; .footer { - background-color: var(--color-background-muted); - margin-top: auto; // Push footer to bottom if using flexbox layout + background-color: var(--color-surface); + border-top: 1px solid var(--color-border); + margin-top: auto; &__container { margin: 0 auto; - padding: 0 1rem; + padding: 2rem 1rem 1.5rem; } &__separator { - height: 1px; - background-color: var(--color-border); - margin-bottom: 2rem; + display: none; // border-top on .footer replaces this } &__content { @@ -38,7 +37,7 @@ } &__link { - color: var(--color-text-muted); + color: var(--color-text); font-size: 0.875rem; text-decoration: none; padding: 0.5rem; @@ -46,21 +45,22 @@ transition: all 0.2s ease-in-out; &:hover { - color: var(--color-text); - background-color: var(--color-background-hover); + color: var(--color-primary); + text-decoration: underline; } &:focus { - outline: 2px solid var(--color-primary); + outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } } &__copyright { - color: var(--color-text-muted); + color: var(--color-text); font-size: 0.875rem; text-align: center; margin: 0; + opacity: 0.7; } &__social { @@ -75,20 +75,22 @@ width: 2.5rem; height: 2.5rem; background: transparent; - border: none; + border: 1px solid var(--color-border); border-radius: 0.375rem; - color: var(--color-text-muted); + color: var(--color-text); cursor: pointer; transition: all 0.2s ease-in-out; + text-decoration: none; &:hover { - background-color: var(--color-background-hover); - color: var(--color-text); + background-color: var(--color-primary); + color: var(--color-text-on-dark); + border-color: var(--color-primary); transform: translateY(-1px); } &:focus { - outline: 2px solid var(--color-primary); + outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } diff --git a/src/scss/layout/topbar.scss b/src/scss/layout/topbar.scss index 378ed23..79c0e3b 100644 --- a/src/scss/layout/topbar.scss +++ b/src/scss/layout/topbar.scss @@ -4,21 +4,32 @@ @include globals.flex-center(); justify-content: space-between; padding: 1em; - background: var(--color-background); - color: var(--color-text); + background: #042c53; // always night-blue – independent of --color-primary cascade + color: var(--color-text-on-dark); height: 65px; position: sticky; top: 0; z-index: 100; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 8px rgba(4, 44, 83, 0.2); &__name { font-weight: bold; font-size: 1.25rem; - color: var(--color-text); + color: var(--color-text-on-dark); text-decoration: none; } + &__logo { + height: 65px; + max-height: calc(65px - 0.5rem); // stay within navbar height minus padding + width: auto; + display: block; + + @media (max-width: 768px) { + height: 48px; + } + } + &__container { display: flex; align-items: center; @@ -29,18 +40,31 @@ @extend %hover-lift; padding: 0.6rem 1.2rem; border-radius: 8px; + color: var(--color-text-on-dark); transition: + color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; + &:hover { + color: var(--color-accent-deco); + box-shadow: none; + transform: none; + } + &:active { - box-shadow: 0 2px 4px var(--box-shadow-active); + box-shadow: none; transform: translateY(0); } &--active { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); - background: var(--box-shadow-hover, rgba(0, 0, 0, 0.05)); + color: var( + --color-text-on-dark + ); // #E6F1FB – 10:1 contrast, same as default + box-shadow: none; + background: rgba(230, 241, 251, 0.12); + border-bottom: 2px solid var(--color-accent-deco); // ochre underline as accent indicator + border-radius: 8px 8px 4px 4px; } } } @@ -60,14 +84,14 @@ display: block; height: 3px; width: 100%; - background-color: var(--color-text); + background-color: var(--color-text-on-dark); // light on dark navy bg border-radius: 2px; transition: all 0.3s ease; margin: 1px 0; } &:hover &__item { - background-color: var(--color-primary); + background-color: var(--color-accent-deco); // ochre accent on hover } &.active { diff --git a/src/scss/sections/contact-section.scss b/src/scss/sections/contact-section.scss index 4e82256..507fb4b 100644 --- a/src/scss/sections/contact-section.scss +++ b/src/scss/sections/contact-section.scss @@ -85,8 +85,10 @@ &__email-icon { width: 2rem; height: 2rem; - color: var(--primary-color); - background: rgba(147, 51, 234, 0.1); + color: var( + --color-primary + ); // #042C53 light / #E6F1FB dark – high contrast in both + background: rgba(4, 44, 83, 0.08); border-radius: 0.75rem; padding: 0.5rem; flex-shrink: 0; @@ -225,7 +227,11 @@ &__status-text { font-size: 0.875rem; font-weight: 500; - color: #22c55e; + color: #065f46; // dark emerald – 7.4:1 on white; light-mode accessible + + [data-theme='dark'] & { + color: #34d399; // light mint – high contrast on dark bg + } } &__quick-facts { @@ -351,17 +357,10 @@ outline-offset: 2px; } - // Brand-specific icon colors with better contrast - &--email .contact-section__social-icon { - color: var(--social-icon-email, #2563eb); // Use theme variable - } - - &--github .contact-section__social-icon { - color: var(--social-icon-github, #1f2937); // Use theme variable - } - - &--linkedin .contact-section__social-icon { - color: var(--social-icon-linkedin, #0d67b5); // Use theme variable + // Icons inherit color from parent button's var(--contact-social-text) + // which is #042C53 (light) / #E6F1FB (dark) – both high contrast + .contact-section__social-icon { + color: currentColor; } } @@ -578,7 +577,7 @@ &__email-card-icon { width: 3rem; height: 3rem; - color: var(--primary-color); + color: var(--color-primary); // #042C53 light / #E6F1FB dark – high contrast margin: 0 auto 1rem; display: block; } @@ -599,39 +598,19 @@ margin: var(--card-padding-sm) 0; text-decoration: none; color: var(--contact-button-text); - box-shadow: - 0 4px 14px 0 rgba(37, 99, 235, 0.25), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); + box-shadow: none; width: 100%; position: relative; overflow: hidden; &::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.2), - transparent - ); - transition: left 0.5s ease; + display: none; } &:hover { background: var(--contact-button-hover-bg); transform: translateY(-2px); - box-shadow: - 0 8px 25px 0 rgba(37, 99, 235, 0.35), - 0 4px 6px -2px rgba(0, 0, 0, 0.1); - - &::before { - left: 100%; - } + box-shadow: none; } &:active { @@ -661,7 +640,7 @@ line-height: 1.5; strong { - color: var(--primary-color); + color: var(--color-primary); font-weight: 600; } } @@ -753,6 +732,99 @@ } } +// ── Dark mode explicit overrides ───────────────────────────────────────────── +// CSS vars can silently fall back to light values in certain cascade scenarios. +// These scoped rules guarantee correct dark appearance regardless. +[data-theme='dark'] { + .contact-section { + // Card / form backgrounds + &__connect-card, + &__social-card, + &__info-card, + &__email-card, + &__form-card { + background: #042c53; + border-color: rgba(230, 241, 251, 0.12); + } + + // Email button – ochre fill, navy text + &__email-button { + background: #ef9f27; + color: #042c53; + + &:hover { + background: #fac775; + color: #042c53; + } + } + + // Form submit button + &__form-button { + background: #ef9f27; + color: #042c53; + + &:hover:not(:disabled) { + background: #fac775; + } + } + + // Social list icons (Globe, Linkedin) and links + &__social-icon { + color: #e6f1fb; + } + + &__detail-item { + color: #e6f1fb; + } + + &__detail-link { + color: #e6f1fb; + + &:hover { + text-decoration-color: #e6f1fb; + } + } + + // Appointment hint block + &__appointment-hint { + background: rgba(12, 68, 124, 0.5); + border-color: rgba(230, 241, 251, 0.12); + } + + &__appointment-icon, + &__appointment-link, + &__appointment-text { + color: #e6f1fb; + } + + // Email icon in header + &__email-icon { + color: #ef9f27; + background: rgba(239, 159, 39, 0.15); + } + + // Titles within cards (compiled from $color-heading) + &__email-title, + &__connect-title, + &__social-title, + &__form-title { + color: #e6f1fb; + } + + // Inputs + &__form-input, + &__form-textarea { + background: #021829; + color: #e6f1fb; + border-color: rgba(230, 241, 251, 0.2); + + &::placeholder { + color: #b5d4f4; + } + } + } +} + // High contrast mode support @media (prefers-contrast: high) { .contact-section__social-button { diff --git a/src/scss/sections/experience-section.scss b/src/scss/sections/experience-section.scss index fb72c87..1ce35b7 100644 --- a/src/scss/sections/experience-section.scss +++ b/src/scss/sections/experience-section.scss @@ -68,7 +68,7 @@ padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); border: 1px solid var(--card-glass-border); - border-left: 4px solid var(--color-primary); + border-left: 4px solid var(--color-secondary); box-shadow: var(--shadow-glow); } } diff --git a/src/scss/sections/hero-section.scss b/src/scss/sections/hero-section.scss index 852bff4..bf55578 100644 --- a/src/scss/sections/hero-section.scss +++ b/src/scss/sections/hero-section.scss @@ -23,26 +23,38 @@ background: var(--hero-background); position: relative; - // Subtle radial glow at center for cinematic depth + // Mid-Century geometric circle decoration &::before { content: ''; position: absolute; - inset: 0; - background: radial-gradient( - ellipse 80% 60% at 50% 40%, - rgba(99, 102, 241, 0.12) 0%, - transparent 70% - ); + top: -80px; + right: -80px; + width: 300px; + height: 300px; + border-radius: 50%; + border: 2px solid rgba(12, 68, 124, 0.15); + pointer-events: none; + } + + &::after { + content: ''; + position: absolute; + bottom: 40px; + left: -60px; + width: 180px; + height: 180px; + border-radius: 50%; + background: rgba(239, 159, 39, 0.08); pointer-events: none; } [data-theme='dark'] & { &::before { - background: radial-gradient( - ellipse 80% 60% at 50% 40%, - rgba(139, 92, 246, 0.22) 0%, - transparent 70% - ); + border-color: rgba(230, 241, 251, 0.1); + } + + &::after { + background: rgba(239, 159, 39, 0.05); } } @@ -86,27 +98,31 @@ &--primary, &--tertiary { - background: var(--gradient-primary); - color: var(--color-background); + background: var(--color-primary); + color: var(--color-text-on-dark); + font-family: var(--font-headline); + font-weight: 600; + border-radius: 8px; &:hover { + background: var(--color-secondary); + box-shadow: none; + filter: none; transform: translateY(-1px); - box-shadow: var(--box-shadow-sm); - filter: brightness(1.1); } } &--secondary { background: transparent; - color: var(--color-text); - border: 2px solid $color-primary; + color: var(--color-primary); + border: 2px solid var(--color-primary); padding: calc(#{$spacing-sm} - 2px) $spacing-xl; &:hover { - background: $color-primary; - color: var(--color-background); + background: var(--color-primary); + color: var(--color-text-on-dark); transform: translateY(-1px); - box-shadow: var(--box-shadow-sm); + box-shadow: none; } } } diff --git a/src/scss/sections/imprint-page.scss b/src/scss/sections/imprint-page.scss index 69f5153..2a22af4 100644 --- a/src/scss/sections/imprint-page.scss +++ b/src/scss/sections/imprint-page.scss @@ -149,7 +149,7 @@ margin-bottom: 1rem; padding: 1rem; background: var(--bg-primary); - border-left: 4px solid var(--color-primary); + border-left: 4px solid var(--color-secondary); border-radius: 0 0.5rem 0.5rem 0; font-weight: 500; text-decoration: underline; diff --git a/src/scss/sections/reasons-section.scss b/src/scss/sections/reasons-section.scss index c72d177..4b5d5b0 100644 --- a/src/scss/sections/reasons-section.scss +++ b/src/scss/sections/reasons-section.scss @@ -80,7 +80,7 @@ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--card-glass-border); - border-left: 3px solid var(--color-primary); + border-left: 3px solid var(--color-secondary); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); @@ -102,10 +102,16 @@ &__stat { font-size: var(--font-size-lg); font-weight: 800; - color: var(--color-primary); + color: $color-heading; // compiled literal – immune to CSS var cascade issues line-height: var(--leading-normal); white-space: nowrap; letter-spacing: var(--tracking-tight); + + [data-theme='dark'] & { + color: var( + --color-text-on-dark + ); // #E6F1FB – always defined in globals, never overridden + } } &__text { @@ -127,7 +133,7 @@ padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); border: 1px solid var(--card-glass-border); - border-left: 4px solid var(--color-primary); + border-left: 4px solid var(--color-secondary); box-shadow: var(--shadow-glow); } } diff --git a/src/scss/sections/references-section.scss b/src/scss/sections/references-section.scss index a7e3a6a..a0c67b5 100644 --- a/src/scss/sections/references-section.scss +++ b/src/scss/sections/references-section.scss @@ -58,7 +58,7 @@ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--card-glass-border); - border-left: 3px solid var(--color-primary); + border-left: 3px solid var(--color-secondary); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); diff --git a/src/scss/sections/skills-section.scss b/src/scss/sections/skills-section.scss index 84155f5..8f8acc2 100644 --- a/src/scss/sections/skills-section.scss +++ b/src/scss/sections/skills-section.scss @@ -358,67 +358,34 @@ transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); position: relative; + // Shimmer disabled for flat design &::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.4), - transparent - ); - transform: translateX(-100%); - animation: shimmer 2s infinite; + display: none; } - // Semantic hierarchy classes with enhanced gradients + // Semantic hierarchy classes — flat brand colors via theme vars &--primary { background: var(--skills-progress-primary); - box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); } &--secondary { background: var(--skills-progress-secondary); - box-shadow: 0 0 8px rgba(16, 185, 129, 0.3); } &--tertiary { background: var(--skills-progress-tertiary); - box-shadow: 0 0 8px rgba(139, 92, 246, 0.3); } &--quaternary { background: var(--skills-progress-quaternary); - box-shadow: 0 0 8px rgba(6, 182, 212, 0.3); } &--quinary { background: var(--skills-progress-quinary); - box-shadow: 0 0 8px rgba(245, 158, 11, 0.3); } &--senary { background: var(--skills-progress-senary); - box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); } } } - -// Enhanced shimmer animation -@keyframes shimmer { - 0% { - transform: translateX(-100%); - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - transform: translateX(100%); - opacity: 0; - } -} diff --git a/src/scss/themes/_about.scss b/src/scss/themes/_about.scss index 59a314e..3aa3f4a 100644 --- a/src/scss/themes/_about.scss +++ b/src/scss/themes/_about.scss @@ -64,119 +64,63 @@ $text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds $text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds $about-light-theme: ( - // About section colors - about-background: - linear-gradient(135deg, $about-bg-light-start 0%, $about-bg-light-end 100%), - gradient-about-title: linear-gradient(90deg, $green-primary, $teal-primary), - about-greeting-color: $green-secondary, - gradient-image-overlay: - linear-gradient( - 45deg, - rgba($blue-primary, $alpha-overlay), - rgba($purple-primary, $alpha-overlay) - ), - // Skill badge colors - FIXED for AAA contrast - skill-badge-primary-bg: $blue-lightest, - skill-badge-primary-text: $text-aaa-light, - // Changed from $blue-tertiary for AAA contrast - skill-badge-secondary-bg: $green-ultralight, - skill-badge-secondary-text: $text-aaa-light, - // Changed from $green-tertiary for AAA contrast - skill-badge-tertiary-bg: $purple-lightest, - skill-badge-tertiary-text: $text-aaa-light, - // Changed from $orange-tertiary for AAA contrast - skill-badge-quaternary-bg: $orange-lighter, - skill-badge-quaternary-text: $text-aaa-light, + about-background: #ffffff, + gradient-about-title: #042c53, + about-greeting-color: #042c53, + gradient-image-overlay: rgba(4, 44, 83, 0.1), + // Skill badge colors + skill-badge-primary-bg: #e6f1fb, + skill-badge-primary-text: #042c53, + skill-badge-secondary-bg: #f1efe8, + skill-badge-secondary-text: #042c53, + skill-badge-tertiary-bg: #e6f1fb, + skill-badge-tertiary-text: #042c53, + skill-badge-quaternary-bg: #faeeda, + skill-badge-quaternary-text: #412402, - // Changed from $orange-secondary for AAA contrast - // Feature card colors - FIXED for AAA contrast - feature-card-primary-bg: - linear-gradient(135deg, $blue-lightest, $blue-ultralight), - feature-card-secondary-bg: - linear-gradient(135deg, $purple-lightest, $purple-ultralight), - feature-card-tertiary-bg: - linear-gradient(135deg, $teal-lightest, $teal-lighter), - feature-icon-primary: $blue-primary, - feature-icon-secondary: $purple-primary, - feature-icon-tertiary: $teal-primary, + // Feature card colors + feature-card-primary-bg: #f1efe8, + feature-card-secondary-bg: #ffffff, + feature-card-tertiary-bg: #f1efe8, + feature-icon-primary: #042c53, + feature-icon-secondary: #0c447c, + feature-icon-tertiary: #ef9f27, - // Text colors - FIXED for AAA contrast - feature-title-primary: $text-aaa-light, - // Changed from $blue-tertiary for AAA contrast - feature-title-secondary: $text-aaa-light, - // Changed from $purple-tertiary for AAA contrast - feature-title-tertiary: $text-aaa-light, - - // Changed from $teal-tertiary for AAA contrast - feature-description-primary: $text-aaa-light, - // Changed from $blue-secondary for AAA contrast - feature-description-secondary: $text-aaa-light, - // Changed from $purple-secondary for AAA contrast - feature-description-tertiary: $text-aaa-light - // Changed from $teal-dark for AAA contrast + feature-title-primary: #042c53, + feature-title-secondary: #042c53, + feature-title-tertiary: #042c53, + feature-description-primary: #1a1a1a, + feature-description-secondary: #1a1a1a, + feature-description-tertiary: #1a1a1a, ); $about-dark-theme: ( - // About section colors - about-background: - linear-gradient(135deg, $about-bg-dark-start 0%, $about-bg-dark-end 100%), - gradient-about-title: linear-gradient(90deg, $green-light, $teal-secondary), - about-greeting-color: $green-lighter, - gradient-image-overlay: - linear-gradient( - 45deg, - rgba($blue-primary, $alpha-overlay), - rgba($purple-primary, $alpha-overlay) - ), - // Skill badge colors - FIXED for AAA contrast - skill-badge-primary-bg: rgba($blue-dark, $alpha-bg-low), - skill-badge-primary-text: $text-aaa-dark, - // Changed from $blue-lighter for AAA contrast - skill-badge-secondary-bg: rgba($green-dark, $alpha-bg-low), - skill-badge-secondary-text: $text-aaa-dark, - // Changed from $green-lightest for AAA contrast - skill-badge-tertiary-bg: rgba($purple-dark, $alpha-bg-low), - skill-badge-tertiary-text: $text-aaa-dark, - // Changed from $purple-lighter for AAA contrast - skill-badge-quaternary-bg: rgba($orange-darker, $alpha-bg-low), - skill-badge-quaternary-text: $text-aaa-dark, + about-background: #0c447c, + gradient-about-title: #e6f1fb, + about-greeting-color: #e6f1fb, + gradient-image-overlay: rgba(230, 241, 251, 0.1), + // Skill badge colors (dark) + skill-badge-primary-bg: rgba(230, 241, 251, 0.15), + skill-badge-primary-text: #e6f1fb, + skill-badge-secondary-bg: rgba(230, 241, 251, 0.1), + skill-badge-secondary-text: #e6f1fb, + skill-badge-tertiary-bg: rgba(230, 241, 251, 0.15), + skill-badge-tertiary-text: #e6f1fb, + skill-badge-quaternary-bg: rgba(239, 159, 39, 0.15), + skill-badge-quaternary-text: #ef9f27, - // Changed from $orange-light for AAA contrast - // Feature card colors - Enhanced for better contrast - feature-card-primary-bg: - linear-gradient( - 135deg, - rgba($blue-dark, $alpha-bg-low), - rgba($blue-darker, $alpha-bg-low) - ), - feature-card-secondary-bg: - linear-gradient( - 135deg, - rgba($purple-dark, $alpha-bg-low), - rgba($purple-darker, $alpha-bg-low) - ), - feature-card-tertiary-bg: - linear-gradient( - 135deg, - rgba($teal-dark, $alpha-bg-low), - rgba($teal-darker, $alpha-bg-low) - ), - feature-icon-primary: $blue-light, - feature-icon-secondary: $purple-light, - feature-icon-tertiary: $teal-secondary, + // Feature card colors (dark) + feature-card-primary-bg: rgba(12, 68, 124, 0.8), + feature-card-secondary-bg: rgba(4, 44, 83, 0.9), + feature-card-tertiary-bg: rgba(12, 68, 124, 0.8), + feature-icon-primary: #ef9f27, + feature-icon-secondary: #ef9f27, + feature-icon-tertiary: #ef9f27, - // Text colors - FIXED for AAA contrast - feature-title-primary: $text-aaa-dark, - // Changed from $blue-lighter for AAA contrast - feature-title-secondary: $text-aaa-dark, - // Changed from $purple-lighter for AAA contrast - feature-title-tertiary: $text-aaa-dark, - - // Changed from $teal-light for AAA contrast - feature-description-primary: $text-aaa-dark, - // Changed from $blue-lightest for AAA contrast - feature-description-secondary: $text-aaa-dark, - // Changed from $purple-lightest for AAA contrast - feature-description-tertiary: $text-aaa-dark - // Changed from $teal-lightest for AAA contrast + feature-title-primary: #e6f1fb, + feature-title-secondary: #e6f1fb, + feature-title-tertiary: #e6f1fb, + feature-description-primary: #b5d4f4, + feature-description-secondary: #b5d4f4, + feature-description-tertiary: #b5d4f4, ); diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss index d8690d7..458bd40 100644 --- a/src/scss/themes/_base.scss +++ b/src/scss/themes/_base.scss @@ -3,13 +3,13 @@ // Base colors and variables that are used across sections $base-light-theme: ( - primary: #800000, - background: #ffffff, - text: #000000, - text-muted: #2b2b2b, - active-box-shadow: rgba(0, 0, 0, 0.6), - hover-box-shadow: rgba(0, 0, 0, 0.9), - gradient-primary: $gradient-primary, + primary: #042c53, + background: #f1efe8, + text: #1a1a1a, + text-muted: #412402, + active-box-shadow: rgba(4, 44, 83, 0.2), + hover-box-shadow: rgba(4, 44, 83, 0.15), + gradient-primary: #042c53, gradient-text: $gradient-text-light, // Shadow variables @@ -36,10 +36,10 @@ $base-light-theme: ( // Form and text variables form-background: #ffffff, - form-border: #e5e7eb, - text-primary: #111827, - text-secondary: #484c56, - primary-color: #9333ea, + form-border: rgba(4, 44, 83, 0.15), + text-primary: #1a1a1a, + text-secondary: #412402, + primary-color: #042c53, // Contact status colors (light theme) contact-status-success-bg: #d1fae5, @@ -50,25 +50,24 @@ $base-light-theme: ( contact-status-error-text: #991b1b, // Additional missing variables - box-shadow-hover: rgba(0, 0, 0, 0.15), + box-shadow-hover: rgba(4, 44, 83, 0.15), bg-primary: #ffffff, - bg-secondary: #f9fafb, - border-color: #e5e7eb, - + bg-secondary: #f1efe8, + border-color: rgba(4, 44, 83, 0.15), // Design system semantic tokens - surface: #f8fafc, - border: #e5e7eb, - secondary: #2563eb, + surface: #ffffff, + border: rgba(4, 44, 83, 0.15), + secondary: #0c447c, ); $base-dark-theme: ( - primary: #9333ea, - background: #1f2937, - text: #ffffff, - text-muted: #ffffff, - active-box-shadow: rgba(255, 255, 255, 0.1), - hover-box-shadow: rgba(255, 255, 255, 0.15), - gradient-primary: $gradient-primary, + primary: #e6f1fb, + background: #021829, + text: #e6f1fb, + text-muted: #b5d4f4, + active-box-shadow: rgba(230, 241, 251, 0.1), + hover-box-shadow: rgba(230, 241, 251, 0.15), + gradient-primary: #ef9f27, gradient-text: $gradient-text-dark, // Shadow variables @@ -93,30 +92,27 @@ $base-dark-theme: ( transition-fast: #{$transition-fast}, // Form and text variables (dark theme) - form-background: #374151, - form-border: #4b5563, - text-primary: #f9fafb, - text-secondary: #9ca3af, - primary-color: #9333ea, + form-background: #042c53, + form-border: rgba(230, 241, 251, 0.15), + text-primary: #e6f1fb, + text-secondary: #b5d4f4, + primary-color: #ef9f27, // Contact status colors (dark theme) - contact-status-success-bg: #064e3b, - contact-status-success-border: #059669, - contact-status-success-text: #a7f3d0, - contact-status-error-bg: #7f1d1d, + contact-status-success-bg: rgba(4, 44, 83, 0.5), + contact-status-success-border: #ef9f27, + contact-status-success-text: #fac775, + contact-status-error-bg: rgba(127, 29, 29, 0.3), contact-status-error-border: #dc2626, contact-status-error-text: #fecaca, // Additional missing variables (dark theme) - box-shadow-hover: rgba(255, 255, 255, 0.15), - bg-primary: #1f2937, - bg-secondary: #374151, - border-color: #4b5563, - + box-shadow-hover: rgba(239, 159, 39, 0.15), + bg-primary: #021829, + bg-secondary: #042c53, + border-color: rgba(230, 241, 251, 0.12), // Design system semantic tokens - // surface is a subtle step above background — not a stark jump. - // Kept close to background so dark sections feel like one canvas. - surface: #232f3e, - border: #374151, - secondary: #60a5fa, + surface: #042c53, + border: rgba(230, 241, 251, 0.12), + secondary: #b5d4f4, ); diff --git a/src/scss/themes/_certifications.scss b/src/scss/themes/_certifications.scss index 24cacf4..816367c 100644 --- a/src/scss/themes/_certifications.scss +++ b/src/scss/themes/_certifications.scss @@ -47,74 +47,39 @@ $text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds $certifications-light-theme: ( // Certifications section background - 'certifications-background': - linear-gradient(135deg, $cert-bg-light-start 0%, $cert-bg-light-end 100%), - 'gradient-certifications-title': - linear-gradient(to right, $purple-primary, $pink-primary), - 'color-certifications-primary': $purple-primary, + 'certifications-background': #f1efe8, + 'gradient-certifications-title': #042c53, + 'color-certifications-primary': #ef9f27, - // Card styling - 'certifications-card-background': - linear-gradient(135deg, $white 0%, $gray-50 100%), + 'certifications-card-background': #ffffff, 'certifications-card-shadow': $shadow-card-light, 'certifications-card-shadow-hover': $shadow-card-light-hover, - 'certifications-card-overlay': - linear-gradient( - 135deg, - rgba($purple-primary, $alpha-overlay-light) 0%, - rgba($pink-primary, $alpha-overlay-light) 100% - ), - // Badge styling - FIXED for AAA contrast - 'certifications-badge-background': - linear-gradient(to right, $purple-lightest, $pink-lightest), - 'certifications-badge-border': rgba($purple-primary, $alpha-border-light), - 'color-certifications-badge-text': $text-aaa-light, + 'certifications-card-overlay': rgba(4, 44, 83, 0.04), + 'certifications-badge-background': #e6f1fb, + 'certifications-badge-border': rgba(4, 44, 83, 0.15), + 'color-certifications-badge-text': #042c53, - // Changed from $purple-secondary for AAA contrast - // Text styling for AAA compliance - 'certifications-card-title': $text-aaa-light, - 'certifications-card-description': $text-aaa-light, - 'certifications-card-date': $text-aaa-light, - // Medium gray for secondary text + 'certifications-card-title': #042c53, + 'certifications-card-description': #1a1a1a, + 'certifications-card-date': #412402 ); $certifications-dark-theme: ( - // Certifications section background (dark purple/pink gradient) - 'certifications-background': - linear-gradient(135deg, $cert-bg-dark-start 0%, $cert-bg-dark-end 100%), - // Certifications title gradient (brighter purple to pink for dark mode) - 'gradient-certifications-title': - linear-gradient(to right, $purple-light, $pink-light), - // Primary color for icons (lighter purple) - 'color-certifications-primary': $purple-light, + 'certifications-background': #042c53, + 'gradient-certifications-title': #e6f1fb, + 'color-certifications-primary': #ef9f27, - // Card styling (dark theme) - 'certifications-card-background': - linear-gradient(135deg, $gray-900 0%, $gray-800 100%), + 'certifications-card-background': rgba(12, 68, 124, 0.6), 'certifications-card-shadow': $shadow-card-dark, 'certifications-card-shadow-hover': $shadow-card-dark-hover, - 'certifications-card-overlay': - linear-gradient( - 135deg, - rgba($purple-light, $alpha-overlay-dark) 0%, - rgba($pink-light, $alpha-overlay-dark) 100% - ), - // Badge styling (dark theme) - FIXED for AAA contrast - 'certifications-badge-background': - linear-gradient( - to right, - rgba($purple-dark, $alpha-border-dark), - rgba($pink-dark, $alpha-border-dark) - ), - 'certifications-badge-border': rgba($purple-light, $alpha-border-dark), - 'color-certifications-badge-text': $text-aaa-dark, + 'certifications-card-overlay': rgba(239, 159, 39, 0.04), + 'certifications-badge-background': rgba(239, 159, 39, 0.15), + 'certifications-badge-border': rgba(239, 159, 39, 0.3), + 'color-certifications-badge-text': #ef9f27, - // Changed from $purple-lighter for AAA contrast - // Text styling for AAA compliance - 'certifications-card-title': $text-aaa-dark, - 'certifications-card-description': $text-aaa-dark, - 'certifications-card-date': #d1d5db, - // Light gray for secondary text in dark mode + 'certifications-card-title': #e6f1fb, + 'certifications-card-description': #b5d4f4, + 'certifications-card-date': #b5d4f4, ); // Card layout styling diff --git a/src/scss/themes/_contact.scss b/src/scss/themes/_contact.scss index 8a7adc3..0df3373 100644 --- a/src/scss/themes/_contact.scss +++ b/src/scss/themes/_contact.scss @@ -72,148 +72,87 @@ $text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds $contact-light-theme: ( // Contact section background (light indigo/purple tones) - 'contact-background': - linear-gradient( - 135deg, - $contact-bg-light-start 0%, - $contact-bg-light-end 100% - ), - // Contact title gradient (indigo to purple) - 'gradient-contact-title': - linear-gradient(to right, $indigo-primary, $indigo-secondary), - // Primary color for icons (indigo) - 'color-contact-primary': $indigo-primary, + 'contact-background': #f1efe8, + 'gradient-contact-title': #042c53, + 'color-contact-primary': #042c53, - // Form styling - warm cream/peach to complement cool blue background - 'contact-form-bg': - linear-gradient(135deg, $orange-lightest 0%, $orange-lighter 100%), - 'contact-form-border': rgba($orange-primary, $alpha-border-light), + 'contact-form-bg': #ffffff, + 'contact-form-border': rgba(4, 44, 83, 0.15), 'contact-form-shadow': $shadow-light, - // Input styling - warm background to complement form - 'contact-input-bg': $amber-primary, - 'contact-input-border': rgba($orange-primary, $alpha-border-medium), - 'contact-input-focus-ring': rgba($orange-primary, $alpha-border-light), - 'contact-input-text': $text-aaa-light, - // Added for AAA compliance - 'contact-input-placeholder': $text-input-placeholder-light, + 'contact-input-bg': #f1efe8, + 'contact-input-border': rgba(4, 44, 83, 0.2), + 'contact-input-focus-ring': rgba(4, 44, 83, 0.3), + 'contact-input-text': #1a1a1a, + 'contact-input-placeholder': #412402, - // Added for form accessibility - // Button styling - improved contrast and readability - 'contact-button-bg': - linear-gradient(135deg, $blue-primary 0%, $blue-secondary 100%), - 'contact-button-text': $text-aaa-dark, - // Changed to ensure AAA contrast - 'contact-button-hover-bg': - linear-gradient(135deg, $blue-dark 0%, $blue-darker 100%), - // Social button styling - FIXED for AAA contrast - 'contact-social-bg': $orange-lighter, - 'contact-social-text': $text-aaa-light, - // Changed from $orange-dark for AAA contrast - 'contact-social-border': $orange-primary, - 'contact-social-hover-bg': $orange-light, - 'contact-social-hover-border': $orange-secondary, + 'contact-button-bg': #042c53, + 'contact-button-text': #e6f1fb, + 'contact-button-hover-bg': #0c447c, - // Status message styling (light theme) - improved readability - 'contact-status-success-bg': $green-lightest, - 'contact-status-success-border': $green-primary, - 'contact-status-success-text': $green-secondary, - 'contact-status-error-bg': $red-lightest, - 'contact-status-error-border': $red-primary, - 'contact-status-error-text': $red-secondary, + 'contact-social-bg': #f1efe8, + 'contact-social-text': #042c53, + 'contact-social-border': rgba(4, 44, 83, 0.15), + 'contact-social-hover-bg': #e6f1fb, + 'contact-social-hover-border': #0c447c, - // Text colors for AAA compliance - 'color-text': $text-aaa-light, - // Near black for AAA contrast - 'color-text-muted': $gray-neutral-light, - // Gray for secondary text - 'primary-color': $indigo-primary, - // Indigo primary - 'text-primary': $text-aaa-light, - // Main text color - 'text-secondary': $gray-neutral-light, + 'contact-status-success-bg': #d1fae5, + 'contact-status-success-border': #10b981, + 'contact-status-success-text': #065f46, + 'contact-status-error-bg': #fee2e2, + 'contact-status-error-border': #ef4444, + 'contact-status-error-text': #991b1b, - // Secondary text color - // Enhanced social button colors for AAA compliance - 'social-icon-email': $text-aaa-light, - // Dark for better contrast - 'social-icon-github': $text-aaa-light, - // Dark for better contrast - 'social-icon-linkedin': $text-aaa-light, - // Dark for better contrast + 'color-text': #1a1a1a, + 'color-text-muted': #412402, + 'primary-color': #042c53, + 'text-primary': #1a1a1a, + 'text-secondary': #412402, + + 'social-icon-email': #042c53, + 'social-icon-github': #042c53, + 'social-icon-linkedin': #042c53 ); $contact-dark-theme: ( - // Contact section background (dark indigo/purple tones) - 'contact-background': - linear-gradient( - 135deg, - rgba($indigo-light, $alpha-border-light) 0%, - rgba($purple-primary, $alpha-border-light) 100% - ), - // Contact title gradient (brighter indigo to purple for dark mode) - 'gradient-contact-title': - linear-gradient(to right, $indigo-light, $purple-primary), - // Primary color for icons (lighter indigo) - 'color-contact-primary': $indigo-light, + 'contact-background': #021829, + 'gradient-contact-title': #e6f1fb, + 'color-contact-primary': #ef9f27, - // Form styling (dark theme) - warm dark tones to complement cool purple/indigo - 'contact-form-bg': - linear-gradient(135deg, $orange-darkest 0%, $orange-darker 100%), - 'contact-form-border': rgba($orange-primary, $alpha-border-medium), + 'contact-form-bg': #042c53, + 'contact-form-border': rgba(230, 241, 251, 0.12), 'contact-form-shadow': $shadow-dark, - // Input styling (dark theme) - FIXED for AAA contrast - 'contact-input-bg': $gray-neutral-dark, - // Changed to neutral dark gray - 'contact-input-border': rgba($orange-primary, $alpha-border-heavy), - 'contact-input-focus-ring': rgba($orange-primary, $alpha-border-medium), - 'contact-input-text': $text-aaa-dark, - // White text for AAA contrast - 'contact-input-placeholder': $gray-neutral-lighter, + 'contact-input-bg': #042c53, + 'contact-input-border': rgba(230, 241, 251, 0.2), + 'contact-input-focus-ring': rgba(239, 159, 39, 0.3), + 'contact-input-text': #e6f1fb, + 'contact-input-placeholder': #b5d4f4, - // Light gray for placeholder - // Button styling (dark theme) - improved contrast - 'contact-button-bg': - linear-gradient(135deg, $blue-light 0%, $blue-primary 100%), - 'contact-button-text': $text-aaa-dark, - 'contact-button-hover-bg': - linear-gradient(135deg, $blue-lighter 0%, $blue-light 100%), - // Social button styling (dark theme) - FIXED for AAA contrast - 'contact-social-bg': $gray-neutral-medium, - // Changed to neutral dark background - 'contact-social-text': $text-aaa-dark, - // White text for AAA contrast - 'contact-social-border': $orange-secondary, - 'contact-social-hover-bg': $gray-neutral-dark, - // Slightly lighter on hover - 'contact-social-hover-border': $orange-primary, + 'contact-button-bg': #ef9f27, + 'contact-button-text': #042c53, + 'contact-button-hover-bg': #fac775, - // Status message styling (dark theme) - improved readability - 'contact-status-success-bg': rgba($green-primary, $alpha-low), - 'contact-status-success-border': $green-light, - 'contact-status-success-text': $green-lighter, - 'contact-status-error-bg': rgba($red-light, $alpha-low), - 'contact-status-error-border': $red-light, - 'contact-status-error-text': $red-lighter, + 'contact-social-bg': #042c53, + 'contact-social-text': #e6f1fb, + 'contact-social-border': rgba(239, 159, 39, 0.3), + 'contact-social-hover-bg': #0c447c, + 'contact-social-hover-border': #ef9f27, - // Text colors for AAA compliance - ALL WHITE in dark mode - 'color-text': $text-aaa-dark, - // White for AAA contrast on dark - 'color-text-muted': $text-aaa-dark, - // Changed to white for consistency - 'primary-color': $indigo-light, - // Lighter indigo for dark mode - 'text-primary': $text-aaa-dark, - // Main text color - 'text-secondary': $text-aaa-dark, - // Changed to white for consistency - // Secondary text color - // Enhanced social button colors for AAA compliance - 'social-icon-email': $text-aaa-dark, - // White for better contrast - 'social-icon-github': $text-aaa-dark, - // White for better contrast - 'social-icon-linkedin': $text-aaa-dark, - // White for better contrast + 'contact-status-success-bg': rgba(4, 44, 83, 0.5), + 'contact-status-success-border': #ef9f27, + 'contact-status-success-text': #fac775, + 'contact-status-error-bg': rgba(127, 29, 29, 0.3), + 'contact-status-error-border': #dc2626, + 'contact-status-error-text': #fecaca, + + 'color-text': #e6f1fb, + 'color-text-muted': #b5d4f4, + 'primary-color': #ef9f27, + 'text-primary': #e6f1fb, + 'text-secondary': #b5d4f4, + + 'social-icon-email': #e6f1fb, + 'social-icon-github': #e6f1fb, + 'social-icon-linkedin': #e6f1fb, ); diff --git a/src/scss/themes/_hero.scss b/src/scss/themes/_hero.scss index f4bad6d..08efca3 100644 --- a/src/scss/themes/_hero.scss +++ b/src/scss/themes/_hero.scss @@ -45,88 +45,41 @@ $text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds $text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds $hero-light-theme: ( - hero-background: - linear-gradient(135deg, $hero-bg-light-start 0%, $hero-bg-light-end 100%), - // Stat colors - FIXED for AAA contrast - stat-primary-bg: linear-gradient(135deg, $blue-lighter, $blue-lightest), - stat-primary-value: $text-aaa-light, - // Changed from $blue-primary for AAA contrast - stat-primary-label: $text-aaa-light, + hero-background: #f1efe8, + // Stat card backgrounds – flat brand tones + stat-primary-bg: #e6f1fb, + stat-primary-value: #042c53, + stat-primary-label: #042c53, - // Changed from $blue-secondary for AAA contrast - stat-secondary-bg: linear-gradient(135deg, $green-lighter, $green-lightest), - stat-secondary-value: $text-aaa-light, - // Changed from $green-primary for AAA contrast - stat-secondary-label: $text-aaa-light, + stat-secondary-bg: #f1efe8, + stat-secondary-value: #042c53, + stat-secondary-label: #042c53, - // Changed from $green-secondary for AAA contrast - stat-tertiary-bg: linear-gradient(135deg, $teal-lighter, $teal-lightest), - stat-tertiary-value: $text-aaa-light, - // Changed from $teal-primary for AAA contrast - stat-tertiary-label: $text-aaa-light, + stat-tertiary-bg: #e6f1fb, + stat-tertiary-value: #042c53, + stat-tertiary-label: #042c53, - // Changed from $teal-secondary for AAA contrast - stat-quaternary-bg: linear-gradient( - 135deg, - $purple-lighter, - $purple-lightest - ), - stat-quaternary-value: $text-aaa-light, - // Changed from $purple-primary for AAA contrast - stat-quaternary-label: $text-aaa-light, - // Changed from $purple-secondary for AAA contrast + stat-quaternary-bg: #faeeda, + stat-quaternary-value: #412402, + stat-quaternary-label: #412402, ); $hero-dark-theme: ( - hero-background: - linear-gradient( - 135deg, - rgba($blue-dark, $alpha-bg-low) 0%, - rgba($purple-dark, $alpha-bg-low) 50%, - rgba($purple-darker, $alpha-bg-low) 100% - ), - // Stat colors - Enhanced contrast for AAA compliance - stat-primary-bg: - linear-gradient( - 135deg, - rgba($blue-dark, $alpha-bg-low), - rgba($blue-darker, $alpha-bg-low) - ), - stat-primary-value: $text-aaa-dark, - // Changed from $blue-primary to white for AAA contrast - stat-primary-label: $text-aaa-dark, + hero-background: #042c53, + // Stat card backgrounds – flat brand tones for dark + stat-primary-bg: rgba(12, 68, 124, 0.6), + stat-primary-value: #e6f1fb, + stat-primary-label: #b5d4f4, - // Changed from $blue-light to white for better contrast - stat-secondary-bg: - linear-gradient( - 135deg, - rgba($green-dark, $alpha-bg-low), - rgba($green-darker, $alpha-bg-low) - ), - stat-secondary-value: $text-aaa-dark, - // Changed from $green-primary to white for AAA contrast - stat-secondary-label: $text-aaa-dark, + stat-secondary-bg: rgba(12, 68, 124, 0.4), + stat-secondary-value: #e6f1fb, + stat-secondary-label: #b5d4f4, - // Changed from $green-light to white for better contrast - stat-tertiary-bg: - linear-gradient( - 135deg, - rgba($teal-dark, $alpha-bg-low), - rgba($teal-darker, $alpha-bg-low) - ), - stat-tertiary-value: $text-aaa-dark, - // Changed from $teal-primary to white for AAA contrast - stat-tertiary-label: $text-aaa-dark, + stat-tertiary-bg: rgba(12, 68, 124, 0.6), + stat-tertiary-value: #e6f1fb, + stat-tertiary-label: #b5d4f4, - // Changed from $teal-light to white for better contrast - stat-quaternary-bg: - linear-gradient( - 135deg, - rgba($purple-dark, $alpha-bg-low), - rgba($purple-darker, $alpha-bg-low) - ), - stat-quaternary-value: $text-aaa-dark, - // Changed from $purple-primary to white for AAA contrast - stat-quaternary-label: $text-aaa-dark, - // Changed from $purple-light to white for better contrast + stat-quaternary-bg: rgba(239, 159, 39, 0.15), + stat-quaternary-value: #ef9f27, + stat-quaternary-label: #e6f1fb, ); diff --git a/src/scss/themes/_projects.scss b/src/scss/themes/_projects.scss index 85b53da..0186094 100644 --- a/src/scss/themes/_projects.scss +++ b/src/scss/themes/_projects.scss @@ -57,76 +57,43 @@ $text-aaa-dark: $white; // #ffffff - ensures AAA contrast on dark backgrounds $projects-light-theme: ( // Projects section background - 'projects-background': - linear-gradient(135deg, $bg-light-start 0%, $bg-light-end 100%), - // Projects title gradient - 'gradient-projects-title': - linear-gradient(to right, $orange-primary, $red-primary), - // Card styling - 'projects-card-background': - linear-gradient(135deg, $card-light-start 0%, $card-light-end 100%), - 'projects-card-border': rgba($orange-primary, $alpha-border-light), + 'projects-background': #ffffff, + 'gradient-projects-title': #042c53, + 'projects-card-background': #ffffff, + 'projects-card-border': rgba(4, 44, 83, 0.12), 'projects-card-shadow': $shadow-light, 'projects-card-shadow-hover': $shadow-light-hover, - // Overlay styling - 'projects-overlay-background': rgba($black, $alpha-overlay-light), - // Button styling - 'projects-button-primary-bg': - linear-gradient(135deg, $orange-primary 0%, $red-primary 100%), - 'projects-button-primary-text': $text-aaa-dark, - // Changed to ensure AAA contrast - 'projects-button-primary-border': rgba($orange-primary, $alpha-border-heavy), - 'projects-button-primary-hover-bg': - linear-gradient(135deg, $red-primary 0%, $red-secondary 100%), - 'projects-button-secondary-bg': $white, - 'projects-button-secondary-text': $text-aaa-light, - // Changed from $gray-800 for AAA compliance - 'projects-button-secondary-border': rgba($gray-300, $alpha-border-medium), - 'projects-button-secondary-hover-bg': $gray-50, - // Changed from $white for subtle hover effect - // Tech badge styling - FIXED for AAA contrast - 'projects-tech-badge-bg': $gray-100, - // Changed to solid light gray instead of gradient - 'projects-tech-badge-text': $text-aaa-light, - // Changed to dark text for AAA contrast - 'projects-tech-badge-border': rgba($orange-primary, $alpha-border-medium) + 'projects-overlay-background': rgba(0, 0, 0, 0.6), + 'projects-button-primary-bg': #042c53, + 'projects-button-primary-text': #e6f1fb, + 'projects-button-primary-border': rgba(4, 44, 83, 0.3), + 'projects-button-primary-hover-bg': #0c447c, + 'projects-button-secondary-bg': #ffffff, + 'projects-button-secondary-text': #042c53, + 'projects-button-secondary-border': rgba(4, 44, 83, 0.2), + 'projects-button-secondary-hover-bg': #f1efe8, + 'projects-tech-badge-bg': #f1efe8, + 'projects-tech-badge-text': #042c53, + 'projects-tech-badge-border': rgba(4, 44, 83, 0.15) ); $projects-dark-theme: ( - // Projects section background - using variables instead of hardcoded rgba - 'projects-background': - linear-gradient( - 135deg, - rgba($brown-primary, $alpha-border-medium) 0%, - rgba($brown-secondary, $alpha-border-medium) 100% - ), - // Projects title gradient - 'gradient-projects-title': - linear-gradient(to right, $orange-secondary, $red-light), - // Card styling - 'projects-card-background': - linear-gradient(135deg, $gray-900 0%, $gray-800 100%), - 'projects-card-border': rgba($orange-secondary, $alpha-border-medium), + 'projects-background': #0c447c, + 'gradient-projects-title': #e6f1fb, + 'projects-card-background': rgba(12, 68, 124, 0.6), + 'projects-card-border': rgba(230, 241, 251, 0.12), 'projects-card-shadow': $shadow-dark, 'projects-card-shadow-hover': $shadow-dark-hover, - // Overlay styling - 'projects-overlay-background': rgba($black, $alpha-overlay-dark), - // Button styling - 'projects-button-primary-bg': - linear-gradient(135deg, $orange-primary 0%, $red-primary 100%), - 'projects-button-primary-text': $text-aaa-dark, - 'projects-button-primary-border': rgba($orange-primary, $alpha-border-heavy), - 'projects-button-primary-hover-bg': - linear-gradient(135deg, $orange-secondary 0%, $red-light 100%), - 'projects-button-secondary-bg': rgba($gray-800, $alpha-bg-light), - 'projects-button-secondary-text': $text-aaa-dark, - // Changed from $gray-200 for AAA compliance - 'projects-button-secondary-border': rgba($gray-600, $alpha-border-heavy), - 'projects-button-secondary-hover-bg': $gray-700, - // Tech badge styling - FIXED for AAA contrast - 'projects-tech-badge-bg': $gray-800, - // Changed to solid dark background - 'projects-tech-badge-text': $text-aaa-dark, - // White text for AAA contrast - 'projects-tech-badge-border': rgba($orange-secondary, $alpha-border-heavy) + 'projects-overlay-background': rgba(0, 0, 0, 0.7), + 'projects-button-primary-bg': #ef9f27, + 'projects-button-primary-text': #042c53, + 'projects-button-primary-border': rgba(239, 159, 39, 0.3), + 'projects-button-primary-hover-bg': #ba7517, + 'projects-button-secondary-bg': rgba(12, 68, 124, 0.8), + 'projects-button-secondary-text': #e6f1fb, + 'projects-button-secondary-border': rgba(230, 241, 251, 0.3), + 'projects-button-secondary-hover-bg': rgba(4, 44, 83, 0.9), + 'projects-tech-badge-bg': rgba(4, 44, 83, 0.8), + 'projects-tech-badge-text': #e6f1fb, + 'projects-tech-badge-border': rgba(230, 241, 251, 0.2), ); diff --git a/src/scss/themes/_services.scss b/src/scss/themes/_services.scss index 3f76b04..2f57746 100644 --- a/src/scss/themes/_services.scss +++ b/src/scss/themes/_services.scss @@ -148,77 +148,66 @@ $dark-senary-title: #fca5a5; // Medium red // ================================ $services-light-theme: ( - // Section backgrounds - services-background: $light-services-bg, - gradient-services-title: $light-title-gradient, + services-background: #f1efe8, + gradient-services-title: #042c53, - // Card backgrounds - service-card-primary-bg: $light-card-primary-bg, - service-card-secondary-bg: $light-card-secondary-bg, - service-card-tertiary-bg: $light-card-tertiary-bg, - service-card-quaternary-bg: $light-card-quaternary-bg, - service-card-quinary-bg: $light-card-quinary-bg, - service-card-senary-bg: $light-card-senary-bg, + service-card-primary-bg: #ffffff, + service-card-secondary-bg: #f1efe8, + service-card-tertiary-bg: #ffffff, + service-card-quaternary-bg: #f1efe8, + service-card-quinary-bg: #ffffff, + service-card-senary-bg: #f1efe8, - // Icons - using same color for consistency - service-icon-primary: $light-text-primary, - service-icon-secondary: $light-text-primary, - service-icon-tertiary: $light-text-primary, - service-icon-quaternary: $light-text-primary, - service-icon-quinary: $light-text-primary, - service-icon-senary: $light-text-primary, + service-icon-primary: #ef9f27, + service-icon-secondary: #ef9f27, + service-icon-tertiary: #ef9f27, + service-icon-quaternary: #ef9f27, + service-icon-quinary: #ef9f27, + service-icon-senary: #ef9f27, - // Titles - using same color as icons - service-title-primary: $light-text-primary, - service-title-secondary: $light-text-primary, - service-title-tertiary: $light-text-primary, - service-title-quaternary: $light-text-primary, - service-title-quinary: $light-text-primary, - service-title-senary: $light-text-primary, + service-title-primary: #042c53, + service-title-secondary: #042c53, + service-title-tertiary: #042c53, + service-title-quaternary: #042c53, + service-title-quinary: #042c53, + service-title-senary: #042c53, - // Descriptions - using same color as icons and titles - service-description-primary: $light-text-primary, - service-description-secondary: $light-text-primary, - service-description-tertiary: $light-text-primary, - service-description-quaternary: $light-text-primary, - service-description-quinary: $light-text-primary, - service-description-senary: $light-text-primary + service-description-primary: #1a1a1a, + service-description-secondary: #1a1a1a, + service-description-tertiary: #1a1a1a, + service-description-quaternary: #1a1a1a, + service-description-quinary: #1a1a1a, + service-description-senary: #1a1a1a, ); $services-dark-theme: ( - // Section backgrounds - services-background: $dark-services-bg, - gradient-services-title: $dark-title-gradient, + services-background: #042c53, + gradient-services-title: #e6f1fb, - // Card backgrounds - service-card-primary-bg: $dark-card-primary-bg, - service-card-secondary-bg: $dark-card-secondary-bg, - service-card-tertiary-bg: $dark-card-tertiary-bg, - service-card-quaternary-bg: $dark-card-quaternary-bg, - service-card-quinary-bg: $dark-card-quinary-bg, - service-card-senary-bg: $dark-card-senary-bg, + service-card-primary-bg: rgba(12, 68, 124, 0.6), + service-card-secondary-bg: rgba(4, 44, 83, 0.8), + service-card-tertiary-bg: rgba(12, 68, 124, 0.6), + service-card-quaternary-bg: rgba(4, 44, 83, 0.8), + service-card-quinary-bg: rgba(12, 68, 124, 0.6), + service-card-senary-bg: rgba(4, 44, 83, 0.8), + service-icon-primary: #ef9f27, + service-icon-secondary: #ef9f27, + service-icon-tertiary: #ef9f27, + service-icon-quaternary: #ef9f27, + service-icon-quinary: #ef9f27, + service-icon-senary: #ef9f27, - // Icons - all using pure white - service-icon-primary: #ffffff, - service-icon-secondary: #ffffff, - service-icon-tertiary: #ffffff, - service-icon-quaternary: #ffffff, - service-icon-quinary: #ffffff, - service-icon-senary: #ffffff, + service-title-primary: #e6f1fb, + service-title-secondary: #e6f1fb, + service-title-tertiary: #e6f1fb, + service-title-quaternary: #e6f1fb, + service-title-quinary: #e6f1fb, + service-title-senary: #e6f1fb, - // Titles - all using pure white - service-title-primary: #ffffff, - service-title-secondary: #ffffff, - service-title-tertiary: #ffffff, - service-title-quaternary: #ffffff, - service-title-quinary: #ffffff, - service-title-senary: #ffffff, - - // Descriptions - all using pure white - service-description-primary: #ffffff, - service-description-secondary: #ffffff, - service-description-tertiary: #ffffff, - service-description-quaternary: #ffffff, - service-description-quinary: #ffffff, - service-description-senary: #ffffff + service-description-primary: #b5d4f4, + service-description-secondary: #b5d4f4, + service-description-tertiary: #b5d4f4, + service-description-quaternary: #b5d4f4, + service-description-quinary: #b5d4f4, + service-description-senary: #b5d4f4, ); diff --git a/src/scss/themes/_skills.scss b/src/scss/themes/_skills.scss index c34f5f8..ceb0189 100644 --- a/src/scss/themes/_skills.scss +++ b/src/scss/themes/_skills.scss @@ -52,245 +52,99 @@ $alpha-bg-card-strong: 0.95; $skills-light-theme: ( // Skills section colors - skills-background: linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%), - skills-background-pattern: - radial-gradient(circle at 25% 25%, $blue-primary, transparent 50%), - gradient-skills-title: - linear-gradient(90deg, $blue-tertiary, $blue-primary, $green-primary), - skills-category-bg: rgba($slate-50, $alpha-bg), - skills-category-border: rgba($slate-400, $alpha-medium), - skills-category-title-color: $slate-800, - skills-skill-name-color: $slate-700, - skills-skill-level-color: $slate-900, - skills-skill-percentage-color: $slate-600, - skills-progress-bg: rgba($slate-200, $alpha-bg-card), - // Card 1 - Web Frameworks (Blue theme) - skills-category-bg-primary: - linear-gradient( - 135deg, - rgba(239, 246, 255, $alpha-bg-card-alt), - rgba(219, 234, 254, $alpha-bg-card-strong) - ), - skills-category-border-primary: rgba($blue-primary, $alpha-medium), - skills-gradient-primary: - linear-gradient( - 135deg, - rgba($blue-primary, $alpha-light), - rgba($blue-secondary, 0.05) - ), - skills-accent-primary: $blue-primary, + skills-background: #ffffff, + skills-background-pattern: none, + gradient-skills-title: #042c53, + skills-category-bg: #ffffff, + skills-category-border: rgba(4, 44, 83, 0.12), + skills-category-title-color: #042c53, + skills-skill-name-color: #1a1a1a, + skills-skill-level-color: #1a1a1a, + skills-skill-percentage-color: #412402, + skills-progress-bg: rgba(4, 44, 83, 0.06), + skills-category-bg-primary: #ffffff, + skills-category-border-primary: rgba(4, 44, 83, 0.12), + skills-gradient-primary: transparent, + skills-accent-primary: #042c53, - // Card 2 - Styling & Design (Green theme) - skills-category-bg-secondary: - linear-gradient( - 135deg, - rgba(236, 253, 245, $alpha-bg-card-alt), - rgba(209, 250, 229, $alpha-bg-card-strong) - ), - skills-category-border-secondary: rgba($green-primary, $alpha-medium), - skills-gradient-secondary: - linear-gradient( - 135deg, - rgba($green-primary, $alpha-light), - rgba($green-secondary, 0.05) - ), - skills-accent-secondary: $green-primary, + skills-category-bg-secondary: #f1efe8, + skills-category-border-secondary: rgba(4, 44, 83, 0.12), + skills-gradient-secondary: transparent, + skills-accent-secondary: #042c53, - // Card 3 - Backend Development (Purple theme) - skills-category-bg-tertiary: - linear-gradient( - 135deg, - rgba(245, 243, 255, $alpha-bg-card-alt), - rgba(237, 233, 254, $alpha-bg-card-strong) - ), - skills-category-border-tertiary: rgba($purple-primary, $alpha-medium), - skills-gradient-tertiary: - linear-gradient( - 135deg, - rgba($purple-primary, $alpha-light), - rgba($purple-secondary, 0.05) - ), - skills-accent-tertiary: $purple-primary, + skills-category-bg-tertiary: #ffffff, + skills-category-border-tertiary: rgba(4, 44, 83, 0.12), + skills-gradient-tertiary: transparent, + skills-accent-tertiary: #042c53, - // Card 4 - Development Tools (Teal theme) - skills-category-bg-quaternary: - linear-gradient( - 135deg, - rgba(240, 253, 250, $alpha-bg-card-alt), - rgba(204, 251, 241, $alpha-bg-card-strong) - ), - skills-category-border-quaternary: rgba($teal-primary, $alpha-medium), - skills-gradient-quaternary: - linear-gradient( - 135deg, - rgba($teal-primary, $alpha-light), - rgba($teal-secondary, 0.05) - ), - skills-accent-quaternary: $teal-primary, + skills-category-bg-quaternary: #f1efe8, + skills-category-border-quaternary: rgba(4, 44, 83, 0.12), + skills-gradient-quaternary: transparent, + skills-accent-quaternary: #042c53, - // Card 5 - Testing & Quality (Orange theme) - skills-category-bg-quinary: - linear-gradient( - 135deg, - rgba(255, 251, 235, $alpha-bg-card-alt), - rgba(254, 243, 199, $alpha-bg-card-strong) - ), - skills-category-border-quinary: rgba($orange-primary, $alpha-medium), - skills-gradient-quinary: - linear-gradient( - 135deg, - rgba($orange-primary, $alpha-light), - rgba($orange-secondary, 0.05) - ), - skills-accent-quinary: $orange-primary, + skills-category-bg-quinary: #ffffff, + skills-category-border-quinary: rgba(4, 44, 83, 0.12), + skills-gradient-quinary: transparent, + skills-accent-quinary: #042c53, - // Card 6 - AI-Tools (Indigo theme) - skills-category-bg-senary: - linear-gradient( - 135deg, - rgba(238, 242, 255, $alpha-bg-card-alt), - rgba(224, 231, 255, $alpha-bg-card-strong) - ), - skills-category-border-senary: rgba($indigo-primary, $alpha-medium), - skills-gradient-senary: - linear-gradient( - 135deg, - rgba($indigo-primary, $alpha-light), - rgba($indigo-secondary, 0.05) - ), - skills-accent-senary: $indigo-primary, + skills-category-bg-senary: #f1efe8, + skills-category-border-senary: rgba(4, 44, 83, 0.12), + skills-gradient-senary: transparent, + skills-accent-senary: #042c53, - // Progress bar gradients - skills-progress-primary: - linear-gradient(90deg, $blue-primary, $blue-secondary, $blue-tertiary), - skills-progress-secondary: - linear-gradient(90deg, $green-primary, $green-secondary, $green-tertiary), - skills-progress-tertiary: - linear-gradient(90deg, $purple-primary, $purple-tertiary, $purple-secondary), - skills-progress-quaternary: - linear-gradient(90deg, $teal-primary, $teal-secondary, $teal-tertiary), - skills-progress-quinary: - linear-gradient(90deg, $orange-primary, $orange-secondary, $orange-tertiary), - skills-progress-senary: - linear-gradient(90deg, $indigo-primary, $indigo-secondary, $indigo-tertiary) + skills-progress-primary: #042c53, + skills-progress-secondary: #042c53, + skills-progress-tertiary: #042c53, + skills-progress-quaternary: #042c53, + skills-progress-quinary: #042c53, + skills-progress-senary: #042c53 ); $skills-dark-theme: ( - // Skills section colors - skills-background: linear-gradient(135deg, $slate-800 0%, #0ea5e9 100%), - skills-background-pattern: - radial-gradient(circle at 25% 25%, $blue-tertiary, transparent 50%), - gradient-skills-title: - linear-gradient(90deg, $blue-light, $green-light, $purple-light), - skills-category-bg: rgba($slate-800, $alpha-bg-card), - skills-category-border: rgba($slate-600, $alpha-heavy), - skills-category-title-color: #ffffff, - skills-skill-name-color: #ffffff, - skills-skill-level-color: #ffffff, - skills-skill-percentage-color: #ffffff, - skills-progress-bg: rgba($slate-700, $alpha-bg-card), - // Dark theme card backgrounds - skills-category-bg-primary: - linear-gradient( - 135deg, - rgba(30, 58, 138, 0.4), - rgba(29, 78, 216, $alpha-heavy) - ), - skills-category-border-primary: rgba($blue-light, $alpha-heavy), - skills-gradient-primary: - linear-gradient( - 135deg, - rgba($blue-light, $alpha-light), - rgba($blue-primary, 0.05) - ), - skills-accent-primary: $blue-light, + skills-background: #0c447c, + skills-background-pattern: none, + gradient-skills-title: #e6f1fb, + skills-category-bg: rgba(12, 68, 124, 0.6), + skills-category-border: rgba(230, 241, 251, 0.12), + skills-category-title-color: #e6f1fb, + skills-skill-name-color: #e6f1fb, + skills-skill-level-color: #e6f1fb, + skills-skill-percentage-color: #b5d4f4, + skills-progress-bg: rgba(230, 241, 251, 0.1), + skills-category-bg-primary: rgba(12, 68, 124, 0.6), + skills-category-border-primary: rgba(230, 241, 251, 0.12), + skills-gradient-primary: transparent, + skills-accent-primary: #ef9f27, - skills-category-bg-secondary: - linear-gradient( - 135deg, - rgba(6, 95, 70, 0.4), - rgba(4, 120, 87, $alpha-heavy) - ), - skills-category-border-secondary: rgba($green-light, $alpha-heavy), - skills-gradient-secondary: - linear-gradient( - 135deg, - rgba($green-light, $alpha-light), - rgba($green-primary, 0.05) - ), - skills-accent-secondary: $green-light, + skills-category-bg-secondary: rgba(4, 44, 83, 0.8), + skills-category-border-secondary: rgba(230, 241, 251, 0.12), + skills-gradient-secondary: transparent, + skills-accent-secondary: #ef9f27, - skills-category-bg-tertiary: - linear-gradient( - 135deg, - rgba(88, 28, 135, 0.4), - rgba(109, 40, 217, $alpha-heavy) - ), - skills-category-border-tertiary: rgba($purple-light, $alpha-heavy), - skills-gradient-tertiary: - linear-gradient( - 135deg, - rgba($purple-light, $alpha-light), - rgba($purple-primary, 0.05) - ), - skills-accent-tertiary: $purple-light, + skills-category-bg-tertiary: rgba(12, 68, 124, 0.6), + skills-category-border-tertiary: rgba(230, 241, 251, 0.12), + skills-gradient-tertiary: transparent, + skills-accent-tertiary: #ef9f27, - skills-category-bg-quaternary: - linear-gradient( - 135deg, - rgba(15, 118, 110, 0.4), - rgba(17, 94, 89, $alpha-heavy) - ), - skills-category-border-quaternary: rgba($teal-light, $alpha-heavy), - skills-gradient-quaternary: - linear-gradient( - 135deg, - rgba($teal-light, $alpha-light), - rgba($teal-primary, 0.05) - ), - skills-accent-quaternary: $teal-light, + skills-category-bg-quaternary: rgba(4, 44, 83, 0.8), + skills-category-border-quaternary: rgba(230, 241, 251, 0.12), + skills-gradient-quaternary: transparent, + skills-accent-quaternary: #ef9f27, - skills-category-bg-quinary: - linear-gradient( - 135deg, - rgba(180, 83, 9, 0.4), - rgba(217, 119, 6, $alpha-heavy) - ), - skills-category-border-quinary: rgba($orange-light, $alpha-heavy), - skills-gradient-quinary: - linear-gradient( - 135deg, - rgba($orange-light, $alpha-light), - rgba($orange-primary, 0.05) - ), - skills-accent-quinary: $orange-light, + skills-category-bg-quinary: rgba(12, 68, 124, 0.6), + skills-category-border-quinary: rgba(230, 241, 251, 0.12), + skills-gradient-quinary: transparent, + skills-accent-quinary: #ef9f27, - skills-category-bg-senary: - linear-gradient( - 135deg, - rgba(67, 56, 202, 0.4), - rgba(79, 70, 229, $alpha-heavy) - ), - skills-category-border-senary: rgba($indigo-light, $alpha-heavy), - skills-gradient-senary: - linear-gradient( - 135deg, - rgba($indigo-light, $alpha-light), - rgba($indigo-primary, 0.05) - ), - skills-accent-senary: $indigo-light, + skills-category-bg-senary: rgba(4, 44, 83, 0.8), + skills-category-border-senary: rgba(230, 241, 251, 0.12), + skills-gradient-senary: transparent, + skills-accent-senary: #ef9f27, - // Progress bars for dark theme - skills-progress-primary: - linear-gradient(90deg, $blue-light, $blue-primary, $blue-secondary), - skills-progress-secondary: - linear-gradient(90deg, $green-light, $green-primary, $green-secondary), - skills-progress-tertiary: - linear-gradient(90deg, $purple-light, $purple-primary, $purple-tertiary), - skills-progress-quaternary: - linear-gradient(90deg, $teal-light, $teal-primary, $teal-secondary), - skills-progress-quinary: - linear-gradient(90deg, $orange-light, $orange-primary, $orange-secondary), - skills-progress-senary: - linear-gradient(90deg, $indigo-light, $indigo-primary, $indigo-secondary) + skills-progress-primary: #ef9f27, + skills-progress-secondary: #ef9f27, + skills-progress-tertiary: #ef9f27, + skills-progress-quaternary: #ef9f27, + skills-progress-quinary: #ef9f27, + skills-progress-senary: #ef9f27, ); diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 70a43f1..2a5db6e 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -3,9 +3,9 @@ $mobile-breakpoint: 768px; $desktop-breakpoint: 769px; // Color variables -$color-primary: #9333ea; -$color-secondary: #2563eb; -$color-heading: #0f4d46; +$color-primary: #042c53; +$color-secondary: #0c447c; +$color-heading: #042c53; // Shadow variables $shadow-sm: 0 4px 12px; @@ -63,22 +63,17 @@ $shadow-button: 0 2px 4px -1px rgba(0, 0, 0, 0.06); // Gradient variables -$gradient-primary: linear-gradient( - 90deg, - $color-secondary 0%, - $color-primary 100% -); +$gradient-primary: #042c53; -// Light theme gradient (keep original) +// Light theme gradient $gradient-text-light: linear-gradient( to right, $color-secondary, - $color-primary, - #0d9488 + $color-primary ); -// Dark theme gradient (white to light purple for hero title) -$gradient-text-dark: linear-gradient(to right, #ffffff, #c4b5fd, #a78bfa); +// Dark theme gradient +$gradient-text-dark: linear-gradient(to right, #e6f1fb, #b5d4f4); // Default gradient for backwards compatibility $gradient-text: $gradient-text-light;