import { NextPage } from 'next';
import Image from 'next/image';
import pfp from 'public/pfp_fb_cropped.jpg';

const Page: NextPage = () => {
  return (
    <div className="max-w-screen-md mx-auto mt-big p-small">
      <header className="flex flex-col md:flex-row items-center">
        <div className="w-72">
          <Image
            src={pfp}
            alt="My Picture"
            className="rounded-3xl shadow-2xl pointer-events-none select-none"
            priority
          />
        </div>
        <div className="flex flex-col items-stretch w-full my-4 gap-2 mt-6 px-6">
          <div className="flex flex-col md:flex-row gap-1 items-center md:items-start">
            <span className="text-4xl text-center">Nikola Kubiczek</span>
            <span className='text-4xl'>🏳️‍⚧️</span>
            <span className="text-lg text-zinc-500 md:ml-auto align-text-bottom">
              (she/her)
            </span>
          </div>
          <ul className="font-jetbrains text-red-200 text-center md:text-left">
            <li>
              <span className="select-all">
                me<span className="mx-xs">@</span>yaemiku.dev
              </span>{' '}
              <a href="public.asc" target="_blank">
                pgp key
              </a>
            </li>
            <li>
              <span className="select-all">
                nikola.kubiczek<span className="mx-xs">@</span>proton.me
              </span>
            </li>
          </ul>
        </div>
      </header>
      <main className="flex flex-col items-stretch justify-around gap-6 px-4 my-4">
        <div className="font-jetbrains">
          <h1 className="text-3xl text-red-300">About me</h1>
          <div className="text-xl pl-2">
            Dyed hair and pronouns, what more can I add?? I love goth music,
            really into overall fashion and makeup as well. I like to knit and
            crochet. I don&apos;t drink alcohol or take drugs, but I smoke quite a
            bit. Love everything coffee, tea (not black) and matcha - with the
            last being my favourite. Like walking, especially at night.
            Definitely a cat person. I think self-expression and emotional
            maturity are really important.
          </div>
          <div className="text-xl pl-2">
            I&apos;m studying mathematics at the University of Warsaw. I have been
            considering IT, however mathematics is the love of my life and an
            absolute passion. I graduated a STEM highschool in Bielsko-Biała. If
            I&apos;m not sleeping, studying or dancing there&apos;s a chance I&apos;m working on
            a project. I mainly create full-stack websites on the smaller side.
            Some examples of what I&apos;ve done:
            <ul className="flex flex-wrap gap-x-3 px-3 py-2 text-red-200">
              <li>
                <a target={'_blank'} href="https://kod-pamieci.pl">
                  kod pamięci
                </a>
              </li>
              <li>
                <a target={'_blank'} href="https://techtir.pl/relacja-i-podsumowanie-kongresu-sdcm/">
                  techtir app
                </a>
              </li>
              <li>
                <a target={'_blank'} href="https://ikubi.pl">
                  ikubi_pracownia
                </a>
              </li>
              <li>
                <a target={'_blank'} href="https://eparafia.eu">
                  eparafia
                </a>
              </li>
              <li>
                <a target={'_blank'} href="https://puchar.lo5.bielsko.pl">
                  puchar V LO
                </a>
              </li>
              <li>
                <a target={'_blank'} href="https://podlzbs.pl">
                  podlaski zbs
                </a>
              </li>
            </ul>
            As for technologies I feel really comfortable working with:
            <ul className="flex flex-wrap gap-x-3 px-3 py-2 text-red-200">
              <li>linux (power user since at least 4 years)</li>
              <li>docker</li>
              <li>python</li>
              <li>django</li>
              <li>nodejs</li>
              <li>nextjs</li>
              <li>11ty</li>
              <li>tailwindcss</li>
            </ul>
          </div>
        </div>
        <div className="font-jetbrains">
          <h1 className="text-3xl text-red-300">Contact</h1>
          <div className="text-xl pl-2">
            Feel free to message me. Here are a few links, that might prove
            useful sometimes
            <ul className="flex flex-row gap-x-3 px-3 py-2 text-red-200">
              <li>
                <a href="https://www.linkedin.com/in/yaemiku/" target={'_blank'}>
                  linkedin
                </a>
              </li>
              <li>
                <a href="https://git.yaemiku.dev/yaemiku" target={'_blank'}>
                  git
                </a>
              </li>
              <li>
                <a
                  href="https://www.instagram.com/kicia_kocia_core/"
                  target={'_blank'}
                >
                  instagram
                </a>
              </li>
              <li>
                <a
                  href="https://stats.foldingathome.org/donor/id/711660268"
                  target={'_blank'}
                >
                  folding@home
                </a>
              </li>
            </ul>
            And if you&apos;d want to send me crypto
            <p className="px-3 py-2 text-red-200 break-words select-all">
              cosmos1gy6tg8jaf4qwmpug8jp8kqnyy9en3lmjxq0twf
            </p>
          </div>
        </div>
      </main>
      <footer className="text-center my-small">
        <em>
          Nikola Kubiczek &copy; <span id="year">2024</span>
        </em>
        <br />

        <em>
          Made with{' '}
          <a href="https://nextjs.org" target="_blank">
            NextJS
          </a>
          , and{' '}
          <a href="https://tailwindcss.com" target="_blank">
            TailwindCSS
          </a>{' '}
        </em>
        <figure className="max-w-screen-md select-none my-big">
          <blockquote className="text-xs text-justify text-zinc-400">
            Oh, wretched memory that compels us to remember the paths we took to
            arrive at the present state of affairs! Further: as I lay awake but
            still half dreaming, I felt that my body was not homogeneous, that
            some parts were still those of a boy, and that my head was laughing
            at my leg and ridiculing it, that my leg was laughing at my head,
            that my finger was poking fun at my heart, my heart at my brain,
            that my nose was thumbing itself at my eye, my eye chuckling and
            bellowing at my nose — and all my parts were wildly raping each
            other in an all-encompassing and piercing state of pan-mockery. Nor
            did my fear lessen one iota when I reached full consciousness and
            began reflecting on my life. On the contrary, it intensified even as
            it was interrupted (or accentuated) by a giggle my mouth could not
            hold back. I was halfway down the path of my life when I found
            myself in a dark forest.
          </blockquote>
          <figcaption className="text-xs text-right mt-small text-zinc-700">
            ——— Witold Gombrowicz, Ferdydurke
          </figcaption>
        </figure>
      </footer>
    </div>
  );
}

export default Page;
