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": { "dependencies": {
"@fontsource/jetbrains-mono": "^4.5.12", "@fontsource/jetbrains-mono": "^4.5.12",
"@types/crypto-js": "^4.1.1",
"@types/node": "18.15.3", "@types/node": "18.15.3",
"@types/react": "18.0.28", "@types/react": "18.0.28",
"@types/react-dom": "18.0.11", "@types/react-dom": "18.0.11",
"crypto-js": "^4.1.1",
"eslint": "8.36.0", "eslint": "8.36.0",
"eslint-config-next": "13.2.4", "eslint-config-next": "13.2.4",
"framer-motion": "^10.3.2", "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 ( return (
<html className="dark" lang="en" dir="ltr"> <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> </html>
); );
} }

View File

@ -1,27 +1,32 @@
'use client'; 'use client';
import { useState } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import MD5 from 'crypto-js/md5'
import blahaj from '../../public/blahaj.webp'; import blahaj from '../../public/blahaj.webp';
import gitlab from '../../public/gitlab.svg'; import gitlab from '../../public/gitlab.svg';
import picrew from '../../public/picrew.png'; import picrew from '../../public/picrew.png';
export default function Home() { export default function Home() {
const [COTD, setCOTD] = useState(false);
const date = new Date(); const date = new Date();
const [day, month, year] = [ const [day, month, year] = [
date.getDate(), date.getDate(),
date.getMonth(), date.getMonth() + 1,
date.getFullYear(), 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 R = Math.round(255 * (1 - C) * (1 - K));
const G = Math.round(255 * (1 - M) * (1 - K)); const G = Math.round(255 * (1 - M) * (1 - K));
const B = Math.round(255 * (1 - Y) * (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 = [ const items = [
{ {
@ -55,19 +60,14 @@ export default function Home() {
]; ];
return ( return (
<div className="p-4 mx-auto mt-4 max-w-screen-md prose prose-zinc prose-invert"> <div className="max-w-screen-md p-4 mx-auto mt-4 prose 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-4">
<div> <div>
<motion.div <motion.div
animate={{ animate={{
left: 0, left: 0,
right: 0, right: 0,
}} }}
transition={
{
// ease: 'easeIn',
}
}
className="flex flex-col max-w-[100vw] absolute h-16 my-28 z-10 shadow-2xl" 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-[#55CDFC] z-0"></div>
@ -85,8 +85,8 @@ export default function Home() {
/> />
</div> </div>
</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-4 gap-y-4">
<h1 className="flex gap-x-2 mb-0 text-4xl select-none"> <h1 className="flex mb-0 text-4xl select-none gap-x-2">
<span className="my-auto"> <span className="my-auto">
<a <a
href="https://www.youtube.com/watch?v=WzZPPXfYSvE" href="https://www.youtube.com/watch?v=WzZPPXfYSvE"
@ -114,44 +114,33 @@ export default function Home() {
</h1> </h1>
<b className="font-jetbrains"> <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 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"> <a href="public.asc" target="_blank">
pgp key pgp key
</a> </a>
<span className="mt-2 text-xs">click on the emojis !!</span> <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> </p>
</b> </b>
</div> </div>
</header> </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-6 gap-y-6">
<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 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 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> </blockquote>
<div className="grid gap-4 text-sm md:grid-cols-2 font-jetbrains"> <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]"> <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> <h1 className="font-semibold">My blog !!</h1>
wip 💀 <a href="https://blog.yaemiku.dev" target="_blank">
https://blog.yaemiku.dev
</a>
</div> </div>
{items.map(({ name, class_, link, git, full, desc }, i) => ( {items.map(({ name, class_, link, git, full, desc }, i) => (
<div <div
className={`${ className={`${git ? 'flex' : ''
git ? 'flex' : '' } transition transform-gpu ease-in-out p-2 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} key={i}
> >
{git ? ( {git ? (
@ -183,9 +172,28 @@ export default function Home() {
))} ))}
<div <div
style={{ backgroundColor: `#${RGB}` }} 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> <span>
C: <span className="font-semibold">{Math.round(C * 100)}%</span>{' '} C: <span className="font-semibold">{Math.round(C * 100)}%</span>{' '}
M: <span className="font-semibold">{Math.round(M * 100)}%</span>{' '} M: <span className="font-semibold">{Math.round(M * 100)}%</span>{' '}
@ -212,9 +220,9 @@ export default function Home() {
</main> </main>
<footer className="my-2 text-center"> <footer className="my-2 text-center">
<em> <em>
<a href="https://git.yaemiku.dev/yaemiku" target="_blank"> <a href="https://gitlab.com/yaemiku" target="_blank">
yaemiku yaemiku
</a> </a>{' '}
&copy; <span id="year">2023</span> &copy; <span id="year">2023</span>
</em> </em>
<br /> <br />
@ -235,12 +243,12 @@ export default function Home() {
</em> </em>
<br /> <br />
<em> <em>
Link to Link to{' '}
<a href="https://picrew.me/image_maker/599056" target="_blank"> <a href="https://picrew.me/image_maker/599056" target="_blank">
picrew picrew
</a> </a>
</em> </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"> <blockquote className="text-xs text-justify text-zinc-400">
Oh, wretched memory that compels us to remember the paths we took to 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 arrive at the present state of affairs! Further: as I lay awake but

View File

@ -6,6 +6,9 @@ module.exports = {
fontFamily: { fontFamily: {
jetbrains: ['JetBrains Mono', 'sans-serif'], jetbrains: ['JetBrains Mono', 'sans-serif'],
}, },
backgroundImage: {
'gothic-pattern': "linear-gradient(to right, rgba(24, 24, 27, 0.8) 0 100%), url('/pattern.png')"
}
}, },
}, },
plugins: [], plugins: [],