Skip to content
HyperUI

No results found.

Back to templates components

Portfolio

A starting-point portfolio page example built with Tailwind CSS, combining a header, hero, case-study rows, about section, testimonial, and contact CTA, plus an individual case-study page for writing up one project in full. Not a production-ready template.

Starting point — not a finished product

This template combines existing HyperUI components into a full page layout to help you move faster. It still needs real content, working functionality, accessibility checks, and testing before it's ready for production.

0/2 Dark Mode (Request)Updated: N/ANo commit information available.

Home

markmead

<input type="checkbox" id="nav-toggle" class="peer sr-only" />

<header class="sticky top-0 z-40 border-b border-gray-100 bg-white/90 backdrop-blur">
  <div class="mx-auto flex h-16 max-w-5xl items-center justify-between px-4 sm:px-6">
    <a href="#" class="text-sm font-semibold tracking-tight text-gray-900">
      Guillermo de la Cruz
    </a>

    <nav aria-label="Global" class="hidden md:block">
      <ul class="flex items-center gap-8 text-sm text-gray-600">
        <li><a href="#work" class="transition hover:text-gray-900">Work</a></li>
        <li><a href="#about" class="transition hover:text-gray-900">About</a></li>
        <li><a href="#contact" class="transition hover:text-gray-900">Contact</a></li>
      </ul>
    </nav>

    <div class="flex items-center gap-3">
      <a
        href="#contact"
        class="hidden rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-700 sm:block"
      >
        Book a call
      </a>

      <label
        for="nav-toggle"
        id="nav-toggle-label"
        aria-expanded="false"
        aria-controls="mobile-nav"
        class="cursor-pointer rounded-md p-2 text-gray-600 transition peer-focus-visible:ring-2 peer-focus-visible:ring-violet-600 peer-focus-visible:ring-offset-2 hover:bg-gray-100 md:hidden"
      >
        <span class="sr-only">Toggle menu</span>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          class="size-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
          />
        </svg>
      </label>
    </div>
  </div>

  <nav
    id="mobile-nav"
    aria-label="Global Mobile"
    class="hidden border-t border-gray-100 bg-white peer-checked:block md:hidden"
  >
    <ul class="space-y-1 px-4 py-4 text-sm">
      <li>
        <a href="#work" class="block rounded-lg px-3 py-2 text-gray-600 hover:bg-gray-50"
          >Work</a
        >
      </li>
      <li>
        <a href="#about" class="block rounded-lg px-3 py-2 text-gray-600 hover:bg-gray-50"
          >About</a
        >
      </li>
      <li>
        <a href="#contact" class="block rounded-lg px-3 py-2 text-gray-600 hover:bg-gray-50"
          >Contact</a
        >
      </li>
    </ul>
  </nav>
</header>

