meow
This commit is contained in:
parent
612287ba28
commit
0bcffee27e
GPG Key ID:
ADC039636B3E4AAB
BIN
public/pfp.jpeg
Normal file
BIN
public/pfp.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
@ -4,7 +4,7 @@ export const metadata = {
|
|||||||
title: 'storbies my beloved',
|
title: 'storbies my beloved',
|
||||||
authors: { name: 'Nikola Kubiczek' },
|
authors: { name: 'Nikola Kubiczek' },
|
||||||
description: 'my things',
|
description: 'my things',
|
||||||
colorScheme: 'dark',
|
colorScheme: 'light',
|
||||||
viewport: 'width=device-width,initial-scale=1.0',
|
viewport: 'width=device-width,initial-scale=1.0',
|
||||||
icons: ['icon.png'],
|
icons: ['icon.png'],
|
||||||
};
|
};
|
||||||
|
|||||||
330
src/app/page.tsx
330
src/app/page.tsx
@ -1,229 +1,128 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { motion } from 'framer-motion';
|
import pfp from '../../public/pfp.jpeg';
|
||||||
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() {
|
export default function Home() {
|
||||||
const [COTD, setCOTD] = useState(false);
|
|
||||||
const date = new Date();
|
|
||||||
const [day, month, year] = [
|
|
||||||
date.getDate(),
|
|
||||||
date.getMonth() + 1,
|
|
||||||
date.getFullYear(),
|
|
||||||
];
|
|
||||||
|
|
||||||
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).padStart(2, '0') + G.toString(16).padStart(2, '0') + B.toString(16).padStart(2, '0');
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
name: 'eParafia',
|
|
||||||
class_: 'hover:border-[#466e83] hover:bg-[#365e70]',
|
|
||||||
link: 'https://eparafia.eu',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Podlaski ZBS',
|
|
||||||
class_: 'hover:border-[#7c626c] hover:bg-[#6f6f71]',
|
|
||||||
link: 'https://podlaskizbs.pl',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Ikubi',
|
|
||||||
class_: 'hover:border-[#7c626c] hover:bg-[#6f6f71]',
|
|
||||||
link: 'https://ikubi.pl',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'nyaa',
|
|
||||||
class_: 'hover:border-[#466e83] hover:bg-[#365e70]',
|
|
||||||
git: 'https://gitlab.com/yaemiku/nyaa',
|
|
||||||
desc: `it's a script, dummy!`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Puchar LO V',
|
|
||||||
class_: 'hover:border-[#7f7f84] hover:bg-[#6f6f71]',
|
|
||||||
link: 'https://puchar.lo5.bielsko.pl',
|
|
||||||
git: 'https://gitlab.com/yaemiku/puchar',
|
|
||||||
full: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-screen-md mx-auto prose mt-big p-small prose-zinc prose-invert">
|
<div className="max-w-screen-md mx-auto mt-big p-small">
|
||||||
<header className="flex flex-col items-center justify-around px-base">
|
<header className="flex flex-col md:flex-row items-center">
|
||||||
<div>
|
<div className="w-72">
|
||||||
<motion.div
|
<Image
|
||||||
animate={{
|
src={pfp}
|
||||||
left: 0,
|
alt="My Picture"
|
||||||
right: 0,
|
className="rounded-3xl shadow-2xl pointer-events-none select-none"
|
||||||
}}
|
priority
|
||||||
className="absolute z-10 flex flex-col h-16 shadow-2xl max-w-vw my-28"
|
/>
|
||||||
>
|
|
||||||
<div className="z-0 grow bg-trans-blue"></div>
|
|
||||||
<div className="z-0 grow bg-trans-pink"></div>
|
|
||||||
<div className="z-0 bg-white grow"></div>
|
|
||||||
<div className="z-0 grow bg-trans-pink"></div>
|
|
||||||
<div className="z-0 grow bg-trans-blue"></div>
|
|
||||||
</motion.div>
|
|
||||||
<div className="relative z-20 mx-auto w-72">
|
|
||||||
<Image
|
|
||||||
src={picrew}
|
|
||||||
alt="My Picrew"
|
|
||||||
className="rounded-full shadow-2xl pointer-events-none select-none"
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col items-center w-full my-base gap-small mt-big">
|
<div className="flex flex-col items-stretch w-full my-4 gap-2 mt-6 px-6">
|
||||||
<h1 className="flex text-3xl select-none mb-none gap-small">
|
<div className="flex flex-col md:flex-row gap-1 items-center md:items-start">
|
||||||
<span className="my-auto">
|
<span className="text-4xl text-center">Nikola Kubiczek 🏳️⚧️</span>
|
||||||
<a
|
<span className="text-lg text-zinc-500 md:ml-auto align-text-bottom">
|
||||||
href="https://www.youtube.com/watch?v=WzZPPXfYSvE"
|
(she/her)
|
||||||
className="no-underline"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
🐀
|
|
||||||
</a>
|
|
||||||
</span>
|
</span>
|
||||||
<div className="flex flex-col text-center">
|
</div>
|
||||||
<span className=''>Nikola Kubiczek</span>
|
<ul className="font-jetbrains text-red-200 text-center md:text-left">
|
||||||
<span className="text-xs font-semibold text-zinc-500">
|
<li>
|
||||||
(she/her)
|
<span className="select-all">
|
||||||
</span>
|
me<span className="mx-xs">@</span>yaemiku.dev
|
||||||
</div>
|
</span>{' '}
|
||||||
<span className="my-auto">
|
|
||||||
<a
|
|
||||||
href="https://www.youtube.com/watch?v=JsV8EI3c48M"
|
|
||||||
className="no-underline"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
🦈
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</h1>
|
|
||||||
<b className="font-jetbrains">
|
|
||||||
<p className="flex flex-col items-center font-light my-none text-lime-50">
|
|
||||||
<span>me<span className='mx-xs'>@</span>yaemiku.dev</span>
|
|
||||||
<a href="public.asc" target="_blank">
|
<a href="public.asc" target="_blank">
|
||||||
pgp key
|
pgp key
|
||||||
</a>
|
</a>
|
||||||
<span className="text-xs mt-small">click on the emojis !!</span>
|
</li>
|
||||||
</p>
|
<li>
|
||||||
</b>
|
<span className="select-all">
|
||||||
|
nikola.kubiczek<span className="mx-xs">@</span>proton.me
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main className="flex flex-col items-center justify-around px-4">
|
<main className="flex flex-col items-stretch justify-around gap-6 px-4 my-4">
|
||||||
<figure className="flex flex-col max-w-screen-sm my-big gap-big">
|
<div className="font-jetbrains">
|
||||||
<blockquote className="text-2xl text-center text-transparent bg-clip-text bg-gradient-to-br from-trans-blue via-trans-pink to-white">
|
<h1 className="text-3xl text-red-300">About me</h1>
|
||||||
Why be serious when you can just be silly ???
|
<div className="text-xl pl-2">
|
||||||
</blockquote>
|
Dyed hair and pronouns, what more can I add?? I love goth music,
|
||||||
|
really into overall fashion and makeup as well. I like to knit and
|
||||||
<div className="grid text-sm gap-base md:grid-cols-2 font-jetbrains">
|
crochet. I don't drink alcohol or take drugs, but I smoke quite a
|
||||||
<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">
|
bit. Love everything coffee, tea (not black) and matcha - with the
|
||||||
<h1 className="font-semibold">My blog !!</h1>
|
last being my favourite. Like walking, especially at night.
|
||||||
<a href="https://blog.yaemiku.dev" target="_blank">
|
Definitely a cat person. I think self-expression and emotional
|
||||||
https://blog.yaemiku.dev
|
maturity are really important.
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{items.map(({ name, class_, link, git, full, desc }, i) => (
|
|
||||||
<div
|
|
||||||
className={`${git ? 'flex' : ''
|
|
||||||
} transition transform-gpu ease-in-out p-small rounded-md ${!!full ? 'col-span-full' : ''
|
|
||||||
} border border-zinc-700 bg-zinc-800 ${class_}`}
|
|
||||||
key={i}
|
|
||||||
>
|
|
||||||
{git ? (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<h1 className="font-semibold">{name}</h1>
|
|
||||||
{link ? (
|
|
||||||
<a href={link} target="_blank">
|
|
||||||
{link}
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<span>{desc}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href={git} className="my-auto ml-auto" target="_blank">
|
|
||||||
<Image src={gitlab} alt="gitlab" className="w-8 h-8" />
|
|
||||||
</a>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<h1 className="font-semibold">{name}</h1>
|
|
||||||
<a href={link} target="_blank">
|
|
||||||
{link}
|
|
||||||
</a>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<div
|
|
||||||
style={{ backgroundColor: `#${RGB}` }}
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<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'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>{' '}
|
|
||||||
Y: <span className="font-semibold">{Math.round(Y * 100)}%</span>{' '}
|
|
||||||
K: <span className="font-semibold">{Math.round(K * 100)}%</span>
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
R: <span className="font-semibold">{R}</span> G:{' '}
|
|
||||||
<span className="font-semibold">{G}</span> B:{' '}
|
|
||||||
<span className="font-semibold">{B}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="text-xl pl-2">
|
||||||
<Image
|
I'm studying mathematics at the University of Warsaw. I have been
|
||||||
src={blahaj}
|
considering IT, however mathematics is the love of my life and an
|
||||||
alt="blahaj"
|
absolute passion. I graduated a STEM highschool in Bielsko-Biała. If
|
||||||
className="mx-auto rounded-md mt-big"
|
I'm not sleeping, studying or raving there's a chance I'm working on
|
||||||
/>
|
a project. I mainly create full-stack websites on the smaller side.
|
||||||
<figcaption className="mt-[-1.25em] text-xs text-center text-zinc-400">
|
Some examples of what I've done:
|
||||||
u/markyminkk on r/BLAHAJ
|
<ul className="flex flex-wrap gap-x-3 px-3 py-2 text-red-200">
|
||||||
</figcaption>
|
<li>
|
||||||
</figure>
|
<a target={'_blank'} href="https://ikubi.pl">
|
||||||
|
ikubi_pracownia
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a target={'_blank'} href="https://eparafia.eu">
|
||||||
|
eparafia
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a target={'_blank'} href="https://puchar.lo5.bielsko.pl">
|
||||||
|
puchar V LO
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a target={'_blank'} href="https://podlzbs.pl">
|
||||||
|
podlaski zbs
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
As for technologies I feel really comfortable working with:
|
||||||
|
<ul className="flex flex-wrap gap-x-3 px-3 py-2 text-red-200">
|
||||||
|
<li>linux (power user since at least 4 years)</li>
|
||||||
|
<li>docker</li>
|
||||||
|
<li>python</li>
|
||||||
|
<li>django</li>
|
||||||
|
<li>nodejs</li>
|
||||||
|
<li>nextjs</li>
|
||||||
|
<li>11ty</li>
|
||||||
|
<li>tailwindcss</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="font-jetbrains">
|
||||||
|
<h1 className="text-3xl text-red-300">Contact</h1>
|
||||||
|
<div className="text-xl pl-2">
|
||||||
|
Feel free to message me. Here are a few links, that might prove
|
||||||
|
useful sometimes
|
||||||
|
<ul className="flex flex-row gap-x-3 px-3 py-2 text-red-200">
|
||||||
|
<li>
|
||||||
|
<a href="https://gitlab.com/yaemiku" target={'_blank'}>
|
||||||
|
gitlab
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://www.instagram.com/kicia_kocia_core/"
|
||||||
|
target={'_blank'}
|
||||||
|
>
|
||||||
|
instagram
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
And if you'd want to send me crypto
|
||||||
|
<p className="px-3 py-2 text-red-200 break-words select-all">
|
||||||
|
cosmos1gy6tg8jaf4qwmpug8jp8kqnyy9en3lmjxq0twf
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer className="text-center my-small">
|
<footer className="text-center my-small">
|
||||||
<em>
|
<em>
|
||||||
<a href="https://gitlab.com/yaemiku" target="_blank">
|
Nikola Kubiczek © <span id="year">2024</span>
|
||||||
yaemiku
|
|
||||||
</a>{' '}
|
|
||||||
© <span id="year">2023</span>
|
|
||||||
</em>
|
</em>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
@ -232,22 +131,11 @@ export default function Home() {
|
|||||||
<a href="https://nextjs.org" target="_blank">
|
<a href="https://nextjs.org" target="_blank">
|
||||||
NextJS
|
NextJS
|
||||||
</a>
|
</a>
|
||||||
,{' '}
|
, and{' '}
|
||||||
<a href="https://framer.com" target="_blank">
|
|
||||||
Framer Motion
|
|
||||||
</a>{' '}
|
|
||||||
and{' '}
|
|
||||||
<a href="https://tailwindcss.com" target="_blank">
|
<a href="https://tailwindcss.com" target="_blank">
|
||||||
TailwindCSS
|
TailwindCSS
|
||||||
</a>{' '}
|
</a>{' '}
|
||||||
</em>
|
</em>
|
||||||
<br />
|
|
||||||
<em>
|
|
||||||
Link to{' '}
|
|
||||||
<a href="https://picrew.me/image_maker/599056" target="_blank">
|
|
||||||
picrew
|
|
||||||
</a>
|
|
||||||
</em>
|
|
||||||
<figure className="max-w-screen-md select-none my-big">
|
<figure className="max-w-screen-md select-none my-big">
|
||||||
<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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user