From 23771938dbfb6b16edfa19d8af0db3dea8b543a5 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 29 Oct 2025 16:33:10 +0100 Subject: [PATCH] WCAG additions: contrast fixes --- .github/copilot-instructions.md | 115 +++++++ index.html | 1 - package-lock.json | 68 ++++- package.json | 3 +- src/components/sections/AboutSection.tsx | 20 +- src/components/sections/ProjectsSection.tsx | 8 +- src/components/sections/SkillsSection.tsx | 4 +- src/config/personal.ts | 6 +- src/config/texts.ts | 2 +- src/scss/sections/skills-section.scss | 12 +- src/scss/themes/_about.scss | 218 ++++++++++---- src/scss/themes/_base.scss | 10 +- src/scss/themes/_certifications.scss | 133 +++++--- src/scss/themes/_contact.scss | 195 ++++++++---- src/scss/themes/_hero.scss | 141 +++++++-- src/scss/themes/_index.scss | 1 - src/scss/themes/_projects.scss | 167 +++++++---- src/scss/themes/_services.scss | 264 +++++++++------- src/scss/themes/_skills.scss | 316 ++++++++++++++------ 19 files changed, 1211 insertions(+), 473 deletions(-) create mode 100644 .github/copilot-instructions.md diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 0000000..db0613a --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,115 @@ +# Portfolio Codebase Instructions + +## Architecture Overview + +This is a **React + TypeScript portfolio website** with a unique modular SCSS theme system and full-stack contact functionality. The project follows a strict separation between presentation (React components), styling (SCSS modules), configuration (TypeScript configs), and data models. + +### Key Architectural Patterns + +- **Theme-driven SCSS**: All styling uses CSS custom properties via `@include t.theme-vars()` in `src/scss/themes/`. Never hardcode colors - use theme variables. +- **Configuration-driven content**: Personal info, texts, and data models live in `src/config/` and `src/data/` - modify these instead of components for content changes. +- **Hash-based navigation**: Uses React Router with hash fragments (`#about`, `#projects`) for smooth scrolling between sections on the homepage. +- **Centralized personal data**: All contact info, social links, and professional details in `src/config/personal.ts`. + +## Critical Development Workflows + +### Development Setup + +```bash +npm run dev # Start Vite dev server +npm run build # TypeScript compile + Vite build +npm run deploy # Build + custom SFTP deployment via deploy.js +``` + +### Theme System Workflow + +1. Define theme variables in `src/scss/themes/_base.scss` (light) and corresponding dark theme +2. Import themes via `src/scss/themes/_index.scss` +3. Apply themes with `@include t.theme-vars(t.$light-theme)` in components +4. Theme switching handled by `AppRouter.tsx` via `data-theme` attribute + +### Backend Integration + +- Contact form uses Node.js/Express backend in `backend/` directory +- GDPR-compliant with rate limiting, validation, and email obfuscation +- Email service via Nodemailer with Gmail SMTP (configured via `.env`) + +## Project-Specific Conventions + +### File Organization + +- **Components**: `src/components/sections/` for page sections, `src/components/layout/` for navigation/footer +- **Styling**: Mirror component structure in `src/scss/sections/` and `src/scss/layout/` +- **Data Models**: TypeScript interfaces in `src/data/` (Project.ts, Skill.ts, etc.) +- **Configuration**: All content configuration in `src/config/` (personal.ts, texts.ts, api.ts) + +### SCSS Architecture + +```scss +// Always use theme variables - example from any component: +@use '../../scss/themes/index' as t; + +.component { + background: var(--background); + color: var(--text); + box-shadow: var(--shadow-card); +} +``` + +### Data Model Pattern + +- All content interfaces defined in `src/data/` +- Use `src/config/texts.ts` for all displayable text (i18n preparation) +- Personal/contact data centralized in `src/config/personal.ts` with helper functions + +### Component Props Pattern + +```tsx +// All sections follow this pattern for text overrides: +interface SectionProps { + title?: string; // Allow text overrides + subtitle?: string; // for customization +} + +export default function Section(props: SectionProps = {}) { + const texts = getTexts().sectionName; + const { title = texts.title, subtitle = texts.subtitle } = props; +} +``` + +## Integration Points + +### Theme System Integration + +- `AppRouter.tsx` manages global theme state and localStorage persistence +- Theme switching via CSS custom properties, not CSS-in-JS +- All components must use theme variables, never hardcoded colors + +### Contact Form Flow + +1. Frontend form in `ContactSection.tsx` +2. Validates and posts to `/api/contact` endpoint +3. Backend in `backend/routes/contact.js` handles GDPR compliance, rate limiting, validation +4. Email sent via `backend/services/emailService.js` using Nodemailer + +### Deployment Process + +- Custom SFTP deployment via `deploy.js` script +- Prompts for credentials, uploads `dist/` contents +- Vercel config available as alternative in `vercel.json` + +## Common Pitfalls + +- **Never bypass theme variables** - always use CSS custom properties from theme system +- **Don't edit component text directly** - update `src/config/texts.ts` instead +- **Personal data changes** - modify `src/config/personal.ts`, not component files +- **SCSS imports** - use `@use` not `@import` for better performance and scoping +- **Hash navigation** - remember hash-based routing for section navigation on homepage + +## Key Files for AI Context + +- `src/app/AppRouter.tsx` - Theme management and routing logic +- `src/config/personal.ts` - All personal/professional data +- `src/scss/themes/_base.scss` - Theme variable definitions +- `backend/routes/contact.js` - Contact form API with GDPR compliance +- `deploy.js` - Custom deployment automation diff --git a/index.html b/index.html index f1606d6..29b5442 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ - Sascha Bach Portfolio diff --git a/package-lock.json b/package-lock.json index 8f3cf61..e5e477d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,9 +20,10 @@ "@types/react": "^19.1.9", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^4.7.0", + "babel-plugin-react-compiler": "1.0.0", "dotenv": "^17.2.2", "eslint": "^9.32.0", - "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-hooks": "^7.0.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", "sass": "^1.90.0", @@ -2134,6 +2135,16 @@ "safer-buffer": "~2.1.0" } }, + "node_modules/babel-plugin-react-compiler": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz", + "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.26.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -2570,13 +2581,20 @@ } }, "node_modules/eslint-plugin-react-hooks": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz", - "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.0.tgz", + "integrity": "sha512-fNXaOwvKwq2+pXiRpXc825Vd63+KM4DLL40Rtlycb8m7fYpp6efrTp1sa6ZbP/Ap58K2bEKFXRmhURE+CJAQWw==", "dev": true, "license": "MIT", + "dependencies": { + "@babel/core": "^7.24.4", + "@babel/parser": "^7.24.4", + "hermes-parser": "^0.25.1", + "zod": "^3.22.4 || ^4.0.0", + "zod-validation-error": "^3.0.3 || ^4.0.0" + }, "engines": { - "node": ">=10" + "node": ">=18" }, "peerDependencies": { "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0" @@ -2879,6 +2897,23 @@ "node": ">=8" } }, + "node_modules/hermes-estree": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz", + "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==", + "dev": true, + "license": "MIT" + }, + "node_modules/hermes-parser": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz", + "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==", + "dev": true, + "license": "MIT", + "dependencies": { + "hermes-estree": "0.25.1" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -4075,6 +4110,29 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zod": { + "version": "4.1.12", + "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz", + "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, + "node_modules/zod-validation-error": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz", + "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "zod": "^3.25.0 || ^4.0.0" + } } } } diff --git a/package.json b/package.json index ec7eb4a..637d166 100644 --- a/package.json +++ b/package.json @@ -24,9 +24,10 @@ "@types/react": "^19.1.9", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^4.7.0", + "babel-plugin-react-compiler": "1.0.0", "dotenv": "^17.2.2", "eslint": "^9.32.0", - "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-hooks": "^7.0.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", "sass": "^1.90.0", diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx index 2faca93..e2933ee 100644 --- a/src/components/sections/AboutSection.tsx +++ b/src/components/sections/AboutSection.tsx @@ -10,7 +10,6 @@ interface AboutSectionProps { subtitle?: string; bio?: string[]; profileImage?: string; - skillBadges?: SkillBadge[]; featureCards?: Service[]; } @@ -24,12 +23,6 @@ export default function AboutSection(props: AboutSectionProps = {}) { subtitle = texts.subtitle, bio = texts.bio, profileImage = saschaImage, - skillBadges = [ - { text: "Angular & React Developer", colorClass: "primary" }, - { text: "Responsive Design Expert", colorClass: "secondary" }, - { text: "Cross-Browser Compatible", colorClass: "tertiary" }, - { text: "Continuous Learner", colorClass: "quaternary" } - ], featureCards = [ { icon: Code, @@ -78,7 +71,7 @@ export default function AboutSection(props: AboutSectionProps = {}) { alt={`${name} - Web Developer`} className="about-section__image" /> -
+
@@ -92,17 +85,6 @@ export default function AboutSection(props: AboutSectionProps = {}) { ))}
- -
- {skillBadges.map((badge, index) => ( - - {badge.text} - - ))} -
diff --git a/src/components/sections/ProjectsSection.tsx b/src/components/sections/ProjectsSection.tsx index e17fe7f..37b00d4 100644 --- a/src/components/sections/ProjectsSection.tsx +++ b/src/components/sections/ProjectsSection.tsx @@ -27,8 +27,8 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) { description: "A personal portfolio website to showcase my skills, projects, and experience.", image: portfolioImage, technologies: ["React", "TypeScript", "SCSS", "Vercel", "Github Copilot"], - github: personalConfig.projects.portfolio, - live: "" + github: personalConfig.gitProjects.portfolio, + live: personalConfig.projectsUrls.portfolio }, { id: 2, @@ -36,7 +36,7 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) { description: "A virtual reality application for analysis of motion sickness in VR environments from 2015.", image: ergoVRImage, technologies: ["Unity3D", "C#", "Oculus SDK"], - github: personalConfig.projects.ergoVR + github: personalConfig.gitProjects.ergoVR }, { id: 3, @@ -44,7 +44,7 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) { description: "Participated in the development of a web-platform for a fitness racing game for Icaros GmbH until 2018.", image: icaraceImage, technologies: ["Angular 4", "Typescript", "HTML", "CSS"], - github: personalConfig.projects.ergoVR + github: personalConfig.gitProjects.ergoVR } ] } = props; diff --git a/src/components/sections/SkillsSection.tsx b/src/components/sections/SkillsSection.tsx index 10a533c..d454789 100644 --- a/src/components/sections/SkillsSection.tsx +++ b/src/components/sections/SkillsSection.tsx @@ -46,9 +46,9 @@ export default function SkillsSection(props: SkillsSectionProps = {}) { { title: "Styling & Design", skills: [ + { skill: "Accessibility (a11y) Standards", value: 90 }, { skill: "SCSS/Sass", value: 95 }, { skill: "CSS3", value: 90 }, - { skill: "Accessibility (a11y) Standards", value: 45 }, { skill: "Bootstrap", value: 65 } ] }, @@ -124,7 +124,7 @@ export default function SkillsSection(props: SkillsSectionProps = {}) { {displayLevel} - + diff --git a/src/config/personal.ts b/src/config/personal.ts index 07a9181..7b0d473 100644 --- a/src/config/personal.ts +++ b/src/config/personal.ts @@ -22,8 +22,12 @@ export const personalConfig = { }, }, + projectsUrls: { + portfolio: 'https://www.sascha-bach.de', + }, + // Project Repository - projects: { + gitProjects: { portfolio: 'https://github.com/LuciusShadow/portfolio-page', ergoVR: 'https://github.com/LuciusShadow/ErgoVR', }, diff --git a/src/config/texts.ts b/src/config/texts.ts index d460877..5cef05f 100644 --- a/src/config/texts.ts +++ b/src/config/texts.ts @@ -256,7 +256,7 @@ export const defaultTexts: TextConfig = { projects: { title: 'Featured Projects', - subtitle: 'A showcase of my recent work and personal projects', + subtitle: 'A showcase of my work and personal projects', codeButtonText: 'Code', liveButtonText: 'Live', }, diff --git a/src/scss/sections/skills-section.scss b/src/scss/sections/skills-section.scss index daf0c3c..2de813f 100644 --- a/src/scss/sections/skills-section.scss +++ b/src/scss/sections/skills-section.scss @@ -6,6 +6,11 @@ background: var(--skills-background); position: relative; + // Mobile responsiveness + @include globals.mobile-only { + padding: 3rem 0; + } + // Add decorative background elements &::before { content: ''; @@ -394,10 +399,3 @@ opacity: 0; } } - -// Mobile responsiveness -@include globals.mobile-only { - .skills-section { - padding: 3rem 0; - } -} diff --git a/src/scss/themes/_about.scss b/src/scss/themes/_about.scss index 0fc982e..59a314e 100644 --- a/src/scss/themes/_about.scss +++ b/src/scss/themes/_about.scss @@ -1,72 +1,182 @@ +// Base color variables +$blue-primary: #2563eb; +$blue-secondary: #1d4ed8; +$blue-tertiary: #18338c; +$blue-light: #3b82f6; +$blue-lighter: #93c5fd; +$blue-lightest: #dbeafe; +$blue-ultralight: #bfdbfe; +$blue-dark: #1e3a8a; +$blue-darker: #1e40af; + +$green-primary: #059669; +$green-secondary: #047857; +$green-tertiary: #13582e; +$green-light: #10b981; +$green-lighter: #34d399; +$green-lightest: #86efac; +$green-ultralight: #dcfce7; +$green-dark: #14532d; +$green-darker: #166534; + +$teal-primary: #0d9488; +$teal-secondary: #14b8a6; +$teal-tertiary: #073c39; +$teal-light: #5eead4; +$teal-lighter: #99f6e4; +$teal-lightest: #ccfbf1; +$teal-dark: #115e59; +$teal-darker: #134e4a; + +$purple-primary: #9333ea; +$purple-secondary: #551fad; +$purple-tertiary: #3c0d9c; +$purple-light: #a855f7; +$purple-lighter: #c4b5fd; +$purple-lightest: #e9d5ff; +$purple-ultralight: #ddd6fe; +$purple-dark: #581c87; +$purple-darker: #6b21a8; + +$orange-primary: #ea580c; +$orange-secondary: #9a3412; +$orange-tertiary: #7c2d12; +$orange-light: #fdba74; +$orange-lighter: #fed7aa; +$orange-dark: #9a3412; +$orange-darker: #7c2d12; + +$slate-primary: #1e293b; +$slate-secondary: #334155; + +// Background colors +$about-bg-light-start: #e0e7ef; +$about-bg-light-end: #bae6fd; +$about-bg-dark-start: #13582e; +$about-bg-dark-end: #1e293b; + +// Alpha values +$alpha-overlay: 0.2; +$alpha-bg-low: 0.3; + +// WCAG AAA compliant text colors +$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, #e0e7ef 0%, #bae6fd 100%), - // soft green to blue dbeafe - gradient-about-title: linear-gradient(90deg, #059669, #0d9488), - about-greeting-color: #047857, + 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(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)), - // Skill badge colors using visual hierarchy - skill-badge-primary-bg: #dbeafe, - skill-badge-primary-text: #1e40af, - skill-badge-secondary-bg: #dcfce7, - skill-badge-secondary-text: #166534, - skill-badge-tertiary-bg: #e9d5ff, - skill-badge-tertiary-text: #7c2d12, - skill-badge-quaternary-bg: #fed7aa, - skill-badge-quaternary-text: #9a3412, + 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, - // Feature card colors using visual hierarchy - feature-card-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), - feature-card-secondary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe), - feature-card-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4), - feature-icon-primary: #2563eb, - feature-icon-secondary: #9333ea, - feature-icon-tertiary: #0d9488, + // 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-title-primary: #1e40af, - feature-title-secondary: #7c3aed, - feature-title-tertiary: #0f766e, + // 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, - feature-description-primary: #1d4ed8, - feature-description-secondary: #6d28d9, - feature-description-tertiary: #115e59 + // 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 section colors - about-background: linear-gradient(135deg, #166534 0%, #1e293b 100%), - // deep green to blue - gradient-about-title: linear-gradient(90deg, #10b981, #14b8a6), - about-greeting-color: #34d399, + 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(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)), - // Skill badge colors using visual hierarchy - skill-badge-primary-bg: rgba(30, 58, 138, 0.3), - skill-badge-primary-text: #93c5fd, - skill-badge-secondary-bg: rgba(20, 83, 45, 0.3), - skill-badge-secondary-text: #86efac, - skill-badge-tertiary-bg: rgba(88, 28, 135, 0.3), - skill-badge-tertiary-text: #c4b5fd, - skill-badge-quaternary-bg: rgba(154, 52, 18, 0.3), - skill-badge-quaternary-text: #fdba74, + 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, - // Feature card colors using visual hierarchy + // Changed from $orange-light for AAA contrast + // Feature card colors - Enhanced for better contrast feature-card-primary-bg: - linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)), + linear-gradient( + 135deg, + rgba($blue-dark, $alpha-bg-low), + rgba($blue-darker, $alpha-bg-low) + ), feature-card-secondary-bg: - linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)), + linear-gradient( + 135deg, + rgba($purple-dark, $alpha-bg-low), + rgba($purple-darker, $alpha-bg-low) + ), feature-card-tertiary-bg: - linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)), - feature-icon-primary: #3b82f6, - feature-icon-secondary: #a855f7, - feature-icon-tertiary: #14b8a6, + 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-title-primary: #93c5fd, - feature-title-secondary: #c4b5fd, - feature-title-tertiary: #5eead4, + // 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, - feature-description-primary: #dbeafe, - feature-description-secondary: #e9d5ff, - feature-description-tertiary: #ccfbf1 + // 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 ); diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss index 18fdbb3..97923a2 100644 --- a/src/scss/themes/_base.scss +++ b/src/scss/themes/_base.scss @@ -3,12 +3,12 @@ // Base colors and variables that are used across sections $base-light-theme: ( - primary: #000000, + primary: red, background: #ffffff, text: #000000, - text-muted: #6b7280, - active-box-shadow: rgba(0, 0, 0, 0.1), - hover-box-shadow: rgba(0, 0, 0, 0.15), + 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, gradient-text: $gradient-text, @@ -38,7 +38,7 @@ $base-light-theme: ( form-background: #ffffff, form-border: #e5e7eb, text-primary: #111827, - text-secondary: #6b7280, + text-secondary: #484c56, primary-color: #9333ea, // Contact status colors (light theme) diff --git a/src/scss/themes/_certifications.scss b/src/scss/themes/_certifications.scss index d09ce54..24cacf4 100644 --- a/src/scss/themes/_certifications.scss +++ b/src/scss/themes/_certifications.scss @@ -1,68 +1,123 @@ -// Certifications section theme definitions +// Base color variables +$purple-primary: #9333ea; +$purple-secondary: #7e22ce; +$purple-light: #a855f7; +$purple-lighter: #d8b4fe; +$purple-lightest: #f3e8ff; +$purple-dark: #581c87; +$purple-darker: #4c1d95; + +$pink-primary: #ec4899; +$pink-secondary: #db2777; +$pink-light: #f472b6; +$pink-lighter: #fbcfe8; +$pink-lightest: #fce7f3; +$pink-dark: #9d174d; +$pink-darker: #831843; + +$gray-50: #fafafa; +$gray-100: #f5f5f5; +$gray-800: #1f2937; +$gray-900: #111827; + +$white: #ffffff; +$black: #000000; + +// Background colors +$cert-bg-light-start: #e0e7ef; +$cert-bg-light-end: #91c5e0; +$cert-bg-dark-start: #a78bfa; +$cert-bg-dark-end: #dc2626; + +// Alpha values +$alpha-overlay-light: 0.02; +$alpha-overlay-dark: 0.05; +$alpha-border-light: 0.2; +$alpha-border-dark: 0.3; + +// Shadow values +$shadow-card-light: 0 10px 15px -3px rgba($black, 0.1); +$shadow-card-light-hover: 0 20px 25px -5px rgba($black, 0.1); +$shadow-card-dark: 0 10px 15px -3px rgba($black, 0.3); +$shadow-card-dark-hover: 0 20px 25px -5px rgba($black, 0.4); + +// WCAG AAA compliant text colors +$text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds +$text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds $certifications-light-theme: ( // Certifications section background - 'certifications-background': linear-gradient( - 135deg, - #e0e7ef 0%, - #91c5e0 100% - ), - 'gradient-certifications-title': linear-gradient(to right, #9333ea, #ec4899), - 'color-certifications-primary': #9333ea, + '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, // Card styling 'certifications-card-background': - linear-gradient(135deg, #ffffff 0%, #fafafa 100%), - 'certifications-card-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 'certifications-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.1), + linear-gradient(135deg, $white 0%, $gray-50 100%), + 'certifications-card-shadow': $shadow-card-light, + 'certifications-card-shadow-hover': $shadow-card-light-hover, 'certifications-card-overlay': linear-gradient( 135deg, - rgba(147, 51, 234, 0.02) 0%, - rgba(236, 72, 153, 0.02) 100% + rgba($purple-primary, $alpha-overlay-light) 0%, + rgba($pink-primary, $alpha-overlay-light) 100% ), - // Badge styling (purple/pink theme) - 'certifications-badge-background': linear-gradient( - to right, - #f3e8ff, - #fce7f3 - ), - 'certifications-badge-border': rgba(147, 51, 234, 0.2), - 'color-certifications-badge-text': #7e22ce + // 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 + // 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-dark-theme: ( // Certifications section background (dark purple/pink gradient) - 'certifications-background': linear-gradient( - 135deg, - #a78bfa 0%, - #dc2626 100% - ), + '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, #a855f7, #f472b6), + 'gradient-certifications-title': + linear-gradient(to right, $purple-light, $pink-light), // Primary color for icons (lighter purple) - 'color-certifications-primary': #a855f7, + 'color-certifications-primary': $purple-light, // Card styling (dark theme) 'certifications-card-background': - linear-gradient(135deg, #111827 0%, #1f2937 100%), - 'certifications-card-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.3), - 'certifications-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.4), + linear-gradient(135deg, $gray-900 0%, $gray-800 100%), + 'certifications-card-shadow': $shadow-card-dark, + 'certifications-card-shadow-hover': $shadow-card-dark-hover, 'certifications-card-overlay': linear-gradient( 135deg, - rgba(168, 85, 247, 0.05) 0%, - rgba(244, 114, 182, 0.05) 100% + rgba($purple-light, $alpha-overlay-dark) 0%, + rgba($pink-light, $alpha-overlay-dark) 100% ), - // Badge styling (dark theme with purple/pink) + // Badge styling (dark theme) - FIXED for AAA contrast 'certifications-badge-background': - linear-gradient(to right, rgba(88, 28, 135, 0.3), rgba(157, 23, 77, 0.3)), - 'certifications-badge-border': rgba(168, 85, 247, 0.3), - 'color-certifications-badge-text': #d8b4fe + 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 + // 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 ); -// Add to your certifications section SCSS file - +// Card layout styling .certifications-section__card { display: flex; flex-direction: column; diff --git a/src/scss/themes/_contact.scss b/src/scss/themes/_contact.scss index 84587c7..4c61353 100644 --- a/src/scss/themes/_contact.scss +++ b/src/scss/themes/_contact.scss @@ -1,38 +1,116 @@ -// Contact section theme definitions +// Base color variables +$indigo-primary: #4f46e5; +$indigo-secondary: #3c0d9c; +$indigo-light: #6366f1; +$indigo-lighter: #a5b4fc; + +$purple-primary: #a855f7; +$purple-secondary: #7c3aed; + +$blue-primary: #2563eb; +$blue-secondary: #3730a3; +$blue-light: #3b82f6; +$blue-lighter: #60a5fa; +$blue-dark: #1d4ed8; +$blue-darker: #312e81; + +$orange-primary: #f59e0b; +$orange-secondary: #d97706; +$orange-light: #fbbf24; +$orange-lighter: #fed7aa; +$orange-lightest: #fef7ed; +$orange-dark: #92400e; +$orange-darker: #78350f; +$orange-darkest: #451a03; + +$amber-primary: #fef3c7; +$amber-secondary: #a16207; +$amber-light: #ca8a04; + +$green-primary: #059669; +$green-secondary: #047857; +$green-light: #10b981; +$green-lighter: #6ee7b7; +$green-lightest: #d1fae5; + +$red-primary: #dc2626; +$red-secondary: #b91c1c; +$red-light: #f87171; +$red-lighter: #fca5a5; +$red-lightest: #fee2e2; + +$white: #ffffff; +$black: #000000; + +// Background colors +$contact-bg-light-start: #e0e7ef; +$contact-bg-light-end: #91c5e0; + +// Alpha values +$alpha-low: 0.15; +$alpha-border-light: 0.2; +$alpha-border-medium: 0.3; +$alpha-border-heavy: 0.4; + +// Shadow values +$shadow-light: 0 10px 15px -3px rgba($black, 0.1); +$shadow-dark: 0 10px 15px -3px rgba($black, 0.3); + +// WCAG AAA compliant text colors +$text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds +$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, #e0e7ef 0%, #91c5e0 100%), + '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, #4f46e5, #7c3aed), + 'gradient-contact-title': + linear-gradient(to right, $indigo-primary, $indigo-secondary), // Primary color for icons (indigo) - 'color-contact-primary': #4f46e5, + 'color-contact-primary': $indigo-primary, // Form styling - warm cream/peach to complement cool blue background - 'contact-form-bg': linear-gradient(135deg, #fef7ed 0%, #fed7aa 100%), - 'contact-form-border': rgba(251, 146, 60, 0.2), - 'contact-form-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 'contact-form-bg': + linear-gradient(135deg, $orange-lightest 0%, $orange-lighter 100%), + 'contact-form-border': rgba($orange-primary, $alpha-border-light), + 'contact-form-shadow': $shadow-light, + // Input styling - warm background to complement form - 'contact-input-bg': #fef3c7, - 'contact-input-border': rgba(251, 146, 60, 0.3), - 'contact-input-focus-ring': rgba(251, 146, 60, 0.2), + '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': #484c56, + + // Added for form accessibility // Button styling - improved contrast and readability - 'contact-button-bg': linear-gradient(135deg, #2563eb 0%, #3730a3 100%), - 'contact-button-text': #ffffff, - 'contact-button-hover-bg': linear-gradient(135deg, #1d4ed8 0%, #312e81 100%), - // Social button styling - warm peach background to complement section - 'contact-social-bg': #fed7aa, - 'contact-social-text': #92400e, - 'contact-social-border': #f59e0b, - 'contact-social-hover-bg': #fbbf24, - 'contact-social-hover-border': #d97706, + '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, + // Status message styling (light theme) - improved readability - 'contact-status-success-bg': #d1fae5, - 'contact-status-success-border': #059669, - 'contact-status-success-text': #047857, - 'contact-status-error-bg': #fee2e2, - 'contact-status-error-border': #dc2626, - 'contact-status-error-text': #b91c1c + '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-dark-theme: ( @@ -40,37 +118,52 @@ $contact-dark-theme: ( 'contact-background': linear-gradient( 135deg, - rgba(67, 56, 202, 0.2) 0%, - rgba(109, 40, 217, 0.2) 100% + 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, #6366f1, #a855f7), + 'gradient-contact-title': + linear-gradient(to right, $indigo-light, $purple-primary), // Primary color for icons (lighter indigo) - 'color-contact-primary': #6366f1, + 'color-contact-primary': $indigo-light, // Form styling (dark theme) - warm dark tones to complement cool purple/indigo - 'contact-form-bg': linear-gradient(135deg, #451a03 0%, #78350f 100%), - 'contact-form-border': rgba(251, 146, 60, 0.3), - 'contact-form-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.3), - // Input styling (dark theme) - warm dark background - 'contact-input-bg': #92400e, - 'contact-input-border': rgba(251, 146, 60, 0.4), - 'contact-input-focus-ring': rgba(251, 146, 60, 0.3), + 'contact-form-bg': + linear-gradient(135deg, $orange-darkest 0%, $orange-darker 100%), + 'contact-form-border': rgba($orange-primary, $alpha-border-medium), + 'contact-form-shadow': $shadow-dark, + + // Input styling (dark theme) - FIXED for AAA contrast + 'contact-input-bg': #374151, + // 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': #9ca3af, + + // Light gray for placeholder // Button styling (dark theme) - improved contrast - 'contact-button-bg': linear-gradient(135deg, #3b82f6 0%, #2563eb 100%), - 'contact-button-text': #ffffff, - 'contact-button-hover-bg': linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%), - // Social button styling (dark theme) - warm brown/orange tones - 'contact-social-bg': #a16207, - 'contact-social-text': #fef3c7, - 'contact-social-border': #d97706, - 'contact-social-hover-bg': #ca8a04, - 'contact-social-hover-border': #f59e0b, + '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': #1f2937, + // 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': #374151, + // Slightly lighter on hover + 'contact-social-hover-border': $orange-primary, + // Status message styling (dark theme) - improved readability - 'contact-status-success-bg': rgba(5, 150, 105, 0.15), - 'contact-status-success-border': #10b981, - 'contact-status-success-text': #6ee7b7, - 'contact-status-error-bg': rgba(239, 68, 68, 0.15), - 'contact-status-error-border': #f87171, - 'contact-status-error-text': #fca5a5 + '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 ); diff --git a/src/scss/themes/_hero.scss b/src/scss/themes/_hero.scss index c413c6d..f4bad6d 100644 --- a/src/scss/themes/_hero.scss +++ b/src/scss/themes/_hero.scss @@ -1,51 +1,132 @@ @use '../variables' as *; +// Base color variables +$blue-primary: #2563eb; +$blue-secondary: #1d4ed8; +$blue-light: #93c5fd; +$blue-lighter: #dbeafe; +$blue-lightest: #bfdbfe; +$blue-dark: #1e3a8a; +$blue-darker: #1e40af; + +$green-primary: #16a34a; +$green-secondary: #15803d; +$green-light: #86efac; +$green-lighter: #dcfce7; +$green-lightest: #bbf7d0; +$green-dark: #14532d; +$green-darker: #166534; + +$teal-primary: #0d9488; +$teal-secondary: #073c39; +$teal-light: #5eead4; +$teal-lighter: #ccfbf1; +$teal-lightest: #99f6e4; +$teal-dark: #134e4a; +$teal-darker: #115e59; + +$purple-primary: #9333ea; +$purple-secondary: #3c0d9c; +$purple-light: #c4b5fd; +$purple-lighter: #e9d5ff; +$purple-lightest: #ddd6fe; +$purple-dark: #581c87; +$purple-darker: #6b21a8; + +// Background colors +$hero-bg-light-start: #e0e7ef; +$hero-bg-light-end: #91c5e0; + +// Alpha values +$alpha-bg-low: 0.3; + +// WCAG AAA compliant text colors +$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, #e0e7ef 0%, #91c5e0 100%), - // Stat colors using visual hierarchy - stat-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), - stat-primary-value: #2563eb, - stat-primary-label: #1d4ed8, + 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, - stat-secondary-bg: linear-gradient(135deg, #dcfce7, #bbf7d0), - stat-secondary-value: #16a34a, - stat-secondary-label: #15803d, + // 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-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4), - stat-tertiary-value: #0d9488, - stat-tertiary-label: #0f766e, + // 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-quaternary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe), - stat-quaternary-value: #9333ea, - stat-quaternary-label: #7c3aed, + // 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 ); $hero-dark-theme: ( hero-background: linear-gradient( 135deg, - rgba(30, 58, 138, 0.3) 0%, - rgba(55, 48, 163, 0.3) 50%, - rgba(88, 28, 135, 0.3) 100% + rgba($blue-dark, $alpha-bg-low) 0%, + rgba($purple-dark, $alpha-bg-low) 50%, + rgba($purple-darker, $alpha-bg-low) 100% ), - // Stat colors using visual hierarchy + // Stat colors - Enhanced contrast for AAA compliance stat-primary-bg: - linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)), - stat-primary-value: #2563eb, - stat-primary-label: #93c5fd, + 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: - linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)), - stat-secondary-value: #16a34a, - stat-secondary-label: #86efac, + 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, + // Changed from $green-light to white for better contrast stat-tertiary-bg: - linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)), - stat-tertiary-value: #0d9488, - stat-tertiary-label: #5eead4, + 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, + // Changed from $teal-light to white for better contrast stat-quaternary-bg: - linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)), - stat-quaternary-value: #9333ea, - stat-quaternary-label: #c4b5fd, + 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 ); diff --git a/src/scss/themes/_index.scss b/src/scss/themes/_index.scss index 2982436..7e86de5 100644 --- a/src/scss/themes/_index.scss +++ b/src/scss/themes/_index.scss @@ -351,7 +351,6 @@ $dark-theme: map.merge( --contact-status-error-text: #{map.get($theme, contact-status-error-text)}; // Additional variables - --box-shadow-hover: #{map.get($theme, box-shadow-hover)}; --bg-primary: #{map.get($theme, bg-primary)}; --bg-secondary: #{map.get($theme, bg-secondary)}; --border-color: #{map.get($theme, border-color)}; diff --git a/src/scss/themes/_projects.scss b/src/scss/themes/_projects.scss index 1cf7c87..85b53da 100644 --- a/src/scss/themes/_projects.scss +++ b/src/scss/themes/_projects.scss @@ -1,71 +1,132 @@ -// Projects section theme definitions +// Base color variables +$orange-primary: #ea580c; +$orange-secondary: #fb923c; +$orange-light: #fed7aa; +$orange-dark: #6f2406; +$orange-darker: #431407; // Darker than $orange-dark for better contrast + +$red-primary: #dc2626; +$red-secondary: #b91c1c; +$red-light: #f87171; +$red-lighter: #fecaca; +$red-darker: #7f1d1d; // Darker red variant + +$gray-50: #f9fafb; +$gray-100: #f3f4f6; +$gray-200: #e5e7eb; +$gray-300: #d1d5db; +$gray-400: #9ca3af; +$gray-500: #6b7280; +$gray-600: #4b5563; +$gray-700: #374151; +$gray-800: #1f2937; +$gray-900: #111827; + +$white: #ffffff; +$black: #000000; + +// Background colors +$bg-light-start: #e0e7ef; +$bg-light-end: #bae6fd; +$card-light-start: #ffffff; +$card-light-end: #fefefe; + +// Dark theme specific colors - extracted from hardcoded values +$brown-primary: #7c2d12; // rgba(124, 45, 18, 1) converted to hex +$brown-secondary: #991b1b; // rgba(127, 29, 29, 1) converted to hex + +// Alpha values +$alpha-overlay-light: 0.6; +$alpha-overlay-dark: 0.7; +$alpha-border-light: 0.1; +$alpha-border-medium: 0.2; +$alpha-border-heavy: 0.3; +$alpha-bg-light: 0.9; +$alpha-bg-medium: 0.3; +$alpha-bg-high: 0.8; // Added for tech badges + +// Shadow values +$shadow-light: 0 4px 6px -1px rgba($black, 0.1); +$shadow-light-hover: 0 20px 25px -5px rgba($black, 0.1); +$shadow-dark: 0 4px 6px -1px rgba($black, 0.3); +$shadow-dark-hover: 0 20px 25px -5px rgba($black, 0.4); + +// WCAG AAA compliant text colors +$text-aaa-light: $gray-900; // #111827 - ensures AAA contrast on light backgrounds +$text-aaa-dark: $white; // #ffffff - ensures AAA contrast on dark backgrounds $projects-light-theme: ( - // Projects section background (light orange/red tones) - 'projects-background': linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%), - // Projects title gradient (orange to red) - 'gradient-projects-title': linear-gradient(to right, #ea580c, #dc2626), + // 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, #ffffff 0%, #fefefe 100%), - 'projects-card-border': rgba(234, 88, 12, 0.1), - 'projects-card-shadow': 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 'projects-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.1), + '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-hover': $shadow-light-hover, // Overlay styling - 'projects-overlay-background': rgba(0, 0, 0, 0.6), + 'projects-overlay-background': rgba($black, $alpha-overlay-light), // Button styling 'projects-button-primary-bg': - linear-gradient(135deg, #ea580c 0%, #dc2626 100%), - 'projects-button-primary-text': #ffffff, - 'projects-button-primary-border': rgba(234, 88, 12, 0.3), + 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, #dc2626 0%, #b91c1c 100%), - 'projects-button-secondary-bg': rgba(255, 255, 255, 0.9), - 'projects-button-secondary-text': #374151, - 'projects-button-secondary-border': rgba(255, 255, 255, 0.2), - 'projects-button-secondary-hover-bg': #ffffff, - - // Tech badge styling - 'projects-tech-badge-bg': linear-gradient(135deg, #fed7aa 0%, #fecaca 100%), - 'projects-tech-badge-text': #c2410c, - 'projects-tech-badge-border': rgba(234, 88, 12, 0.2) + 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-dark-theme: ( - // Projects section background (dark orange/red tones) + // Projects section background - using variables instead of hardcoded rgba 'projects-background': linear-gradient( 135deg, - rgba(124, 45, 18, 0.2) 0%, - rgba(127, 29, 29, 0.2) 100% + rgba($brown-primary, $alpha-border-medium) 0%, + rgba($brown-secondary, $alpha-border-medium) 100% ), - // Projects title gradient (brighter orange to red for dark mode) - 'gradient-projects-title': linear-gradient(to right, #fb923c, #f87171), - // Card styling (dark theme) - 'projects-card-background': linear-gradient(135deg, #111827 0%, #1f2937 100%), - 'projects-card-border': rgba(251, 146, 60, 0.2), - 'projects-card-shadow': 0 4px 6px -1px rgba(0, 0, 0, 0.3), - 'projects-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.4), + // 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-hover': $shadow-dark-hover, // Overlay styling - 'projects-overlay-background': rgba(0, 0, 0, 0.7), - // Button styling (dark theme) + 'projects-overlay-background': rgba($black, $alpha-overlay-dark), + // Button styling 'projects-button-primary-bg': - linear-gradient(135deg, #ea580c 0%, #dc2626 100%), - 'projects-button-primary-text': #ffffff, - 'projects-button-primary-border': rgba(234, 88, 12, 0.3), + 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, #fb923c 0%, #f87171 100%), - 'projects-button-secondary-bg': rgba(31, 41, 55, 0.9), - 'projects-button-secondary-text': #e5e7eb, - 'projects-button-secondary-border': rgba(75, 85, 99, 0.3), - 'projects-button-secondary-hover-bg': #374151, - - // Tech badge styling (dark theme) - 'projects-tech-badge-bg': - linear-gradient( - 135deg, - rgba(124, 45, 18, 0.3) 0%, - rgba(127, 29, 29, 0.3) 100% - ), - 'projects-tech-badge-text': #fed7aa, - 'projects-tech-badge-border': rgba(251, 146, 60, 0.3) + 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) ); diff --git a/src/scss/themes/_services.scss b/src/scss/themes/_services.scss index 547446a..87a0ebe 100644 --- a/src/scss/themes/_services.scss +++ b/src/scss/themes/_services.scss @@ -1,119 +1,163 @@ +// ================================ +// Color Variables - Change once, use everywhere +// ================================ + +// Light theme colors +$light-primary-color: #0f172a; // Much darker blue (was #18338c) +$light-secondary-color: #0f2419; // Much darker green (was #13582e) +$light-tertiary-color: #2d1b69; // Much darker purple (was #551fad) +$light-quaternary-color: #042f2e; // Much darker teal (was #073c39) +$light-quinary-color: #451a01; // Much darker orange (was #6f2406) +$light-senary-color: #7f1d1d; // Much darker red (was #b91c1c) + +// Alternative: Use neutral dark colors for guaranteed AAA compliance +$light-text-primary: #111827; // Near black +$light-text-secondary: #1f2937; // Dark gray +$light-text-tertiary: #374151; // Medium dark gray + +// Dark theme colors +$dark-primary-icon: #dbeafe; +$dark-secondary-icon: #dcfce7; +$dark-tertiary-icon: #e9d5ff; +$dark-quaternary-icon: #ccfbf1; +$dark-quinary-icon: #fed7aa; +$dark-senary-icon: #fecaca; + +$dark-primary-title: #93c5fd; +$dark-secondary-title: #86efac; +$dark-tertiary-title: #c4b5fd; +$dark-quaternary-title: #5eead4; +$dark-quinary-title: #fdba74; +$dark-senary-title: #fca5a5; + +$dark-description-color: #ffffff; // Pure white instead of #f1f5f9 // Universal description color for dark theme + +// Background gradients +$light-services-bg: linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%); +$dark-services-bg: linear-gradient(135deg, #78350f 0%, #a78bfa 100%); + +$light-title-gradient: linear-gradient(90deg, #0f172a, #1e293b, #334155); +$dark-title-gradient: linear-gradient(90deg, #f1f5f9, #e2e8f0, #cbd5e1); + +// Card background gradients +$light-card-primary-bg: linear-gradient( + 135deg, + #f8fafc, + #f1f5f9 +); // Lighter backgrounds +$light-card-secondary-bg: linear-gradient(135deg, #f9fafb, #f3f4f6); +$light-card-tertiary-bg: linear-gradient(135deg, #faf9ff, #f5f3ff); +$light-card-quaternary-bg: linear-gradient(135deg, #f0fdfa, #ecfdf5); +$light-card-quinary-bg: linear-gradient(135deg, #fffbeb, #fef3c7); +$light-card-senary-bg: linear-gradient(135deg, #fef2f2, #fee2e2); + +$dark-card-primary-bg: linear-gradient( + 135deg, + rgba(30, 58, 138, 0.6), + rgba(37, 99, 235, 0.5) +); +$dark-card-secondary-bg: linear-gradient( + 135deg, + rgba(22, 101, 52, 0.6), + rgba(34, 197, 94, 0.5) +); +$dark-card-tertiary-bg: linear-gradient( + 135deg, + rgba(91, 33, 182, 0.6), + rgba(124, 58, 237, 0.5) +); +$dark-card-quaternary-bg: linear-gradient( + 135deg, + rgba(17, 94, 89, 0.6), + rgba(20, 184, 166, 0.5) +); +$dark-card-quinary-bg: linear-gradient( + 135deg, + rgba(154, 52, 18, 0.6), + rgba(249, 115, 22, 0.5) +); +$dark-card-senary-bg: linear-gradient( + 135deg, + rgba(153, 27, 27, 0.6), + rgba(239, 68, 68, 0.5) +); + +// ================================ +// Theme Maps - Using variables above +// ================================ + $services-light-theme: ( - // Services section colors - Tailwind inspired - services-background: linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%), - gradient-services-title: linear-gradient(90deg, #0f172a, #1e293b, #334155), - // Service card colors using Tailwind color palette - service-card-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), - // blue-100 to blue-200 - service-card-secondary-bg: linear-gradient(135deg, #dcfce7, #bbf7d0), - // green-100 to green-200 - service-card-tertiary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe), - // violet-100 to violet-200 - service-card-quaternary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4), - // teal-100 to teal-200 - service-card-quinary-bg: linear-gradient(135deg, #fed7aa, #fdba74), - // orange-200 to orange-300 - service-card-senary-bg: linear-gradient(135deg, #fecaca, #fca5a5), - // red-200 to red-300 - service-icon-primary: #2563eb, - // blue-600 - service-icon-secondary: #16a34a, - // green-600 - service-icon-tertiary: #7c3aed, - // violet-600 - service-icon-quaternary: #0d9488, - // teal-600 - service-icon-quinary: #ea580c, - // orange-600 - service-icon-senary: #dc2626, + // Section backgrounds + services-background: $light-services-bg, + gradient-services-title: $light-title-gradient, - // red-600 - service-title-primary: #1e40af, - // blue-700 - service-title-secondary: #166534, - // green-700 - service-title-tertiary: #6d28d9, - // violet-700 - service-title-quaternary: #0f766e, - // teal-700 - service-title-quinary: #c2410c, - // orange-700 - service-title-senary: #b91c1c, + // 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, - // red-700 - service-description-primary: #1d4ed8, - // blue-700 - service-description-secondary: #15803d, - // green-700 - service-description-tertiary: #5b21b6, - // violet-800 - service-description-quaternary: #115e59, - // teal-800 - service-description-quinary: #9a3412, - // orange-800 - service-description-senary: #991b1b, - // red-800 + // Icons - using same color for consistency + service-icon-primary: $light-primary-color, + service-icon-secondary: $light-secondary-color, + service-icon-tertiary: $light-tertiary-color, + service-icon-quaternary: $light-quaternary-color, + service-icon-quinary: $light-quinary-color, + service-icon-senary: $light-senary-color, + + // Titles - using same color as icons + service-title-primary: $light-primary-color, + service-title-secondary: $light-secondary-color, + service-title-tertiary: $light-tertiary-color, + service-title-quaternary: $light-quaternary-color, + service-title-quinary: $light-quinary-color, + service-title-senary: $light-senary-color, + + // Descriptions - using same color as icons and titles + service-description-primary: $light-primary-color, + service-description-secondary: $light-secondary-color, + service-description-tertiary: $light-tertiary-color, + service-description-quaternary: $light-quaternary-color, + service-description-quinary: $light-quinary-color, + service-description-senary: $light-senary-color ); $services-dark-theme: ( - // Services section colors - Dark mode with Tailwind palette - services-background: linear-gradient(135deg, #78350f 0%, #a78bfa 100%), - gradient-services-title: linear-gradient(90deg, #f1f5f9, #e2e8f0, #cbd5e1), - // Service card colors for dark theme - using Tailwind dark colors - service-card-primary-bg: - linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(37, 99, 235, 0.2)), - // blue-800/30 to blue-600/20 - service-card-secondary-bg: - linear-gradient(135deg, rgba(22, 101, 52, 0.3), rgba(34, 197, 94, 0.2)), - // green-800/30 to green-500/20 - service-card-tertiary-bg: - linear-gradient(135deg, rgba(91, 33, 182, 0.3), rgba(124, 58, 237, 0.2)), - // violet-800/30 to violet-600/20 - service-card-quaternary-bg: - linear-gradient(135deg, rgba(17, 94, 89, 0.3), rgba(20, 184, 166, 0.2)), - // teal-800/30 to teal-500/20 - service-card-quinary-bg: - linear-gradient(135deg, rgba(154, 52, 18, 0.3), rgba(249, 115, 22, 0.2)), - // orange-800/30 to orange-500/20 - service-card-senary-bg: - linear-gradient(135deg, rgba(153, 27, 27, 0.3), rgba(239, 68, 68, 0.2)), - // red-800/30 to red-500/20 - service-icon-primary: #60a5fa, - // blue-400 - service-icon-secondary: #4ade80, - // green-400 - service-icon-tertiary: #a78bfa, - // violet-400 - service-icon-quaternary: #2dd4bf, - // teal-400 - service-icon-quinary: #fb923c, - // orange-400 - service-icon-senary: #f87171, + // Section backgrounds + services-background: $dark-services-bg, + gradient-services-title: $dark-title-gradient, - // red-400 - service-title-primary: #93c5fd, - // blue-300 - service-title-secondary: #86efac, - // green-300 - service-title-tertiary: #c4b5fd, - // violet-300 - service-title-quaternary: #5eead4, - // teal-300 - service-title-quinary: #fdba74, - // orange-300 - service-title-senary: #fca5a5, + // 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, - // red-300 - service-description-primary: #bfdbfe, - // blue-200 - service-description-secondary: #bbf7d0, - // green-200 - service-description-tertiary: #ddd6fe, - // violet-200 - service-description-quaternary: #99f6e4, - // teal-200 - service-description-quinary: #fed7aa, - // orange-200 - service-description-senary: #fecaca, - // red-200 + // Icons - using distinct colors for better contrast + service-icon-primary: $dark-primary-icon, + service-icon-secondary: $dark-secondary-icon, + service-icon-tertiary: $dark-tertiary-icon, + service-icon-quaternary: $dark-quaternary-icon, + service-icon-quinary: $dark-quinary-icon, + service-icon-senary: $dark-senary-icon, + + // Titles - using medium contrast colors + service-title-primary: $dark-primary-title, + service-title-secondary: $dark-secondary-title, + service-title-tertiary: $dark-tertiary-title, + service-title-quaternary: $dark-quaternary-title, + service-title-quinary: $dark-quinary-title, + service-title-senary: $dark-senary-title, + + // Descriptions - all using the same high-contrast color + service-description-primary: $dark-description-color, + service-description-secondary: $dark-description-color, + service-description-tertiary: $dark-description-color, + service-description-quaternary: $dark-description-color, + service-description-quinary: $dark-description-color, + service-description-senary: $dark-description-color ); diff --git a/src/scss/themes/_skills.scss b/src/scss/themes/_skills.scss index d2b23c5..03687ff 100644 --- a/src/scss/themes/_skills.scss +++ b/src/scss/themes/_skills.scss @@ -1,158 +1,296 @@ +// Base color variables +$blue-primary: #3b82f6; +$blue-secondary: #1d4ed8; +$blue-tertiary: #18338c; +$blue-light: #60a5fa; + +$green-primary: #10b981; +$green-secondary: #047857; +$green-tertiary: #065f46; +$green-light: #34d399; + +$purple-primary: #8b5cf6; +$purple-secondary: #7c3aed; +$purple-tertiary: #3c0d9c; +$purple-light: #a78bfa; + +$teal-primary: #06b6d4; +$teal-secondary: #0891b2; +$teal-tertiary: #0e7490; +$teal-light: #22d3ee; + +$orange-primary: #f59e0b; +$orange-secondary: #d97706; +$orange-tertiary: #b45309; +$orange-light: #fbbf24; + +$indigo-primary: #6366f1; +$indigo-secondary: #4f46e5; +$indigo-tertiary: #4338ca; +$indigo-light: #818cf8; + +// Neutral colors +$slate-50: #f8fafc; +$slate-100: #f1f5f9; +$slate-200: #e2e8f0; +$slate-300: #cbd5e1; +$slate-400: #94a3b8; +$slate-500: #64748b; +$slate-600: #475569; +$slate-700: #334155; +$slate-800: #1e293b; +$slate-900: #0f172a; + +// Alpha values +$alpha-light: 0.1; +$alpha-medium: 0.2; +$alpha-heavy: 0.3; +$alpha-bg: 0.7; +$alpha-bg-card: 0.8; +$alpha-bg-card-alt: 0.9; +$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%, #3b82f6, transparent 50%), - gradient-skills-title: linear-gradient(90deg, #1e40af, #3b82f6, #10b981), - skills-category-bg: rgba(255, 255, 255, 0.7), - skills-category-border: rgba(148, 163, 184, 0.2), - skills-category-title-color: #1e293b, - skills-skill-name-color: #334155, - skills-skill-level-color: #64748b, - skills-skill-percentage-color: #475569, - skills-progress-bg: rgba(226, 232, 240, 0.8), - // Card 1 - Web Frameworks (Blue theme - matching hero) + 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, 0.9), - rgba(219, 234, 254, 0.95) + rgba(239, 246, 255, $alpha-bg-card-alt), + rgba(219, 234, 254, $alpha-bg-card-strong) ), - skills-category-border-primary: rgba(59, 130, 246, 0.2), + skills-category-border-primary: rgba($blue-primary, $alpha-medium), skills-gradient-primary: - linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05)), - skills-accent-primary: #3b82f6, + linear-gradient( + 135deg, + rgba($blue-primary, $alpha-light), + rgba($blue-secondary, 0.05) + ), + skills-accent-primary: $blue-primary, - // Card 2 - Styling & Design (Green theme - matching about) + // Card 2 - Styling & Design (Green theme) skills-category-bg-secondary: linear-gradient( 135deg, - rgba(236, 253, 245, 0.9), - rgba(209, 250, 229, 0.95) + rgba(236, 253, 245, $alpha-bg-card-alt), + rgba(209, 250, 229, $alpha-bg-card-strong) ), - skills-category-border-secondary: rgba(16, 185, 129, 0.2), + skills-category-border-secondary: rgba($green-primary, $alpha-medium), skills-gradient-secondary: - linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05)), - skills-accent-secondary: #10b981, + 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: linear-gradient( 135deg, - rgba(245, 243, 255, 0.9), - rgba(237, 233, 254, 0.95) + rgba(245, 243, 255, $alpha-bg-card-alt), + rgba(237, 233, 254, $alpha-bg-card-strong) ), - skills-category-border-tertiary: rgba(139, 92, 246, 0.2), + skills-category-border-tertiary: rgba($purple-primary, $alpha-medium), skills-gradient-tertiary: - linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.05)), - skills-accent-tertiary: #8b5cf6, + 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: linear-gradient( 135deg, - rgba(240, 253, 250, 0.9), - rgba(204, 251, 241, 0.95) + rgba(240, 253, 250, $alpha-bg-card-alt), + rgba(204, 251, 241, $alpha-bg-card-strong) ), - skills-category-border-quaternary: rgba(6, 182, 212, 0.2), + skills-category-border-quaternary: rgba($teal-primary, $alpha-medium), skills-gradient-quaternary: - linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(8, 145, 178, 0.05)), - skills-accent-quaternary: #06b6d4, + 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: linear-gradient( 135deg, - rgba(255, 251, 235, 0.9), - rgba(254, 243, 199, 0.95) + rgba(255, 251, 235, $alpha-bg-card-alt), + rgba(254, 243, 199, $alpha-bg-card-strong) ), - skills-category-border-quinary: rgba(245, 158, 11, 0.2), + skills-category-border-quinary: rgba($orange-primary, $alpha-medium), skills-gradient-quinary: - linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05)), - skills-accent-quinary: #f59e0b, + 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: linear-gradient( 135deg, - rgba(238, 242, 255, 0.9), - rgba(224, 231, 255, 0.95) + rgba(238, 242, 255, $alpha-bg-card-alt), + rgba(224, 231, 255, $alpha-bg-card-strong) ), - skills-category-border-senary: rgba(99, 102, 241, 0.2), + skills-category-border-senary: rgba($indigo-primary, $alpha-medium), skills-gradient-senary: - linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.05)), - skills-accent-senary: #6366f1, + linear-gradient( + 135deg, + rgba($indigo-primary, $alpha-light), + rgba($indigo-secondary, 0.05) + ), + skills-accent-senary: $indigo-primary, - // Enhanced progress bar colors - skills-progress-primary: linear-gradient(90deg, #3b82f6, #1d4ed8, #1e40af), - skills-progress-secondary: linear-gradient(90deg, #10b981, #047857, #065f46), - skills-progress-tertiary: linear-gradient(90deg, #8b5cf6, #7c3aed, #6d28d9), - skills-progress-quaternary: linear-gradient(90deg, #06b6d4, #0891b2, #0e7490), - skills-progress-quinary: linear-gradient(90deg, #f59e0b, #d97706, #b45309), - skills-progress-senary: linear-gradient(90deg, #6366f1, #4f46e5, #4338ca) + // 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-dark-theme: ( // Skills section colors - skills-background: linear-gradient(135deg, #1e293b 0%, #0ea5e9 100%), + skills-background: linear-gradient(135deg, $slate-800 0%, #0ea5e9 100%), skills-background-pattern: - radial-gradient(circle at 25% 25%, #1e40af, transparent 50%), - gradient-skills-title: linear-gradient(90deg, #60a5fa, #34d399, #a78bfa), - skills-category-bg: rgba(30, 41, 55, 0.8), - skills-category-border: rgba(71, 85, 105, 0.3), - skills-category-title-color: #f1f5f9, - skills-skill-name-color: #cbd5e1, - skills-skill-level-color: #94a3b8, - skills-skill-percentage-color: #e2e8f0, - skills-progress-bg: rgba(51, 65, 85, 0.8), + 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: $slate-100, + skills-skill-name-color: $slate-300, + skills-skill-level-color: $slate-400, + skills-skill-percentage-color: $slate-200, + 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, 0.3)), - skills-category-border-primary: rgba(96, 165, 250, 0.3), + 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(96, 165, 250, 0.1), rgba(59, 130, 246, 0.05)), - skills-accent-primary: #60a5fa, + linear-gradient( + 135deg, + rgba($blue-light, $alpha-light), + rgba($blue-primary, 0.05) + ), + skills-accent-primary: $blue-light, skills-category-bg-secondary: - linear-gradient(135deg, rgba(6, 95, 70, 0.4), rgba(4, 120, 87, 0.3)), - skills-category-border-secondary: rgba(52, 211, 153, 0.3), + 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(52, 211, 153, 0.1), rgba(16, 185, 129, 0.05)), - skills-accent-secondary: #34d399, + linear-gradient( + 135deg, + rgba($green-light, $alpha-light), + rgba($green-primary, 0.05) + ), + skills-accent-secondary: $green-light, skills-category-bg-tertiary: - linear-gradient(135deg, rgba(88, 28, 135, 0.4), rgba(109, 40, 217, 0.3)), - skills-category-border-tertiary: rgba(167, 139, 250, 0.3), + 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(167, 139, 250, 0.1), rgba(139, 92, 246, 0.05)), - skills-accent-tertiary: #a78bfa, + linear-gradient( + 135deg, + rgba($purple-light, $alpha-light), + rgba($purple-primary, 0.05) + ), + skills-accent-tertiary: $purple-light, skills-category-bg-quaternary: - linear-gradient(135deg, rgba(15, 118, 110, 0.4), rgba(17, 94, 89, 0.3)), - skills-category-border-quaternary: rgba(34, 211, 238, 0.3), + 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(34, 211, 238, 0.1), rgba(6, 182, 212, 0.05)), - skills-accent-quaternary: #22d3ee, + linear-gradient( + 135deg, + rgba($teal-light, $alpha-light), + rgba($teal-primary, 0.05) + ), + skills-accent-quaternary: $teal-light, skills-category-bg-quinary: - linear-gradient(135deg, rgba(180, 83, 9, 0.4), rgba(217, 119, 6, 0.3)), - skills-category-border-quinary: rgba(251, 191, 36, 0.3), + 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(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05)), - skills-accent-quinary: #fbbf24, + linear-gradient( + 135deg, + rgba($orange-light, $alpha-light), + rgba($orange-primary, 0.05) + ), + skills-accent-quinary: $orange-light, skills-category-bg-senary: - linear-gradient(135deg, rgba(67, 56, 202, 0.4), rgba(79, 70, 229, 0.3)), - skills-category-border-senary: rgba(129, 140, 248, 0.3), + 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(129, 140, 248, 0.1), rgba(99, 102, 241, 0.05)), - skills-accent-senary: #818cf8, + linear-gradient( + 135deg, + rgba($indigo-light, $alpha-light), + rgba($indigo-primary, 0.05) + ), + skills-accent-senary: $indigo-light, - // Enhanced progress bars for dark theme - skills-progress-primary: linear-gradient(90deg, #60a5fa, #3b82f6, #2563eb), - skills-progress-secondary: linear-gradient(90deg, #34d399, #10b981, #059669), - skills-progress-tertiary: linear-gradient(90deg, #a78bfa, #8b5cf6, #7c3aed), - skills-progress-quaternary: linear-gradient(90deg, #22d3ee, #06b6d4, #0891b2), - skills-progress-quinary: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706), - skills-progress-senary: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5) + // 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) );