<main>
  <section class="mx-auto max-w-5xl px-4 pt-16 pb-20 sm:px-6 sm:pt-20">
    <span
      class="inline-flex items-center gap-2 rounded-full border border-gray-200 py-1 pr-3 pl-2 text-xs font-medium text-gray-600"
    >
      <span class="relative flex size-2">
        <span
          class="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75"
        ></span>
        <span class="relative inline-flex size-2 rounded-full bg-emerald-500"></span>
      </span>
      Available for one new project in Q3
    </span>

    <h1 class="mt-6 max-w-2xl text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
      I help funded product teams ship decisions they can still defend a year later.
    </h1>

    <p class="mt-5 max-w-xl text-lg text-pretty text-gray-600">
      Contract product designer working end-to-end &mdash; research, flows, UI, and the handoff
      that keeps engineering from guessing. Based in Lisbon, working with teams everywhere.
    </p>

    <div class="mt-8 flex flex-wrap items-center gap-4">
      <a
        href="#contact"
        class="rounded-md bg-violet-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-violet-700"
      >
        Start a project
      </a>

      <a
        href="#work"
        class="inline-flex items-center gap-1 text-sm font-medium text-gray-700 transition hover:text-gray-900"
      >
        See the work
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-4 rtl:rotate-180"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
          />
        </svg>
      </a>
    </div>
  </section>

  <section id="work" class="scroll-mt-16 border-t border-gray-100 bg-gray-50">
    <div class="mx-auto max-w-5xl px-4 py-16 sm:px-6 sm:py-20">
      <div class="max-w-lg">
        <p class="text-sm font-medium text-violet-600">Selected work</p>
        <h2 class="mt-2 text-2xl font-semibold text-gray-900 sm:text-3xl">
          Three projects, three different kinds of hard problem.
        </h2>
      </div>

      <div class="mt-12 space-y-16">
        <article class="grid items-center gap-8 sm:grid-cols-2 sm:gap-12">
          <img
            alt=""
            src="https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&q=80&w=1160"
            class="aspect-4/3 w-full rounded-lg object-cover"
          />

          <div>
            <p class="text-xs font-medium tracking-wide text-gray-500 uppercase">
              Fieldnote &middot; Product design &middot; 2025
            </p>

            <h3 class="mt-2 text-xl font-semibold text-gray-900">
              Redesigning the editor that field engineers actually trust
            </h3>

            <p class="mt-3 text-gray-600">
              Cut average report time from 11 minutes to 4 by rebuilding the note editor around
              offline-first sync, not adding features on top of it.
            </p>

            <a
              href="#"
              class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-violet-600 transition hover:text-violet-700"
            >
              View case study
              <svg
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="size-4 rtl:rotate-180"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
                />
              </svg>
            </a>
          </div>
        </article>

        <article class="grid items-center gap-8 sm:grid-cols-2 sm:gap-12">
          <div class="sm:order-last">
            <img
              alt=""
              src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=1160"
              class="aspect-4/3 w-full rounded-lg object-cover"
            />
          </div>

          <div>
            <p class="text-xs font-medium tracking-wide text-gray-500 uppercase">
              Orbitly &middot; 0&rarr;1 &middot; 2024
            </p>

            <h3 class="mt-2 text-xl font-semibold text-gray-900">
              Taking a team dashboard from spreadsheet to shippable
            </h3>

            <p class="mt-3 text-gray-600">
              Designed the first version of Orbitly's workspace, from onboarding through
              billing, and stayed on through their seed round launch.
            </p>

            <a
              href="#"
              class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-violet-600 transition hover:text-violet-700"
            >
              View case study
              <svg
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="size-4 rtl:rotate-180"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
                />
              </svg>
            </a>
          </div>
        </article>

        <article class="grid items-center gap-8 sm:grid-cols-2 sm:gap-12">
          <img
            alt=""
            src="https://images.unsplash.com/photo-1522252234503-e356532cafd5?auto=format&fit=crop&q=80&w=1160"
            class="aspect-4/3 w-full rounded-lg object-cover"
          />

          <div>
            <p class="text-xs font-medium tracking-wide text-gray-500 uppercase">
              Northwind Studio &middot; Design system &middot; 2023
            </p>

            <h3 class="mt-2 text-xl font-semibold text-gray-900">
              A component library three teams could actually share
            </h3>

            <p class="mt-3 text-gray-600">
              Unified four inconsistent product surfaces into one Figma and code library,
              reducing new-screen build time by roughly a third.
            </p>

            <a
              href="#"
              class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-violet-600 transition hover:text-violet-700"
            >
              View case study
              <svg
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="size-4 rtl:rotate-180"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
                />
              </svg>
            </a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section id="about" class="mx-auto max-w-5xl scroll-mt-16 px-4 py-16 sm:px-6 sm:py-20">
    <div class="grid gap-12 sm:grid-cols-5 sm:items-start">
      <div class="sm:col-span-2">
        <img
          alt=""
          src="https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=800"
          class="aspect-square w-full rounded-lg object-cover"
        />
      </div>

      <div class="sm:col-span-3">
        <p class="text-sm font-medium text-violet-600">About</p>

        <h2 class="mt-2 text-2xl font-semibold text-gray-900 sm:text-3xl">
          Seven years in, still happiest in the messy middle of a project.
        </h2>

        <p class="mt-4 text-gray-600">
          I spent four years as an in-house designer at two Series A startups before going
          independent in 2021. Now I work with two or three teams a year, usually stepping in
          right after a fundraise or right before one, when product decisions carry the most
          weight.
        </p>

        <dl class="mt-8 grid grid-cols-3 gap-4 border-t border-gray-200 pt-8">
          <div>
            <dt class="text-xs text-gray-500">Years independent</dt>
            <dd class="mt-1 text-2xl font-semibold text-gray-900">4</dd>
          </div>

          <div>
            <dt class="text-xs text-gray-500">Products shipped</dt>
            <dd class="mt-1 text-2xl font-semibold text-gray-900">23</dd>
          </div>

          <div>
            <dt class="text-xs text-gray-500">Repeat clients</dt>
            <dd class="mt-1 text-2xl font-semibold text-gray-900">9</dd>
          </div>
        </dl>

        <ul class="mt-8 flex flex-wrap gap-2">
          <li class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
            Product strategy
          </li>
          <li class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
            Design systems
          </li>
          <li class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
            User research
          </li>
          <li class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
            Figma &amp; code
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="border-t border-gray-100 bg-gray-50">
    <div class="mx-auto max-w-3xl px-4 py-16 sm:px-6 sm:py-20">
      <figure class="text-center">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="mx-auto size-8 text-violet-600"
        >
          <path
            fill-rule="evenodd"
            d="M4.804 21.644A6.707 6.707 0 0 0 6 21.75a6.721 6.721 0 0 0 3.583-1.029c.774.182 1.584.279 2.417.279 5.322 0 9.75-3.97 9.75-9 0-5.03-4.428-9-9.75-9s-9.75 3.97-9.75 9c0 2.409 1.025 4.587 2.674 6.192.232.226.277.428.254.543a3.73 3.73 0 0 1-.814 1.686.75.75 0 0 0 .44 1.223ZM8.25 10.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25ZM10.875 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z"
            clip-rule="evenodd"
          />
        </svg>

        <blockquote class="mt-4">
          <p class="text-xl font-medium text-pretty text-gray-900 sm:text-2xl">
            Guillermo asked harder questions in the first week than our last three hires
            combined. The dashboard we shipped is still the one we point new hires to as
            &ldquo;how we build here.&rdquo;
          </p>
        </blockquote>

        <figcaption class="mt-6 flex items-center justify-center gap-3">
          <img
            alt=""
            src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&q=80&w=200"
            class="size-10 rounded-full object-cover"
          />

          <div class="text-left">
            <p class="text-sm font-medium text-gray-900">Priya Natarajan</p>
            <p class="text-sm text-gray-500">Ops Lead, Orbitly</p>
          </div>
        </figcaption>
      </figure>
    </div>
  </section>

  <section id="contact" class="mx-auto max-w-5xl scroll-mt-16 px-4 py-16 sm:px-6 sm:py-20">
    <div class="rounded-2xl bg-gray-900 px-6 py-12 text-center sm:px-12 sm:py-16">
      <h2 class="text-2xl font-semibold text-white sm:text-3xl">
        Have a project taking shape?
      </h2>

      <p class="mx-auto mt-3 max-w-md text-gray-400">
        I take on one new engagement at a time, usually starting four to six weeks out. Tell me
        what you're building and I'll reply within two days.
      </p>

      <div class="mt-8 flex flex-wrap items-center justify-center gap-4">
        <a
          href="#"
          class="rounded-md bg-white px-6 py-3 text-sm font-medium text-gray-900 transition hover:bg-gray-100"
        >
          hello@guillermodelacruz.com
        </a>

        <a
          href="#"
          class="rounded-md border border-gray-700 px-6 py-3 text-sm font-medium text-white transition hover:bg-gray-800"
        >
          Book a 20-minute call
        </a>
      </div>
    </div>
  </section>
