yaemiku/hamburger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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
}

2
package.json
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",

784
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

BIN
public/pattern.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

BIN
public/picrew.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 374 KiB

After

Width:  |  Height:  |  Size: 258 KiB

2
src/app/layout.tsx
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>
); );
} }

86
src/app/page.tsx
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,43 +114,32 @@ 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 ${
!!full ? 'col-span-full' : ''
} border border-zinc-700 bg-zinc-800 ${class_}`} } border border-zinc-700 bg-zinc-800 ${class_}`}
key={i} key={i}
> >
@ -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

3
tailwind.config.js
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: [],