24 changed files with 1655 additions and 2756 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,7 +0,0 @@
-Dockerfile
-.dockerignore
-node_modules
-npm-debug.log
-README.md
-.next
-.git
--- a/.gitea/workflows/build.yaml
+++ b/.gitea/workflows/build.yaml
@ -1,46 +0,0 @@
-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 }}
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,36 +0,0 @@
-stages:
-  - build
-  - deploy
-
-.kube-context:
-  before_script:
-    - if [ -n "$KUBE_CONTEXT" ]; then kubectl config use-context "$KUBE_CONTEXT"; fi
-
-build:
-  stage: build
-  image: quay.io/buildah/stable
-  variables:
-    STORAGE_DRIVER: vfs
-    BUILDAH_FORMAT: docker
-    IMAGE: "$REGISTRY/$REGISTRY_USERNAME/$CI_PROJECT_NAME"
-  before_script:
-    - buildah login -u "$REGISTRY_USERNAME" -p "$REGISTRY_PASSWORD" "$REGISTRY"
-  script:
-    - buildah images
-    - buildah build -t $IMAGE:latest -t $IMAGE:$(sh VERSION)
-    - buildah images
-    - buildah push --all $IMAGE
-  after_script:
-    - buildah logout "$REGISTRY"
-
-deploy:
-  stage: deploy
-  when: always
-  extends: [.kube-context]
-  image:
-    name: bitnami/kubectl:latest
-    entrypoint: [""]
-  script:
-    - ls
-    - kubectl apply -f $CI_PROJECT_DIR/deployment.yaml
-    - kubectl get pods
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,4 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
-}
--- a/65
+++ b/65
@ -1,65 +0,0 @@
-FROM node:alpine AS base
-
-# Install dependencies only when needed
-FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-
-# Install dependencies based on the preferred package manager
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
-RUN \
-  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
-
-
-# Rebuild the source code only when needed
-FROM base AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-# Next.js collects completely anonymous telemetry data about general usage.
-# Learn more here: https://nextjs.org/telemetry
-# Uncomment the following line in case you want to disable telemetry during the build.
-# ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN yarn build
-
-# If using npm comment out above and use below instead
-# RUN npm run build
-
-# Production image, copy all the files and run next
-FROM base AS runner
-WORKDIR /app
-
-ENV NODE_ENV production
-# Uncomment the following line in case you want to disable telemetry during runtime.
-# ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder /app/public ./public
-
-# Set the correct permission for prerender cache
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-USER nextjs
-
-EXPOSE 3000
-
-ENV PORT 3000
-# set hostname to localhost
-ENV HOSTNAME "0.0.0.0"
-
-CMD ["node", "server.js"]
--- a/10
+++ b/10
@ -1,10 +0,0 @@
-#!/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
--- a/deployment.yaml
+++ b/deployment.yaml
@ -1,71 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: hamburger
-spec:
-  selector:
-    matchLabels:
-      app: hamburger
-  replicas: 1
-  template:
-    metadata:
-      labels:
-        app: hamburger
-    spec:
-      containers:
-        - name: hamburger
-          image: registry.yaemiku.dev/yaemiku/hamburger
-          ports:
-            - name: app-port
-              containerPort: 3000
-          resources:
-            requests:
-              memory: "64Mi"
-              cpu: "250m"
-            limits:
-              memory: "128Mi"
-              cpu: "500m"
-      imagePullSecrets:
-        - name: regcred
-
---
-apiVersion: v1
-kind: Service
-metadata:
-  name: hamburger
-spec:
-  ports:
-    - name: app-svc-port
-      port: 80
-      targetPort: app-port
-  selector:
-    app: hamburger
-
---
-apiVersion: networking.k8s.io/v1
-kind: Ingress
-metadata:
-  name: hamburger
-spec:
-  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
--- a/next.config.js
+++ b/next.config.js
@ -3,7 +3,6 @@ const nextConfig = {
  experimental: {
    appDir: true,
  },
-  output: 'standalone'
 }

 module.exports = nextConfig
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "hamburger",
-  "version": "1.0",
+  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
@ -10,22 +10,18 @@
  },
  "dependencies": {
    "@fontsource/jetbrains-mono": "^4.5.12",
-    "@types/crypto-js": "^4.1.1",
    "@types/node": "18.15.3",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
-    "crypto-js": "^4.1.1",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "framer-motion": "^10.3.2",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
-    "sharp": "^0.32.5",
    "typescript": "4.9.5"
  },
  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.9",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/pattern.png
+++ b/public/pattern.png
--- a/public/pfp.jpeg
+++ b/public/pfp.jpeg
--- a/public/pfp_fb.jpg
+++ b/public/pfp_fb.jpg
--- a/public/pfp_fb_cropped.jpg
+++ b/public/pfp_fb_cropped.jpg
--- a/public/pfp_formal.jpg
+++ b/public/pfp_formal.jpg
--- a/public/pfp_formal_comp.jpg
+++ b/public/pfp_formal_comp.jpg
--- a/public/picrew.png
+++ b/public/picrew.png
--- a/src/app/(cv)/cv/page.tsx
+++ b/src/app/(cv)/cv/page.tsx
@ -1,146 +0,0 @@
-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;
--- a/src/app/(cv)/layout.tsx
+++ b/src/app/(cv)/layout.tsx
@ -1,21 +0,0 @@
-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>
-  );
-}
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@ -1,188 +0,0 @@
-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;
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -1,15 +1,9 @@
-@import "node_modules/@fontsource/jetbrains-mono/index.css";
+@import 'node_modules/@fontsource/jetbrains-mono/index.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

-@layer base {
-  a {
+a {
  @apply underline;
-  }
-
-  a:hover {
-    @apply saturate-50;
-  }
 }
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@ -1,4 +1,4 @@
-import '../globals.css';
+import './globals.css';

 export const metadata = {
  title: 'storbies my beloved',
@ -16,8 +16,7 @@ export default function RootLayout({
 }) {
  return (
    <html className="dark" lang="en" dir="ltr">
-      <body className="bg-zinc-900 text-zinc-100 bg-gothic-pattern">{children}</body>
+      <body className="bg-zinc-900 text-zinc-100">{children}</body>
    </html>
  );
 }
-
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -0,0 +1,267 @@
+'use client';
+
+import Image from 'next/image';
+import { motion } from 'framer-motion';
+
+import blahaj from '../../public/blahaj.webp';
+import gitlab from '../../public/gitlab.svg';
+import picrew from '../../public/picrew.png';
+
+export default function Home() {
+  const date = new Date();
+  const [day, month, year] = [
+    date.getDate(),
+    date.getMonth(),
+    date.getFullYear(),
+  ];
+
+  const [C, M, Y, K] = [day / 31, month / 12, year / 10000, (year % 100) / 100];
+
+  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) + G.toString(16) + B.toString(16);
+
+  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="p-4 mx-auto mt-4 max-w-screen-md prose prose-zinc prose-invert">
+      <header className="flex flex-col justify-around items-center px-4">
+        <div>
+          <motion.div
+            animate={{
+              left: 0,
+              right: 0,
+            }}
+            transition={
+              {
+                // ease: 'easeIn',
+              }
+            }
+            className="flex flex-col max-w-[100vw] absolute h-16 my-28 z-10 shadow-2xl"
+          >
+            <div className="grow bg-[#55CDFC] z-0"></div>
+            <div className="grow bg-[#F7A8B8] z-0"></div>
+            <div className="z-0 bg-white grow"></div>
+            <div className="grow bg-[#F7A8B8] z-0"></div>
+            <div className="grow bg-[#55CDFC] z-0"></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 gap-y-4 items-center my-4 w-full">
+          <h1 className="flex gap-x-2 mb-0 text-4xl select-none">
+            <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>Nikola Kubiczek</span>
+              <span className="text-sm 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 my-0 font-light text-lime-50">
+              <span>me@yaemiku.dev</span>
+              <a href="public.asc" target="_blank">
+                pgp key
+              </a>
+              <span className="mt-2 text-xs">click on the emojis !!</span>
+              <span className="my-0 text-xs italic text-center">
+                i use{' '}
+                <a href="https://gitlab.com/yaemiku/dots" target="_blank">
+                  arch
+                </a>{' '}
+                btw
+              </span>
+            </p>
+          </b>
+        </div>
+      </header>
+      <main className="flex flex-col justify-around items-center px-4">
+        <figure className="flex flex-col gap-y-6 my-6 max-w-screen-sm">
+          <blockquote className="text-xl text-justify bg-clip-text text-transparent bg-gradient-to-br from-[#55CDFC] via-[#F7A8B8] to-[#FFFFFF]">
+            Your ol&apos; reliable girl here — coming right up to build your new
+            awesome website, rant about the supremacy of functional programming
+            languages, show you comically large amounts of rat pics and maybe
+            even cuddle together under the supervision of{' '}
+            <b>Chief Emotional Support Officer Blåhaj</b>? Jk, jk... Unless??
+          </blockquote>
+
+          <div className="grid gap-4 text-sm md:grid-cols-2 font-jetbrains">
+            <div className="text-center transition transform-gpu ease-in-out col-span-full p-2 rounded-md border border-zinc-500 bg-gradient-to-r from-[#D60270] via-[#9B4F96] to-[#0038A8]">
+              <h1 className="font-semibold">My blog !!</h1>
+              wip 💀
+            </div>
+            {items.map(({ name, class_, link, git, full, desc }, i) => (
+              <div
+                className={`${
+                  git ? 'flex' : ''
+                } transition transform-gpu ease-in-out p-2 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}` }}
+              className="flex flex-col items-center col-span-full p-2 rounded-md border border-zinc-700 hover:border-[#7f7f84]"
+            >
+              <h1 className="font-semibold">Color of the day!</h1>
+              <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 mt-6 rounded-md"
+          />
+          <figcaption className="mt-[-1.25rem] text-xs text-center text-zinc-400">
+            u/markyminkk on r/BLAHAJ
+          </figcaption>
+        </figure>
+      </main>
+      <footer className="my-2 text-center">
+        <em>
+          <a href="https://git.yaemiku.dev/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="my-6 max-w-screen-md select-none">
+          <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="mt-2 text-xs text-right text-zinc-700">
+            ——— Witold Gombrowicz, Ferdydurke
+          </figcaption>
+        </figure>
+      </footer>
+    </div>
+  );
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,40 +1,12 @@
 module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: "class",
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
  theme: {
    extend: {
-      backgroundImage: {
-        "gothic-pattern":
-          "linear-gradient(to right, rgba(24, 24, 27, 0.8) 0 100%), url('/pattern.png')",
-      },
-      colors: {
-        'trans-blue': '#55cdfc',
-        'trans-pink': '#f7a8b8',
-        'bi-red': '#d60270',
-        'bi-violet': '#9b4f96',
-        'bi-blue': '#0038a8'
-      },
      fontFamily: {
-        jetbrains: ["JetBrains Mono", "sans-serif"],
-      },
-      maxWidth: {
-        'vw': '100vw'
-      },
-      spacing: {
-        none: '0',
-        xs: '0.25em',
-        sm: '0.5em',
-        small: '0.5em',
-        md: '0.75em',
-        lg: '1em',
-        base: '1em',
-        big: '1.5em',
-        xl: '1.25em',
-      },
-      
+        jetbrains: ['JetBrains Mono', 'sans-serif'],
      },
    },
-  plugins: [
-    require('@tailwindcss/typography'),
-  ],
+  },
+  plugins: [],
 };