sonarqube fixes
This commit is contained in:
Sascha
parent
ce79a800f2
commit
acbdb1ea3c
|
|
@ -14,7 +14,7 @@ type Props = {
|
|||
export default function Navbar({
|
||||
theme,
|
||||
setTheme
|
||||
}: Props) {
|
||||
}: Readonly<Props>) {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default function AboutSection(props: AboutSectionProps = {}) {
|
|||
</div>
|
||||
|
||||
{/* Personal Photo and Bio */}
|
||||
<div className="about-section__content" role="main">
|
||||
<main className="about-section__content" role="main">
|
||||
<div className="about-section__image-wrapper">
|
||||
<img
|
||||
src={profileImage}
|
||||
|
|
@ -88,19 +88,18 @@ export default function AboutSection(props: AboutSectionProps = {}) {
|
|||
Hi, I'm {name}!
|
||||
</h3>
|
||||
<div className="about-section__bio-text">
|
||||
{bio.map((paragraph, index) => (
|
||||
<p key={index}>{paragraph}</p>
|
||||
{bio.map((paragraph) => (
|
||||
<p key={paragraph.substring(0, 50)}>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Feature Cards Grid */}
|
||||
<div
|
||||
id="features"
|
||||
className="about-section__features"
|
||||
role="region"
|
||||
aria-labelledby="features-heading"
|
||||
>
|
||||
<h3 id="features-heading" className="sr-only">My Areas of Expertise</h3>
|
||||
|
|
@ -108,23 +107,21 @@ export default function AboutSection(props: AboutSectionProps = {}) {
|
|||
<div className="about-section__features-grid">
|
||||
{featureCards.map((card, index) => {
|
||||
const IconComponent = card.icon;
|
||||
const cardId = card.title.toLowerCase().replaceAll(/\s+/g, '-');
|
||||
return (
|
||||
<article
|
||||
key={index}
|
||||
key={cardId}
|
||||
className={`about-section__feature-card about-section__feature-card--${card.colorClass}`}
|
||||
role="group"
|
||||
aria-labelledby={`feature-${index}-title`}
|
||||
aria-describedby={`feature-${index}-description`}
|
||||
aria-labelledby={`feature-${cardId}-title`}
|
||||
aria-describedby={`feature-${cardId}-description`}
|
||||
>
|
||||
<header className="about-section__feature-header">
|
||||
<IconComponent
|
||||
className={`about-section__feature-icon about-section__feature-icon--${card.colorClass}`}
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
aria-label={`${card.title} icon`}
|
||||
/>
|
||||
<h4
|
||||
id={`feature-${index}-title`}
|
||||
id={`feature-${cardId}-title`}
|
||||
className={`about-section__feature-title about-section__feature-title--${card.colorClass}`}
|
||||
>
|
||||
{card.title}
|
||||
|
|
@ -132,7 +129,7 @@ export default function AboutSection(props: AboutSectionProps = {}) {
|
|||
</header>
|
||||
<div className="about-section__feature-content">
|
||||
<p
|
||||
id={`feature-${index}-description`}
|
||||
id={`feature-${cardId}-description`}
|
||||
className={`about-section__feature-description about-section__feature-description--${card.colorClass}`}
|
||||
>
|
||||
{card.description}
|
||||
|
|
@ -149,6 +146,6 @@ export default function AboutSection(props: AboutSectionProps = {}) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section >
|
||||
);
|
||||
}
|
||||
|
|
@ -83,16 +83,14 @@ export default function CertificationsSection(props: CertificationsSectionProps
|
|||
</div>
|
||||
|
||||
{/* Certifications Grid */}
|
||||
<div
|
||||
<section
|
||||
className="certifications-section__grid"
|
||||
role="region"
|
||||
aria-label="Professional certifications and qualifications"
|
||||
>
|
||||
{sortedCertifications.map((cert, index) => (
|
||||
<article
|
||||
key={index}
|
||||
<div
|
||||
key={`${cert.name}-${cert.year}-${cert.issuer}`}
|
||||
className="certifications-section__card"
|
||||
role="group"
|
||||
aria-labelledby={`cert-${index}-title`}
|
||||
aria-describedby={`cert-${index}-details`}
|
||||
>
|
||||
|
|
@ -108,7 +106,6 @@ export default function CertificationsSection(props: CertificationsSectionProps
|
|||
<Award
|
||||
className="certifications-section__card-icon"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
aria-label="Certification award icon"
|
||||
/>
|
||||
)}
|
||||
|
|
@ -140,14 +137,13 @@ export default function CertificationsSection(props: CertificationsSectionProps
|
|||
Certification {index + 1} of {sortedCertifications.length}.
|
||||
{cert.name} from {cert.issuer}, completed in {cert.year}.
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
))}
|
||||
</section>
|
||||
{/* Certifications summary for screen readers */}
|
||||
<div className="certifications-section__summary sr-only" aria-live="polite">
|
||||
<p>
|
||||
Certifications timeline: Spanning from {sortedCertifications[sortedCertifications.length - 1]?.year} to {sortedCertifications[0]?.year},
|
||||
Certifications timeline: Spanning from {sortedCertifications.at(-1)?.year} to {sortedCertifications.at(0)?.year},
|
||||
including {sortedCertifications.filter(cert => cert.issuer.includes('Udemy')).length} online courses and
|
||||
{sortedCertifications.filter(cert => cert.issuer.includes('TU Darmstadt')).length} academic degree.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Mail, Github, Linkedin, Send } from 'lucide-react';
|
||||
import { Mail, ExternalLink, Send } from 'lucide-react';
|
||||
import { personalConfig, getObfuscatedEmail } from '../../config/personal';
|
||||
import { getTexts } from '../../config/texts';
|
||||
|
||||
|
|
@ -50,10 +50,10 @@ export default function ContactSection(props: ContactSectionProps = {}) {
|
|||
announcement.textContent = 'Opening email client with pre-filled message';
|
||||
document.body.appendChild(announcement);
|
||||
|
||||
window.location.href = `mailto:${email}?subject=${subject}&body=${body}`;
|
||||
globalThis.location.href = `mailto:${email}?subject=${subject}&body=${body}`;
|
||||
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(announcement);
|
||||
announcement.remove();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
|
|
@ -70,10 +70,10 @@ export default function ContactSection(props: ContactSectionProps = {}) {
|
|||
announcement.textContent = `Opening ${platform} profile in new tab`;
|
||||
document.body.appendChild(announcement);
|
||||
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
globalThis.open(url, '_blank', 'noopener,noreferrer');
|
||||
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(announcement);
|
||||
announcement.remove();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
|
|
@ -98,15 +98,13 @@ export default function ContactSection(props: ContactSectionProps = {}) {
|
|||
</div>
|
||||
|
||||
{/* Contact Content Grid */}
|
||||
<div className="contact-section__grid" role="main">
|
||||
<main className="contact-section__grid">
|
||||
{/* Let's Connect Card */}
|
||||
<div className="contact-section__connect-card" role="region" aria-labelledby="connect-heading">
|
||||
<div className="contact-section__connect-header">
|
||||
<Mail
|
||||
className="contact-section__email-icon"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
aria-label="Email icon"
|
||||
/>
|
||||
<div className="contact-section__connect-text">
|
||||
<h3 id="connect-heading" className="contact-section__email-title">
|
||||
|
|
@ -141,15 +139,13 @@ export default function ContactSection(props: ContactSectionProps = {}) {
|
|||
<div className="contact-section__info-card">
|
||||
<h3 id="info-heading" className="sr-only">Contact Information</h3>
|
||||
|
||||
<div className="contact-section__availability" role="status" aria-live="polite">
|
||||
<output className="contact-section__availability" aria-live="polite">
|
||||
<div
|
||||
className="contact-section__status-indicator"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
aria-label="Available status indicator"
|
||||
></div>
|
||||
<span className="contact-section__status-text">{availabilityText}</span>
|
||||
</div>
|
||||
</output>
|
||||
|
||||
<div className="contact-section__quick-facts">
|
||||
<dl className="contact-section__fact-list">
|
||||
|
|
@ -171,11 +167,11 @@ export default function ContactSection(props: ContactSectionProps = {}) {
|
|||
</aside>
|
||||
|
||||
{/* Social Contact Methods */}
|
||||
<div className="contact-section__social-card" role="region" aria-labelledby="social-heading">
|
||||
<div className="contact-section__social-card" aria-labelledby="social-heading">
|
||||
<h4 id="social-heading" className="contact-section__social-title">{socialTitle}</h4>
|
||||
<div className="contact-section__social-list" role="list">
|
||||
<ul className="contact-section__social-list">
|
||||
|
||||
<div className="contact-section__detail-item" role="listitem">
|
||||
<li className="contact-section__detail-item">
|
||||
<button
|
||||
className="contact-section__social-button contact-section__social-button--email"
|
||||
onClick={handleEmailClick}
|
||||
|
|
@ -187,38 +183,38 @@ export default function ContactSection(props: ContactSectionProps = {}) {
|
|||
<span className="contact-section__detail-text" aria-label="Email address">
|
||||
{getObfuscatedEmail()}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div className="contact-section__detail-item" role="listitem">
|
||||
<li className="contact-section__detail-item">
|
||||
<button
|
||||
className="contact-section__social-button contact-section__social-button--github"
|
||||
onClick={() => handleSocialClick('GitHub', personalConfig.social.github.url)}
|
||||
aria-label={`Visit GitHub profile: ${personalConfig.social.github.username} (opens in new tab)`}
|
||||
type="button"
|
||||
>
|
||||
<Github className="contact-section__social-icon" aria-hidden="true" />
|
||||
<ExternalLink className="contact-section__social-icon" aria-hidden="true" />
|
||||
</button>
|
||||
<span className="contact-section__detail-text" aria-label="GitHub username">
|
||||
{personalConfig.social.github.username}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div className="contact-section__detail-item" role="listitem">
|
||||
<li className="contact-section__detail-item">
|
||||
<button
|
||||
className="contact-section__social-button contact-section__social-button--linkedin"
|
||||
onClick={() => handleSocialClick('LinkedIn', personalConfig.social.linkedin.url)}
|
||||
aria-label={`Visit LinkedIn profile: ${personalConfig.social.linkedin.username} (opens in new tab)`}
|
||||
type="button"
|
||||
>
|
||||
<Linkedin className="contact-section__social-icon" aria-hidden="true" />
|
||||
<ExternalLink className="contact-section__social-icon" aria-hidden="true" />
|
||||
</button>
|
||||
<span className="contact-section__detail-text" aria-label="LinkedIn username">
|
||||
{personalConfig.social.linkedin.username}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default function HeroSection(props: HeroSectionProps = {}) {
|
|||
|
||||
document.body.appendChild(announcement);
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(announcement);
|
||||
announcement.remove();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ export default function HeroSection(props: HeroSectionProps = {}) {
|
|||
link.click();
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(link);
|
||||
link.remove();
|
||||
|
||||
console.log('✅ Resume download initiated');
|
||||
announceToScreenReader('Resume download started successfully');
|
||||
|
|
@ -93,7 +93,7 @@ export default function HeroSection(props: HeroSectionProps = {}) {
|
|||
};
|
||||
|
||||
return (
|
||||
<section className="hero-section" role="main" aria-labelledby="hero-title">
|
||||
<main className="hero-section" aria-labelledby="hero-title">
|
||||
<div className="hero-section__container">
|
||||
{/* Skip link for keyboard navigation */}
|
||||
<div className="hero-section__skip">
|
||||
|
|
@ -167,6 +167,6 @@ export default function HeroSection(props: HeroSectionProps = {}) {
|
|||
))}
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Github, ExternalLink } from 'lucide-react';
|
||||
import { GitBranch, ExternalLink } from 'lucide-react';
|
||||
import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
|
||||
import { personalConfig } from '../../config/personal';
|
||||
import { getTexts } from '../../config/texts';
|
||||
|
|
@ -167,7 +167,7 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) {
|
|||
|
||||
document.body.appendChild(announcement);
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(announcement);
|
||||
announcement.remove();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
|
|
@ -248,9 +248,8 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) {
|
|||
<div className="projects-section__overlay" aria-hidden="true"></div>
|
||||
|
||||
{/* Conditionally visible action buttons */}
|
||||
<div
|
||||
<fieldset
|
||||
className={`projects-section__actions ${isActive ? 'projects-section__actions--visible' : ''}`}
|
||||
role="group"
|
||||
aria-label={`Actions for ${project.title}`}
|
||||
aria-hidden={!isActive}
|
||||
>
|
||||
|
|
@ -265,7 +264,7 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) {
|
|||
tabIndex={isActive ? 0 : -1}
|
||||
onKeyDown={(e) => handleActionKeyDown(e, cardIndex, 0)}
|
||||
>
|
||||
<Github className="projects-section__action-icon" aria-hidden="true" />
|
||||
<GitBranch className="projects-section__action-icon" aria-hidden="true" />
|
||||
<span className="projects-section__action-text">{texts.codeButtonText}</span>
|
||||
</a>
|
||||
)}
|
||||
|
|
@ -283,8 +282,9 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) {
|
|||
<ExternalLink className="projects-section__action-icon" aria-hidden="true" />
|
||||
<span className="projects-section__action-text">{texts.liveButtonText}</span>
|
||||
</a>
|
||||
|
||||
)}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div className="projects-section__content">
|
||||
|
|
@ -305,18 +305,17 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="projects-section__technologies" role="list" aria-label="Technologies used">
|
||||
<ul className="projects-section__technologies" aria-label="Technologies used">
|
||||
{project.technologies.map((tech, index) => (
|
||||
<span
|
||||
<li
|
||||
key={tech}
|
||||
className="projects-section__tech-badge"
|
||||
role="listitem"
|
||||
aria-label={`Technology ${index + 1}: ${tech}`}
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
{/* Enhanced status indicator for active card */}
|
||||
{isActive && (
|
||||
|
|
|
|||
|
|
@ -85,10 +85,8 @@ export default function ServicesSection(props: ServicesSectionProps = {}) {
|
|||
const IconComponent = service.icon;
|
||||
return (
|
||||
<article
|
||||
key={index}
|
||||
key={`${service.title}-${service.colorClass}`}
|
||||
className={`services-section__card services-section__card--${service.colorClass}`}
|
||||
tabIndex={0}
|
||||
role="group"
|
||||
aria-labelledby={`service-${index}-title`}
|
||||
aria-describedby={`service-${index}-description`}
|
||||
>
|
||||
|
|
@ -96,8 +94,6 @@ export default function ServicesSection(props: ServicesSectionProps = {}) {
|
|||
<IconComponent
|
||||
className={`services-section__icon services-section__icon--${service.colorClass}`}
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
aria-label={`${service.title} service icon`}
|
||||
/>
|
||||
<h3
|
||||
id={`service-${index}-title`}
|
||||
|
|
|
|||
|
|
@ -120,10 +120,9 @@ export default function SkillsSection(props: SkillsSectionProps = {}) {
|
|||
{skillCategories.map((category, categoryIndex) => {
|
||||
const colorClass = getColorByPosition(categoryIndex);
|
||||
return (
|
||||
<article
|
||||
<fieldset
|
||||
key={category.title}
|
||||
className={`skills-section__category skills-section__category--${colorClass}`}
|
||||
role="group"
|
||||
aria-labelledby={`category-${categoryIndex}-title`}
|
||||
>
|
||||
<header className="skills-section__category-header">
|
||||
|
|
@ -139,18 +138,16 @@ export default function SkillsSection(props: SkillsSectionProps = {}) {
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
<ul
|
||||
className="skills-section__skills-list"
|
||||
role="list"
|
||||
aria-label={`${category.title} skills`}
|
||||
>
|
||||
{category.skills.map((skillItem, skillIndex) => {
|
||||
const displayLevel = calculateSkillLevel(skillItem.value);
|
||||
return (
|
||||
<div
|
||||
<li
|
||||
key={skillItem.skill}
|
||||
className="skills-section__skill-item"
|
||||
role="listitem"
|
||||
aria-label={`${skillItem.skill}: ${displayLevel} level`}
|
||||
>
|
||||
<div className="skills-section__skill-header">
|
||||
|
|
@ -195,11 +192,12 @@ export default function SkillsSection(props: SkillsSectionProps = {}) {
|
|||
Proficiency level: {displayLevel} at {skillItem.value} percent.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</article>
|
||||
</ul>
|
||||
|
||||
</fieldset>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -278,17 +278,23 @@
|
|||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
// Enhanced focus states for AAA compliance
|
||||
&:focus {
|
||||
outline: 3px solid var(--color-focus-ring, #2563eb);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Brand-specific icon colors with better contrast
|
||||
&--email .contact-section__social-icon {
|
||||
color: #2563eb; // Stronger blue for email
|
||||
color: var(--social-icon-email, #2563eb); // Use theme variable
|
||||
}
|
||||
|
||||
&--github .contact-section__social-icon {
|
||||
color: #1f2937; // Darker for GitHub
|
||||
color: var(--social-icon-github, #1f2937); // Use theme variable
|
||||
}
|
||||
|
||||
&--linkedin .contact-section__social-icon {
|
||||
color: #0d67b5; // Stronger LinkedIn blue
|
||||
color: var(--social-icon-linkedin, #0d67b5); // Use theme variable
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -500,7 +506,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
&__email-icon {
|
||||
&__email-card-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
color: var(--primary-color);
|
||||
|
|
@ -508,19 +514,6 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
&__email-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&__email-description {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
&__email-button {
|
||||
background: var(--contact-button-bg);
|
||||
border: none;
|
||||
|
|
@ -669,26 +662,6 @@
|
|||
white-space: normal !important;
|
||||
background-color: var(--contact-button-bg) !important;
|
||||
color: var(--contact-button-text) !important;
|
||||
border: 2px solid var(--contact-social-border) !important;
|
||||
border-radius: 4px !important;
|
||||
text-decoration: none !important;
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
// Update social button icons for AAA compliance
|
||||
.contact-section__social-button {
|
||||
&--email .contact-section__social-icon {
|
||||
color: var(--social-icon-email); // Use theme variable
|
||||
}
|
||||
|
||||
&--github .contact-section__social-icon {
|
||||
color: var(--social-icon-github); // Use theme variable
|
||||
}
|
||||
|
||||
&--linkedin .contact-section__social-icon {
|
||||
color: var(--social-icon-linkedin); // Use theme variable
|
||||
}
|
||||
|
||||
// Enhanced focus states for AAA compliance
|
||||
&:focus {
|
||||
outline: 3px solid var(--color-focus-ring, #2563eb);
|
||||
|
|
|
|||
|
|
@ -56,8 +56,9 @@
|
|||
border-radius: $card-border-radius-md;
|
||||
box-shadow: var(--projects-card-shadow);
|
||||
overflow: hidden;
|
||||
transition: $transition-base;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--projects-card-border);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
|
|
@ -73,7 +74,7 @@
|
|||
|
||||
.projects-section__actions {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translate(-50%, -50%) translateY(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
|
@ -89,7 +90,7 @@
|
|||
|
||||
.projects-section__actions {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translate(-50%, -50%) translateY(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
|
@ -106,7 +107,7 @@
|
|||
|
||||
.projects-section__actions {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translate(-50%, -50%) translateY(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
|
@ -118,7 +119,7 @@
|
|||
|
||||
.projects-section__actions {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translate(-50%, -50%) translateY(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
|
@ -404,65 +405,6 @@
|
|||
border: 0 !important;
|
||||
}
|
||||
|
||||
// Card states
|
||||
.projects-section__card {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: 3px solid var(--color-focus-ring, #2563eb);
|
||||
outline-offset: 2px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&--active {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--projects-card-shadow-hover);
|
||||
border-color: var(--color-focus-ring, #2563eb);
|
||||
border-width: 2px;
|
||||
|
||||
.projects-section__actions {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Action buttons visibility
|
||||
.projects-section__actions {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) translateY(10px);
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
z-index: 10; // Above overlay
|
||||
|
||||
&--visible {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) translateY(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
// Override for when actions are shown (hover, focus, active)
|
||||
.projects-section__card {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&--active,
|
||||
&:focus-within {
|
||||
.projects-section__actions {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) translateY(0);
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// High contrast mode
|
||||
@media (prefers-contrast: high) {
|
||||
.projects-section__card {
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@
|
|||
min-height: 250px; // Ensures consistent card heights
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
animation: cardFadeIn 0.6s ease-out;
|
||||
|
||||
// Add subtle backdrop blur for depth
|
||||
&::before {
|
||||
|
|
@ -132,6 +133,52 @@
|
|||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Make cards keyboard accessible
|
||||
&[tabindex='0'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// AAA-compliant focus indicator (3px minimum)
|
||||
&:focus {
|
||||
outline: 3px solid var(--color-focus-ring, #2563eb);
|
||||
outline-offset: 2px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
// Enhanced hover and focus interaction
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: $shadow-card-hover;
|
||||
|
||||
// When both focused and hovered
|
||||
&:focus {
|
||||
outline: 3px solid var(--color-focus-ring, #2563eb);
|
||||
outline-offset: 2px;
|
||||
transform: translateY(-6px); // Slightly more lift when focused
|
||||
}
|
||||
}
|
||||
|
||||
// Animation delays for cards
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
// Responsive card heights - more flexible approach
|
||||
@media (min-width: 768px) {
|
||||
min-height: 280px; // Use min-height instead of fixed height
|
||||
|
|
@ -150,6 +197,54 @@
|
|||
max-height: 400px;
|
||||
}
|
||||
|
||||
// High contrast mode support
|
||||
@media (prefers-contrast: high) {
|
||||
border: 2px solid currentColor !important;
|
||||
|
||||
&:focus {
|
||||
outline: 4px solid currentColor !important;
|
||||
outline-offset: 3px !important;
|
||||
}
|
||||
|
||||
// Enhance icon visibility in high contrast
|
||||
.services-section__icon {
|
||||
filter: contrast(1.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Reduced motion support
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Touch device optimizations
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
min-height: 320px;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: $shadow-card;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-card-hover;
|
||||
outline: 3px solid var(--color-focus-ring, #2563eb);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark theme enhancements
|
||||
@media (prefers-color-scheme: dark) {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: var(--service-card-primary-bg);
|
||||
}
|
||||
|
|
@ -277,131 +372,25 @@
|
|||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// ================================
|
||||
// WCAG Level AAA Accessibility Enhancements
|
||||
// ================================
|
||||
|
||||
@media (max-width: 767px) {
|
||||
padding: 0 1.25rem 1.25rem 1.25rem;
|
||||
// High contrast mode support for better accessibility
|
||||
@media (prefers-contrast: high) {
|
||||
// Ensure text remains readable in high contrast mode
|
||||
.services-section__card-title,
|
||||
.services-section__card-description {
|
||||
text-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
font-weight: 400;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
color: var(--service-description-primary);
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
color: var(--service-description-secondary);
|
||||
}
|
||||
|
||||
&--tertiary {
|
||||
color: var(--service-description-tertiary);
|
||||
}
|
||||
|
||||
&--quaternary {
|
||||
color: var(--service-description-quaternary);
|
||||
}
|
||||
|
||||
&--quinary {
|
||||
color: var(--service-description-quinary);
|
||||
}
|
||||
|
||||
&--senary {
|
||||
color: var(--service-description-senary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle 6 cards specifically for better distribution
|
||||
.services-section__grid:has(.services-section__card:nth-child(6):last-child) {
|
||||
// For exactly 6 cards
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
// Make last 2 cards center themselves if needed
|
||||
.services-section__card:nth-child(5),
|
||||
.services-section__card:nth-child(6) {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
// Ultra-compact mobile layout for very small screens
|
||||
@media (max-height: 700px) and (max-width: 767px) {
|
||||
.services-section {
|
||||
min-height: auto;
|
||||
padding: 1rem 0;
|
||||
|
||||
&__header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&__card {
|
||||
min-height: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__card-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ================================
|
||||
// WCAG Level AAA Accessibility Enhancements
|
||||
// ================================
|
||||
|
||||
// Enhanced focus states for keyboard navigation
|
||||
.services-section__card {
|
||||
// Make cards keyboard accessible
|
||||
&[tabindex='0'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// AAA-compliant focus indicator (3px minimum)
|
||||
&:focus {
|
||||
outline: 3px solid var(--color-focus-ring, #2563eb);
|
||||
outline-offset: 2px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
// Enhanced hover and focus interaction
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: $shadow-card-hover;
|
||||
|
||||
// When both focused and hovered
|
||||
&:focus {
|
||||
outline: 3px solid var(--color-focus-ring, #2563eb);
|
||||
outline-offset: 2px;
|
||||
transform: translateY(-6px); // Slightly more lift when focused
|
||||
&:nth-child(5) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -468,29 +457,6 @@
|
|||
// Enhance card visibility with better shadows in dark mode
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Subtle loading animation for cards
|
||||
@keyframes cardFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Animation delays for staggered effect
|
||||
.services-section__card {
|
||||
animation: cardFadeIn 0.6s ease-out;
|
||||
|
||||
&:nth-child(1) {
|
||||
|
|
@ -511,4 +477,5 @@
|
|||
&:nth-child(6) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue