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

update look of the page

Browse Source
This commit is contained in:
Nikola Kubiczek
2023-07-16 23:56:46 +02:00
parent d0bbe7956a
commit 25273e0db2
5 changed files with 97 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/globals.css
View File

@ -1,9 +1,15 @@
@import 'node_modules/@fontsource/jetbrains-mono/index.css';
@import "node_modules/@fontsource/jetbrains-mono/index.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
a {
@apply underline;
@layer base {
a {
@apply underline;
}
a:hover {
@apply saturate-50;
}
}

52
src/app/page.tsx
View File

@ -60,21 +60,21 @@ export default function Home() {
];
return (
<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 className="max-w-screen-md mx-auto prose mt-big p-small prose-zinc prose-invert">
<header className="flex flex-col items-center justify-around px-base">
<div>
<motion.div
animate={{
left: 0,
right: 0,
}}
className="flex flex-col max-w-[100vw] absolute h-16 my-28 z-10 shadow-2xl"
className="absolute z-10 flex flex-col h-16 shadow-2xl max-w-vw my-28"
>
<div className="grow bg-[#55CDFC] z-0"></div>
<div className="grow bg-[#F7A8B8] z-0"></div>
<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="grow bg-[#F7A8B8] z-0"></div>
<div className="grow bg-[#55CDFC] z-0"></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
@ -85,8 +85,8 @@ export default function Home() {
/>
</div>
</div>
<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">
<div className="flex flex-col items-center w-full my-base gap-small mt-big">
<h1 className="flex text-3xl select-none mb-none gap-small">
<span className="my-auto">
<a
href="https://www.youtube.com/watch?v=WzZPPXfYSvE"
@ -97,8 +97,8 @@ export default function Home() {
</a>
</span>
<div className="flex flex-col text-center">
<span>Nikola Kubiczek</span>
<span className="text-sm font-semibold text-zinc-500">
<span className=''>Nikola Kubiczek</span>
<span className="text-xs font-semibold text-zinc-500">
(she/her)
</span>
</div>
@ -113,24 +113,24 @@ export default function Home() {
</span>
</h1>
<b className="font-jetbrains">
<p className="flex flex-col items-center my-0 font-light text-lime-50">
<span>me<span className='mx-1'>@</span>yaemiku.dev</span>
<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">
pgp key
</a>
<span className="mt-2 text-xs">click on the emojis !!</span>
<span className="text-xs mt-small">click on the emojis !!</span>
</p>
</b>
</div>
</header>
<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]">
<figure className="flex flex-col max-w-screen-sm my-big gap-big">
<blockquote className="text-2xl text-center text-transparent bg-clip-text bg-gradient-to-br from-trans-blue via-trans-pink to-white">
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]">
<div className="grid text-sm gap-base md:grid-cols-2 font-jetbrains">
<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">
<h1 className="font-semibold">My blog !!</h1>
<a href="https://blog.yaemiku.dev" target="_blank">
https://blog.yaemiku.dev
@ -139,7 +139,7 @@ export default function Home() {
{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' : ''
} transition transform-gpu ease-in-out p-small rounded-md ${!!full ? 'col-span-full' : ''
} border border-zinc-700 bg-zinc-800 ${class_}`}
key={i}
>
@ -174,7 +174,7 @@ export default function Home() {
style={{ backgroundColor: `#${RGB}` }}
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"
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
@ -185,7 +185,7 @@ export default function Home() {
closed: { opacity: 0, display: "none" }
}}
>
<div className='flex flex-col items-center gap-2'>
<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>
@ -211,14 +211,14 @@ export default function Home() {
<Image
src={blahaj}
alt="blahaj"
className="mx-auto mt-6 rounded-md"
className="mx-auto rounded-md mt-big"
/>
<figcaption className="mt-[-1.25rem] text-xs text-center text-zinc-400">
<figcaption className="mt-[-1.25em] text-xs text-center text-zinc-400">
u/markyminkk on r/BLAHAJ
</figcaption>
</figure>
</main>
<footer className="my-2 text-center">
<footer className="text-center my-small">
<em>
<a href="https://gitlab.com/yaemiku" target="_blank">
yaemiku
@ -248,7 +248,7 @@ export default function Home() {
picrew
</a>
</em>
<figure className="max-w-screen-md my-6 select-none">
<figure className="max-w-screen-md select-none my-big">
<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
@ -265,7 +265,7 @@ export default function Home() {
hold back. I was halfway down the path of my life when I found
myself in a dark forest.
</blockquote>
<figcaption className="mt-2 text-xs text-right text-zinc-700">
<figcaption className="text-xs text-right mt-small text-zinc-700">
——— Witold Gombrowicz, Ferdydurke
</figcaption>
</figure>