Add Filament admin panel and creative public portfolio site
Adds a Filament admin (Profile settings page plus CRUD resources for Education, Experience, Projects, and Posts) backing a public-facing personal site: hero/about/timeline home page, project showcase, and blog, styled with a dark editorial theme (Fraunces + Instrument Sans). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
m105
@@ -0,0 +1,30 @@
|
||||
@props(['title' => null, 'description' => null])
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ $title ? "{$title} · " . config('app.name') : config('app.name') }}</title>
|
||||
@if ($description)
|
||||
<meta name="description" content="{{ $description }}">
|
||||
@endif
|
||||
|
||||
@fonts
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
</head>
|
||||
<body class="min-h-screen bg-ink font-sans text-paper antialiased">
|
||||
<div class="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
|
||||
<div class="absolute -top-48 -left-32 h-[34rem] w-[34rem] rounded-full bg-accent/20 blur-[130px]"></div>
|
||||
<div class="absolute top-1/2 -right-40 h-[28rem] w-[28rem] rounded-full bg-accent/10 blur-[150px]"></div>
|
||||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,rgba(245,243,238,0.06)_1px,transparent_0)] bg-[length:28px_28px]"></div>
|
||||
</div>
|
||||
|
||||
<x-site.nav />
|
||||
|
||||
<main>
|
||||
{{ $slot }}
|
||||
</main>
|
||||
|
||||
<x-site.footer />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
@php
|
||||
$profile = \App\Models\Profile::query()->first();
|
||||
$socials = collect($profile?->social_links ?? []);
|
||||
@endphp
|
||||
<footer class="mt-24 border-t border-white/5">
|
||||
<div class="mx-auto flex max-w-5xl flex-col items-center gap-4 px-6 py-10 text-sm text-paper-dim sm:flex-row sm:justify-between">
|
||||
<p>© {{ now()->year }} {{ $profile?->name ?? config('app.name') }}. All rights reserved.</p>
|
||||
|
||||
@if ($socials->isNotEmpty())
|
||||
<div class="flex items-center gap-5">
|
||||
@foreach ($socials as $platform => $url)
|
||||
<a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="capitalize transition hover:text-accent">
|
||||
{{ $platform }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,16 @@
|
||||
@php
|
||||
$profile = \App\Models\Profile::query()->first();
|
||||
@endphp
|
||||
<header class="sticky top-0 z-40 border-b border-white/5 bg-ink/80 backdrop-blur-md">
|
||||
<nav class="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
|
||||
<a href="{{ route('home') }}" class="font-display text-lg font-semibold tracking-tight text-paper">
|
||||
{{ $profile?->name ?? config('app.name') }}<span class="text-accent">.</span>
|
||||
</a>
|
||||
|
||||
<div class="flex items-center gap-6 text-sm text-paper-dim">
|
||||
<a href="{{ route('home') }}#about" class="transition hover:text-paper">About</a>
|
||||
<a href="{{ route('projects.index') }}" class="transition hover:text-paper {{ request()->routeIs('projects.*') ? 'text-paper' : '' }}">Projects</a>
|
||||
<a href="{{ route('posts.index') }}" class="transition hover:text-paper {{ request()->routeIs('posts.*') ? 'text-paper' : '' }}">Blog</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
@@ -0,0 +1,9 @@
|
||||
<x-filament-panels::page>
|
||||
<form wire:submit="save" class="space-y-6">
|
||||
{{ $this->form }}
|
||||
|
||||
<x-filament::button type="submit">
|
||||
Save
|
||||
</x-filament::button>
|
||||
</form>
|
||||
</x-filament-panels::page>
|
||||
@@ -0,0 +1,146 @@
|
||||
<x-layouts.app :title="null" :description="$profile?->headline">
|
||||
{{-- Hero --}}
|
||||
<section class="mx-auto flex max-w-5xl flex-col-reverse items-center gap-12 px-6 pt-16 pb-24 sm:pt-24 sm:pb-32 lg:flex-row lg:items-center">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<p class="font-mono text-sm tracking-widest text-accent uppercase">Hi, I'm</p>
|
||||
|
||||
<h1 class="mt-3 font-display text-5xl leading-[1.05] font-semibold text-paper sm:text-6xl lg:text-7xl">
|
||||
{{ $profile?->name ?? 'Someone building things' }}
|
||||
</h1>
|
||||
|
||||
@if ($profile?->headline)
|
||||
<p class="mt-5 font-display text-2xl text-paper-dim italic">{{ $profile->headline }}</p>
|
||||
@endif
|
||||
|
||||
<div class="mt-10 flex flex-wrap items-center justify-center gap-4 lg:justify-start">
|
||||
<a href="{{ route('projects.index') }}" class="rounded-full bg-accent px-6 py-3 text-sm font-semibold text-ink transition hover:brightness-110">
|
||||
View my projects
|
||||
</a>
|
||||
<a href="{{ route('posts.index') }}" class="rounded-full border border-white/15 px-6 py-3 text-sm font-semibold text-paper transition hover:border-white/30">
|
||||
Read the blog
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative shrink-0">
|
||||
<div class="absolute inset-0 -z-10 scale-110 rounded-[2.5rem] bg-accent/30 blur-3xl"></div>
|
||||
@if ($profile?->avatar_url)
|
||||
<img src="{{ $profile->avatar_url }}" alt="{{ $profile->name }}" class="h-56 w-56 rounded-[2.5rem] object-cover ring-1 ring-white/10 sm:h-72 sm:w-72">
|
||||
@else
|
||||
<div class="flex h-56 w-56 items-center justify-center rounded-[2.5rem] bg-ink-soft ring-1 ring-white/10 sm:h-72 sm:w-72">
|
||||
<span class="font-display text-6xl text-paper-dim">{{ \Illuminate\Support\Str::substr($profile?->name ?? '?', 0, 1) }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- About --}}
|
||||
@if ($profile?->bio)
|
||||
<section id="about" class="mx-auto max-w-3xl scroll-mt-24 px-6 py-16">
|
||||
<h2 class="font-display text-3xl font-semibold text-paper">About</h2>
|
||||
<div class="prose prose-invert mt-6 max-w-none text-paper-dim prose-p:leading-relaxed prose-a:text-accent">
|
||||
{!! $profile->bio !!}
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex flex-wrap gap-4 text-sm text-paper-dim">
|
||||
@if ($profile->location)
|
||||
<span class="rounded-full border border-white/10 px-4 py-2">📍 {{ $profile->location }}</span>
|
||||
@endif
|
||||
@if ($profile->email)
|
||||
<a href="mailto:{{ $profile->email }}" class="rounded-full border border-white/10 px-4 py-2 transition hover:border-accent hover:text-paper">✉ {{ $profile->email }}</a>
|
||||
@endif
|
||||
@if ($profile->resume_url)
|
||||
<a href="{{ $profile->resume_url }}" target="_blank" rel="noopener noreferrer" class="rounded-full border border-white/10 px-4 py-2 transition hover:border-accent hover:text-paper">↓ Resume</a>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
{{-- Timeline --}}
|
||||
@if ($timeline->isNotEmpty())
|
||||
<section class="mx-auto max-w-3xl px-6 py-16">
|
||||
<h2 class="font-display text-3xl font-semibold text-paper">Journey</h2>
|
||||
|
||||
<ol class="mt-10 space-y-10 border-l border-white/10 pl-8">
|
||||
@foreach ($timeline as $item)
|
||||
<li class="relative">
|
||||
<span class="absolute -left-[2.35rem] top-1.5 h-3 w-3 rounded-full {{ $item->type === 'work' ? 'bg-accent' : 'bg-paper-dim' }} ring-4 ring-ink"></span>
|
||||
|
||||
<p class="font-mono text-xs tracking-wide text-paper-dim uppercase">
|
||||
{{ $item->start_date?->format('Y') }}
|
||||
—
|
||||
{{ $item->is_current ? 'Present' : ($item->end_date?->format('Y') ?? '') }}
|
||||
<span class="text-accent">· {{ $item->type === 'work' ? 'Work' : 'Education' }}</span>
|
||||
</p>
|
||||
|
||||
<h3 class="mt-1 font-display text-xl font-medium text-paper">{{ $item->title }}</h3>
|
||||
<p class="text-paper-dim">{{ $item->subtitle }}</p>
|
||||
|
||||
@if ($item->description)
|
||||
<p class="mt-2 text-sm leading-relaxed text-paper-dim">{{ $item->description }}</p>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ol>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
{{-- Featured projects --}}
|
||||
@if ($projects->isNotEmpty())
|
||||
<section class="mx-auto max-w-5xl px-6 py-16">
|
||||
<div class="flex items-end justify-between">
|
||||
<h2 class="font-display text-3xl font-semibold text-paper">Projects</h2>
|
||||
<a href="{{ route('projects.index') }}" class="text-sm text-paper-dim transition hover:text-accent">View all →</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 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">
|
||||
<h3 class="font-display text-xl font-medium text-paper">{{ $project->title }}</h3>
|
||||
@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 (array_slice($project->tech_stack, 0, 4) as $tech)
|
||||
<span class="rounded-full bg-accent-soft px-3 py-1 text-xs text-accent">{{ $tech }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
{{-- Latest posts --}}
|
||||
@if ($posts->isNotEmpty())
|
||||
<section class="mx-auto max-w-3xl px-6 py-16">
|
||||
<div class="flex items-end justify-between">
|
||||
<h2 class="font-display text-3xl font-semibold text-paper">From the blog</h2>
|
||||
<a href="{{ route('posts.index') }}" class="text-sm text-paper-dim transition hover:text-accent">View all →</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 divide-y divide-white/10">
|
||||
@foreach ($posts as $post)
|
||||
<a href="{{ route('posts.show', $post) }}" class="group flex flex-col gap-1 py-6 sm:flex-row sm:items-baseline sm:gap-6">
|
||||
<span class="font-mono text-xs tracking-wide text-paper-dim uppercase">{{ $post->published_at->format('M j, Y') }}</span>
|
||||
<span class="flex-1">
|
||||
<span class="font-display text-lg text-paper transition group-hover:text-accent">{{ $post->title }}</span>
|
||||
@if ($post->excerpt)
|
||||
<span class="mt-1 block text-sm text-paper-dim">{{ $post->excerpt }}</span>
|
||||
@endif
|
||||
</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
</x-layouts.app>
|
||||
@@ -0,0 +1,30 @@
|
||||
<x-layouts.app title="Blog" description="Writing on things I'm learning and building.">
|
||||
<section class="mx-auto max-w-3xl px-6 pt-16 pb-8">
|
||||
<p class="font-mono text-sm tracking-widest text-accent uppercase">Writing</p>
|
||||
<h1 class="mt-3 font-display text-5xl font-semibold text-paper">Blog</h1>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-3xl px-6 pb-16">
|
||||
@if ($posts->isEmpty())
|
||||
<p class="text-paper-dim">No posts yet — check back soon.</p>
|
||||
@else
|
||||
<div class="divide-y divide-white/10">
|
||||
@foreach ($posts as $post)
|
||||
<a href="{{ route('posts.show', $post) }}" class="group flex flex-col gap-1 py-6 sm:flex-row sm:items-baseline sm:gap-6">
|
||||
<span class="font-mono text-xs tracking-wide text-paper-dim uppercase">{{ $post->published_at->format('M j, Y') }}</span>
|
||||
<span class="flex-1">
|
||||
<span class="font-display text-lg text-paper transition group-hover:text-accent">{{ $post->title }}</span>
|
||||
@if ($post->excerpt)
|
||||
<span class="mt-1 block text-sm text-paper-dim">{{ $post->excerpt }}</span>
|
||||
@endif
|
||||
</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
{{ $posts->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</section>
|
||||
</x-layouts.app>
|
||||
@@ -0,0 +1,26 @@
|
||||
<x-layouts.app :title="$post->title" :description="$post->excerpt">
|
||||
<article class="mx-auto max-w-3xl px-6 pt-16 pb-24">
|
||||
<a href="{{ route('posts.index') }}" class="text-sm text-paper-dim transition hover:text-accent">← All posts</a>
|
||||
|
||||
<p class="mt-6 font-mono text-xs tracking-wide text-paper-dim uppercase">{{ $post->published_at->format('F j, Y') }}</p>
|
||||
<h1 class="mt-2 font-display text-4xl font-semibold text-paper sm:text-5xl">{{ $post->title }}</h1>
|
||||
|
||||
@if (!empty($post->tags))
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
@foreach ($post->tags as $tag)
|
||||
<span class="rounded-full bg-accent-soft px-3 py-1 text-xs text-accent">{{ $tag }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($post->cover_image_url)
|
||||
<img src="{{ $post->cover_image_url }}" alt="{{ $post->title }}" class="mt-10 w-full rounded-2xl border border-white/10">
|
||||
@endif
|
||||
|
||||
@if ($post->body)
|
||||
<div class="prose prose-invert mt-10 max-w-none text-paper-dim prose-headings:font-display prose-headings:text-paper prose-a:text-accent">
|
||||
{!! $post->body !!}
|
||||
</div>
|
||||
@endif
|
||||
</article>
|
||||
</x-layouts.app>
|
||||
@@ -0,0 +1,42 @@
|
||||
<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>
|
||||
@@ -0,0 +1,42 @@
|
||||
<x-layouts.app :title="$project->title" :description="$project->summary">
|
||||
<article class="mx-auto max-w-3xl px-6 pt-16 pb-24">
|
||||
<a href="{{ route('projects.index') }}" class="text-sm text-paper-dim transition hover:text-accent">← All projects</a>
|
||||
|
||||
<h1 class="mt-6 font-display text-4xl font-semibold text-paper sm:text-5xl">{{ $project->title }}</h1>
|
||||
|
||||
@if ($project->summary)
|
||||
<p class="mt-4 font-display text-xl text-paper-dim italic">{{ $project->summary }}</p>
|
||||
@endif
|
||||
|
||||
<div class="mt-6 flex flex-wrap items-center gap-4">
|
||||
@if ($project->url)
|
||||
<a href="{{ $project->url }}" target="_blank" rel="noopener noreferrer" class="rounded-full bg-accent px-5 py-2.5 text-sm font-semibold text-ink transition hover:brightness-110">
|
||||
Visit live site
|
||||
</a>
|
||||
@endif
|
||||
@if ($project->repository_url)
|
||||
<a href="{{ $project->repository_url }}" target="_blank" rel="noopener noreferrer" class="rounded-full border border-white/15 px-5 py-2.5 text-sm font-semibold text-paper transition hover:border-white/30">
|
||||
View source
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if (!empty($project->tech_stack))
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
@foreach ($project->tech_stack as $tech)
|
||||
<span class="rounded-full bg-accent-soft px-3 py-1 text-xs text-accent">{{ $tech }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($project->image_url)
|
||||
<img src="{{ $project->image_url }}" alt="{{ $project->title }}" class="mt-10 w-full rounded-2xl border border-white/10">
|
||||
@endif
|
||||
|
||||
@if ($project->description)
|
||||
<div class="prose prose-invert mt-10 max-w-none text-paper-dim prose-headings:font-display prose-headings:text-paper prose-a:text-accent">
|
||||
{!! $project->description !!}
|
||||
</div>
|
||||
@endif
|
||||
</article>
|
||||
</x-layouts.app>
|
||||
@@ -0,0 +1,44 @@
|
||||
@if ($paginator->hasPages())
|
||||
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between gap-4">
|
||||
|
||||
@if ($paginator->onFirstPage())
|
||||
<span class="cursor-not-allowed rounded-full border border-white/10 px-4 py-2 text-sm text-paper-dim/50">
|
||||
{!! __('pagination.previous') !!}
|
||||
</span>
|
||||
@else
|
||||
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="rounded-full border border-white/10 px-4 py-2 text-sm text-paper-dim transition hover:border-accent hover:text-paper">
|
||||
{!! __('pagination.previous') !!}
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<div class="hidden items-center gap-1 sm:flex">
|
||||
@foreach ($elements as $element)
|
||||
@if (is_string($element))
|
||||
<span class="px-2 text-sm text-paper-dim/50">{{ $element }}</span>
|
||||
@endif
|
||||
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $paginator->currentPage())
|
||||
<span aria-current="page" class="rounded-full bg-accent px-3.5 py-1.5 text-sm font-semibold text-ink">{{ $page }}</span>
|
||||
@else
|
||||
<a href="{{ $url }}" class="rounded-full px-3.5 py-1.5 text-sm text-paper-dim transition hover:text-paper" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
|
||||
{{ $page }}
|
||||
</a>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if ($paginator->hasMorePages())
|
||||
<a href="{{ $paginator->nextPageUrl() }}" rel="next" class="rounded-full border border-white/10 px-4 py-2 text-sm text-paper-dim transition hover:border-accent hover:text-paper">
|
||||
{!! __('pagination.next') !!}
|
||||
</a>
|
||||
@else
|
||||
<span class="cursor-not-allowed rounded-full border border-white/10 px-4 py-2 text-sm text-paper-dim/50">
|
||||
{!! __('pagination.next') !!}
|
||||
</span>
|
||||
@endif
|
||||
</nav>
|
||||
@endif
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user