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

Added Project Screenshots, refactoring

This commit is contained in:
Sascha 2025-08-27 16:17:20 +02:00
parent d15418c3b1
commit 0d594d08b4
12 changed files with 319 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/ErgoVR.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

BIN
src/assets/portfolio.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 350 KiB

7
src/components/sections/ProjectsSection.tsx
View File

@ -1,6 +1,9 @@
import { Github, ExternalLink } from 'lucide-react'; import { Github, ExternalLink } from 'lucide-react';
import { personalConfig } from '../../config/personal'; import { personalConfig } from '../../config/personal';
import type { Project } from '../../data/Project'; import type { Project } from '../../data/Project';
import ergoVRImage from '../../assets/ErgoVR.PNG';
import portfolioImage from '../../assets/portfolio.PNG'
interface ProjectsSectionProps { interface ProjectsSectionProps {
title?: string; title?: string;
@ -16,7 +19,7 @@ export default function ProjectsSection({
id: 1, id: 1,
title: "Portfolio Website", title: "Portfolio Website",
description: "A personal portfolio website to showcase my skills, projects, and experience.", description: "A personal portfolio website to showcase my skills, projects, and experience.",
image: "", image: portfolioImage,
technologies: ["React", "TypeScript", "SCSS", "Vercel", "Github Copilot"], technologies: ["React", "TypeScript", "SCSS", "Vercel", "Github Copilot"],
github: personalConfig.projects.portfolio, github: personalConfig.projects.portfolio,
live: "" live: ""
@ -25,7 +28,7 @@ export default function ProjectsSection({
id: 2, id: 2,
title: "ErgoVR", title: "ErgoVR",
description: "A virtual reality application for analysis of motion sickness in VR environments.", description: "A virtual reality application for analysis of motion sickness in VR environments.",
image: "", image: ergoVRImage,
technologies: ["Unity3D", "C#", "Oculus SDK"], technologies: ["Unity3D", "C#", "Oculus SDK"],
github: personalConfig.projects.ergoVR github: personalConfig.projects.ergoVR
} }

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

@ -1,10 +1,11 @@
$about-light-theme: ( $about-light-theme: (
// About section colors // About section colors
about-background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdfa 100%), about-background: linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%),
// soft green to blue dbeafe
gradient-about-title: linear-gradient(90deg, #059669, #0d9488), gradient-about-title: linear-gradient(90deg, #059669, #0d9488),
about-greeting-color: #047857, about-greeting-color: #047857,
gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)), 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 colors using visual hierarchy
skill-badge-primary-bg: #dbeafe, skill-badge-primary-bg: #dbeafe,
skill-badge-primary-text: #1e40af, skill-badge-primary-text: #1e40af,
@ -29,16 +30,17 @@ $about-light-theme: (
feature-description-primary: #1d4ed8, feature-description-primary: #1d4ed8,
feature-description-secondary: #6d28d9, feature-description-secondary: #6d28d9,
feature-description-tertiary: #115e59, feature-description-tertiary: #115e59
); );
$about-dark-theme: ( $about-dark-theme: (
// About section colors // About section colors
about-background: linear-gradient(135deg, rgba(20, 83, 45, 0.2) 0%, rgba(6, 78, 59, 0.2) 100%), about-background: linear-gradient(135deg, #166534 0%, #1e293b 100%),
// deep green to blue
gradient-about-title: linear-gradient(90deg, #10b981, #14b8a6), gradient-about-title: linear-gradient(90deg, #10b981, #14b8a6),
about-greeting-color: #34d399, about-greeting-color: #34d399,
gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)), 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 colors using visual hierarchy
skill-badge-primary-bg: rgba(30, 58, 138, 0.3), skill-badge-primary-bg: rgba(30, 58, 138, 0.3),
skill-badge-primary-text: #93c5fd, skill-badge-primary-text: #93c5fd,
@ -50,9 +52,12 @@ $about-dark-theme: (
skill-badge-quaternary-text: #fdba74, skill-badge-quaternary-text: #fdba74,
// Feature card colors using visual hierarchy // Feature card colors using visual hierarchy
feature-card-primary-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)), feature-card-primary-bg:
feature-card-secondary-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)), linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
feature-card-tertiary-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)), feature-card-secondary-bg:
linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
feature-card-tertiary-bg:
linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
feature-icon-primary: #3b82f6, feature-icon-primary: #3b82f6,
feature-icon-secondary: #a855f7, feature-icon-secondary: #a855f7,
feature-icon-tertiary: #14b8a6, feature-icon-tertiary: #14b8a6,
@ -63,5 +68,5 @@ $about-dark-theme: (
feature-description-primary: #dbeafe, feature-description-primary: #dbeafe,
feature-description-secondary: #e9d5ff, feature-description-secondary: #e9d5ff,
feature-description-tertiary: #ccfbf1, feature-description-tertiary: #ccfbf1
); );

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

