The Svelte 5 SSG Migration (#1)
- Migrates the site to Svelte 5 - Still generates a static site with inlined critical path CSS for the ultimate in performance - Opens up future possibilities for site growth Reviewed-on: #1 Co-authored-by: mifi <badmf@mifi.dev> Co-committed-by: mifi <badmf@mifi.dev>
This commit was merged in pull request #1.
This commit is contained in:
276
src/lib/components/ExperienceSection.svelte
Normal file
276
src/lib/components/ExperienceSection.svelte
Normal file
@@ -0,0 +1,276 @@
|
||||
<script lang="ts">
|
||||
import { experienceLogos, experienceTextList } from '$lib/data/experience';
|
||||
</script>
|
||||
|
||||
<section
|
||||
id="experience"
|
||||
class="section experience-section"
|
||||
aria-labelledby="experience-heading"
|
||||
>
|
||||
<div class="container">
|
||||
<h2 id="experience-heading" class="section-title">
|
||||
Experience includes teams at:
|
||||
</h2>
|
||||
|
||||
<div class="logo-strip" role="list" aria-label="Company logos">
|
||||
{#each experienceLogos as logo (logo.alt)}
|
||||
<div class="logo-item" role="listitem">
|
||||
<img
|
||||
src={logo.src}
|
||||
alt={logo.alt}
|
||||
loading="lazy"
|
||||
width={logo.width}
|
||||
height={logo.height}
|
||||
/>
|
||||
<span class="logo-fallback-text">{logo.alt}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<ul class="logo-text-list" aria-hidden="true">
|
||||
{#each experienceTextList as name (name)}
|
||||
<li>{name}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<p class="footnote">Logos are trademarks of their respective owners.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.experience-section {
|
||||
text-align: center;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.logo-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xl);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: var(--space-lg) 0;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) and (min-width: 481px) {
|
||||
gap: var(--space-lg);
|
||||
padding: var(--space-md) 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-item {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
min-width: 120px;
|
||||
max-width: 160px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-xs);
|
||||
|
||||
/* Make logo containers keyboard focusable for screen reader users */
|
||||
&:focus-within {
|
||||
outline: 3px solid var(--color-focus);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) and (min-width: 481px) {
|
||||
min-width: 110px;
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 50px;
|
||||
object-fit: contain;
|
||||
opacity: 0.75;
|
||||
transition: all var(--transition-base);
|
||||
filter: grayscale(100%) contrast(1.15);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
filter: grayscale(25%) contrast(1.05);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 4px solid var(--color-focus);
|
||||
outline-offset: 4px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
&[alt]:not([src]),
|
||||
&[alt][src=''],
|
||||
&[alt]:not([src*='.svg']):not([src*='.png']):not([src*='.jpg']) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) and (min-width: 481px) {
|
||||
max-height: 45px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode logo adaptations */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: grayscale(100%) brightness(0) invert(1) contrast(1.25);
|
||||
opacity: 0.65;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
filter: grayscale(50%) brightness(1) invert(1) contrast(1.1);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast: high) {
|
||||
opacity: 1;
|
||||
filter: contrast(1.6);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: brightness(0) invert(1) contrast(1.9);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
max-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Fallback text (shown when image fails to load or on very small screens) */
|
||||
.logo-fallback-text {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.logo-item:has(img[alt]:not([src])) .logo-fallback-text,
|
||||
.logo-item:has(img[alt][src='']) .logo-fallback-text {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: var(--space-sm);
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
white-space: normal;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg-alt);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Text-only list (hidden by default, shown on very small screens) */
|
||||
.logo-text-list {
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
text-align: left;
|
||||
|
||||
& li {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
margin-bottom: var(--space-sm);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg-subtle);
|
||||
border-left: 3px solid var(--color-primary);
|
||||
border-radius: var(--border-radius);
|
||||
line-height: var(--line-height-base);
|
||||
|
||||
@media (prefers-contrast: high) {
|
||||
border-left-width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.footnote {
|
||||
margin-top: var(--space-lg);
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text-tertiary);
|
||||
font-style: italic;
|
||||
line-height: var(--line-height-base);
|
||||
max-width: 100%;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast: high) {
|
||||
.logo-item img {
|
||||
opacity: 1;
|
||||
filter: contrast(1.6);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.logo-item img {
|
||||
filter: brightness(0) invert(1) contrast(1.9);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-text-list li {
|
||||
border-left-width: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user