1.0

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

.gitlab-ci.yml

@@ -0,0 +1,38 @@
+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:$CI_COMMIT_TAG
+    - buildah images
+    - buildah push --all $IMAGE
+  after_script:
+    - buildah logout "$REGISTRY"
+  rules:
+   - if: $CI_COMMIT_TAG
+
+deploy:
+  stage: deploy
+  when: always
+  extends: [.kube-context]
+  image:
+    name: bitnami/kubectl:latest
+    entrypoint: [""]
+  script:
+    - ls
+    - cat $CI_PROJECT_DIR/deployment.yaml | envsubst | kubectl apply -f -
+    - kubectl get pods

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

Dockerfile

@@ -0,0 +1,65 @@
+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"]

deployment.yaml

@@ -0,0 +1,65 @@
+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/$REGISTRY_USERNAME/$CI_PROJECT_NAME"
+          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: traefik.containo.us/v1alpha1
+kind: IngressRoute
+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

next.config.js

@@ -3,6 +3,7 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
+  output: 'standalone'
 }
 
 module.exports = nextConfig

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hamburger",
-  "version": "0.1.0",
+  "version": "1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,15 +10,19 @@
   },
   "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",
     "@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": {

src/app/globals.css

@@ -1,9 +1,15 @@
-@import 'node_modules/@fontsource/jetbrains-mono/index.css';
+@import "node_modules/@fontsource/jetbrains-mono/index.css";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-a {
+@layer base {
-  @apply underline;
+  a {
+    @apply underline;
+  }
+
+  a:hover {
+    @apply saturate-50;
+  }
 }

src/app/layout.tsx

@@ -16,7 +16,7 @@ export default function RootLayout({
 }) {
   return (
     <html className="dark" lang="en" dir="ltr">
-      <body className="bg-zinc-900 text-zinc-100">{children}</body>
+      <body className="bg-zinc-900 text-zinc-100 bg-gothic-pattern">{children}</body>
     </html>
   );
 }

src/app/page.tsx

@@ -1,27 +1,32 @@
 '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(),
+    date.getMonth() + 1,
     date.getFullYear(),
   ];
 
-  const [C, M, Y, K] = [day / 31, month / 12, year / 10000, (year % 100) / 100];
+  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) + G.toString(16) + B.toString(16);
+  const RGB = R.toString(16).padStart(2, '0') + G.toString(16).padStart(2, '0') + B.toString(16).padStart(2, '0');
 
   const items = [
     {
@@ -55,26 +60,21 @@ export default function Home() {
   ];
 
   return (
-    <div className="p-4 mx-auto mt-4 max-w-screen-md prose prose-zinc prose-invert">
+    <div className="max-w-screen-md mx-auto prose mt-big p-small prose-zinc prose-invert">
-      <header className="flex flex-col justify-around items-center px-4">
+      <header className="flex flex-col items-center justify-around px-base">
         <div>
           <motion.div
             animate={{
               left: 0,
               right: 0,
             }}
-            transition={
+            className="absolute z-10 flex flex-col h-16 shadow-2xl max-w-vw my-28"
-              {
-                // 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="z-0 grow bg-trans-blue"></div>
-            <div className="grow bg-[#F7A8B8] z-0"></div>
+            <div className="z-0 grow bg-trans-pink"></div>
             <div className="z-0 bg-white grow"></div>
-            <div className="grow bg-[#F7A8B8] z-0"></div>
+            <div className="z-0 grow bg-trans-pink"></div>
-            <div className="grow bg-[#55CDFC] z-0"></div>
+            <div className="z-0 grow bg-trans-blue"></div>
           </motion.div>
           <div className="relative z-20 mx-auto w-72">
             <Image
@@ -85,8 +85,8 @@ export default function Home() {
             />
           </div>
         </div>
-        <div className="flex flex-col gap-y-4 items-center my-4 w-full">
+        <div className="flex flex-col items-center w-full my-base gap-small mt-big">
-          <h1 className="flex gap-x-2 mb-0 text-4xl select-none">
+          <h1 className="flex text-3xl select-none mb-none gap-small">
             <span className="my-auto">
               <a
                 href="https://www.youtube.com/watch?v=WzZPPXfYSvE"
@@ -97,8 +97,8 @@ export default function Home() {
               </a>
             </span>
             <div className="flex flex-col text-center">
-              <span>Nikola Kubiczek</span>
+              <span className=''>Nikola Kubiczek</span>
-              <span className="text-sm font-semibold text-zinc-500">
+              <span className="text-xs font-semibold text-zinc-500">
                 (she/her)
               </span>
             </div>
@@ -113,45 +113,34 @@ export default function Home() {
             </span>
           </h1>
           <b className="font-jetbrains">
-            <p className="flex flex-col items-center my-0 font-light text-lime-50">
+            <p className="flex flex-col items-center font-light my-none text-lime-50">
-              <span>me@yaemiku.dev</span>
+              <span>me<span className='mx-xs'>@</span>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="text-xs mt-small">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">
+      <main className="flex flex-col items-center justify-around px-4">
-        <figure className="flex flex-col gap-y-6 my-6 max-w-screen-sm">
+        <figure className="flex flex-col max-w-screen-sm my-big gap-big">
-          <blockquote className="text-xl text-justify bg-clip-text text-transparent bg-gradient-to-br from-[#55CDFC] via-[#F7A8B8] to-[#FFFFFF]">
+          <blockquote className="text-2xl text-center text-transparent bg-clip-text bg-gradient-to-br from-trans-blue via-trans-pink to-white">
-            Your ol&apos; reliable girl here — coming right up to build your new
+            Why be serious when you can just be silly ???
-            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="grid text-sm gap-base 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]">
+            <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>
-              wip 💀
+              <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={`${
+                className={`${git ? 'flex' : ''
-                  git ? 'flex' : ''
+                  } transition transform-gpu ease-in-out p-small rounded-md ${!!full ? 'col-span-full' : ''
-                } transition transform-gpu ease-in-out p-2 rounded-md ${
+                  } border border-zinc-700 bg-zinc-800 ${class_}`}
-                  !!full ? 'col-span-full' : ''
-                } border border-zinc-700 bg-zinc-800 ${class_}`}
                 key={i}
               >
                 {git ? (
@@ -183,9 +172,28 @@ export default function Home() {
             ))}
             <div
               style={{ backgroundColor: `#${RGB}` }}
-              className="flex flex-col items-center col-span-full p-2 rounded-md border border-zinc-700 hover:border-[#7f7f84]"
+              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"
             >
-              <h1 className="font-semibold">Color of the day!</h1>
+              <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>{' '}
@@ -203,18 +211,18 @@ export default function Home() {
           <Image
             src={blahaj}
             alt="blahaj"
-            className="mx-auto mt-6 rounded-md"
+            className="mx-auto rounded-md mt-big"
           />
-          <figcaption className="mt-[-1.25rem] text-xs text-center text-zinc-400">
+          <figcaption className="mt-[-1.25em] text-xs text-center text-zinc-400">
             u/markyminkk on r/BLAHAJ
           </figcaption>
         </figure>
       </main>
-      <footer className="my-2 text-center">
+      <footer className="text-center my-small">
         <em>
-          <a href="https://git.yaemiku.dev/yaemiku" target="_blank">
+          <a href="https://gitlab.com/yaemiku" target="_blank">
             yaemiku
-          </a>
+          </a>{' '}
           &copy; <span id="year">2023</span>
         </em>
         <br />
@@ -235,12 +243,12 @@ export default function Home() {
         </em>
         <br />
         <em>
-          Link to
+          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">
+        <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
@@ -257,7 +265,7 @@ export default function Home() {
             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">
+          <figcaption className="text-xs text-right mt-small text-zinc-700">
             ——— Witold Gombrowicz, Ferdydurke
           </figcaption>
         </figure>

tailwind.config.js

@@ -1,11 +1,37 @@
 module.exports = {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: 'class',
+  darkMode: "class",
   theme: {
     extend: {
-      fontFamily: {
+      backgroundImage: {
-        jetbrains: ['JetBrains Mono', 'sans-serif'],
+        "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',
+      },
+      
     },
   },
   plugins: [],