@ -2,44 +2,73 @@
$certifications-light-theme: ( $certifications-light-theme: (
// Certifications section background // Certifications section background
'certifications-background': linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%), 'certifications-background': linear-gradient(
135deg,
// Certifications title gradient (purple to pink) #e0e7ef 0%,
#91c5e0 100%
),
'gradient-certifications-title': linear-gradient(to right, #9333ea, #ec4899), 'gradient-certifications-title': linear-gradient(to right, #9333ea, #ec4899),
// Primary color for icons (purple)
'color-certifications-primary': #9333ea, 'color-certifications-primary': #9333ea,
// Card styling // Card styling
'certifications-card-background': linear-gradient(135deg, #ffffff 0%, #fafafa 100%), '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': 0 10px 15px -3px rgba(0, 0, 0, 0.1),
'certifications-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.1), 'certifications-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.1),
'certifications-card-overlay': linear-gradient(135deg, rgba(147, 51, 234, 0.02) 0%, rgba(236, 72, 153, 0.02) 100%), 'certifications-card-overlay':
linear-gradient(
135deg,
rgba(147, 51, 234, 0.02) 0%,
rgba(236, 72, 153, 0.02) 100%
),
// Badge styling (purple/pink theme) // Badge styling (purple/pink theme)
'certifications-badge-background': linear-gradient(to right, #f3e8ff, #fce7f3), 'certifications-badge-background': linear-gradient(
to right,
#f3e8ff,
#fce7f3
),
'certifications-badge-border': rgba(147, 51, 234, 0.2), 'certifications-badge-border': rgba(147, 51, 234, 0.2),
'color-certifications-badge-text': #7e22ce, 'color-certifications-badge-text': #7e22ce
); );
$certifications-dark-theme: ( $certifications-dark-theme: (
// Certifications section background (dark purple/pink gradient) // Certifications section background (dark purple/pink gradient)
'certifications-background': linear-gradient(135deg, rgba(88, 28, 135, 0.2) 0%, rgba(157, 23, 77, 0.2) 100%), 'certifications-background': linear-gradient(
135deg,
#a78bfa 0%,
#dc2626 100%
),
// Certifications title gradient (brighter purple to pink for dark mode) // 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, #a855f7, #f472b6),
// Primary color for icons (lighter purple) // Primary color for icons (lighter purple)
'color-certifications-primary': #a855f7, 'color-certifications-primary': #a855f7,
// Card styling (dark theme) // Card styling (dark theme)
'certifications-card-background': linear-gradient(135deg, #111827 0%, #1f2937 100%), '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': 0 10px 15px -3px rgba(0, 0, 0, 0.3),
'certifications-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.4), 'certifications-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.4),
'certifications-card-overlay': linear-gradient(135deg, rgba(168, 85, 247, 0.05) 0%, rgba(244, 114, 182, 0.05) 100%), 'certifications-card-overlay':
linear-gradient(
135deg,
rgba(168, 85, 247, 0.05) 0%,
rgba(244, 114, 182, 0.05) 100%
),
// Badge styling (dark theme with purple/pink) // Badge styling (dark theme with purple/pink)
'certifications-badge-background': linear-gradient(to right, rgba(88, 28, 135, 0.3), rgba(157, 23, 77, 0.3)), '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), 'certifications-badge-border': rgba(168, 85, 247, 0.3),
'color-certifications-badge-text': #d8b4fe, 'color-certifications-badge-text': #d8b4fe
); );
// Add to your certifications section SCSS file
.certifications-section__card {
display: flex;
flex-direction: column;
height: 100%;
}
.certifications-section__card-content {
margin-top: auto;
}

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