</main>

<footer class="border-t border-gray-100">
  <div
    class="mx-auto flex max-w-5xl flex-col items-center gap-4 px-4 py-8 sm:flex-row sm:justify-between sm:px-6"
  >
    <p class="text-sm text-gray-500">&copy; 2026 Guillermo de la Cruz. Lisbon, Portugal.</p>

    <ul class="flex items-center gap-5">
      <li>
        <a href="#" class="text-sm text-gray-500 transition hover:text-gray-900">Dribbble</a>
      </li>
      <li>
        <a href="#" class="text-sm text-gray-500 transition hover:text-gray-900">LinkedIn</a>
      </li>
      <li>
        <a href="#" class="text-sm text-gray-500 transition hover:text-gray-900">Read.cv</a>
      </li>
    </ul>
  </div>
</footer>

<script>
  const navToggleCheckbox = document.getElementById('nav-toggle')
  const navToggleLabel = document.getElementById('nav-toggle-label')

  navToggleCheckbox.addEventListener('change', () => {
    navToggleLabel.setAttribute('aria-expanded', String(navToggleCheckbox.checked))
  })
</script>

Case study

markmead

<input type="checkbox" id="nav-toggle" class="peer sr-only" />

<header class="sticky top-0 z-40 border-b border-gray-100 bg-white/90 backdrop-blur">
  <div class="mx-auto flex h-16 max-w-5xl items-center justify-between px-4 sm:px-6">
    <a href="#" class="text-sm font-semibold tracking-tight text-gray-900">
      Guillermo de la Cruz
    </a>

    <nav aria-label="Global" class="hidden md:block">
      <ul class="flex items-center gap-8 text-sm text-gray-600">
        <li><a href="#work" class="transition hover:text-gray-900">Work</a></li>
        <li><a href="#about" class="transition hover:text-gray-900">About</a></li>
        <li><a href="#contact" class="transition hover:text-gray-900">Contact</a></li>
      </ul>
    </nav>

    <div class="flex items-center gap-3">
      <a
        href="#contact"
        class="hidden rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-700 sm:block"
      >
        Book a call
      </a>

      <label
        for="nav-toggle"
        id="nav-toggle-label"
        aria-expanded="false"
        aria-controls="mobile-nav"
        class="cursor-pointer rounded-md p-2 text-gray-600 transition peer-focus-visible:ring-2 peer-focus-visible:ring-violet-600 peer-focus-visible:ring-offset-2 hover:bg-gray-100 md:hidden"
      >
        <span class="sr-only">Toggle menu</span>
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          class="size-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
          />
        </svg>
      </label>
    </div>
  </div>

  <nav
    id="mobile-nav"
    aria-label="Global Mobile"
    class="hidden border-t border-gray-100 bg-white peer-checked:block md:hidden"
  >
    <ul class="space-y-1 px-4 py-4 text-sm">
      <li>
        <a href="#work" class="block rounded-lg px-3 py-2 text-gray-600 hover:bg-gray-50"
          >Work</a
        >
      </li>
      <li>
        <a href="#about" class="block rounded-lg px-3 py-2 text-gray-600 hover:bg-gray-50"
          >About</a
        >
      </li>
      <li>
        <a href="#contact" class="block rounded-lg px-3 py-2 text-gray-600 hover:bg-gray-50"
          >Contact</a
        >
      </li>
    </ul>
  </nav>
