Resume — CV & Portfolio

@props([])

@php
    // Single-column resume / CV. Mostly inline primitive content with two composed
    // blocks (an experience timeline and a minimal footer). All content is neutral
    // placeholder data so it is safe to copy into any project.
    $contactLinks = [
        ['platform' => 'email', 'label' => __('Email'), 'href' => 'mailto:you@example.com'],
        ['platform' => 'github', 'label' => __('GitHub'), 'href' => '#'],
        ['platform' => 'linkedin', 'label' => __('LinkedIn'), 'href' => '#'],
    ];

    $skills = [
        'TypeScript', 'React', 'Next.js', 'Laravel', 'PHP', 'Tailwind CSS',
        'PostgreSQL', 'GraphQL', 'Node.js', 'Docker', 'AWS', 'Figma',
    ];

    $education = [
        [
            'school' => 'University of Amsterdam',
            'degree' => 'M.Sc. Computer Science',
            'period' => '2014 — 2016',
            'detail' => 'Specialisation in human–computer interaction. Graduated cum laude.',
        ],
        [
            'school' => 'Delft University of Technology',
            'degree' => 'B.Sc. Software Engineering',
            'period' => '2010 — 2014',
            'detail' => 'Foundations in systems design, algorithms and distributed computing.',
        ],
    ];
@endphp

<div class="min-h-screen bg-background text-foreground">
    <main class="mx-auto w-full max-w-3xl px-4 py-12 sm:px-6 sm:py-16 lg:py-20">
        {{-- Header: avatar, identity, contact links, download CV --}}
        <header class="flex flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-center gap-6">
                <x-ui.avatar size="xl" alt="Jordan Avery" fallback="JA" />
                <div class="space-y-2">
                    <h1 class="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">{{ __('Jordan Avery') }}</h1>
                    <p class="text-base text-muted-foreground">{{ __('Senior Product Engineer') }}</p>
                    <p class="flex items-center gap-2 text-sm text-muted-foreground">
                        <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                        {{ __('Amsterdam, Netherlands') }}
                    </p>
                </div>
            </div>

            <div class="flex flex-col items-start gap-4 sm:items-end">
                <x-ui.social-links :links="$contactLinks" size="sm" label="Contact links" />
                <x-ui.button>
                    <x-slot:icon>
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
                    </x-slot:icon>
                    {{ __('Download CV') }}
                </x-ui.button>
            </div>
        </header>

        <x-ui.separator class="my-10" />

        {{-- Summary --}}
        <section aria-labelledby="resume-summary">
            <h2 id="resume-summary" class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{{ __('Summary') }}</h2>
            <p class="mt-4 text-base leading-relaxed text-foreground">
                {{ __('Product-minded engineer with ten years of experience shipping resilient web platforms end to end — from design systems and accessibility to data pipelines and observability. I lead small teams, sweat the details, and care deeply about the craft of the interface.') }}
            </p>
        </section>

        <x-ui.separator class="my-10" />

        {{-- Experience --}}
        <section aria-labelledby="resume-experience">
            <h2 id="resume-experience" class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{{ __('Experience') }}</h2>
            <div class="mt-6">
                <x-blocks.scheduling-gantt />
            </div>
        </section>

        <x-ui.separator class="my-10" />

        {{-- Skills --}}
        <section aria-labelledby="resume-skills">
            <h2 id="resume-skills" class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{{ __('Skills') }}</h2>
            <div class="mt-4 flex flex-wrap gap-2">
                @foreach ($skills as $skill)
                    <x-ui.badge variant="secondary">{{ $skill }}</x-ui.badge>
                @endforeach
            </div>
        </section>

        <x-ui.separator class="my-10" />

        {{-- Education --}}
        <section aria-labelledby="resume-education">
            <h2 id="resume-education" class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{{ __('Education') }}</h2>
            <x-ui.card class="mt-4 divide-y divide-border p-0">
                @foreach ($education as $entry)
                    <div class="flex flex-col gap-2 p-6 sm:flex-row sm:items-baseline sm:justify-between sm:gap-6">
                        <div class="space-y-2">
                            <h3 class="text-base font-semibold text-foreground">{{ __($entry['degree']) }}</h3>
                            <p class="text-sm font-medium text-muted-foreground">{{ __($entry['school']) }}</p>
                            <p class="text-sm text-muted-foreground">{{ __($entry['detail']) }}</p>
                        </div>
                        <span class="shrink-0 text-sm text-muted-foreground">{{ __($entry['period']) }}</span>
                    </div>
                @endforeach
            </x-ui.card>
        </section>
    </main>

    <x-blocks.footer-minimal
        brand="Jordan Avery"
        :links="[
            ['label' => __('Email'), 'href' => 'mailto:you@example.com'],
            ['label' => __('Resume'), 'href' => '#'],
            ['label' => __('Portfolio'), 'href' => '#'],
        ]"
    />
</div>