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

Refactor theme styles for improved accessibility and consistency 

- Updated light and dark themes across contact, hero, projects, services, skills SCSS files to enhance color contrast for better readability.
- Replaced gradients with solid colors where necessary to ensure AAA compliance.
- Adjusted button and text colors for improved visibility and user experience.
- Introduced a new logo SVG asset for branding consistency.
- Modified global color variables to align with the new design scheme.
This commit is contained in:
Sascha 2026-04-16 21:19:03 +02:00
parent 0f4a379716
commit ed093e8027
28 changed files with 916 additions and 1050 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/logo.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="640" height="120">
<defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&amp;display=swap');
</style>
</defs>
<rect x="12" y="10" width="20" height="36" rx="2" fill="none" stroke="#E6F1FB" stroke-width="2.5"/>
<rect x="21" y="10" width="11" height="36" rx="1.5" fill="#E6F1FB"/>
<circle cx="19.5" cy="28" r="2" fill="#EF9F27"/>
<text x="42" y="29" font-family="Comfortaa, Georgia, serif" font-size="24" font-weight="600" fill="#E6F1FB">Sascha Bach</text>
<text x="43" y="46" font-family="Comfortaa, Arial, sans-serif" font-size="8.5" font-weight="600" fill="#FAC775" letter-spacing="1.8">BARRIEREFREIE WEBENTWICKLUNG</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 763 B

3
src/components/layout/Navigation.tsx
View File

@ -4,6 +4,7 @@ import ThemeToggle from '../ThemeToggle';
import LanguageToggle from '../LanguageToggle'; import LanguageToggle from '../LanguageToggle';
import MobileMenu from './MobileMenu'; import MobileMenu from './MobileMenu';
import { personalConfig } from '../../config/personal'; import { personalConfig } from '../../config/personal';
import logoUrl from '../../assets/logo.svg';
import { useLanguage } from '../../contexts/LanguageContext'; import { useLanguage } from '../../contexts/LanguageContext';
import { scrollToSection } from '../../utils/scrollUtils'; import { scrollToSection } from '../../utils/scrollUtils';
import type { Theme } from '../../data/types'; import type { Theme } from '../../data/types';
@ -74,7 +75,7 @@ export default function Navbar({
window.scrollTo({ top: 0, behavior: 'smooth' }); window.scrollTo({ top: 0, behavior: 'smooth' });
}} }}
> >
{personalConfig.name} <img src={logoUrl} alt={texts.navigation.logoAlt} className="navbar__logo" />
</Link> </Link>
<div className="navbar__container"> <div className="navbar__container">
{menuItems.map((item) => ( {menuItems.map((item) => (

1
src/config/locales/de/navigation.ts
View File

@ -17,4 +17,5 @@ export const navigation = {
{ section: 'Contact', label: 'Kontakt' }, { section: 'Contact', label: 'Kontakt' },
], ],
mobileMenuAriaLabel: 'Menü öffnen', mobileMenuAriaLabel: 'Menü öffnen',
logoAlt: 'Sascha Bach – Barrierefreie Webentwicklung',
}; };

1
src/config/locales/en/TextConfig.ts
View File

@ -6,6 +6,7 @@ export interface TextConfig {
menuItems: MenuItem[]; menuItems: MenuItem[];
landingMenuItems: MenuItem[]; landingMenuItems: MenuItem[];
mobileMenuAriaLabel: string; mobileMenuAriaLabel: string;
logoAlt: string;
}; };
// Theme Toggle // Theme Toggle

3
src/config/locales/en/navigation.ts
View File

@ -16,5 +16,6 @@ export const navigation = {
{ section: 'References', label: 'References' }, { section: 'References', label: 'References' },
{ section: 'Contact', label: 'Contact' }, { section: 'Contact', label: 'Contact' },
], ],
mobileMenuAriaLabel: 'Menü öffnen', mobileMenuAriaLabel: 'Open menu',
logoAlt: 'Sascha Bach – Accessible Web Development',
}; };

32
src/hooks/useScrollReveal.ts
View File

@ -5,9 +5,8 @@ import { useEffect, useRef } from 'react';
* `.is-visible` when they enter the viewport, triggering the CSS transition * `.is-visible` when they enter the viewport, triggering the CSS transition
* defined in globals.scss. * defined in globals.scss.
* *
* The observer only starts after the first user interaction (scroll, keydown, * The observer starts immediately so that elements already in the viewport
* or pointer event), so elements already in the viewport on load stay hidden * become visible right away — including after language-change remounts.
* until the user actually engages with the page.
*/ */
export function useScrollReveal() { export function useScrollReveal() {
const ref = useRef<HTMLElement>(null); const ref = useRef<HTMLElement>(null);
@ -16,17 +15,12 @@ export function useScrollReveal() {
const container = ref.current; const container = ref.current;
if (!container) return; if (!container) return;
let observer: IntersectionObserver | null = null; const observer = new IntersectionObserver(
const startObserving = () => {
if (observer) return; // already started
observer = new IntersectionObserver(
(entries) => { (entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
entry.target.classList.add('is-visible'); entry.target.classList.add('is-visible');
observer!.unobserve(entry.target); observer.unobserve(entry.target);
} }
}); });
}, },
@ -34,24 +28,10 @@ export function useScrollReveal() {
); );
const items = container.querySelectorAll('.reveal-item'); const items = container.querySelectorAll('.reveal-item');
items.forEach((el) => observer!.observe(el)); 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 })
);
return () => { return () => {
observer?.disconnect(); observer.disconnect();
INTERACTION_EVENTS.forEach((event) =>
window.removeEventListener(event, startObserving, { capture: true })
);
}; };
}, []); }, []);

340
src/scss/App.scss
View File