@ -2,11 +2,9 @@
$contact-light-theme: ( $contact-light-theme: (
// Contact section background (light indigo/purple tones) // Contact section background (light indigo/purple tones)
'contact-background': linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%), 'contact-background': linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%),
// Contact title gradient (indigo to purple) // Contact title gradient (indigo to purple)
'gradient-contact-title': linear-gradient(to right, #4f46e5, #7c3aed), 'gradient-contact-title': linear-gradient(to right, #4f46e5, #7c3aed),
// Primary color for icons (indigo) // Primary color for icons (indigo)
'color-contact-primary': #4f46e5, 'color-contact-primary': #4f46e5,
@ -18,27 +16,28 @@ $contact-light-theme: (
'contact-input-bg': #ffffff, 'contact-input-bg': #ffffff,
'contact-input-border': rgba(79, 70, 229, 0.2), 'contact-input-border': rgba(79, 70, 229, 0.2),
'contact-input-focus-ring': rgba(79, 70, 229, 0.1), 'contact-input-focus-ring': rgba(79, 70, 229, 0.1),
// Button styling // Button styling
'contact-button-bg': linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%), 'contact-button-bg': linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%),
'contact-button-text': #ffffff, 'contact-button-text': #ffffff,
'contact-button-hover-bg': linear-gradient(135deg, #4338ca 0%, #6d28d9 100%), 'contact-button-hover-bg': linear-gradient(135deg, #4338ca 0%, #6d28d9 100%),
// Social button styling // Social button styling
'contact-social-bg': rgba(255, 255, 255, 0.8), 'contact-social-bg': rgba(255, 255, 255, 0.8),
'contact-social-text': #4b5563, 'contact-social-text': #4b5563,
'contact-social-border': rgba(79, 70, 229, 0.2), 'contact-social-border': rgba(79, 70, 229, 0.2),
'contact-social-hover-bg': #ffffff, 'contact-social-hover-bg': #ffffff,
'contact-social-hover-border': rgba(79, 70, 229, 0.3), 'contact-social-hover-border': rgba(79, 70, 229, 0.3)
); );
$contact-dark-theme: ( $contact-dark-theme: (
// Contact section background (dark indigo/purple tones) // Contact section background (dark indigo/purple tones)
'contact-background': linear-gradient(135deg, rgba(67, 56, 202, 0.2) 0%, rgba(109, 40, 217, 0.2) 100%), 'contact-background':
linear-gradient(
135deg,
rgba(67, 56, 202, 0.2) 0%,
rgba(109, 40, 217, 0.2) 100%
),
// Contact title gradient (brighter indigo to purple for dark mode) // 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, #6366f1, #a855f7),
// Primary color for icons (lighter indigo) // Primary color for icons (lighter indigo)
'color-contact-primary': #6366f1, 'color-contact-primary': #6366f1,
@ -46,21 +45,18 @@ $contact-dark-theme: (
'contact-form-bg': linear-gradient(135deg, #111827 0%, #1f2937 100%), 'contact-form-bg': linear-gradient(135deg, #111827 0%, #1f2937 100%),
'contact-form-border': rgba(99, 102, 241, 0.2), 'contact-form-border': rgba(99, 102, 241, 0.2),
'contact-form-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.3), 'contact-form-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.3),
// Input styling (dark theme) // Input styling (dark theme)
'contact-input-bg': #1f2937, 'contact-input-bg': #1f2937,
'contact-input-border': rgba(99, 102, 241, 0.3), 'contact-input-border': rgba(99, 102, 241, 0.3),
'contact-input-focus-ring': rgba(99, 102, 241, 0.2), 'contact-input-focus-ring': rgba(99, 102, 241, 0.2),
// Button styling (dark theme) // Button styling (dark theme)
'contact-button-bg': linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%), 'contact-button-bg': linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%),
'contact-button-text': #ffffff, 'contact-button-text': #ffffff,
'contact-button-hover-bg': linear-gradient(135deg, #6366f1 0%, #a855f7 100%), 'contact-button-hover-bg': linear-gradient(135deg, #6366f1 0%, #a855f7 100%),
// Social button styling (dark theme) // Social button styling (dark theme)
'contact-social-bg': rgba(31, 41, 55, 0.8), 'contact-social-bg': rgba(31, 41, 55, 0.8),
'contact-social-text': #e5e7eb, 'contact-social-text': #e5e7eb,
'contact-social-border': rgba(99, 102, 241, 0.3), 'contact-social-border': rgba(99, 102, 241, 0.3),
'contact-social-hover-bg': #374151, 'contact-social-hover-bg': #374151,
'contact-social-hover-border': rgba(99, 102, 241, 0.4), 'contact-social-hover-border': rgba(99, 102, 241, 0.4)
); );

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

