Added Project Screenshots, refactoring
This commit is contained in:
Sascha
parent
d15418c3b1
commit
0d594d08b4
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
feature-description-tertiary: #ccfbf1
|
||||
);
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,9 @@
|
|||
|
||||
$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,
|
||||
|
||||
|
|
@ -18,27 +16,28 @@ $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,
|
||||
|
||||
|
|
@ -46,21 +45,18 @@ $contact-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)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
);
|
||||
|
|
@ -2,26 +2,23 @@
|
|||
|
||||
$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),
|
||||
|
|
@ -30,38 +27,45 @@ $projects-light-theme: (
|
|||
// 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)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// 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
|
||||
);
|
||||
|
|
@ -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),
|
||||
skills-progress-senary: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5)
|
||||
);
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
/// <reference types="vite/client" />
|
||||
declare module '*.PNG';
|
||||
|
|
|
|||
Loading…
Reference in New Issue