cesnimda
1fce1b3cec
- UI atoms: Chip, Button, SplitCvButton, LangSwitch, ThemeToggle, Card, SectionLabel, TraceMotif, FramedImage - core: Base/Seo/Header/MobileNav/Footer/HintBar/SkipLink/ThemeScript - homepage sections: Hero, ProofStrip, SkillsGrid, ProjectCards, ExperienceTimeline, AboutTeaser, ContactBand + Homepage composition (EN/NO) - behaviour modules: theme, nav (overlay/hint/copy/header), observer (reveal/spy), lightbox, form — progressive enhancement, fail-silent - SEO head component: meta, hreflang from slug map, JSON-LD, OG references - move content data to src/data (avoid Astro reserved content-collection folder) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
43 lines
1.4 KiB
Plaintext
43 lines
1.4 KiB
Plaintext
---
|
|
import type { Locale } from '@i18n/locales';
|
|
import { useDict } from '@i18n/t';
|
|
import { homeAnchor } from '@i18n/slugMap';
|
|
import { getSkills } from '@lib/content';
|
|
import SectionLabel from '@components/ui/SectionLabel.astro';
|
|
import Chip from '@components/ui/Chip.astro';
|
|
|
|
interface Props {
|
|
locale: Locale;
|
|
}
|
|
const { locale } = Astro.props;
|
|
const d = useDict(locale);
|
|
const groups = getSkills(locale);
|
|
const num = ['01', '02', '03'];
|
|
---
|
|
|
|
<section id={homeAnchor('skills', locale)} class="mx-auto max-w-[--content-max] px-6 pt-24" data-reveal>
|
|
<SectionLabel number="01" text={d.home.skillsLabel} />
|
|
<h2 class="mt-4 text-h2">{d.home.skillsHeading}</h2>
|
|
<p class="mt-3 max-w-[60ch] text-body text-ink-muted">{d.home.skillsIntro}</p>
|
|
|
|
<div class="mt-8 grid gap-5 md:grid-cols-3">
|
|
{
|
|
groups.map((group, i) => (
|
|
<div class="rounded-md border border-line bg-surface-1 p-6 transition-colors duration-[--dur-standard] hover:border-line-strong">
|
|
<p class="font-mono text-mono-label font-medium uppercase tracking-[0.08em] text-ink-faint">
|
|
{num[i]} — {group.title}
|
|
</p>
|
|
<p class="mt-3 text-small text-ink-muted">{group.context}</p>
|
|
<ul class="mt-4 flex flex-wrap gap-2">
|
|
{group.skills.map((s) => (
|
|
<li>
|
|
<Chip kind="stack" label={s.name} tooltip={s.tooltip} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|