cv

.gitea/workflows/build.yaml

@@ -0,0 +1,46 @@
+name: Build Full Stack
+run-name: ${{ gitea.actor }} is building 🚀
+on: [push]
+
+jobs:
+  release-image:
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    env:
+      DOCKER_ORG: yaemiku
+      DOCKER_LATEST: latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker BuildX
+        uses: docker/setup-buildx-action@v3        
+
+      - name: Login to Registry
+        uses: docker/login-action@v3
+        with:
+          registry: git.yaemiku.dev
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          
+      - name: Get Meta
+        id: meta
+        run: |
+          echo REPO_NAME=$(echo ${GITHUB_REPOSITORY} | awk -F"/" '{print $2}') >> $GITHUB_OUTPUT
+          echo REPO_VERSION=$(git describe --tags --always | sed 's/^v//') >> $GITHUB_OUTPUT                
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: |
+            linux/amd64                   
+          push: true
+          tags: |
+            git.yaemiku.dev/${{ env.DOCKER_ORG }}/${{ steps.meta.outputs.REPO_NAME }}:${{ steps.meta.outputs.REPO_VERSION }}
+            git.yaemiku.dev/${{ env.DOCKER_ORG }}/${{ steps.meta.outputs.REPO_NAME }}:${{ env.DOCKER_LATEST }}

.gitlab-ci.yml

@@ -17,13 +17,11 @@ build:
     - buildah login -u "$REGISTRY_USERNAME" -p "$REGISTRY_PASSWORD" "$REGISTRY"
   script:
     - buildah images
-    - buildah build -t $IMAGE:latest -t $IMAGE:$CI_COMMIT_TAG
+    - buildah build -t $IMAGE:latest -t $IMAGE:$(sh VERSION)
     - buildah images
     - buildah push --all $IMAGE
   after_script:
     - buildah logout "$REGISTRY"
-  rules:
-   - if: $CI_COMMIT_TAG
 
 deploy:
   stage: deploy
@@ -34,5 +32,5 @@ deploy:
     entrypoint: [""]
   script:
     - ls
-    - cat $CI_PROJECT_DIR/deployment.yaml | envsubst | kubectl apply -f -
+    - kubectl apply -f $CI_PROJECT_DIR/deployment.yaml
     - kubectl get pods

VERSION

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+# Version key/value should be on his own line
+PACKAGE_VERSION=$(cat package.json \
+  | grep version \
+  | head -1 \
+  | awk -F: '{ print $2 }' \
+  | sed 's/[",]//g')
+
+echo $PACKAGE_VERSION

deployment.yaml

@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
         - name: hamburger
-          image: "$REGISTRY/$REGISTRY_USERNAME/$CI_PROJECT_NAME"
+          image: registry.yaemiku.dev/yaemiku/hamburger
           ports:
             - name: app-port
               containerPort: 3000
@@ -42,24 +42,30 @@ spec:
     app: hamburger
 
 ---
-apiVersion: traefik.containo.us/v1alpha1
-kind: IngressRoute
+apiVersion: networking.k8s.io/v1
+kind: Ingress
 metadata:
   name: hamburger
 spec:
