95 lines
3.0 KiB
HTML
95 lines
3.0 KiB
HTML
{{- $hero := .Site.Params.hero -}}
|
||
|
||
<div class="grid gap-8 md:grid-cols-[minmax(0,2fr)_minmax(0,1.2fr)] items-start">
|
||
<div class="space-y-5 animate-fade-up">
|
||
<!-- Badge + availability -->
|
||
<div class="flex flex-wrap items-center gap-4">
|
||
{{ with $hero.badge }}
|
||
<p class="eyebrow font-medium text-sm text-accent">{{ . }}</p>
|
||
{{ end }}
|
||
|
||
{{ if $hero.available }}
|
||
<span class="badge-available px-3">
|
||
<span class="h-1.5 w-1.5 rounded-full bg-white/95"></span>
|
||
<span>{{ default "Available for work" $hero.availableLabel }}</span>
|
||
</span>
|
||
{{ end }}
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<h1 class="heading-page text-3xl sm:text-4xl">
|
||
{{ default "Hi, I’m Your Name." $hero.title }}
|
||
</h1>
|
||
{{ with $hero.role }}
|
||
<p class="text-sm font-medium text-muted">
|
||
{{ . }}
|
||
</p>
|
||
{{ end }}
|
||
</div>
|
||
|
||
{{ with $hero.summary }}
|
||
<p class="max-w-xl text-sm text-muted">
|
||
{{ . }}
|
||
</p>
|
||
{{ end }}
|
||
|
||
<!-- Meta row: location + focus -->
|
||
<div class="mt-3 flex flex-wrap gap-2 text-[0.7rem] text-muted">
|
||
{{ with $hero.location }}
|
||
<span class="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/90 px-3 py-1.5">
|
||
<i class="fa-solid fa-location-dot text-[0.8rem]"></i>
|
||
<span class="font-medium">{{ . }}</span>
|
||
</span>
|
||
{{ end }}
|
||
|
||
{{ with $hero.focus }}
|
||
<span class="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/80 px-3 py-1.5">
|
||
<i class="fa-regular fa-circle-dot text-[0.8rem]"></i>
|
||
<span>{{ . }}</span>
|
||
</span>
|
||
{{ end }}
|
||
</div>
|
||
|
||
<!-- Optional highlight pills -->
|
||
{{ with $hero.highlights }}
|
||
<div class="mt-3 flex flex-wrap gap-2">
|
||
{{ range . }}
|
||
<span class="inline-flex items-center rounded-full border border-border bg-surface/80 px-3 py-1 text-[0.7rem] text-muted">
|
||
{{ .label }}
|
||
</span>
|
||
{{ end }}
|
||
</div>
|
||
{{ end }}
|
||
|
||
<!-- CTAs -->
|
||
<div class="mt-4 flex flex-wrap items-center gap-3">
|
||
{{ with $hero.primary }}
|
||
<a href="{{ .href | default "/projects/" }}" class="btn-primary">
|
||
{{ .label | default "View projects" }}
|
||
</a>
|
||
{{ end }}
|
||
|
||
{{ with $hero.secondary }}
|
||
<a href="{{ .href | default "/blog/" }}" class="btn-ghost link-underline">
|
||
{{ .label | default "Read the blog" }}
|
||
</a>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Avatar ONLY if provided -->
|
||
{{ with $hero.avatar }}
|
||
<div class="order-first md:order-none">
|
||
<div class="card card-pad flex items-center justify-center md:justify-end">
|
||
<div class="h-24 w-24 sm:h-28 sm:w-28 overflow-hidden rounded-2xl border border-border bg-surface shadow-md">
|
||
<img
|
||
src="{{ . | relURL }}"
|
||
alt="{{ $hero.title | default $.Site.Title }}"
|
||
class="h-full w-full object-cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
</div>
|