hamburger/app/page.tsx

'use client';

import Image from 'next/image';
import useSWR, { Fetcher } from 'swr';

type LastFM = {
  artist: { '#text': string };
  image: [{ size: string; '#text': string }];
  mbid: string;
  album: {
    mbid: string;
    '#text': string;
  };
  name: string;
  '@attr': { nowplaying: string };
  url: string;
};

const fetcher: Fetcher<LastFM, string> = (...args) =>
  fetch(...args).then((res) => res.json());

export default function Home() {
  const { data, isLoading } = useSWR('/api/lastfm', fetcher);

  return (
    <div className="prose prose-invert mx-auto pt-6 pb-4 px-6 shadow-sm">
      <header className="text-center backdrop-blur-sm p-2 border-2 border-gray-700 rounded-md">
        <Image
          src={'/pfp_pic.webp'}
          width={200}
          height={200}
          alt="My Picture"
          priority
          className="mx-auto rounded-full m-2 shadow-md"
        />
        <h1>Nikola Kubiczek</h1>
        {isLoading ? (
          <></>
        ) : (
          <samp className="lead flex flex-col text-center">
            <em className="break flex mx-auto items-center gap-2">
              <span>🎶</span>
              <span>{data?.['@attr']
                ? "Currently listening to"
                : 'Last song'}</span>
              <span>🎶</span>
            </em>
            <b className="">
              <a href={data?.url} target="_blank">
                {data?.name}
              </a>
            </b>
            <i className=" text-sm">
              {data?.album['#text']}, {data?.artist['#text']}
            </i>
          </samp>
        )}
      </header>
      <main>
        <div>
          <h2>About me</h2>
          <p>
            Currently studying pure mathematics at the University of Warsaw and
            doing commissions on the side. I had been considering studying
            computer science but decided not to - mathematics is the love of my
            life, an absolute passion.
          </p>
          <p>
            In my free time I love listening to music - be it on headphones,
            speakers or by going to a local concert. I'm very into various
            brews, almost anything apart from alcohol could be my cup of tea.
            Green and white teas, matcha, yerba mate, etc. You name it. I quite
            like to knit/crochet, but find myself always not having enough time.
            I also tinker with my servers a lot - I have a few services set up
            and I love to play with configuring them or adding new ones.
          </p>
          <p>
            I think self-expression and emotional maturity are really important.
            I live to love. To experience life with the ones I love.
          </p>
        </div>
        <div>
          <h2>Contact</h2>
          <ul>
            <li>
              <a href="public.asc" target="_blank">
                me<span>@</span>yaemiku.dev
              </a>
            </li>
            <li>
              <span>
                nikola.kubiczek<span>@</span>proton.me
              </span>
            </li>
          </ul>
          <div>
            Feel free to message me. Here are a few links, that might prove
            useful sometimes
            <ul>
              <li>
                <a
                  href="https://www.last.fm/user/yae_miku"
                  target="_blank"
                >
                  last.fm
                </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> */}
              {/* <li>
                <a href="/cv/" target={'_blank'}>
                  cv
                </a>
              </li> */}
              <li>
                <a href="https://git.yaemiku.dev/yaemiku" target={'_blank'}>
                  git
                </a>
              </li>
            </ul>
            And if you&apos;d want to send me any crypto
            <ul className="block list-outside">
              <li className="break-all">
                cosmos1gy6tg8jaf4qwmpug8jp8kqnyy9en3lmjxq0twf
              </li>
              <li className="break-all">
                46MiubQK8psbDWys429WvTQ71DyDiLkKmSLznoDYYFQbA6MfTvuVRJzSAbCCA17n8RGjCojx5GcpKH3q1DbpKJaQPCVcabi
              </li>
            </ul>
          </div>
        </div>
      </main>
      <footer>
        <hr />

        <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>
          <blockquote className="text-justify">
            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>——— Witold Gombrowicz, Ferdydurke</figcaption>
        </figure>
      </footer>
    </div>
  );
}