Page.snap.html

<DocumentFragment>
  <div
    class="flex flex-col items-center px-4"
  >
    <section
      aria-labelledby="intro-heading"
      class="mb-24 max-w-[50rem] text-center sm:mb-0 scroll-mt-[100rem]"
      id="home"
    >
      <div
        class="flex items-center justify-center"
      >
        <div
          class="relative"
        >
          <div
            class="animate-scale-in"
          >
            <img
              alt="Sean Coughlin portrait"
              class="h-64 w-64 rounded-full object-cover border-[0.35rem] border-white shadow-xl"
              data-nimg="1"
              decoding="async"
              height="245"
              src="/_next/image?url=%2Fprofile.webp&w=640&q=95"
              srcset="/_next/image?url=%2Fprofile.webp&w=256&q=95 1x, /_next/image?url=%2Fprofile.webp&w=640&q=95 2x"
              style="color: transparent;"
              width="245"
            />
          </div>
          <span
            aria-hidden="true"
            class="absolute bottom-0 right-0 text-4xl animate-scale-in-delay-1"
          >
            👋
          </span>
        </div>
      </div>
      <h1
        class="mb-10 mt-4 px-4 text-2xl font-medium leading-[1.5]! sm:text-4xl animate-fade-in-up"
        id="intro-heading"
      >
        Hello, I'm 
        <span
          class="font-bold"
        >
          Sean.
        </span>
         I'm a 
        <span
          class="font-bold"
        >
          full-stack developer
        </span>
         with 
        <span
          class="font-bold"
        >
          3 years
        </span>
         of experience. I enjoy building 
        <span
          class="italic"
        >
          sites & apps
        </span>
        . My focus is web development.
      </h1>
      <div
        aria-label="Professional links and resume download"
        class="flex flex-row flex-wrap items-center justify-center gap-2 px-4 text-lg font-medium animate-fade-in-up-delay-1"
        role="group"
      >
        <a
          aria-label="Visit Sean Coughlin's LinkedIn profile (opens in new tab)"
          class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          href="https://www.linkedin.com/in/sean-m-coughlin/"
          rel="noopener noreferrer"
          target="_blank"
        >
          LinkedIn
          <svg
            aria-hidden="true"
            fill="currentColor"
            height="1em"
            stroke="currentColor"
            stroke-width="0"
            viewBox="0 0 16 16"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"
            />
          </svg>
        </a>
        <a
          aria-label="Visit Sean Coughlin's GitHub profile (opens in new tab)"
          class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          href="https://github.com/scc33"
          rel="noopener noreferrer"
          target="_blank"
        >
          GitHub
          <svg
            aria-hidden="true"
            fill="currentColor"
            height="1em"
            stroke="currentColor"
            stroke-width="0"
            viewBox="0 0 448 512"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z"
            />
          </svg>
        </a>
        <a
          aria-label="Visit Sean Coughlin's blog (opens in new tab)"
          class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          href="https://blog.seancoughlin.me"
          rel="noopener noreferrer"
          target="_blank"
        >
          Blog
          <svg
            aria-hidden="true"
            class="opacity-60"
            fill="none"
            height="1em"
            stroke="currentColor"
            stroke-width="0"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clip-rule="evenodd"
              d="M14 7C13.4477 7 13 7.44772 13 8V16C13 16.5523 13.4477 17 14 17H18C18.5523 17 19 16.5523 19 16V8C19 7.44772 18.5523 7 18 7H14ZM17 9H15V15H17V9Z"
              fill="currentColor"
              fill-rule="evenodd"
            />
            <path
              d="M6 7C5.44772 7 5 7.44772 5 8C5 8.55228 5.44772 9 6 9H10C10.5523 9 11 8.55228 11 8C11 7.44772 10.5523 7 10 7H6Z"
              fill="currentColor"
            />
            <path
              d="M6 11C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13H10C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11H6Z"
              fill="currentColor"
            />
            <path
              d="M5 16C5 15.4477 5.44772 15 6 15H10C10.5523 15 11 15.4477 11 16C11 16.5523 10.5523 17 10 17H6C5.44772 17 5 16.5523 5 16Z"
              fill="currentColor"
            />
            <path
              clip-rule="evenodd"
              d="M4 3C2.34315 3 1 4.34315 1 6V18C1 19.6569 2.34315 21 4 21H20C21.6569 21 23 19.6569 23 18V6C23 4.34315 21.6569 3 20 3H4ZM20 5H4C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V6C21 5.44772 20.5523 5 20 5Z"
              fill="currentColor"
              fill-rule="evenodd"
            />
          </svg>
        </a>
        <a
          aria-label="Visit Sean Coughlin's portfolio (opens in new tab)"
          class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          href="https://portfolio.seancoughlin.me"
          rel="noopener noreferrer"
          target="_blank"
        >
          Portfolio
          <svg
            aria-hidden="true"
            class="opacity-60"
            fill="none"
            height="1em"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
            />
          </svg>
        </a>
        <a
          aria-label="Download Sean Coughlin's resume (PDF file)"
          class="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-hidden focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          download=""
          href="/Resume.pdf"
        >
          Download Resume
          <svg
            aria-hidden="true"
            class="opacity-60 group-hover:translate-y-1 transition"
            fill="currentColor"
            height="1em"
            stroke="currentColor"
            stroke-width="0"
            viewBox="0 0 20 20"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              clip-rule="evenodd"
              d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
              fill-rule="evenodd"
            />
          </svg>
        </a>
      </div>
    </section>
    <div
      aria-hidden="true"
      class="bg-gray-200 my-24 h-16 w-1 rounded-full hidden sm:block dark:bg-opacity-20 animate-fade-in-delay-125"
      role="presentation"
    />
    <section
      aria-labelledby="about-heading"
      class="mb-24 max-w-[45rem] text-center leading-8 sm:mb-40 scroll-mt-28 animate-fade-in-up-delay-175"
      id="about"
    >
      <h2
        class="text-3xl font-medium capitalize mb-8 text-center"
        id="about-heading"
      >
        About me
      </h2>
      <div
        aria-label="Personal background and experience"
        role="region"
      >
        <p
          class="mb-3"
        >
          I have my undergraduate and graduate degrees in 
          <span
            class="font-medium"
          >
            computer science
          </span>
          . I am currently a 
          <span
            class="font-medium"
          >
            full-stack web developer
          </span>
           with Capital One (formerly Discover). 
          <span
            class="italic"
          >
            My favorite part of programming
          </span>
           is seeing creations come to life. I 
          <span
            class="underline"
          >
            love
          </span>
           the feeling of finally shipping code.
        </p>
        <p
          class="mb-3"
        >
          My core stack is 
          <span
            class="font-medium"
          >
            React, Next.js, Java, and Spring Boot
          </span>
          . I am also familiar with TypeScript and cloud development. I am always looking to learn new technologies. Currently, I am studying for 
          <span
            class="font-medium"
          >
            cloud certifications
          </span>
          .
        </p>
        <p>
          When I'm not coding, I enjoy 
          <span
            class="font-medium"
          >
            working out, hiking, exploring National Parks, and reading
          </span>
          .
        </p>
      </div>
    </section>
    <div
      aria-label="Loading skills section"
      class="mb-24 max-w-[53rem] scroll-mt-28 text-center sm:mb-40"
    >
      <div
        class="animate-pulse"
      >
        <div
          class="h-8 bg-gray-200 rounded mb-8 mx-auto w-48 dark:bg-gray-700"
        />
        <div
          class="flex flex-wrap justify-center gap-2"
        >
          <div
            class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
          />
          <div
            class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
          />
          <div
            class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
          />
          <div
            class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
          />
          <div
            class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
          />
          <div
            class="h-12 bg-gray-200 rounded-xl w-24 dark:bg-gray-700"
          />
        </div>
      </div>
    </div>
    <div
      aria-label="Loading experience timeline"
      class="mb-24 max-w-[45rem] text-center leading-8 sm:mb-40 scroll-mt-28"
    >
      <div
        class="animate-pulse"
      >
        <div
          class="h-8 bg-gray-200 rounded mb-8 mx-auto w-48 dark:bg-gray-700"
        />
        <div
          class="space-y-4"
        >
          <div
            class="h-20 bg-gray-200 rounded dark:bg-gray-700"
          />
          <div
            class="h-20 bg-gray-200 rounded dark:bg-gray-700"
          />
          <div
            class="h-20 bg-gray-200 rounded dark:bg-gray-700"
          />
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>