-  entryPoints:
-    - websecure
-  routes:
-    - kind: Rule
-      match: Host(`yaemiku.dev`)
-      services:
-        - kind: Service
-          name: hamburger
-          port: app-svc-port
-  tls:
-    secretName: hamburger-tls
-    certResolver: letsencrypt-prod
-    domains:
-      - main: yaemiku.dev
-        sans:
-          - www.yaemiku.dev
+  ingressClassName: traefik
+  rules:
+    - host: yaemiku.dev
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: hamburger
+                port:
+                  number: 80
+    - host: www.yaemiku.dev
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: hamburger
+                port:
+                  number: 80

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&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;

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,4 +1,4 @@
-import './globals.css';
+import '../globals.css';
 
 export const metadata = {
   title: 'storbies my beloved',
@@ -20,3 +20,4 @@ export default function RootLayout({
     </html>
   );
 }
+

src/app/(main)/page.tsx

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

src/app/page.tsx

@@ -1,275 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import Image from 'next/image';
-import { motion } from 'framer-motion';
-import MD5 from 'crypto-js/md5'
-
-import blahaj from '../../public/blahaj.webp';
-import gitlab from '../../public/gitlab.svg';
-import picrew from '../../public/picrew.png';
-
-
-export default function Home() {
-  const [COTD, setCOTD] = useState(false);
-  const date = new Date();
-  const [day, month, year] = [
-    date.getDate(),
-    date.getMonth() + 1,
-    date.getFullYear(),
-  ];
-
-  const hash = MD5(`${day}.${month}.${year}`)
-  const [C, M, Y, K] = hash.words.map(x => (x + 2 ** 31) / (2 ** 32));
-
-  const R = Math.round(255 * (1 - C) * (1 - K));
-  const G = Math.round(255 * (1 - M) * (1 - K));
-  const B = Math.round(255 * (1 - Y) * (1 - K));
-
-  const RGB = R.toString(16).padStart(2, '0') + G.toString(16).padStart(2, '0') + B.toString(16).padStart(2, '0');
-
-  const items = [
-    {
-      name: 'eParafia',
-      class_: 'hover:border-[#466e83] hover:bg-[#365e70]',
-      link: 'https://eparafia.eu',
-    },
-    {
-      name: 'Podlaski ZBS',
-      class_: 'hover:border-[#7c626c] hover:bg-[#6f6f71]',
-      link: 'https://podlaskizbs.pl',
-    },
-    {
-      name: 'Ikubi',
-      class_: 'hover:border-[#7c626c] hover:bg-[#6f6f71]',
-      link: 'https://ikubi.pl',
-    },
-    {
-      name: 'nyaa',
-      class_: 'hover:border-[#466e83] hover:bg-[#365e70]',
-      git: 'https://gitlab.com/yaemiku/nyaa',
-      desc: `it's a script, dummy!`,
-    },
-    {
-      name: 'Puchar LO V',
-      class_: 'hover:border-[#7f7f84] hover:bg-[#6f6f71]',
-      link: 'https://puchar.lo5.bielsko.pl',
-      git: 'https://gitlab.com/yaemiku/puchar',
-      full: true,
-    },
-  ];
-
-  return (
-    <div className="max-w-screen-md mx-auto prose mt-big p-small prose-zinc prose-invert">
-      <header className="flex flex-col items-center justify-around px-base">
-        <div>
-          <motion.div
-            animate={{
-              left: 0,
-              right: 0,
-            }}
-            className="absolute z-10 flex flex-col h-16 shadow-2xl max-w-vw my-28"
-          >
-            <div className="z-0 grow bg-trans-blue"></div>
-            <div className="z-0 grow bg-trans-pink"></div>
-            <div className="z-0 bg-white grow"></div>
-            <div className="z-0 grow bg-trans-pink"></div>
-            <div className="z-0 grow bg-trans-blue"></div>
-          </motion.div>
-          <div className="relative z-20 mx-auto w-72">
-            <Image
-              src={picrew}
-              alt="My Picrew"
-              className="rounded-full shadow-2xl pointer-events-none select-none"
-              priority
-            />
-          </div>
-        </div>
-        <div className="flex flex-col items-center w-full my-base gap-small mt-big">
-          <h1 className="flex text-3xl select-none mb-none gap-small">
-            <span className="my-auto">
-              <a
-                href="https://www.youtube.com/watch?v=WzZPPXfYSvE"
-                className="no-underline"
-                target="_blank"
-              >
-                🐀&nbsp;
-              </a>
-            </span>
-            <div className="flex flex-col text-center">
-              <span className=''>Nikola Kubiczek</span>
-              <span className="text-xs font-semibold text-zinc-500">
-                (she/her)
-              </span>
-            </div>
-            <span className="my-auto">
-              <a
-                href="https://www.youtube.com/watch?v=JsV8EI3c48M"
-                className="no-underline"
-                target="_blank"
-              >
-                &nbsp;🦈
-              </a>
-            </span>
-          </h1>
-          <b className="font-jetbrains">
-            <p className="flex flex-col items-center font-light my-none text-lime-50">
-              <span>me<span className='mx-xs'>@</span>yaemiku.dev</span>
-              <a href="public.asc" target="_blank">
-                pgp key
-              </a>
-              <span className="text-xs mt-small">click on the emojis !!</span>
-            </p>
-          </b>
-        </div>
-      </header>
-      <main className="flex flex-col items-center justify-around px-4">
-        <figure className="flex flex-col max-w-screen-sm my-big gap-big">
-          <blockquote className="text-2xl text-center text-transparent bg-clip-text bg-gradient-to-br from-trans-blue via-trans-pink to-white">
-            Why be serious when you can just be silly ???
-          </blockquote>
-
-          <div className="grid text-sm gap-base md:grid-cols-2 font-jetbrains">
-            <div className="text-center transition ease-in-out border rounded-md transform-gpu col-span-full p-small border-zinc-700 bg-gradient-to-r from-bi-red via-bi-violet to-bi-blue">
-              <h1 className="font-semibold">My blog !!</h1>
-              <a href="https://blog.yaemiku.dev" target="_blank">
-                https://blog.yaemiku.dev
-              </a>
-            </div>
-            {items.map(({ name, class_, link, git, full, desc }, i) => (
-              <div
-                className={`${git ? 'flex' : ''
-                  } transition transform-gpu ease-in-out p-small rounded-md ${!!full ? 'col-span-full' : ''
-                  } border border-zinc-700 bg-zinc-800 ${class_}`}
-                key={i}
-              >
-                {git ? (
-                  <>
-                    <div>
-                      <h1 className="font-semibold">{name}</h1>
-                      {link ? (
-                        <a href={link} target="_blank">
-                          {link}
-                        </a>
-                      ) : (
-                        <span>{desc}</span>
-                      )}
-                    </div>
-
-                    <a href={git} className="my-auto ml-auto" target="_blank">
-                      <Image src={gitlab} alt="gitlab" className="w-8 h-8" />
-                    </a>
-                  </>
-                ) : (
-                  <>
-                    <h1 className="font-semibold">{name}</h1>
-                    <a href={link} target="_blank">
-                      {link}
-                    </a>
-                  </>
-                )}
-              </div>
-            ))}
-            <div
-              style={{ backgroundColor: `#${RGB}` }}
-              onClick={() => setCOTD(!COTD)}
-              title='How does it work?'
-              className="flex flex-col items-center col-span-full p-small rounded-md border border-zinc-700 hover:border-[#7f7f84] cursor-pointer"
-            >
-              <motion.a className="font-semibold">Color of the day!</motion.a>
-              <motion.div
-                animate={COTD ? "open" : "closed"}
-                initial="closed"
-                variants={{
-                  open: { opacity: 1, display: "block", margin: "0.5rem 0" },
-                  closed: { opacity: 0, display: "none" }
-                }}
-              >
-                <div className='flex flex-col items-center gap-small'>
-                  <span>Take the current date:</span>
-                  <span className='font-semibold'>{day}.{month}.{year}</span>
-                  <span>Apply MD5:</span>
-                  <span className='font-semibold'>{hash.toString()}</span>
-                  <span className='max-w-xs text-center'>Finally, separate this hash into 4 uint32 words, divide them by 2^32 and you&apos;re good to go :{')'}</span>
-
-                </div>
-              </motion.div>
-              <span>
-                C: <span className="font-semibold">{Math.round(C * 100)}%</span>{' '}
-                M: <span className="font-semibold">{Math.round(M * 100)}%</span>{' '}
-                Y: <span className="font-semibold">{Math.round(Y * 100)}%</span>{' '}
-                K: <span className="font-semibold">{Math.round(K * 100)}%</span>
-              </span>
-              <span>
-                R: <span className="font-semibold">{R}</span> G:{' '}
-                <span className="font-semibold">{G}</span> B:{' '}
-                <span className="font-semibold">{B}</span>
-              </span>
-            </div>
-          </div>
-
-          <Image
-            src={blahaj}
-            alt="blahaj"
-            className="mx-auto rounded-md mt-big"
-          />
-          <figcaption className="mt-[-1.25em] text-xs text-center text-zinc-400">
-            u/markyminkk on r/BLAHAJ
-          </figcaption>
-        </figure>
-      </main>
-      <footer className="text-center my-small">
-        <em>
-          <a href="https://gitlab.com/yaemiku" target="_blank">
-            yaemiku
-          </a>{' '}
-          &copy; <span id="year">2023</span>
-        </em>
-        <br />
-
-        <em>
-          Made with{' '}
-          <a href="https://nextjs.org" target="_blank">
-            NextJS
-          </a>
-          ,{' '}
-          <a href="https://framer.com" target="_blank">
-            Framer Motion
-          </a>{' '}
-          and{' '}
-          <a href="https://tailwindcss.com" target="_blank">
-            TailwindCSS
-          </a>{' '}
-        </em>
-        <br />
-        <em>
-          Link to{' '}
-          <a href="https://picrew.me/image_maker/599056" target="_blank">
-            picrew
-          </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>
-  );
-}

tailwind.config.js

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