@ -1,8 +1,7 @@
@use '../variables' as *; @use '../variables' as *;
$hero-light-theme: ( $hero-light-theme: (
hero-background: $gradient-hero-light, hero-background: linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%),
// Stat colors using visual hierarchy // Stat colors using visual hierarchy
stat-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), stat-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe),
stat-primary-value: #2563eb, stat-primary-value: #2563eb,
@ -22,22 +21,31 @@ $hero-light-theme: (
); );
$hero-dark-theme: ( $hero-dark-theme: (
hero-background: $gradient-hero-dark, 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%
),
// Stat colors using visual hierarchy // Stat colors using visual hierarchy
stat-primary-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)), stat-primary-bg:
linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
stat-primary-value: #2563eb, stat-primary-value: #2563eb,
stat-primary-label: #93c5fd, stat-primary-label: #93c5fd,
stat-secondary-bg: linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)), stat-secondary-bg:
linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)),
stat-secondary-value: #16a34a, stat-secondary-value: #16a34a,
stat-secondary-label: #86efac, stat-secondary-label: #86efac,
stat-tertiary-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)), stat-tertiary-bg:
linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
stat-tertiary-value: #0d9488, stat-tertiary-value: #0d9488,
stat-tertiary-label: #5eead4, stat-tertiary-label: #5eead4,
stat-quaternary-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)), stat-quaternary-bg:
linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
stat-quaternary-value: #9333ea, stat-quaternary-value: #9333ea,
stat-quaternary-label: #c4b5fd, stat-quaternary-label: #c4b5fd,
); );

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