</header>

<main>
  <article class="mx-auto max-w-3xl px-4 pt-12 pb-20 sm:px-6 sm:pt-16">
    <a
      href="#"
      class="inline-flex items-center gap-1 text-sm font-medium text-gray-600 transition hover:text-gray-900"
    >
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4 rtl:rotate-180"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
        />
      </svg>
      Back to work
    </a>

    <p class="mt-6 text-xs font-medium tracking-wide text-violet-600 uppercase">
      Fieldnote &middot; Product design &middot; 2025
    </p>

    <h1 class="mt-3 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
      Redesigning the editor that field engineers actually trust
    </h1>

    <p class="mt-4 text-lg text-pretty text-gray-600">
      Cut average report time from 11 minutes to 4 by rebuilding the note editor around
      offline-first sync, not adding features on top of it.
    </p>

    <dl class="mt-8 flex flex-wrap gap-x-8 gap-y-4 border-y border-gray-200 py-6 text-sm">
      <div>
        <dt class="text-gray-500">Role</dt>
        <dd class="mt-1 font-medium text-gray-900">Lead product designer</dd>
      </div>

      <div>
        <dt class="text-gray-500">Timeline</dt>
        <dd class="mt-1 font-medium text-gray-900">14 weeks</dd>
      </div>

      <div>
        <dt class="text-gray-500">Team</dt>
        <dd class="mt-1 font-medium text-gray-900">2 engineers, 1 PM</dd>
      </div>

      <div>
        <dt class="text-gray-500">Reading time</dt>
        <dd class="mt-1 font-medium text-gray-900">6 min</dd>
      </div>
    </dl>

    <img
      alt="Field engineer using a tablet on site to file a report"
      src="https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&q=80&w=1400"
      class="mt-10 aspect-video w-full rounded-lg object-cover"
    />

    <div class="mt-10 space-y-6 text-gray-600">
      <h2 class="text-xl font-semibold text-gray-900">The problem</h2>

      <p>
        Fieldnote's engineers file inspection reports from sites with patchy signal &mdash; the
        bottom of a wind turbine, a basement plant room, a truck cab between stops. The existing
        editor synced on every keystroke, so a dropped connection didn't just pause saving, it
        silently discarded it. Support tickets about "where did my report go" outnumbered every
        other category combined.
      </p>

      <h2 class="text-xl font-semibold text-gray-900">What we tried first</h2>

      <p>
        The obvious fix was a longer retry queue and a "saving&hellip;" indicator that stayed
        honest about connection state. It shipped in a week and made the problem worse:
        engineers now watched a spinner that never resolved, then closed the tab anyway. The
        editor needed to stop treating the network as a dependency, not get better at
        apologising for it.
      </p>

      <h2 class="text-xl font-semibold text-gray-900">The rebuild</h2>

      <p>
        Every report now writes to local storage first and syncs in the background whenever a
        connection exists, with the UI never blocking on it. Conflicts &mdash; two engineers
        editing the same report after a signal gap &mdash; resolve with a field-level merge and
        a manual review only when the same field changed on both sides, which turned out to be
        rare enough to not need solving upfront.
      </p>
    </div>

    <figure class="mt-10 border-l-2 border-violet-600 py-1 pl-6">
      <blockquote>
        <p class="text-lg font-medium text-pretty text-gray-900">
          Nobody on the team thinks about the editor anymore, which is exactly the point. It
          just works, even out of signal.
        </p>
      </blockquote>

      <figcaption class="mt-3 text-sm text-gray-500">
        Marcus Boyle, Engineering Lead at Fieldnote
      </figcaption>
    </figure>

    <div class="mt-10 space-y-6 text-gray-600">
      <h2 class="text-xl font-semibold text-gray-900">The result</h2>

      <p>
        Three months after launch, average report time had dropped from 11 minutes to 4, and
        adoption in the field crews that had quietly gone back to paper recovered fully. No
        report has been lost to a dropped connection since.
      </p>
    </div>

    <dl
      class="mt-10 grid grid-cols-1 gap-6 rounded-lg bg-gray-50 p-8 text-center sm:grid-cols-3"
    >
      <div>
        <dd class="text-3xl font-semibold text-gray-900">4 min</dd>
        <dt class="mt-1 text-sm text-gray-500">Average report time, down from 11</dt>
      </div>

      <div>
        <dd class="text-3xl font-semibold text-gray-900">92%</dd>
        <dt class="mt-1 text-sm text-gray-500">Field adoption within a quarter</dt>
      </div>

      <div>
        <dd class="text-3xl font-semibold text-gray-900">0</dd>
        <dt class="mt-1 text-sm text-gray-500">
          Reports lost to dropped connections since launch
        </dt>
      </div>
    </dl>

    <div class="mt-16 border-t border-gray-200 pt-10">
      <p class="text-sm font-medium text-violet-600">Next up</p>

      <a href="#" class="group mt-2 flex items-center justify-between gap-4">
        <h2 class="text-xl font-semibold text-gray-900 group-hover:text-violet-600">
          Taking a team dashboard from spreadsheet to shippable
        </h2>

        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-5 shrink-0 text-gray-400 transition group-hover:translate-x-1 group-hover:text-violet-600 rtl:rotate-180 rtl:group-hover:-translate-x-1"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
          />
        </svg>
      </a>
    </div>
  </article>
</main>

<footer class="border-t border-gray-100">
  <div
    class="mx-auto flex max-w-5xl flex-col items-center gap-4 px-4 py-8 sm:flex-row sm:justify-between sm:px-6"
  >
    <p class="text-sm text-gray-500">&copy; 2026 Guillermo de la Cruz. Lisbon, Portugal.</p>

    <ul class="flex items-center gap-5">
      <li>
        <a href="#" class="text-sm text-gray-500 transition hover:text-gray-900">Dribbble</a>
      </li>
      <li>
        <a href="#" class="text-sm text-gray-500 transition hover:text-gray-900">LinkedIn</a>
      </li>
      <li>
        <a href="#" class="text-sm text-gray-500 transition hover:text-gray-900">Read.cv</a>
      </li>
    </ul>
  </div>
</footer>

<script>
  const navToggleCheckbox = document.getElementById('nav-toggle')
  const navToggleLabel = document.getElementById('nav-toggle-label')

  navToggleCheckbox.addEventListener('change', () => {
    navToggleLabel.setAttribute('aria-expanded', String(navToggleCheckbox.checked))
  })
</script>