mikeisdeving/resources/views/home.blade.php

<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') }}
                            &mdash;
                            {{ $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 &rarr;</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 &rarr;</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>