@ -2,26 +2,23 @@
$projects-light-theme: ( $projects-light-theme: (
// Projects section background (light orange/red tones) // Projects section background (light orange/red tones)
'projects-background': linear-gradient(135deg, #fff7ed 0%, #fef2f2 100%), 'projects-background': linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%),
// Projects title gradient (orange to red) // Projects title gradient (orange to red)
'gradient-projects-title': linear-gradient(to right, #ea580c, #dc2626), 'gradient-projects-title': linear-gradient(to right, #ea580c, #dc2626),
// Card styling // Card styling
'projects-card-background': linear-gradient(135deg, #ffffff 0%, #fefefe 100%), 'projects-card-background': linear-gradient(135deg, #ffffff 0%, #fefefe 100%),
'projects-card-border': rgba(234, 88, 12, 0.1), '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': 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-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.1),
// Overlay styling // Overlay styling
'projects-overlay-background': rgba(0, 0, 0, 0.6), 'projects-overlay-background': rgba(0, 0, 0, 0.6),
// Button styling // Button styling
'projects-button-primary-bg': linear-gradient(135deg, #ea580c 0%, #dc2626 100%), 'projects-button-primary-bg':
linear-gradient(135deg, #ea580c 0%, #dc2626 100%),
'projects-button-primary-text': #ffffff, 'projects-button-primary-text': #ffffff,
'projects-button-primary-border': rgba(234, 88, 12, 0.3), 'projects-button-primary-border': rgba(234, 88, 12, 0.3),
'projects-button-primary-hover-bg': linear-gradient(135deg, #dc2626 0%, #b91c1c 100%), '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-bg': rgba(255, 255, 255, 0.9),
'projects-button-secondary-text': #374151, 'projects-button-secondary-text': #374151,
'projects-button-secondary-border': rgba(255, 255, 255, 0.2), 'projects-button-secondary-border': rgba(255, 255, 255, 0.2),
@ -30,38 +27,45 @@ $projects-light-theme: (
// Tech badge styling // Tech badge styling
'projects-tech-badge-bg': linear-gradient(135deg, #fed7aa 0%, #fecaca 100%), 'projects-tech-badge-bg': linear-gradient(135deg, #fed7aa 0%, #fecaca 100%),
'projects-tech-badge-text': #c2410c, 'projects-tech-badge-text': #c2410c,
'projects-tech-badge-border': rgba(234, 88, 12, 0.2), 'projects-tech-badge-border': rgba(234, 88, 12, 0.2)
); );
$projects-dark-theme: ( $projects-dark-theme: (
// Projects section background (dark orange/red tones) // Projects section background (dark orange/red tones)
'projects-background': linear-gradient(135deg, rgba(124, 45, 18, 0.2) 0%, rgba(127, 29, 29, 0.2) 100%), 'projects-background':
linear-gradient(
135deg,
rgba(124, 45, 18, 0.2) 0%,
rgba(127, 29, 29, 0.2) 100%
),
// Projects title gradient (brighter orange to red for dark mode) // Projects title gradient (brighter orange to red for dark mode)
'gradient-projects-title': linear-gradient(to right, #fb923c, #f87171), 'gradient-projects-title': linear-gradient(to right, #fb923c, #f87171),
// Card styling (dark theme) // Card styling (dark theme)
'projects-card-background': linear-gradient(135deg, #111827 0%, #1f2937 100%), 'projects-card-background': linear-gradient(135deg, #111827 0%, #1f2937 100%),
'projects-card-border': rgba(251, 146, 60, 0.2), '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': 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-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.4),
// Overlay styling // Overlay styling
'projects-overlay-background': rgba(0, 0, 0, 0.7), 'projects-overlay-background': rgba(0, 0, 0, 0.7),
// Button styling (dark theme) // Button styling (dark theme)
'projects-button-primary-bg': linear-gradient(135deg, #ea580c 0%, #dc2626 100%), 'projects-button-primary-bg':
linear-gradient(135deg, #ea580c 0%, #dc2626 100%),
'projects-button-primary-text': #ffffff, 'projects-button-primary-text': #ffffff,
'projects-button-primary-border': rgba(234, 88, 12, 0.3), 'projects-button-primary-border': rgba(234, 88, 12, 0.3),
'projects-button-primary-hover-bg': linear-gradient(135deg, #fb923c 0%, #f87171 100%), '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-bg': rgba(31, 41, 55, 0.9),
'projects-button-secondary-text': #e5e7eb, 'projects-button-secondary-text': #e5e7eb,
'projects-button-secondary-border': rgba(75, 85, 99, 0.3), 'projects-button-secondary-border': rgba(75, 85, 99, 0.3),
'projects-button-secondary-hover-bg': #374151, 'projects-button-secondary-hover-bg': #374151,
// Tech badge styling (dark theme) // 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-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-text': #fed7aa,
'projects-tech-badge-border': rgba(251, 146, 60, 0.3), 'projects-tech-badge-border': rgba(251, 146, 60, 0.3)
); );

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

@ -1,69 +1,119 @@
$services-light-theme: ( $services-light-theme: (
// Services section colors - Tailwind inspired // Services section colors - Tailwind inspired
services-background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 70%, #94a3b8 100%), services-background: linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%),
gradient-services-title: linear-gradient(90deg, #0f172a, #1e293b, #334155), gradient-services-title: linear-gradient(90deg, #0f172a, #1e293b, #334155),
// Service card colors using Tailwind color palette // Service card colors using Tailwind color palette
service-card-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe), // blue-100 to blue-200 service-card-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe),
service-card-secondary-bg: linear-gradient(135deg, #dcfce7, #bbf7d0), // green-100 to green-200 // blue-100 to blue-200
service-card-tertiary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe), // violet-100 to violet-200 service-card-secondary-bg: linear-gradient(135deg, #dcfce7, #bbf7d0),
service-card-quaternary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4), // teal-100 to teal-200 // green-100 to green-200
service-card-quinary-bg: linear-gradient(135deg, #fed7aa, #fdba74), // orange-200 to orange-300 service-card-tertiary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe),
service-card-senary-bg: linear-gradient(135deg, #fecaca, #fca5a5), // red-200 to red-300 // 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,
service-icon-primary: #2563eb, // blue-600 // red-600
service-icon-secondary: #16a34a, // green-600 service-title-primary: #1e40af,
service-icon-tertiary: #7c3aed, // violet-600 // blue-700
service-icon-quaternary: #0d9488, // teal-600 service-title-secondary: #166534,
service-icon-quinary: #ea580c, // orange-600 // green-700
service-icon-senary: #dc2626, // red-600 service-title-tertiary: #6d28d9,
// violet-700
service-title-quaternary: #0f766e,
// teal-700
service-title-quinary: #c2410c,
// orange-700
service-title-senary: #b91c1c,
service-title-primary: #1e40af, // blue-700 // red-700
service-title-secondary: #166534, // green-700 service-description-primary: #1d4ed8,
service-title-tertiary: #6d28d9, // violet-700 // blue-700
service-title-quaternary: #0f766e, // teal-700 service-description-secondary: #15803d,
service-title-quinary: #c2410c, // orange-700 // green-700
service-title-senary: #b91c1c, // red-700 service-description-tertiary: #5b21b6,
// violet-800
service-description-primary: #1d4ed8, // blue-700 service-description-quaternary: #115e59,
service-description-secondary: #15803d, // green-700 // teal-800
service-description-tertiary: #5b21b6, // violet-800 service-description-quinary: #9a3412,
service-description-quaternary: #115e59, // teal-800 // orange-800
service-description-quinary: #9a3412, // orange-800 service-description-senary: #991b1b,
service-description-senary: #991b1b, // red-800 // red-800
); );
$services-dark-theme: ( $services-dark-theme: (
// Services section colors - Dark mode with Tailwind palette // Services section colors - Dark mode with Tailwind palette
services-background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 70%, #475569 100%), services-background: linear-gradient(135deg, #78350f 0%, #a78bfa 100%),
gradient-services-title: linear-gradient(90deg, #f1f5f9, #e2e8f0, #cbd5e1), gradient-services-title: linear-gradient(90deg, #f1f5f9, #e2e8f0, #cbd5e1),
// Service card colors for dark theme - using Tailwind dark colors // 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-primary-bg:
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 linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(37, 99, 235, 0.2)),
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 // blue-800/30 to blue-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-secondary-bg:
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 linear-gradient(135deg, rgba(22, 101, 52, 0.3), rgba(34, 197, 94, 0.2)),
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 // 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,
service-icon-primary: #60a5fa, // blue-400 // red-400
service-icon-secondary: #4ade80, // green-400 service-title-primary: #93c5fd,
service-icon-tertiary: #a78bfa, // violet-400 // blue-300
service-icon-quaternary: #2dd4bf, // teal-400 service-title-secondary: #86efac,
service-icon-quinary: #fb923c, // orange-400 // green-300
service-icon-senary: #f87171, // red-400 service-title-tertiary: #c4b5fd,
// violet-300
service-title-quaternary: #5eead4,
// teal-300
service-title-quinary: #fdba74,
// orange-300
service-title-senary: #fca5a5,
service-title-primary: #93c5fd, // blue-300 // red-300
service-title-secondary: #86efac, // green-300 service-description-primary: #bfdbfe,
service-title-tertiary: #c4b5fd, // violet-300 // blue-200
service-title-quaternary: #5eead4, // teal-300 service-description-secondary: #bbf7d0,
service-title-quinary: #fdba74, // orange-300 // green-200
service-title-senary: #fca5a5, // red-300 service-description-tertiary: #ddd6fe,
// violet-200
service-description-primary: #bfdbfe, // blue-200 service-description-quaternary: #99f6e4,
service-description-secondary: #bbf7d0, // green-200 // teal-200
service-description-tertiary: #ddd6fe, // violet-200 service-description-quinary: #fed7aa,
service-description-quaternary: #99f6e4, // teal-200 // orange-200
service-description-quinary: #fed7aa, // orange-200 service-description-senary: #fecaca,
service-description-senary: #fecaca, // red-200 // red-200
); );

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

@ -1,7 +1,8 @@
$skills-light-theme: ( $skills-light-theme: (
// Skills section colors // Skills section colors
skills-background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 25%, #e2e8f0 75%, #cbd5e1 100%), skills-background: linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%),
skills-background-pattern: radial-gradient(circle at 25% 25%, #3b82f6, transparent 50%), skills-background-pattern:
radial-gradient(circle at 25% 25%, #3b82f6, transparent 50%),
gradient-skills-title: linear-gradient(90deg, #1e40af, #3b82f6, #10b981), gradient-skills-title: linear-gradient(90deg, #1e40af, #3b82f6, #10b981),
skills-category-bg: rgba(255, 255, 255, 0.7), skills-category-bg: rgba(255, 255, 255, 0.7),
skills-category-border: rgba(148, 163, 184, 0.2), skills-category-border: rgba(148, 163, 184, 0.2),
@ -10,41 +11,76 @@ $skills-light-theme: (
skills-skill-level-color: #64748b, skills-skill-level-color: #64748b,
skills-skill-percentage-color: #475569, skills-skill-percentage-color: #475569,
skills-progress-bg: rgba(226, 232, 240, 0.8), skills-progress-bg: rgba(226, 232, 240, 0.8),
// Card 1 - Web Frameworks (Blue theme - matching hero) // Card 1 - Web Frameworks (Blue theme - matching hero)
skills-category-bg-primary: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(219, 234, 254, 0.95)), skills-category-bg-primary:
linear-gradient(
135deg,
rgba(239, 246, 255, 0.9),
rgba(219, 234, 254, 0.95)
),
skills-category-border-primary: rgba(59, 130, 246, 0.2), skills-category-border-primary: rgba(59, 130, 246, 0.2),
skills-gradient-primary: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05)), skills-gradient-primary:
linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05)),
skills-accent-primary: #3b82f6, skills-accent-primary: #3b82f6,
// Card 2 - Styling & Design (Green theme - matching about) // Card 2 - Styling & Design (Green theme - matching about)
skills-category-bg-secondary: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(209, 250, 229, 0.95)), skills-category-bg-secondary:
linear-gradient(
135deg,
rgba(236, 253, 245, 0.9),
rgba(209, 250, 229, 0.95)
),
skills-category-border-secondary: rgba(16, 185, 129, 0.2), skills-category-border-secondary: rgba(16, 185, 129, 0.2),
skills-gradient-secondary: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05)), skills-gradient-secondary:
linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05)),
skills-accent-secondary: #10b981, skills-accent-secondary: #10b981,
// Card 3 - Backend Development (Purple theme) // 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)), skills-category-bg-tertiary:
linear-gradient(
135deg,
rgba(245, 243, 255, 0.9),
rgba(237, 233, 254, 0.95)
),
skills-category-border-tertiary: rgba(139, 92, 246, 0.2), skills-category-border-tertiary: rgba(139, 92, 246, 0.2),
skills-gradient-tertiary: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.05)), skills-gradient-tertiary:
linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.05)),
skills-accent-tertiary: #8b5cf6, skills-accent-tertiary: #8b5cf6,
// Card 4 - Development Tools (Teal theme) // 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)), skills-category-bg-quaternary:
linear-gradient(
135deg,
rgba(240, 253, 250, 0.9),
rgba(204, 251, 241, 0.95)
),
skills-category-border-quaternary: rgba(6, 182, 212, 0.2), skills-category-border-quaternary: rgba(6, 182, 212, 0.2),
skills-gradient-quaternary: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(8, 145, 178, 0.05)), skills-gradient-quaternary:
linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(8, 145, 178, 0.05)),
skills-accent-quaternary: #06b6d4, skills-accent-quaternary: #06b6d4,
// Card 5 - Testing & Quality (Orange theme) // 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)), skills-category-bg-quinary:
linear-gradient(
135deg,
rgba(255, 251, 235, 0.9),
rgba(254, 243, 199, 0.95)
),
skills-category-border-quinary: rgba(245, 158, 11, 0.2), skills-category-border-quinary: rgba(245, 158, 11, 0.2),
skills-gradient-quinary: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05)), skills-gradient-quinary:
linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05)),
skills-accent-quinary: #f59e0b, skills-accent-quinary: #f59e0b,
// Card 6 - AI-Tools (Indigo theme) // 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)), skills-category-bg-senary:
linear-gradient(
135deg,
rgba(238, 242, 255, 0.9),
rgba(224, 231, 255, 0.95)
),
skills-category-border-senary: rgba(99, 102, 241, 0.2), skills-category-border-senary: rgba(99, 102, 241, 0.2),
skills-gradient-senary: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.05)), skills-gradient-senary:
linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.05)),
skills-accent-senary: #6366f1, skills-accent-senary: #6366f1,
// Enhanced progress bar colors // Enhanced progress bar colors
@ -53,13 +89,14 @@ $skills-light-theme: (
skills-progress-tertiary: linear-gradient(90deg, #8b5cf6, #7c3aed, #6d28d9), skills-progress-tertiary: linear-gradient(90deg, #8b5cf6, #7c3aed, #6d28d9),
skills-progress-quaternary: linear-gradient(90deg, #06b6d4, #0891b2, #0e7490), skills-progress-quaternary: linear-gradient(90deg, #06b6d4, #0891b2, #0e7490),
skills-progress-quinary: linear-gradient(90deg, #f59e0b, #d97706, #b45309), skills-progress-quinary: linear-gradient(90deg, #f59e0b, #d97706, #b45309),
skills-progress-senary: linear-gradient(90deg, #6366f1, #4f46e5, #4338ca), skills-progress-senary: linear-gradient(90deg, #6366f1, #4f46e5, #4338ca)
); );
$skills-dark-theme: ( $skills-dark-theme: (
// Skills section colors // Skills section colors
skills-background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 75%, #475569 100%), skills-background: linear-gradient(135deg, #1e293b 0%, #0ea5e9 100%),
skills-background-pattern: radial-gradient(circle at 25% 25%, #1e40af, transparent 50%), skills-background-pattern:
radial-gradient(circle at 25% 25%, #1e40af, transparent 50%),
gradient-skills-title: linear-gradient(90deg, #60a5fa, #34d399, #a78bfa), gradient-skills-title: linear-gradient(90deg, #60a5fa, #34d399, #a78bfa),
skills-category-bg: rgba(30, 41, 55, 0.8), skills-category-bg: rgba(30, 41, 55, 0.8),
skills-category-border: rgba(71, 85, 105, 0.3), skills-category-border: rgba(71, 85, 105, 0.3),
@ -68,36 +105,47 @@ $skills-dark-theme: (
skills-skill-level-color: #94a3b8, skills-skill-level-color: #94a3b8,
skills-skill-percentage-color: #e2e8f0, skills-skill-percentage-color: #e2e8f0,
skills-progress-bg: rgba(51, 65, 85, 0.8), skills-progress-bg: rgba(51, 65, 85, 0.8),
// Dark theme card backgrounds // 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-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), skills-category-border-primary: rgba(96, 165, 250, 0.3),
skills-gradient-primary: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(59, 130, 246, 0.05)), skills-gradient-primary:
linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(59, 130, 246, 0.05)),
skills-accent-primary: #60a5fa, skills-accent-primary: #60a5fa,
skills-category-bg-secondary: linear-gradient(135deg, rgba(6, 95, 70, 0.4), rgba(4, 120, 87, 0.3)), 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), skills-category-border-secondary: rgba(52, 211, 153, 0.3),
skills-gradient-secondary: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(16, 185, 129, 0.05)), skills-gradient-secondary:
linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(16, 185, 129, 0.05)),
skills-accent-secondary: #34d399, skills-accent-secondary: #34d399,
skills-category-bg-tertiary: linear-gradient(135deg, rgba(88, 28, 135, 0.4), rgba(109, 40, 217, 0.3)), 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), skills-category-border-tertiary: rgba(167, 139, 250, 0.3),
skills-gradient-tertiary: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(139, 92, 246, 0.05)), skills-gradient-tertiary:
linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(139, 92, 246, 0.05)),
skills-accent-tertiary: #a78bfa, skills-accent-tertiary: #a78bfa,
skills-category-bg-quaternary: linear-gradient(135deg, rgba(15, 118, 110, 0.4), rgba(17, 94, 89, 0.3)), 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), skills-category-border-quaternary: rgba(34, 211, 238, 0.3),
skills-gradient-quaternary: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(6, 182, 212, 0.05)), skills-gradient-quaternary:
linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(6, 182, 212, 0.05)),
skills-accent-quaternary: #22d3ee, skills-accent-quaternary: #22d3ee,
skills-category-bg-quinary: linear-gradient(135deg, rgba(180, 83, 9, 0.4), rgba(217, 119, 6, 0.3)), 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), skills-category-border-quinary: rgba(251, 191, 36, 0.3),
skills-gradient-quinary: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05)), skills-gradient-quinary:
linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05)),
skills-accent-quinary: #fbbf24, skills-accent-quinary: #fbbf24,
skills-category-bg-senary: linear-gradient(135deg, rgba(67, 56, 202, 0.4), rgba(79, 70, 229, 0.3)), 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), skills-category-border-senary: rgba(129, 140, 248, 0.3),
skills-gradient-senary: linear-gradient(135deg, rgba(129, 140, 248, 0.1), rgba(99, 102, 241, 0.05)), skills-gradient-senary:
linear-gradient(135deg, rgba(129, 140, 248, 0.1), rgba(99, 102, 241, 0.05)),
skills-accent-senary: #818cf8, skills-accent-senary: #818cf8,
// Enhanced progress bars for dark theme // Enhanced progress bars for dark theme
@ -106,5 +154,5 @@ $skills-dark-theme: (
skills-progress-tertiary: linear-gradient(90deg, #a78bfa, #8b5cf6, #7c3aed), skills-progress-tertiary: linear-gradient(90deg, #a78bfa, #8b5cf6, #7c3aed),
skills-progress-quaternary: linear-gradient(90deg, #22d3ee, #06b6d4, #0891b2), skills-progress-quaternary: linear-gradient(90deg, #22d3ee, #06b6d4, #0891b2),
skills-progress-quinary: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706), skills-progress-quinary: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706),
skills-progress-senary: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5), skills-progress-senary: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5)
); );

12
src/scss/variables.scss
View File

@ -38,18 +38,6 @@ $gradient-text: linear-gradient(
$color-primary, $color-primary,
#0d9488 #0d9488
); );
$gradient-hero-light: linear-gradient(
135deg,
#dbeafe 0%,
#e0e7ff 50%,
#f3e8ff 100%
);
$gradient-hero-dark: linear-gradient(
135deg,
rgba(30, 58, 138, 0.3) 0%,
rgba(55, 48, 163, 0.3) 50%,
rgba(88, 28, 135, 0.3) 100%
);
// Services Section Variables // Services Section Variables
$services-card-padding: 1.5rem; $services-card-padding: 1.5rem;

1
src/vite-env.d.ts vendored
View File

@ -1 +1,2 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
declare module '*.PNG';