@ -12,8 +12,7 @@
// Component styles // Component styles
@use 'components/back-to-top'; @use 'components/back-to-top';
// Import Geist font from Google Fonts or local files @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&family=Quicksand:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap');
// CSS Reset - Add this // CSS Reset - Add this
* { * {
@ -69,115 +68,292 @@
--radius-lg: 0.75rem; --radius-lg: 0.75rem;
--radius-xl: 1rem; --radius-xl: 1rem;
// Shadows (light) // Shadows (light) – brand-tinted
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-xs: 0 1px 2px rgba(4, 44, 83, 0.05);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-sm: 0 2px 8px rgba(4, 44, 83, 0.08);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(4, 44, 83, 0.08);
--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-hover: 0 8px 24px rgba(4, 44, 83, 0.12);
// Transitions // Transitions
--transition-fast: 150ms ease; --transition-fast: 150ms ease;
--transition-base: 200ms ease; --transition-base: 200ms ease;
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
// Landing section background gradients (light) – vivid & saturated // Brand accent & text-on-dark
--bg-reasons: linear-gradient(160deg, #dbeafe 0%, #ede9fe 100%); --color-accent-text: #412402;
--bg-winnings: linear-gradient(160deg, #ede9fe 0%, #e0e7ff 100%); --color-accent-deco: #ef9f27;
--bg-experience: linear-gradient(160deg, #e0f2fe 0%, #ede9fe 100%); --color-text-on-dark: #e6f1fb;
--bg-processes: linear-gradient(160deg, #e0e7ff 0%, #dbeafe 100%); --font-headline: 'Comfortaa', sans-serif;
--bg-references: linear-gradient(160deg, #ede9fe 0%, #dbeafe 100%); --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) // Reused section backgrounds (light)
--about-background: linear-gradient(160deg, #f0f9ff 0%, #dbeafe 100%); --about-background: #ffffff;
--projects-background: linear-gradient(160deg, #dbeafe 0%, #ede9fe 100%); --projects-background: #ffffff;
--contact-background: linear-gradient(160deg, #ede9fe 0%, #e0f2fe 100%); --contact-background: #f1efe8;
// Tech section backgrounds (light) // Tech section backgrounds (light)
--hero-background: linear-gradient( --hero-background: #f1efe8;
160deg, --services-background: #f1efe8;
#f8faff 0%, --skills-background: #ffffff;
#f1f3ff 50%, --certifications-background: #f1efe8;
#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%
);
// Glassmorphism card tokens (light) // Card tokens (light)
--card-glass-bg: rgba(255, 255, 255, 0.65); --card-glass-bg: #ffffff;
--card-glass-border: rgba(255, 255, 255, 0.9); --card-glass-border: rgba(4, 44, 83, 0.12);
// Glow shadows (light) // Functional shadows
--shadow-glow: --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: --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 // Dark theme + shadow overrides
[data-theme='dark'] { [data-theme='dark'] {
@include t.theme-vars(t.$dark-theme); @include t.theme-vars(t.$dark-theme);
--shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3); // Core colors
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --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-md: 0 4px 16px rgba(0, 0, 0, 0.4);
--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5); --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: --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: --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 { body {
font-family: font-family: 'Quicksand', sans-serif;
'Geist', font-weight: 400;
system-ui, font-size: 1rem;
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
sans-serif;
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-text); color: var(--color-text);
margin: 0; // Explicitly remove body margin margin: 0;
padding: 0; // Explicitly remove body padding padding: 0;
}
h1,
h2,
h3,
h4 {
font-family: 'Comfortaa', sans-serif;
font-weight: 600;
color: var(--color-primary);
} }
section { section {

2
src/scss/components/back-to-top.scss
View File

@ -9,7 +9,7 @@
height: 3rem; height: 3rem;
border-radius: 50%; border-radius: 50%;
background: var(--color-primary); background: var(--color-primary);
color: #000000; color: var(--color-text-on-dark); // #E6F1FB – white on dark navy
border: none; border: none;
cursor: pointer; cursor: pointer;
display: flex; display: flex;

30
src/scss/globals.scss
View File

@ -5,21 +5,25 @@
// Global CSS custom properties for accessibility // Global CSS custom properties for accessibility
:root { :root {
--color-primary: #2563eb; --color-primary: #042c53;
--color-secondary: #60a5fa; --color-secondary: #0c447c;
--color-focus-ring: #2563eb; --color-accent-text: #412402;
--color-text-aaa-light: #111827; --color-accent-deco: #ef9f27;
--color-text-aaa-dark: #ffffff; --color-text-on-dark: #e6f1fb;
--box-shadow-hover: rgba(0, 0, 0, 0.15); --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) { // Dark mode is controlled via [data-theme='dark'] attribute on <html>.
:root { // OS-level prefers-color-scheme is intentionally NOT used here to avoid
--color-primary: #60a5fa; // --color-primary flipping to #E6F1FB, which breaks the always-dark navbar.
--color-secondary: #93c5fd;
--color-focus-ring: #60a5fa;
}
}
// Screen Reader Only Classes - Central Definition // Screen Reader Only Classes - Central Definition
.sr-only { .sr-only {

19
src/scss/language-toggle.scss
View File

@ -5,7 +5,7 @@
display: flex; display: flex;
gap: 0.25rem; gap: 0.25rem;
background: transparent; 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; border-radius: $border-radius-sm;
padding: 0.25rem; padding: 0.25rem;
@ -16,33 +16,32 @@
border: none; border: none;
border-radius: 0.25rem; border-radius: 0.25rem;
background: transparent; background: transparent;
color: var(--color-text); color: var(--color-text-on-dark); // #E6F1FB – 10:1 on #042C53 navbar
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@extend %hover-lift;
&:hover { &:hover {
color: var(--color-text); background: rgba(230, 241, 251, 0.1);
color: var(--color-text-on-dark);
} }
&:focus { &:focus {
outline: 2px solid var(--color-primary); outline: 2px solid var(--color-accent-deco); // ochre – always visible on dark
outline-offset: 2px; outline-offset: 2px;
} }
&:active { &:active {
box-shadow: 0 2px 4px var(--box-shadow-active);
transform: translateY(0); transform: translateY(0);
} }
&--active { &--active {
background: var(--color-primary); background: var(--color-text-on-dark); // #E6F1FB bg → 10:1 contrast
color: #000000; color: #042c53; // night-blue text on light bg → AAA
font-weight: 600; font-weight: 600;
&:hover { &:hover {
background: var(--color-primary); background: var(--color-text-on-dark);
color: #000000; color: #042c53;
} }
} }
} }

34
src/scss/layout/footer.scss
View File

@ -2,18 +2,17 @@
@use '../variables'; @use '../variables';
.footer { .footer {
background-color: var(--color-background-muted); background-color: var(--color-surface);
margin-top: auto; // Push footer to bottom if using flexbox layout border-top: 1px solid var(--color-border);
margin-top: auto;
&__container { &__container {
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 2rem 1rem 1.5rem;
} }
&__separator { &__separator {
height: 1px; display: none; // border-top on .footer replaces this
background-color: var(--color-border);
margin-bottom: 2rem;
} }
&__content { &__content {
@ -38,7 +37,7 @@
} }
&__link { &__link {
color: var(--color-text-muted); color: var(--color-text);
font-size: 0.875rem; font-size: 0.875rem;
text-decoration: none; text-decoration: none;
padding: 0.5rem; padding: 0.5rem;
@ -46,21 +45,22 @@
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&:hover { &:hover {
color: var(--color-text); color: var(--color-primary);
background-color: var(--color-background-hover); text-decoration: underline;
} }
&:focus { &:focus {
outline: 2px solid var(--color-primary); outline: 2px solid var(--color-focus-ring);
outline-offset: 2px; outline-offset: 2px;
} }
} }
&__copyright { &__copyright {
color: var(--color-text-muted); color: var(--color-text);
font-size: 0.875rem; font-size: 0.875rem;
text-align: center; text-align: center;
margin: 0; margin: 0;
opacity: 0.7;
} }
&__social { &__social {
@ -75,20 +75,22 @@
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
background: transparent; background: transparent;
border: none; border: 1px solid var(--color-border);
border-radius: 0.375rem; border-radius: 0.375rem;
color: var(--color-text-muted); color: var(--color-text);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
text-decoration: none;
&:hover { &:hover {
background-color: var(--color-background-hover); background-color: var(--color-primary);
color: var(--color-text); color: var(--color-text-on-dark);
border-color: var(--color-primary);
transform: translateY(-1px); transform: translateY(-1px);
} }
&:focus { &:focus {
outline: 2px solid var(--color-primary); outline: 2px solid var(--color-focus-ring);
outline-offset: 2px; outline-offset: 2px;
} }

42
src/scss/layout/topbar.scss
View File

@ -4,21 +4,32 @@
@include globals.flex-center(); @include globals.flex-center();
justify-content: space-between; justify-content: space-between;
padding: 1em; padding: 1em;
background: var(--color-background); background: #042c53; // always night-blue – independent of --color-primary cascade
color: var(--color-text); color: var(--color-text-on-dark);
height: 65px; height: 65px;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; 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 { &__name {
font-weight: bold; font-weight: bold;
font-size: 1.25rem; font-size: 1.25rem;
color: var(--color-text); color: var(--color-text-on-dark);
text-decoration: none; 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 { &__container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -29,18 +40,31 @@
@extend %hover-lift; @extend %hover-lift;
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
border-radius: 8px; border-radius: 8px;
color: var(--color-text-on-dark);
transition: transition:
color 0.2s ease,
box-shadow 0.2s ease, box-shadow 0.2s ease,
transform 0.2s ease; transform 0.2s ease;
&:hover {
color: var(--color-accent-deco);
box-shadow: none;
transform: none;
}
&:active { &:active {
box-shadow: 0 2px 4px var(--box-shadow-active); box-shadow: none;
transform: translateY(0); transform: translateY(0);
} }
&--active { &--active {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); color: var(
background: var(--box-shadow-hover, rgba(0, 0, 0, 0.05)); --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; display: block;
height: 3px; height: 3px;
width: 100%; width: 100%;
background-color: var(--color-text); background-color: var(--color-text-on-dark); // light on dark navy bg
border-radius: 2px; border-radius: 2px;
transition: all 0.3s ease; transition: all 0.3s ease;
margin: 1px 0; margin: 1px 0;
} }
&:hover &__item { &:hover &__item {
background-color: var(--color-primary); background-color: var(--color-accent-deco); // ochre accent on hover
} }
&.active { &.active {

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

@ -85,8 +85,10 @@
&__email-icon { &__email-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: var(--primary-color); color: var(
background: rgba(147, 51, 234, 0.1); --color-primary
); // #042C53 light / #E6F1FB dark – high contrast in both
background: rgba(4, 44, 83, 0.08);
border-radius: 0.75rem; border-radius: 0.75rem;
padding: 0.5rem; padding: 0.5rem;
flex-shrink: 0; flex-shrink: 0;
@ -225,7 +227,11 @@
&__status-text { &__status-text {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; 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 { &__quick-facts {
@ -351,17 +357,10 @@
outline-offset: 2px; outline-offset: 2px;
} }
// Brand-specific icon colors with better contrast // Icons inherit color from parent button's var(--contact-social-text)
&--email .contact-section__social-icon { // which is #042C53 (light) / #E6F1FB (dark) – both high contrast
color: var(--social-icon-email, #2563eb); // Use theme variable .contact-section__social-icon {
} color: currentColor;
&--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
} }
} }
@ -578,7 +577,7 @@
&__email-card-icon { &__email-card-icon {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
color: var(--primary-color); color: var(--color-primary); // #042C53 light / #E6F1FB dark – high contrast
margin: 0 auto 1rem; margin: 0 auto 1rem;
display: block; display: block;
} }
@ -599,39 +598,19 @@
margin: var(--card-padding-sm) 0; margin: var(--card-padding-sm) 0;
text-decoration: none; text-decoration: none;
color: var(--contact-button-text); color: var(--contact-button-text);
box-shadow: box-shadow: none;
0 4px 14px 0 rgba(37, 99, 235, 0.25),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&::before { &::before {
content: ''; display: none;
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;
} }
&:hover { &:hover {
background: var(--contact-button-hover-bg); background: var(--contact-button-hover-bg);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: box-shadow: none;
0 8px 25px 0 rgba(37, 99, 235, 0.35),
0 4px 6px -2px rgba(0, 0, 0, 0.1);
&::before {
left: 100%;
}
} }
&:active { &:active {
@ -661,7 +640,7 @@
line-height: 1.5; line-height: 1.5;
strong { strong {
color: var(--primary-color); color: var(--color-primary);
font-weight: 600; 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 // High contrast mode support
@media (prefers-contrast: high) { @media (prefers-contrast: high) {
.contact-section__social-button { .contact-section__social-button {

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

@ -68,7 +68,7 @@
padding: var(--space-5) var(--space-6); padding: var(--space-5) var(--space-6);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
border: 1px solid var(--card-glass-border); 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); box-shadow: var(--shadow-glow);
} }
} }

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

@ -23,26 +23,38 @@
background: var(--hero-background); background: var(--hero-background);
position: relative; position: relative;
// Subtle radial glow at center for cinematic depth // Mid-Century geometric circle decoration
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; top: -80px;
background: radial-gradient( right: -80px;
ellipse 80% 60% at 50% 40%, width: 300px;
rgba(99, 102, 241, 0.12) 0%, height: 300px;
transparent 70% 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; pointer-events: none;
} }
[data-theme='dark'] & { [data-theme='dark'] & {
&::before { &::before {
background: radial-gradient( border-color: rgba(230, 241, 251, 0.1);
ellipse 80% 60% at 50% 40%, }
rgba(139, 92, 246, 0.22) 0%,
transparent 70% &::after {
); background: rgba(239, 159, 39, 0.05);
} }
} }
@ -86,27 +98,31 @@
&--primary, &--primary,
&--tertiary { &--tertiary {
background: var(--gradient-primary); background: var(--color-primary);
color: var(--color-background); color: var(--color-text-on-dark);
font-family: var(--font-headline);
font-weight: 600;
border-radius: 8px;
&:hover { &:hover {
background: var(--color-secondary);
box-shadow: none;
filter: none;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: var(--box-shadow-sm);
filter: brightness(1.1);
} }
} }
&--secondary { &--secondary {
background: transparent; background: transparent;
color: var(--color-text); color: var(--color-primary);
border: 2px solid $color-primary; border: 2px solid var(--color-primary);
padding: calc(#{$spacing-sm} - 2px) $spacing-xl; padding: calc(#{$spacing-sm} - 2px) $spacing-xl;
&:hover { &:hover {
background: $color-primary; background: var(--color-primary);
color: var(--color-background); color: var(--color-text-on-dark);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: var(--box-shadow-sm); box-shadow: none;
} }
} }
} }

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

@ -149,7 +149,7 @@
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 1rem; padding: 1rem;
background: var(--bg-primary); 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; border-radius: 0 0.5rem 0.5rem 0;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;

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

@ -80,7 +80,7 @@
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid var(--card-glass-border); 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); border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5); padding: var(--space-4) var(--space-5);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
@ -102,10 +102,16 @@
&__stat { &__stat {
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
font-weight: 800; font-weight: 800;
color: var(--color-primary); color: $color-heading; // compiled literal – immune to CSS var cascade issues
line-height: var(--leading-normal); line-height: var(--leading-normal);
white-space: nowrap; white-space: nowrap;
letter-spacing: var(--tracking-tight); letter-spacing: var(--tracking-tight);
[data-theme='dark'] & {
color: var(
--color-text-on-dark
); // #E6F1FB – always defined in globals, never overridden
}
} }
&__text { &__text {
@ -127,7 +133,7 @@
padding: var(--space-5) var(--space-6); padding: var(--space-5) var(--space-6);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
border: 1px solid var(--card-glass-border); 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); box-shadow: var(--shadow-glow);
} }
} }

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

@ -58,7 +58,7 @@
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid var(--card-glass-border); 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); border-radius: var(--radius-lg);
padding: var(--space-6); padding: var(--space-6);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);

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

@ -358,67 +358,34 @@
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
// Shimmer disabled for flat design
&::after { &::after {
content: ''; display: none;
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;
} }
// Semantic hierarchy classes with enhanced gradients // Semantic hierarchy classes — flat brand colors via theme vars
&--primary { &--primary {
background: var(--skills-progress-primary); background: var(--skills-progress-primary);
box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
} }
&--secondary { &--secondary {
background: var(--skills-progress-secondary); background: var(--skills-progress-secondary);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
} }
&--tertiary { &--tertiary {
background: var(--skills-progress-tertiary); background: var(--skills-progress-tertiary);
box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
} }
&--quaternary { &--quaternary {
background: var(--skills-progress-quaternary); background: var(--skills-progress-quaternary);
box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
} }
&--quinary { &--quinary {
background: var(--skills-progress-quinary); background: var(--skills-progress-quinary);
box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
} }
&--senary { &--senary {
background: var(--skills-progress-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;
}
}

160
src/scss/themes/_about.scss
View File

@ -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 $text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
$about-light-theme: ( $about-light-theme: (
// About section colors about-background: #ffffff,
about-background: gradient-about-title: #042c53,
linear-gradient(135deg, $about-bg-light-start 0%, $about-bg-light-end 100%), about-greeting-color: #042c53,
gradient-about-title: linear-gradient(90deg, $green-primary, $teal-primary), gradient-image-overlay: rgba(4, 44, 83, 0.1),
about-greeting-color: $green-secondary, // Skill badge colors
gradient-image-overlay: skill-badge-primary-bg: #e6f1fb,
linear-gradient( skill-badge-primary-text: #042c53,
45deg, skill-badge-secondary-bg: #f1efe8,
rgba($blue-primary, $alpha-overlay), skill-badge-secondary-text: #042c53,
rgba($purple-primary, $alpha-overlay) skill-badge-tertiary-bg: #e6f1fb,
), skill-badge-tertiary-text: #042c53,
// Skill badge colors - FIXED for AAA contrast skill-badge-quaternary-bg: #faeeda,
skill-badge-primary-bg: $blue-lightest, skill-badge-quaternary-text: #412402,
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,
// Changed from $orange-secondary for AAA contrast // Feature card colors
// Feature card colors - FIXED for AAA contrast feature-card-primary-bg: #f1efe8,
feature-card-primary-bg: feature-card-secondary-bg: #ffffff,
linear-gradient(135deg, $blue-lightest, $blue-ultralight), feature-card-tertiary-bg: #f1efe8,
feature-card-secondary-bg: feature-icon-primary: #042c53,
linear-gradient(135deg, $purple-lightest, $purple-ultralight), feature-icon-secondary: #0c447c,
feature-card-tertiary-bg: feature-icon-tertiary: #ef9f27,
linear-gradient(135deg, $teal-lightest, $teal-lighter),
feature-icon-primary: $blue-primary,
feature-icon-secondary: $purple-primary,
feature-icon-tertiary: $teal-primary,
// Text colors - FIXED for AAA contrast feature-title-primary: #042c53,
feature-title-primary: $text-aaa-light, feature-title-secondary: #042c53,
// Changed from $blue-tertiary for AAA contrast feature-title-tertiary: #042c53,
feature-title-secondary: $text-aaa-light, feature-description-primary: #1a1a1a,
// Changed from $purple-tertiary for AAA contrast feature-description-secondary: #1a1a1a,
feature-title-tertiary: $text-aaa-light, feature-description-tertiary: #1a1a1a,
// 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
); );
$about-dark-theme: ( $about-dark-theme: (
// About section colors about-background: #0c447c,
about-background: gradient-about-title: #e6f1fb,
linear-gradient(135deg, $about-bg-dark-start 0%, $about-bg-dark-end 100%), about-greeting-color: #e6f1fb,
gradient-about-title: linear-gradient(90deg, $green-light, $teal-secondary), gradient-image-overlay: rgba(230, 241, 251, 0.1),
about-greeting-color: $green-lighter, // Skill badge colors (dark)
gradient-image-overlay: skill-badge-primary-bg: rgba(230, 241, 251, 0.15),
linear-gradient( skill-badge-primary-text: #e6f1fb,
45deg, skill-badge-secondary-bg: rgba(230, 241, 251, 0.1),
rgba($blue-primary, $alpha-overlay), skill-badge-secondary-text: #e6f1fb,
rgba($purple-primary, $alpha-overlay) skill-badge-tertiary-bg: rgba(230, 241, 251, 0.15),
), skill-badge-tertiary-text: #e6f1fb,
// Skill badge colors - FIXED for AAA contrast skill-badge-quaternary-bg: rgba(239, 159, 39, 0.15),
skill-badge-primary-bg: rgba($blue-dark, $alpha-bg-low), skill-badge-quaternary-text: #ef9f27,
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,
// Changed from $orange-light for AAA contrast // Feature card colors (dark)
// Feature card colors - Enhanced for better contrast feature-card-primary-bg: rgba(12, 68, 124, 0.8),
feature-card-primary-bg: feature-card-secondary-bg: rgba(4, 44, 83, 0.9),
linear-gradient( feature-card-tertiary-bg: rgba(12, 68, 124, 0.8),
135deg, feature-icon-primary: #ef9f27,
rgba($blue-dark, $alpha-bg-low), feature-icon-secondary: #ef9f27,
rgba($blue-darker, $alpha-bg-low) feature-icon-tertiary: #ef9f27,
),
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,
// Text colors - FIXED for AAA contrast feature-title-primary: #e6f1fb,
feature-title-primary: $text-aaa-dark, feature-title-secondary: #e6f1fb,
// Changed from $blue-lighter for AAA contrast feature-title-tertiary: #e6f1fb,
feature-title-secondary: $text-aaa-dark, feature-description-primary: #b5d4f4,
// Changed from $purple-lighter for AAA contrast feature-description-secondary: #b5d4f4,
feature-title-tertiary: $text-aaa-dark, feature-description-tertiary: #b5d4f4,
// 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
); );

84
src/scss/themes/_base.scss
View File

@ -3,13 +3,13 @@
// Base colors and variables that are used across sections // Base colors and variables that are used across sections
$base-light-theme: ( $base-light-theme: (
primary: #800000, primary: #042c53,
background: #ffffff, background: #f1efe8,
text: #000000, text: #1a1a1a,
text-muted: #2b2b2b, text-muted: #412402,
active-box-shadow: rgba(0, 0, 0, 0.6), active-box-shadow: rgba(4, 44, 83, 0.2),
hover-box-shadow: rgba(0, 0, 0, 0.9), hover-box-shadow: rgba(4, 44, 83, 0.15),
gradient-primary: $gradient-primary, gradient-primary: #042c53,
gradient-text: $gradient-text-light, gradient-text: $gradient-text-light,
// Shadow variables // Shadow variables
@ -36,10 +36,10 @@ $base-light-theme: (
// Form and text variables // Form and text variables
form-background: #ffffff, form-background: #ffffff,
form-border: #e5e7eb, form-border: rgba(4, 44, 83, 0.15),
text-primary: #111827, text-primary: #1a1a1a,
text-secondary: #484c56, text-secondary: #412402,
primary-color: #9333ea, primary-color: #042c53,
// Contact status colors (light theme) // Contact status colors (light theme)
contact-status-success-bg: #d1fae5, contact-status-success-bg: #d1fae5,
@ -50,25 +50,24 @@ $base-light-theme: (
contact-status-error-text: #991b1b, contact-status-error-text: #991b1b,
// Additional missing variables // 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-primary: #ffffff,
bg-secondary: #f9fafb, bg-secondary: #f1efe8,
border-color: #e5e7eb, border-color: rgba(4, 44, 83, 0.15),
// Design system semantic tokens // Design system semantic tokens
surface: #f8fafc, surface: #ffffff,
border: #e5e7eb, border: rgba(4, 44, 83, 0.15),
secondary: #2563eb, secondary: #0c447c,
); );
$base-dark-theme: ( $base-dark-theme: (
primary: #9333ea, primary: #e6f1fb,
background: #1f2937, background: #021829,
text: #ffffff, text: #e6f1fb,
text-muted: #ffffff, text-muted: #b5d4f4,
active-box-shadow: rgba(255, 255, 255, 0.1), active-box-shadow: rgba(230, 241, 251, 0.1),
hover-box-shadow: rgba(255, 255, 255, 0.15), hover-box-shadow: rgba(230, 241, 251, 0.15),
gradient-primary: $gradient-primary, gradient-primary: #ef9f27,
gradient-text: $gradient-text-dark, gradient-text: $gradient-text-dark,
// Shadow variables // Shadow variables
@ -93,30 +92,27 @@ $base-dark-theme: (
transition-fast: #{$transition-fast}, transition-fast: #{$transition-fast},
// Form and text variables (dark theme) // Form and text variables (dark theme)
form-background: #374151, form-background: #042c53,
form-border: #4b5563, form-border: rgba(230, 241, 251, 0.15),
text-primary: #f9fafb, text-primary: #e6f1fb,
text-secondary: #9ca3af, text-secondary: #b5d4f4,
primary-color: #9333ea, primary-color: #ef9f27,
// Contact status colors (dark theme) // Contact status colors (dark theme)
contact-status-success-bg: #064e3b, contact-status-success-bg: rgba(4, 44, 83, 0.5),
contact-status-success-border: #059669, contact-status-success-border: #ef9f27,
contact-status-success-text: #a7f3d0, contact-status-success-text: #fac775,
contact-status-error-bg: #7f1d1d, contact-status-error-bg: rgba(127, 29, 29, 0.3),
contact-status-error-border: #dc2626, contact-status-error-border: #dc2626,
contact-status-error-text: #fecaca, contact-status-error-text: #fecaca,
// Additional missing variables (dark theme) // Additional missing variables (dark theme)
box-shadow-hover: rgba(255, 255, 255, 0.15), box-shadow-hover: rgba(239, 159, 39, 0.15),
bg-primary: #1f2937, bg-primary: #021829,
bg-secondary: #374151, bg-secondary: #042c53,
border-color: #4b5563, border-color: rgba(230, 241, 251, 0.12),
// Design system semantic tokens // Design system semantic tokens
// surface is a subtle step above background — not a stark jump. surface: #042c53,
// Kept close to background so dark sections feel like one canvas. border: rgba(230, 241, 251, 0.12),
surface: #232f3e, secondary: #b5d4f4,
border: #374151,
secondary: #60a5fa,
); );

79
src/scss/themes/_certifications.scss
View File

@ -47,74 +47,39 @@ $text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
$certifications-light-theme: ( $certifications-light-theme: (
// Certifications section background // Certifications section background
'certifications-background': 'certifications-background': #f1efe8,
linear-gradient(135deg, $cert-bg-light-start 0%, $cert-bg-light-end 100%), 'gradient-certifications-title': #042c53,
'gradient-certifications-title': 'color-certifications-primary': #ef9f27,
linear-gradient(to right, $purple-primary, $pink-primary),
'color-certifications-primary': $purple-primary,
// Card styling 'certifications-card-background': #ffffff,
'certifications-card-background':
linear-gradient(135deg, $white 0%, $gray-50 100%),
'certifications-card-shadow': $shadow-card-light, 'certifications-card-shadow': $shadow-card-light,
'certifications-card-shadow-hover': $shadow-card-light-hover, 'certifications-card-shadow-hover': $shadow-card-light-hover,
'certifications-card-overlay': 'certifications-card-overlay': rgba(4, 44, 83, 0.04),
linear-gradient( 'certifications-badge-background': #e6f1fb,
135deg, 'certifications-badge-border': rgba(4, 44, 83, 0.15),
rgba($purple-primary, $alpha-overlay-light) 0%, 'color-certifications-badge-text': #042c53,
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,
// Changed from $purple-secondary for AAA contrast 'certifications-card-title': #042c53,
// Text styling for AAA compliance 'certifications-card-description': #1a1a1a,
'certifications-card-title': $text-aaa-light, 'certifications-card-date': #412402
'certifications-card-description': $text-aaa-light,
'certifications-card-date': $text-aaa-light,
// Medium gray for secondary text
); );
$certifications-dark-theme: ( $certifications-dark-theme: (
// Certifications section background (dark purple/pink gradient) 'certifications-background': #042c53,
'certifications-background': 'gradient-certifications-title': #e6f1fb,
linear-gradient(135deg, $cert-bg-dark-start 0%, $cert-bg-dark-end 100%), 'color-certifications-primary': #ef9f27,
// 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,
// Card styling (dark theme) 'certifications-card-background': rgba(12, 68, 124, 0.6),
'certifications-card-background':
linear-gradient(135deg, $gray-900 0%, $gray-800 100%),
'certifications-card-shadow': $shadow-card-dark, 'certifications-card-shadow': $shadow-card-dark,
'certifications-card-shadow-hover': $shadow-card-dark-hover, 'certifications-card-shadow-hover': $shadow-card-dark-hover,
'certifications-card-overlay': 'certifications-card-overlay': rgba(239, 159, 39, 0.04),
linear-gradient( 'certifications-badge-background': rgba(239, 159, 39, 0.15),
135deg, 'certifications-badge-border': rgba(239, 159, 39, 0.3),
rgba($purple-light, $alpha-overlay-dark) 0%, 'color-certifications-badge-text': #ef9f27,
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,
// Changed from $purple-lighter for AAA contrast 'certifications-card-title': #e6f1fb,
// Text styling for AAA compliance 'certifications-card-description': #b5d4f4,
'certifications-card-title': $text-aaa-dark, 'certifications-card-date': #b5d4f4,
'certifications-card-description': $text-aaa-dark,
'certifications-card-date': #d1d5db,
// Light gray for secondary text in dark mode
); );
// Card layout styling // Card layout styling

195
src/scss/themes/_contact.scss
View File

@ -72,148 +72,87 @@ $text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
$contact-light-theme: ( $contact-light-theme: (
// Contact section background (light indigo/purple tones) // Contact section background (light indigo/purple tones)
'contact-background': 'contact-background': #f1efe8,
linear-gradient( 'gradient-contact-title': #042c53,
135deg, 'color-contact-primary': #042c53,
$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,
// Form styling - warm cream/peach to complement cool blue background 'contact-form-bg': #ffffff,
'contact-form-bg': 'contact-form-border': rgba(4, 44, 83, 0.15),
linear-gradient(135deg, $orange-lightest 0%, $orange-lighter 100%),
'contact-form-border': rgba($orange-primary, $alpha-border-light),
'contact-form-shadow': $shadow-light, 'contact-form-shadow': $shadow-light,
// Input styling - warm background to complement form 'contact-input-bg': #f1efe8,
'contact-input-bg': $amber-primary, 'contact-input-border': rgba(4, 44, 83, 0.2),
'contact-input-border': rgba($orange-primary, $alpha-border-medium), 'contact-input-focus-ring': rgba(4, 44, 83, 0.3),
'contact-input-focus-ring': rgba($orange-primary, $alpha-border-light), 'contact-input-text': #1a1a1a,
'contact-input-text': $text-aaa-light, 'contact-input-placeholder': #412402,
// Added for AAA compliance
'contact-input-placeholder': $text-input-placeholder-light,
// Added for form accessibility 'contact-button-bg': #042c53,
// Button styling - improved contrast and readability 'contact-button-text': #e6f1fb,
'contact-button-bg': 'contact-button-hover-bg': #0c447c,
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,
// Status message styling (light theme) - improved readability 'contact-social-bg': #f1efe8,
'contact-status-success-bg': $green-lightest, 'contact-social-text': #042c53,
'contact-status-success-border': $green-primary, 'contact-social-border': rgba(4, 44, 83, 0.15),
'contact-status-success-text': $green-secondary, 'contact-social-hover-bg': #e6f1fb,
'contact-status-error-bg': $red-lightest, 'contact-social-hover-border': #0c447c,
'contact-status-error-border': $red-primary,
'contact-status-error-text': $red-secondary,
// Text colors for AAA compliance 'contact-status-success-bg': #d1fae5,
'color-text': $text-aaa-light, 'contact-status-success-border': #10b981,
// Near black for AAA contrast 'contact-status-success-text': #065f46,
'color-text-muted': $gray-neutral-light, 'contact-status-error-bg': #fee2e2,
// Gray for secondary text 'contact-status-error-border': #ef4444,
'primary-color': $indigo-primary, 'contact-status-error-text': #991b1b,
// Indigo primary
'text-primary': $text-aaa-light,
// Main text color
'text-secondary': $gray-neutral-light,
// Secondary text color 'color-text': #1a1a1a,
// Enhanced social button colors for AAA compliance 'color-text-muted': #412402,
'social-icon-email': $text-aaa-light, 'primary-color': #042c53,
// Dark for better contrast 'text-primary': #1a1a1a,
'social-icon-github': $text-aaa-light, 'text-secondary': #412402,
// Dark for better contrast
'social-icon-linkedin': $text-aaa-light, 'social-icon-email': #042c53,
// Dark for better contrast 'social-icon-github': #042c53,
'social-icon-linkedin': #042c53
); );
$contact-dark-theme: ( $contact-dark-theme: (
// Contact section background (dark indigo/purple tones) 'contact-background': #021829,
'contact-background': 'gradient-contact-title': #e6f1fb,
linear-gradient( 'color-contact-primary': #ef9f27,
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,
// Form styling (dark theme) - warm dark tones to complement cool purple/indigo 'contact-form-bg': #042c53,
'contact-form-bg': 'contact-form-border': rgba(230, 241, 251, 0.12),
linear-gradient(135deg, $orange-darkest 0%, $orange-darker 100%),
'contact-form-border': rgba($orange-primary, $alpha-border-medium),
'contact-form-shadow': $shadow-dark, 'contact-form-shadow': $shadow-dark,
// Input styling (dark theme) - FIXED for AAA contrast 'contact-input-bg': #042c53,
'contact-input-bg': $gray-neutral-dark, 'contact-input-border': rgba(230, 241, 251, 0.2),
// Changed to neutral dark gray 'contact-input-focus-ring': rgba(239, 159, 39, 0.3),
'contact-input-border': rgba($orange-primary, $alpha-border-heavy), 'contact-input-text': #e6f1fb,
'contact-input-focus-ring': rgba($orange-primary, $alpha-border-medium), 'contact-input-placeholder': #b5d4f4,
'contact-input-text': $text-aaa-dark,
// White text for AAA contrast
'contact-input-placeholder': $gray-neutral-lighter,
// Light gray for placeholder 'contact-button-bg': #ef9f27,
// Button styling (dark theme) - improved contrast 'contact-button-text': #042c53,
'contact-button-bg': 'contact-button-hover-bg': #fac775,
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,
// Status message styling (dark theme) - improved readability 'contact-social-bg': #042c53,
'contact-status-success-bg': rgba($green-primary, $alpha-low), 'contact-social-text': #e6f1fb,
'contact-status-success-border': $green-light, 'contact-social-border': rgba(239, 159, 39, 0.3),
'contact-status-success-text': $green-lighter, 'contact-social-hover-bg': #0c447c,
'contact-status-error-bg': rgba($red-light, $alpha-low), 'contact-social-hover-border': #ef9f27,
'contact-status-error-border': $red-light,
'contact-status-error-text': $red-lighter,
// Text colors for AAA compliance - ALL WHITE in dark mode 'contact-status-success-bg': rgba(4, 44, 83, 0.5),
'color-text': $text-aaa-dark, 'contact-status-success-border': #ef9f27,
// White for AAA contrast on dark 'contact-status-success-text': #fac775,
'color-text-muted': $text-aaa-dark, 'contact-status-error-bg': rgba(127, 29, 29, 0.3),
// Changed to white for consistency 'contact-status-error-border': #dc2626,
'primary-color': $indigo-light, 'contact-status-error-text': #fecaca,
// Lighter indigo for dark mode
'text-primary': $text-aaa-dark, 'color-text': #e6f1fb,
// Main text color 'color-text-muted': #b5d4f4,
'text-secondary': $text-aaa-dark, 'primary-color': #ef9f27,
// Changed to white for consistency 'text-primary': #e6f1fb,
// Secondary text color 'text-secondary': #b5d4f4,
// Enhanced social button colors for AAA compliance
'social-icon-email': $text-aaa-dark, 'social-icon-email': #e6f1fb,
// White for better contrast 'social-icon-github': #e6f1fb,
'social-icon-github': $text-aaa-dark, 'social-icon-linkedin': #e6f1fb,
// White for better contrast
'social-icon-linkedin': $text-aaa-dark,
// White for better contrast
); );

103
src/scss/themes/_hero.scss
View File

@ -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 $text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
$hero-light-theme: ( $hero-light-theme: (
hero-background: hero-background: #f1efe8,
linear-gradient(135deg, $hero-bg-light-start 0%, $hero-bg-light-end 100%), // Stat card backgrounds – flat brand tones
// Stat colors - FIXED for AAA contrast stat-primary-bg: #e6f1fb,
stat-primary-bg: linear-gradient(135deg, $blue-lighter, $blue-lightest), stat-primary-value: #042c53,
stat-primary-value: $text-aaa-light, stat-primary-label: #042c53,
// Changed from $blue-primary for AAA contrast
stat-primary-label: $text-aaa-light,
// Changed from $blue-secondary for AAA contrast stat-secondary-bg: #f1efe8,
stat-secondary-bg: linear-gradient(135deg, $green-lighter, $green-lightest), stat-secondary-value: #042c53,
stat-secondary-value: $text-aaa-light, stat-secondary-label: #042c53,
// Changed from $green-primary for AAA contrast
stat-secondary-label: $text-aaa-light,
// Changed from $green-secondary for AAA contrast stat-tertiary-bg: #e6f1fb,
stat-tertiary-bg: linear-gradient(135deg, $teal-lighter, $teal-lightest), stat-tertiary-value: #042c53,
stat-tertiary-value: $text-aaa-light, stat-tertiary-label: #042c53,
// Changed from $teal-primary for AAA contrast
stat-tertiary-label: $text-aaa-light,
// Changed from $teal-secondary for AAA contrast stat-quaternary-bg: #faeeda,
stat-quaternary-bg: linear-gradient( stat-quaternary-value: #412402,
135deg, stat-quaternary-label: #412402,
$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
); );
$hero-dark-theme: ( $hero-dark-theme: (
hero-background: hero-background: #042c53,
linear-gradient( // Stat card backgrounds – flat brand tones for dark
135deg, stat-primary-bg: rgba(12, 68, 124, 0.6),
rgba($blue-dark, $alpha-bg-low) 0%, stat-primary-value: #e6f1fb,
rgba($purple-dark, $alpha-bg-low) 50%, stat-primary-label: #b5d4f4,
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,
// Changed from $blue-light to white for better contrast stat-secondary-bg: rgba(12, 68, 124, 0.4),
stat-secondary-bg: stat-secondary-value: #e6f1fb,
linear-gradient( stat-secondary-label: #b5d4f4,
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,
// Changed from $green-light to white for better contrast stat-tertiary-bg: rgba(12, 68, 124, 0.6),
stat-tertiary-bg: stat-tertiary-value: #e6f1fb,
linear-gradient( stat-tertiary-label: #b5d4f4,
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,
// Changed from $teal-light to white for better contrast stat-quaternary-bg: rgba(239, 159, 39, 0.15),
stat-quaternary-bg: stat-quaternary-value: #ef9f27,
linear-gradient( stat-quaternary-label: #e6f1fb,
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
); );

97
src/scss/themes/_projects.scss
View File

@ -57,76 +57,43 @@ $text-aaa-dark: $white; // #ffffff - ensures AAA contrast on dark backgrounds
$projects-light-theme: ( $projects-light-theme: (
// Projects section background // Projects section background
'projects-background': 'projects-background': #ffffff,
linear-gradient(135deg, $bg-light-start 0%, $bg-light-end 100%), 'gradient-projects-title': #042c53,
// Projects title gradient 'projects-card-background': #ffffff,
'gradient-projects-title': 'projects-card-border': rgba(4, 44, 83, 0.12),
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-card-shadow': $shadow-light, 'projects-card-shadow': $shadow-light,
'projects-card-shadow-hover': $shadow-light-hover, 'projects-card-shadow-hover': $shadow-light-hover,
// Overlay styling 'projects-overlay-background': rgba(0, 0, 0, 0.6),
'projects-overlay-background': rgba($black, $alpha-overlay-light), 'projects-button-primary-bg': #042c53,
// Button styling 'projects-button-primary-text': #e6f1fb,
'projects-button-primary-bg': 'projects-button-primary-border': rgba(4, 44, 83, 0.3),
linear-gradient(135deg, $orange-primary 0%, $red-primary 100%), 'projects-button-primary-hover-bg': #0c447c,
'projects-button-primary-text': $text-aaa-dark, 'projects-button-secondary-bg': #ffffff,
// Changed to ensure AAA contrast 'projects-button-secondary-text': #042c53,
'projects-button-primary-border': rgba($orange-primary, $alpha-border-heavy), 'projects-button-secondary-border': rgba(4, 44, 83, 0.2),
'projects-button-primary-hover-bg': 'projects-button-secondary-hover-bg': #f1efe8,
linear-gradient(135deg, $red-primary 0%, $red-secondary 100%), 'projects-tech-badge-bg': #f1efe8,
'projects-button-secondary-bg': $white, 'projects-tech-badge-text': #042c53,
'projects-button-secondary-text': $text-aaa-light, 'projects-tech-badge-border': rgba(4, 44, 83, 0.15)
// 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-dark-theme: ( $projects-dark-theme: (
// Projects section background - using variables instead of hardcoded rgba 'projects-background': #0c447c,
'projects-background': 'gradient-projects-title': #e6f1fb,
linear-gradient( 'projects-card-background': rgba(12, 68, 124, 0.6),
135deg, 'projects-card-border': rgba(230, 241, 251, 0.12),
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-card-shadow': $shadow-dark, 'projects-card-shadow': $shadow-dark,
'projects-card-shadow-hover': $shadow-dark-hover, 'projects-card-shadow-hover': $shadow-dark-hover,
// Overlay styling 'projects-overlay-background': rgba(0, 0, 0, 0.7),
'projects-overlay-background': rgba($black, $alpha-overlay-dark), 'projects-button-primary-bg': #ef9f27,
// Button styling 'projects-button-primary-text': #042c53,
'projects-button-primary-bg': 'projects-button-primary-border': rgba(239, 159, 39, 0.3),
linear-gradient(135deg, $orange-primary 0%, $red-primary 100%), 'projects-button-primary-hover-bg': #ba7517,
'projects-button-primary-text': $text-aaa-dark, 'projects-button-secondary-bg': rgba(12, 68, 124, 0.8),
'projects-button-primary-border': rgba($orange-primary, $alpha-border-heavy), 'projects-button-secondary-text': #e6f1fb,
'projects-button-primary-hover-bg': 'projects-button-secondary-border': rgba(230, 241, 251, 0.3),
linear-gradient(135deg, $orange-secondary 0%, $red-light 100%), 'projects-button-secondary-hover-bg': rgba(4, 44, 83, 0.9),
'projects-button-secondary-bg': rgba($gray-800, $alpha-bg-light), 'projects-tech-badge-bg': rgba(4, 44, 83, 0.8),
'projects-button-secondary-text': $text-aaa-dark, 'projects-tech-badge-text': #e6f1fb,
// Changed from $gray-200 for AAA compliance 'projects-tech-badge-border': rgba(230, 241, 251, 0.2),
'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)
); );

115
src/scss/themes/_services.scss
View File

@ -148,77 +148,66 @@ $dark-senary-title: #fca5a5; // Medium red
// ================================ // ================================
$services-light-theme: ( $services-light-theme: (
// Section backgrounds services-background: #f1efe8,
services-background: $light-services-bg, gradient-services-title: #042c53,
gradient-services-title: $light-title-gradient,
// Card backgrounds service-card-primary-bg: #ffffff,
service-card-primary-bg: $light-card-primary-bg, service-card-secondary-bg: #f1efe8,
service-card-secondary-bg: $light-card-secondary-bg, service-card-tertiary-bg: #ffffff,
service-card-tertiary-bg: $light-card-tertiary-bg, service-card-quaternary-bg: #f1efe8,
service-card-quaternary-bg: $light-card-quaternary-bg, service-card-quinary-bg: #ffffff,
service-card-quinary-bg: $light-card-quinary-bg, service-card-senary-bg: #f1efe8,
service-card-senary-bg: $light-card-senary-bg,
// Icons - using same color for consistency service-icon-primary: #ef9f27,
service-icon-primary: $light-text-primary, service-icon-secondary: #ef9f27,
service-icon-secondary: $light-text-primary, service-icon-tertiary: #ef9f27,
service-icon-tertiary: $light-text-primary, service-icon-quaternary: #ef9f27,
service-icon-quaternary: $light-text-primary, service-icon-quinary: #ef9f27,
service-icon-quinary: $light-text-primary, service-icon-senary: #ef9f27,
service-icon-senary: $light-text-primary,
// Titles - using same color as icons service-title-primary: #042c53,
service-title-primary: $light-text-primary, service-title-secondary: #042c53,
service-title-secondary: $light-text-primary, service-title-tertiary: #042c53,
service-title-tertiary: $light-text-primary, service-title-quaternary: #042c53,
service-title-quaternary: $light-text-primary, service-title-quinary: #042c53,
service-title-quinary: $light-text-primary, service-title-senary: #042c53,
service-title-senary: $light-text-primary,
// Descriptions - using same color as icons and titles service-description-primary: #1a1a1a,
service-description-primary: $light-text-primary, service-description-secondary: #1a1a1a,
service-description-secondary: $light-text-primary, service-description-tertiary: #1a1a1a,
service-description-tertiary: $light-text-primary, service-description-quaternary: #1a1a1a,
service-description-quaternary: $light-text-primary, service-description-quinary: #1a1a1a,
service-description-quinary: $light-text-primary, service-description-senary: #1a1a1a,
service-description-senary: $light-text-primary
); );
$services-dark-theme: ( $services-dark-theme: (
// Section backgrounds services-background: #042c53,
services-background: $dark-services-bg, gradient-services-title: #e6f1fb,
gradient-services-title: $dark-title-gradient,
// Card backgrounds service-card-primary-bg: rgba(12, 68, 124, 0.6),
service-card-primary-bg: $dark-card-primary-bg, service-card-secondary-bg: rgba(4, 44, 83, 0.8),
service-card-secondary-bg: $dark-card-secondary-bg, service-card-tertiary-bg: rgba(12, 68, 124, 0.6),
service-card-tertiary-bg: $dark-card-tertiary-bg, service-card-quaternary-bg: rgba(4, 44, 83, 0.8),
service-card-quaternary-bg: $dark-card-quaternary-bg, service-card-quinary-bg: rgba(12, 68, 124, 0.6),
service-card-quinary-bg: $dark-card-quinary-bg, service-card-senary-bg: rgba(4, 44, 83, 0.8),
service-card-senary-bg: $dark-card-senary-bg, 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-title-primary: #e6f1fb,
service-icon-primary: #ffffff, service-title-secondary: #e6f1fb,
service-icon-secondary: #ffffff, service-title-tertiary: #e6f1fb,
service-icon-tertiary: #ffffff, service-title-quaternary: #e6f1fb,
service-icon-quaternary: #ffffff, service-title-quinary: #e6f1fb,
service-icon-quinary: #ffffff, service-title-senary: #e6f1fb,
service-icon-senary: #ffffff,
// Titles - all using pure white service-description-primary: #b5d4f4,
service-title-primary: #ffffff, service-description-secondary: #b5d4f4,
service-title-secondary: #ffffff, service-description-tertiary: #b5d4f4,
service-title-tertiary: #ffffff, service-description-quaternary: #b5d4f4,
service-title-quaternary: #ffffff, service-description-quinary: #b5d4f4,
service-title-quinary: #ffffff, service-description-senary: #b5d4f4,
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
); );

306
src/scss/themes/_skills.scss
View File

@ -52,245 +52,99 @@ $alpha-bg-card-strong: 0.95;
$skills-light-theme: ( $skills-light-theme: (
// Skills section colors // Skills section colors
skills-background: linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%), skills-background: #ffffff,
skills-background-pattern: skills-background-pattern: none,
radial-gradient(circle at 25% 25%, $blue-primary, transparent 50%), gradient-skills-title: #042c53,
gradient-skills-title: skills-category-bg: #ffffff,
linear-gradient(90deg, $blue-tertiary, $blue-primary, $green-primary), skills-category-border: rgba(4, 44, 83, 0.12),
skills-category-bg: rgba($slate-50, $alpha-bg), skills-category-title-color: #042c53,
skills-category-border: rgba($slate-400, $alpha-medium), skills-skill-name-color: #1a1a1a,
skills-category-title-color: $slate-800, skills-skill-level-color: #1a1a1a,
skills-skill-name-color: $slate-700, skills-skill-percentage-color: #412402,
skills-skill-level-color: $slate-900, skills-progress-bg: rgba(4, 44, 83, 0.06),
skills-skill-percentage-color: $slate-600, skills-category-bg-primary: #ffffff,
skills-progress-bg: rgba($slate-200, $alpha-bg-card), skills-category-border-primary: rgba(4, 44, 83, 0.12),
// Card 1 - Web Frameworks (Blue theme) skills-gradient-primary: transparent,
skills-category-bg-primary: skills-accent-primary: #042c53,
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,
// Card 2 - Styling & Design (Green theme) skills-category-bg-secondary: #f1efe8,
skills-category-bg-secondary: skills-category-border-secondary: rgba(4, 44, 83, 0.12),
linear-gradient( skills-gradient-secondary: transparent,
135deg, skills-accent-secondary: #042c53,
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,
// Card 3 - Backend Development (Purple theme) skills-category-bg-tertiary: #ffffff,
skills-category-bg-tertiary: skills-category-border-tertiary: rgba(4, 44, 83, 0.12),
linear-gradient( skills-gradient-tertiary: transparent,
135deg, skills-accent-tertiary: #042c53,
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,
// Card 4 - Development Tools (Teal theme) skills-category-bg-quaternary: #f1efe8,
skills-category-bg-quaternary: skills-category-border-quaternary: rgba(4, 44, 83, 0.12),
linear-gradient( skills-gradient-quaternary: transparent,
135deg, skills-accent-quaternary: #042c53,
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,
// Card 5 - Testing & Quality (Orange theme) skills-category-bg-quinary: #ffffff,
skills-category-bg-quinary: skills-category-border-quinary: rgba(4, 44, 83, 0.12),
linear-gradient( skills-gradient-quinary: transparent,
135deg, skills-accent-quinary: #042c53,
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,
// Card 6 - AI-Tools (Indigo theme) skills-category-bg-senary: #f1efe8,
skills-category-bg-senary: skills-category-border-senary: rgba(4, 44, 83, 0.12),
linear-gradient( skills-gradient-senary: transparent,
135deg, skills-accent-senary: #042c53,
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,
// Progress bar gradients skills-progress-primary: #042c53,
skills-progress-primary: skills-progress-secondary: #042c53,
linear-gradient(90deg, $blue-primary, $blue-secondary, $blue-tertiary), skills-progress-tertiary: #042c53,
skills-progress-secondary: skills-progress-quaternary: #042c53,
linear-gradient(90deg, $green-primary, $green-secondary, $green-tertiary), skills-progress-quinary: #042c53,
skills-progress-tertiary: skills-progress-senary: #042c53
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-dark-theme: ( $skills-dark-theme: (
// Skills section colors skills-background: #0c447c,
skills-background: linear-gradient(135deg, $slate-800 0%, #0ea5e9 100%), skills-background-pattern: none,
skills-background-pattern: gradient-skills-title: #e6f1fb,
radial-gradient(circle at 25% 25%, $blue-tertiary, transparent 50%), skills-category-bg: rgba(12, 68, 124, 0.6),
gradient-skills-title: skills-category-border: rgba(230, 241, 251, 0.12),
linear-gradient(90deg, $blue-light, $green-light, $purple-light), skills-category-title-color: #e6f1fb,
skills-category-bg: rgba($slate-800, $alpha-bg-card), skills-skill-name-color: #e6f1fb,
skills-category-border: rgba($slate-600, $alpha-heavy), skills-skill-level-color: #e6f1fb,
skills-category-title-color: #ffffff, skills-skill-percentage-color: #b5d4f4,
skills-skill-name-color: #ffffff, skills-progress-bg: rgba(230, 241, 251, 0.1),
skills-skill-level-color: #ffffff, skills-category-bg-primary: rgba(12, 68, 124, 0.6),
skills-skill-percentage-color: #ffffff, skills-category-border-primary: rgba(230, 241, 251, 0.12),
skills-progress-bg: rgba($slate-700, $alpha-bg-card), skills-gradient-primary: transparent,
// Dark theme card backgrounds skills-accent-primary: #ef9f27,
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-category-bg-secondary: skills-category-bg-secondary: rgba(4, 44, 83, 0.8),
linear-gradient( skills-category-border-secondary: rgba(230, 241, 251, 0.12),
135deg, skills-gradient-secondary: transparent,
rgba(6, 95, 70, 0.4), skills-accent-secondary: #ef9f27,
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-tertiary: skills-category-bg-tertiary: rgba(12, 68, 124, 0.6),
linear-gradient( skills-category-border-tertiary: rgba(230, 241, 251, 0.12),
135deg, skills-gradient-tertiary: transparent,
rgba(88, 28, 135, 0.4), skills-accent-tertiary: #ef9f27,
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-quaternary: skills-category-bg-quaternary: rgba(4, 44, 83, 0.8),
linear-gradient( skills-category-border-quaternary: rgba(230, 241, 251, 0.12),
135deg, skills-gradient-quaternary: transparent,
rgba(15, 118, 110, 0.4), skills-accent-quaternary: #ef9f27,
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-quinary: skills-category-bg-quinary: rgba(12, 68, 124, 0.6),
linear-gradient( skills-category-border-quinary: rgba(230, 241, 251, 0.12),
135deg, skills-gradient-quinary: transparent,
rgba(180, 83, 9, 0.4), skills-accent-quinary: #ef9f27,
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-senary: skills-category-bg-senary: rgba(4, 44, 83, 0.8),
linear-gradient( skills-category-border-senary: rgba(230, 241, 251, 0.12),
135deg, skills-gradient-senary: transparent,
rgba(67, 56, 202, 0.4), skills-accent-senary: #ef9f27,
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,
// Progress bars for dark theme skills-progress-primary: #ef9f27,
skills-progress-primary: skills-progress-secondary: #ef9f27,
linear-gradient(90deg, $blue-light, $blue-primary, $blue-secondary), skills-progress-tertiary: #ef9f27,
skills-progress-secondary: skills-progress-quaternary: #ef9f27,
linear-gradient(90deg, $green-light, $green-primary, $green-secondary), skills-progress-quinary: #ef9f27,
skills-progress-tertiary: skills-progress-senary: #ef9f27,
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)
); );

21
src/scss/variables.scss
View File

@ -3,9 +3,9 @@ $mobile-breakpoint: 768px;
$desktop-breakpoint: 769px; $desktop-breakpoint: 769px;
// Color variables // Color variables
$color-primary: #9333ea; $color-primary: #042c53;
$color-secondary: #2563eb; $color-secondary: #0c447c;
$color-heading: #0f4d46; $color-heading: #042c53;
// Shadow variables // Shadow variables
$shadow-sm: 0 4px 12px; $shadow-sm: 0 4px 12px;
@ -63,22 +63,17 @@ $shadow-button:
0 2px 4px -1px rgba(0, 0, 0, 0.06); 0 2px 4px -1px rgba(0, 0, 0, 0.06);
// Gradient variables // Gradient variables
$gradient-primary: linear-gradient( $gradient-primary: #042c53;
90deg,
$color-secondary 0%,
$color-primary 100%
);
// Light theme gradient (keep original) // Light theme gradient
$gradient-text-light: linear-gradient( $gradient-text-light: linear-gradient(
to right, to right,
$color-secondary, $color-secondary,
$color-primary, $color-primary
#0d9488
); );
// Dark theme gradient (white to light purple for hero title) // Dark theme gradient
$gradient-text-dark: linear-gradient(to right, #ffffff, #c4b5fd, #a78bfa); $gradient-text-dark: linear-gradient(to right, #e6f1fb, #b5d4f4);
// Default gradient for backwards compatibility // Default gradient for backwards compatibility
$gradient-text: $gradient-text-light; $gradient-text: $gradient-text-light;