update

2023-05-30 00:26:50 +00:00 · 2023-05-30 00:26:50 +00:00 · c79269616f
commit c79269616f
parent dfff2f6e78
8 changed files with 463 additions and 420 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
--- a/package.json
+++ b/package.json
@ -10,9 +10,11 @@
  },
  "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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/pattern.png
+++ b/public/pattern.png
--- a/public/picrew.png
+++ b/public/picrew.png
--- a/src/app/layout.tsx
+++ b/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>
  );
 }
--- a/src/app/page.tsx
+++ b/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,19 +60,14 @@ export default function Home() {
  ];

  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 className="max-w-screen-md p-4 mx-auto mt-4 prose prose-zinc prose-invert">
+      <header className="flex flex-col items-center justify-around 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>
@ -85,8 +85,8 @@ export default function Home() {
            />
          </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">
+        <div className="flex flex-col items-center w-full my-4 gap-y-4">
+          <h1 className="flex mb-0 text-4xl select-none gap-x-2">
            <span className="my-auto">
              <a
                href="https://www.youtube.com/watch?v=WzZPPXfYSvE"
@ -114,43 +114,32 @@ export default function Home() {
          </h1>
          <b className="font-jetbrains">
            <p className="flex flex-col items-center my-0 font-light text-lime-50">
-              <span>me@yaemiku.dev</span>
+              <span>me<span className='mx-1'>@</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="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??
+      <main className="flex flex-col items-center justify-around px-4">
+        <figure className="flex flex-col max-w-screen-sm my-6 gap-y-6">
+          <blockquote className="text-2xl text-center bg-clip-text text-transparent bg-gradient-to-br from-[#55CDFC] via-[#F7A8B8] to-[#FFFFFF]">
+            Why be serious when you can just be silly ???
          </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 💀
+              <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-2 rounded-md ${
-                  !!full ? 'col-span-full' : ''
+                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}
              >
@ -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-2 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-2'>
+                  <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'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>{' '}
@ -212,9 +220,9 @@ export default function Home() {
      </main>
      <footer className="my-2 text-center">
        <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 my-6 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
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -6,6 +6,9 @@ module.exports = {
      fontFamily: {
        jetbrains: ['JetBrains Mono', 'sans-serif'],
      },
+      backgroundImage: {
+        'gothic-pattern': "linear-gradient(to right, rgba(24, 24, 27, 0.8) 0 100%), url('/pattern.png')"
+      }
    },
  },
  plugins: [],