diff --git a/src/assets/ErgoVR.PNG b/src/assets/ErgoVR.PNG new file mode 100644 index 0000000..bc713fc Binary files /dev/null and b/src/assets/ErgoVR.PNG differ diff --git a/src/assets/portfolio.PNG b/src/assets/portfolio.PNG new file mode 100644 index 0000000..41b06d1 Binary files /dev/null and b/src/assets/portfolio.PNG differ diff --git a/src/components/sections/ProjectsSection.tsx b/src/components/sections/ProjectsSection.tsx index 97e41af..2839665 100644 --- a/src/components/sections/ProjectsSection.tsx +++ b/src/components/sections/ProjectsSection.tsx @@ -1,6 +1,9 @@ import { Github, ExternalLink } from 'lucide-react'; import { personalConfig } from '../../config/personal'; import type { Project } from '../../data/Project'; +import ergoVRImage from '../../assets/ErgoVR.PNG'; +import portfolioImage from '../../assets/portfolio.PNG' + interface ProjectsSectionProps { title?: string; @@ -16,7 +19,7 @@ export default function ProjectsSection({ id: 1, title: "Portfolio Website", description: "A personal portfolio website to showcase my skills, projects, and experience.", - image: "", + image: portfolioImage, technologies: ["React", "TypeScript", "SCSS", "Vercel", "Github Copilot"], github: personalConfig.projects.portfolio, live: "" @@ -25,7 +28,7 @@ export default function ProjectsSection({ id: 2, title: "ErgoVR", description: "A virtual reality application for analysis of motion sickness in VR environments.", - image: "", + image: ergoVRImage, technologies: ["Unity3D", "C#", "Oculus SDK"], github: personalConfig.projects.ergoVR } @@ -49,17 +52,17 @@ export default function ProjectsSection({ {projects.map((project) => (
- {project.title}
{project.github && ( - @@ -68,9 +71,9 @@ export default function ProjectsSection({ )} {project.live && ( - diff --git a/src/scss/themes/_about.scss b/src/scss/themes/_about.scss index 0bd1ccd..0fc982e 100644 --- a/src/scss/themes/_about.scss +++ b/src/scss/themes/_about.scss @@ -1,10 +1,11 @@ $about-light-theme: ( // 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), 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-primary-bg: #dbeafe, skill-badge-primary-text: #1e40af, @@ -29,16 +30,17 @@ $about-light-theme: ( feature-description-primary: #1d4ed8, feature-description-secondary: #6d28d9, - feature-description-tertiary: #115e59, + feature-description-tertiary: #115e59 ); $about-dark-theme: ( // 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), 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-primary-bg: rgba(30, 58, 138, 0.3), skill-badge-primary-text: #93c5fd, @@ -50,9 +52,12 @@ $about-dark-theme: ( skill-badge-quaternary-text: #fdba74, // 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-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-card-primary-bg: + linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 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-secondary: #a855f7, feature-icon-tertiary: #14b8a6, @@ -63,5 +68,5 @@ $about-dark-theme: ( feature-description-primary: #dbeafe, feature-description-secondary: #e9d5ff, - feature-description-tertiary: #ccfbf1, -); \ No newline at end of file + feature-description-tertiary: #ccfbf1 +); diff --git a/src/scss/themes/_certifications.scss b/src/scss/themes/_certifications.scss index e218e15..d09ce54 100644 --- a/src/scss/themes/_certifications.scss +++ b/src/scss/themes/_certifications.scss @@ -2,44 +2,73 @@ $certifications-light-theme: ( // Certifications section background - 'certifications-background': linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%), - - // Certifications title gradient (purple to pink) + 'certifications-background': linear-gradient( + 135deg, + #e0e7ef 0%, + #91c5e0 100% + ), 'gradient-certifications-title': linear-gradient(to right, #9333ea, #ec4899), - - // Primary color for icons (purple) 'color-certifications-primary': #9333ea, - + // 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-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) - '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), - 'color-certifications-badge-text': #7e22ce, + 'color-certifications-badge-text': #7e22ce ); $certifications-dark-theme: ( // 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) 'gradient-certifications-title': linear-gradient(to right, #a855f7, #f472b6), - // Primary color for icons (lighter purple) 'color-certifications-primary': #a855f7, - + // 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-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) - '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), - '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; +} diff --git a/src/scss/themes/_contact.scss b/src/scss/themes/_contact.scss index 702ef19..7d75749 100644 --- a/src/scss/themes/_contact.scss +++ b/src/scss/themes/_contact.scss @@ -2,14 +2,12 @@ $contact-light-theme: ( // 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) 'gradient-contact-title': linear-gradient(to right, #4f46e5, #7c3aed), - // Primary color for icons (indigo) 'color-contact-primary': #4f46e5, - + // Form styling 'contact-form-bg': linear-gradient(135deg, #ffffff 0%, #fefefe 100%), 'contact-form-border': rgba(79, 70, 229, 0.1), @@ -18,49 +16,47 @@ $contact-light-theme: ( 'contact-input-bg': #ffffff, 'contact-input-border': rgba(79, 70, 229, 0.2), 'contact-input-focus-ring': rgba(79, 70, 229, 0.1), - // Button styling 'contact-button-bg': linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%), 'contact-button-text': #ffffff, 'contact-button-hover-bg': linear-gradient(135deg, #4338ca 0%, #6d28d9 100%), - // Social button styling 'contact-social-bg': rgba(255, 255, 255, 0.8), 'contact-social-text': #4b5563, 'contact-social-border': rgba(79, 70, 229, 0.2), '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 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) 'gradient-contact-title': linear-gradient(to right, #6366f1, #a855f7), - // Primary color for icons (lighter indigo) 'color-contact-primary': #6366f1, - + // Form styling (dark theme) 'contact-form-bg': linear-gradient(135deg, #111827 0%, #1f2937 100%), 'contact-form-border': rgba(99, 102, 241, 0.2), 'contact-form-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.3), - // Input styling (dark theme) 'contact-input-bg': #1f2937, 'contact-input-border': rgba(99, 102, 241, 0.3), 'contact-input-focus-ring': rgba(99, 102, 241, 0.2), - // Button styling (dark theme) 'contact-button-bg': linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%), 'contact-button-text': #ffffff, 'contact-button-hover-bg': linear-gradient(135deg, #6366f1 0%, #a855f7 100%), - // Social button styling (dark theme) 'contact-social-bg': rgba(31, 41, 55, 0.8), 'contact-social-text': #e5e7eb, 'contact-social-border': rgba(99, 102, 241, 0.3), '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) ); diff --git a/src/scss/themes/_hero.scss b/src/scss/themes/_hero.scss index 9e6e752..c413c6d 100644 --- a/src/scss/themes/_hero.scss +++ b/src/scss/themes/_hero.scss @@ -1,8 +1,7 @@ @use '../variables' as *; $hero-light-theme: ( - hero-background: $gradient-hero-light, - + 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, @@ -22,22 +21,31 @@ $hero-light-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-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-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-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-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-label: #c4b5fd, -); \ No newline at end of file +); diff --git a/src/scss/themes/_projects.scss b/src/scss/themes/_projects.scss index b3bae20..1cf7c87 100644 --- a/src/scss/themes/_projects.scss +++ b/src/scss/themes/_projects.scss @@ -2,66 +2,70 @@ $projects-light-theme: ( // 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) 'gradient-projects-title': linear-gradient(to right, #ea580c, #dc2626), - // 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), - // Overlay styling 'projects-overlay-background': rgba(0, 0, 0, 0.6), - // 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-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-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), + 'projects-tech-badge-border': rgba(234, 88, 12, 0.2) ); $projects-dark-theme: ( // 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) '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), - // Overlay styling 'projects-overlay-background': rgba(0, 0, 0, 0.7), - // 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-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-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-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), + 'projects-tech-badge-border': rgba(251, 146, 60, 0.3) ); diff --git a/src/scss/themes/_services.scss b/src/scss/themes/_services.scss index bb2522b..547446a 100644 --- a/src/scss/themes/_services.scss +++ b/src/scss/themes/_services.scss @@ -1,69 +1,119 @@ $services-light-theme: ( // 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), - // 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-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, - 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, // red-600 + // 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, - 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, // 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 + // 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 ); $services-dark-theme: ( // 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), - // 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-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, - 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, // red-400 + // 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, - 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, // 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 -); \ No newline at end of file + // 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 +); diff --git a/src/scss/themes/_skills.scss b/src/scss/themes/_skills.scss index ee75121..d2b23c5 100644 --- a/src/scss/themes/_skills.scss +++ b/src/scss/themes/_skills.scss @@ -1,7 +1,8 @@ $skills-light-theme: ( // Skills section colors - skills-background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 25%, #e2e8f0 75%, #cbd5e1 100%), - skills-background-pattern: radial-gradient(circle at 25% 25%, #3b82f6, transparent 50%), + 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), @@ -10,41 +11,76 @@ $skills-light-theme: ( 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) - 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-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, // 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-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, // 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-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, // 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-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, // 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-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, // 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-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, // Enhanced progress bar colors @@ -53,13 +89,14 @@ $skills-light-theme: ( 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), + skills-progress-senary: linear-gradient(90deg, #6366f1, #4f46e5, #4338ca) ); $skills-dark-theme: ( // Skills section colors - skills-background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 75%, #475569 100%), - skills-background-pattern: radial-gradient(circle at 25% 25%, #1e40af, transparent 50%), + skills-background: linear-gradient(135deg, #1e293b 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), @@ -68,36 +105,47 @@ $skills-dark-theme: ( skills-skill-level-color: #94a3b8, skills-skill-percentage-color: #e2e8f0, skills-progress-bg: rgba(51, 65, 85, 0.8), - // 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-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-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-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-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-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-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-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-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-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-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-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, // Enhanced progress bars for dark theme @@ -106,5 +154,5 @@ $skills-dark-theme: ( 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), -); \ No newline at end of file + skills-progress-senary: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5) +); diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 31f2f89..e497540 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -38,18 +38,6 @@ $gradient-text: linear-gradient( $color-primary, #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-card-padding: 1.5rem; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..eab843a 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,2 @@ /// +declare module '*.PNG';