This commit is contained in:
Nikola Kubiczek 2023-05-30 00:26:50 +00:00
parent dfff2f6e78
commit c79269616f
Signed by: yaemiku
GPG Key ID: ADC039636B3E4AAB
8 changed files with 463 additions and 420 deletions

4
.vscode/settings.json vendored Normal file
View File

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

View File

@ -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",

File diff suppressed because it is too large Load Diff

BIN
public/pattern.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 374 KiB

After

Width:  |  Height:  |  Size: 258 KiB

View File

@ -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>
);
}

View File

@ -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,44 +114,33 @@ 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' : ''
} border border-zinc-700 bg-zinc-800 ${class_}`}
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 ? (
@ -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

View File

@ -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: [],