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

const Page: NextPage = () => {
  return (
    <div className="max-w-screen-lg mx-auto mt-big p-small 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}
            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> linkedin.com/in/yaemiku
              </p>
              <p>
                <b>Website:</b> www.yaemiku.dev
              </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</h2>
            <div className="flex gap-8">
              <ul className='font-semibold'>
                <li className='mt-0 mb-0'>Docker</li>
                <li className='mt-0 mb-0'>Git</li>
                <li className='mt-0 mb-0'>Django</li>
              </ul>
              <ul className='font-semibold'>
                <li className='mt-0 mb-0'>TailwindCSS</li>
                <li className='mt-0 mb-0'>NextJS</li>
                <li className='mt-0 mb-0'>GNU/Linux</li>
              </ul>
            </div>
          </div>
          <div>
            <h2 className='mb-0'>Interests</h2>
            I like to spend time creatively - knitting, crocheting, detailed makeup, mathematical papers/books or playing with my linux. As for the last one, I&apos;ve been a poweruser since 2020. <i>I use gentoo on my server by the way :{')'}</i>
          </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, 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>: https://ikubi.pl
            </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>: https://puchar.lo5.bielsko.pl
            </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>: https://eparafia.eu
            </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>: https://podlzbs.pl
            </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: https://techtir.pl/relacja-i-podsumowanie-kongresu-sdcm/)
            </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>: https://kod-pamieci.pl
            </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;
