WCAG additions: contrast fixes
This commit is contained in:
Sascha
parent
b213bc58ff
commit
23771938db
|
|
@ -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
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sascha Bach Portfolio</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
<div className="about-section__image-overlay"></div>
|
||||
<div className="about-section__image-overlay" aria-label={`${name}`}></div>
|
||||
</div>
|
||||
|
||||
<div className="about-section__bio-section">
|
||||
|
|
@ -92,17 +85,6 @@ export default function AboutSection(props: AboutSectionProps = {}) {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="about-section__skill-badges">
|
||||
{skillBadges.map((badge, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className={`about-section__skill-badge about-section__skill-badge--${badge.colorClass}`}
|
||||
>
|
||||
{badge.text}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 = {}) {
|
|||
<span className="skills-section__skill-level">
|
||||
{displayLevel}
|
||||
</span>
|
||||
<span className="skills-section__skill-percentage">
|
||||
<span className="skills-section__skill-percentage" aria-hidden="true">
|
||||
{skillItem.value}%
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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)};
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue