const AboutSummary = () => {
  return (
    <div
      id="who-am-i"
      className="flex flex-col items-center justify-center gap-4 p-4 rounded w-full"
    >
      <h2 className="mt-4 mb-2 text-5xl font-bold tracking-tight text-white">
        Who am I?
      </h2>
      <section className="prose text-white md:prose-lg lg:prose-xl max-w-3xl mx-auto">
        <p>
          Hi, I&apos;m Gabriel Kaszewski. I studied Bioinformatics and work as
          a software engineer. I&apos;ve been programming since I was 11 and
          I still enjoy it just as much.
        </p>

        <p>
          I&apos;m currently working on my first game. If it looks interesting,
          consider wishlisting it!
        </p>

        <div className="w-full max-w-full aspect-[646/190] mx-auto not-prose">
          <iframe
            className="w-full h-full"
            src="https://store.steampowered.com/widget/3575090/"
            title="Steam store widget"
          ></iframe>
        </div>

        <p>
          By day I work at{" "}
          <strong className="text-yellow-400">WPP Media</strong>. I also
          co-founded{" "}
          <a
            href="https://jestzlecenie.pl"
            target="_blank"
            rel="noopener noreferrer"
            className="text-yellow-400 underline"
          >
            jestzlecenie.pl
          </a>
          , a job marketplace. I self-host all my projects on my own
          Proxmox/Docker/Traefik infrastructure.
        </p>
      </section>
    </div>
  );
};

export default AboutSummary;