43 lines
2.4 KiB
PHP
43 lines
2.4 KiB
PHP
|
<x-layouts.app title="Projects" description="A collection of things I've built.">
|
||
|
|
<section class="mx-auto max-w-5xl px-6 pt-16 pb-8">
|
||
|
|
<p class="font-mono text-sm tracking-widest text-accent uppercase">Selected work</p>
|
||
|
|
<h1 class="mt-3 font-display text-5xl font-semibold text-paper">Projects</h1>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="mx-auto max-w-5xl px-6 pb-24">
|
||
|
|
@if ($projects->isEmpty())
|
||
|
|
<p class="text-paper-dim">Nothing here yet — check back soon.</p>
|
||
|
|
@else
|
||
|
|
<div class="grid gap-6 sm:grid-cols-2">
|
||
|
|
@foreach ($projects as $project)
|
||
|
|
<a href="{{ route('projects.show', $project) }}" class="group overflow-hidden rounded-2xl border border-white/10 bg-ink-soft transition hover:border-accent/50">
|
||
|
|
@if ($project->image_url)
|
||
|
|
<div class="aspect-video overflow-hidden">
|
||
|
|
<img src="{{ $project->image_url }}" alt="{{ $project->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
<div class="p-6">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<h2 class="font-display text-xl font-medium text-paper">{{ $project->title }}</h2>
|
||
|
|
@if ($project->is_featured)
|
||
|
|
<span class="rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent">Featured</span>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
@if ($project->summary)
|
||
|
|
<p class="mt-2 text-sm text-paper-dim">{{ $project->summary }}</p>
|
||
|
|
@endif
|
||
|
|
@if (!empty($project->tech_stack))
|
||
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
||
|
|
@foreach ($project->tech_stack as $tech)
|
||
|
|
<span class="rounded-full bg-white/5 px-3 py-1 text-xs text-paper-dim">{{ $tech }}</span>
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</section>
|
||
|
|
</x-layouts.app>
|