import { Metadata, NextPage } from 'next';
import Image from 'next/image';

export const metadata: Metadata = {
  title: 'Curriculum Vitae',
  description: '',
}

const Page: NextPage = () => {
  return (
    <div className="max-w-screen-lg mx-auto mt-6 p-2 flex flex-col gap-4">
      <main className="prose w-full lg:max-w-screen-lg mx-auto prose-h1:text-center prose-h1:mb-2 prose-h2:mt-0 mb-10 flex flex-col">
        <div className="flex">
          <div>
            <h1 className="mt-2">Nikola Kubiczek</h1>
            <h2>Full-stack developer</h2>
          </div>
          <Image
            src={'/pfp_formal_comp.jpg'}
            width={200}
            height={200}
            alt="My Picture"
            className="w-40 mt-0 mb-0 mr-0 ml-auto rounded-3xl shadow-2xl"
            priority
          />
        </div>
        <div className="grid grid-cols-2 prose-p:mt-0 prose-p:mb-0 gap-4">
          <div>
            <h2 className="mb-0">Contact</h2>
            <div className="border-l-4 pl-2">
              <p>
                <b>Email:</b> me@yaemiku.dev
              </p>
              <p>
                <b>Phone numer:</b> +48 797407620
              </p>
              <p>
                <b>LinkedIn:</b>{' '}
                <a href="https://linkedin.com/in/yaemiku">
                  linkedin.com/in/yaemiku
                </a>
              </p>
              <p>
                <b>Website:</b>{' '}
                <a href="http://www.yaemiku.dev">www.yaemiku.dev</a>
              </p>
            </div>
          </div>
          <div>
            <h2 className="mb-0">Education</h2>
            <p className="border-l-4 pl-2">
              <strong>Bachelor of Mathematics</strong>
              <br />
              University of Warsaw, Faculty of Mathematics, Informatics and
              Mechanics
              <br />
              Since 10.2023, currently studying
            </p>
          </div>
          <div>
            <h2 className="mb-0">Skills / Technologies</h2>
            <div className="flex border-l-4 px-2">
              <ul className="font-semibold list-outside list-none">
                <li>Analytical and creative thinking</li>
                <li>Docker</li>
                <li>Git</li>
                <li>Proficiency in GNU/Linux</li>
                <li>Django</li>
                <li>TailwindCSS</li>
                <li>NextJS</li>
              </ul>
            </div>
          </div>
          <div>
            <h2 className="mb-0">Interests</h2>
            <p className='border-l-4 pl-2 text-justify'>
              Knitting, crocheting, detailed makeup, listening to music, walking,
              playing with linux and many more. As for the last one, I&apos;ve been a poweruser
              since 2020 and am self-hosting a few services - mainly media related ones.
            </p>
          </div>
        </div>
        <hr />
        <h1>Summary</h1>
        <p className="text-justify">
          I am a student on my second year of studying mathematics. I have been
          interested in IT since elementary school, when my father showed me how
          to create a simple website. Throughout the years I have gained
          practical experience regarding full-stack development with projects
          listed below. Nearing the end of high school I have made a decision to
          pursue mathematics, which has been my passion for a long time,
          realizing it will be more beneficial to my career taking into
          consideration my experience in IT. While not having a strictly
          computer science based education, I am a quick learner, I can
          fundamentally grasp complex ideas rather quickly, adapt to new
          environments, analyse edge cases and implement previously known ideas
          under new circumstances.
        </p>
        <hr className="print:break-before-page" />
        <h1>Experience</h1>
        <p>
          Throughout the years I have completed a few projects, some of them listed below:
        </p>
        <div className="flex flex-col gap-2">
          <div className="border-l-4 pl-2">
            <p className="text-xl mb-0 mt-0">
              <b>ikubi_pracownia</b>:{' '}
              <a href="https://ikubi.pl">https://ikubi.pl</a>
            </p>
            My first project. A portfolio website for my mother
            <br />
            <i>Technologies used: Docker, Django, 11ty, BulmaCSS</i>
          </div>
          <div className="border-l-4 pl-2">
            <p className="text-xl mb-0 mt-0">
              <b>Puchar LO V w Bielsku-Białej</b>:{' '}
              <a href="https://puchar.lo5.bielsko.pl">
                https://puchar.lo5.bielsko.pl
              </a>
            </p>
            A website for a mathematical contest organized by my high school
            <br />
            <i>Technologies used: Django, BulmaCSS</i>
          </div>
          <div className="border-l-4 pl-2">
            <p className="text-xl mb-0 mt-0">
              <b>eParafia</b>:{' '}
              <a href="https://eparafia.eu">https://eparafia.eu</a>
            </p>
            A website which main functionality is to allow local churches to
            have opt-in pastoral visits by submitting a form online
            <br />
            <i>Technologies used: NextJS, TailwindCSS, PocketBase</i>
          </div>
          <div className="border-l-4 pl-2">
            <p className="text-xl mb-0 mt-0">
              <b>Podlaski Związek Brydża Sportowego</b>:{' '}
              <a href="https://podlzbs.pl">https://podlzbs.pl</a>
            </p>
            A website for Podlaskie Voivodeship&apos;s bridge association
            <br />
            <i>Technologies used: Docker, Django, TailwindCSS</i>
          </div>
          <div className="border-l-4 pl-2">
            <p className="text-xl mb-0 mt-0">
              <b>TechTIR App</b> (only an article in polish is available:{' '}
              <a href="https://techtir.pl/relacja-i-podsumowanie-kongresu-sdcm/">
                https://techtir.pl/relacja-i-podsumowanie-kongresu-sdcm/
              </a>
              )
            </p>
            A website which was crucial for TechTIR&apos;s presentation during
            an automotive congress. It operated as a quiz for the participants
            to revise their knowledge after the talk (think kahoot.it)
            <br />
            <i>Technologies used: Docker, Django, TailwindCSS</i>
          </div>
          {/* <div className="border-l-4 pl-2">
            <p className="text-xl mb-0 mt-0">
              <b>Kod Pamięci</b>:{' '}
              <a href="https://kod-pamieci.pl">https://kod-pamieci.pl</a>
            </p>
            A website I am currently working on, it allows users to generate
            unique QR codes designed to be put on gravestones in order to
            preserve memories of their loved ones
            <br />
            <i>Technologies used: Docker, Django, TailwindCSS</i>
          </div> */}
        </div>
      </main>
    </div>
  );
};

export default Page;
