cv

package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@fontsource/jetbrains-mono": "^4.5.12",
-    "@tailwindcss/typography": "^0.5.9",
     "@types/crypto-js": "^4.1.1",
     "@types/node": "18.15.3",
     "@types/react": "18.0.28",
@@ -26,6 +25,7 @@
     "typescript": "4.9.5"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7"

src/app/(cv)/cv/page.tsx

@@ -0,0 +1,146 @@
+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'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'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'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;

src/app/(cv)/layout.tsx

@@ -0,0 +1,21 @@
+import '../globals.css';
+
+export const metadata = {
+  title: 'Curriculum Vitae',
+  authors: { name: 'Nikola Kubiczek' },
+  description: 'Curriculum Vitae',
+  colorScheme: 'light',
+  viewport: 'width=device-width,initial-scale=1.0',
+};
+
+export default function NoBgLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" dir="ltr" className='h-full'>
+      <body className="bg-zinc-50 text-zinc-900 h-full">{children}</body>
+    </html>
+  );
+}

src/app/(main)/layout.tsx

@@ -1,10 +1,10 @@
-import './globals.css';
+import '../globals.css';
 
 export const metadata = {
   title: 'storbies my beloved',
   authors: { name: 'Nikola Kubiczek' },
   description: 'my things',
-  colorScheme: 'light',
+  colorScheme: 'dark',
   viewport: 'width=device-width,initial-scale=1.0',
   icons: ['icon.png'],
 };
@@ -20,3 +20,4 @@ export default function RootLayout({
     </html>
   );
 }
+

src/app/(main)/page.tsx

@@ -1,9 +1,8 @@
-'use client';
+import { NextPage } from 'next';
-
 import Image from 'next/image';
-import pfp from '../../public/pfp.jpeg';
+import pfp from 'public/pfp_fb_cropped.jpg';
 
-export default function Home() {
+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">
@@ -17,7 +16,8 @@ export default function Home() {
         </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 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>
@@ -55,10 +55,20 @@ export default function Home() {
             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 raving there&apos;s a chance I&apos;m working on
+            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
@@ -100,8 +110,13 @@ export default function Home() {
             useful sometimes
             <ul className="flex flex-row gap-x-3 px-3 py-2 text-red-200">
               <li>
-                <a href="https://gitlab.com/yaemiku" target={'_blank'}>
+                <a href="https://www.linkedin.com/in/yaemiku/" target={'_blank'}>
-                  gitlab
+                  linkedin
+                </a>
+              </li>
+              <li>
+                <a href="https://git.yaemiku.dev/yaemiku" target={'_blank'}>
+                  git
                 </a>
               </li>
               <li>
@@ -112,6 +127,14 @@ export default function Home() {
                   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">
@@ -161,3 +184,5 @@ export default function Home() {
     </div>
   );
 }
+
+export default Page;

tailwind.config.js

@@ -34,5 +34,7 @@ module.exports = {
       
     },
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 };