switching systems
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
@ -1,107 +1,9 @@
|
||||
:root {
|
||||
--max-width: 1100px;
|
||||
--border-radius: 12px;
|
||||
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
|
||||
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
|
||||
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
|
||||
@import 'node_modules/@fontsource/jetbrains-mono/index.css';
|
||||
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
|
||||
--primary-glow: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#16abff33 0deg,
|
||||
#0885ff33 55deg,
|
||||
#54d6ff33 120deg,
|
||||
#0071ff33 160deg,
|
||||
transparent 360deg
|
||||
);
|
||||
--secondary-glow: radial-gradient(
|
||||
rgba(255, 255, 255, 1),
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
|
||||
--tile-start-rgb: 239, 245, 249;
|
||||
--tile-end-rgb: 228, 232, 233;
|
||||
--tile-border: conic-gradient(
|
||||
#00000080,
|
||||
#00000040,
|
||||
#00000030,
|
||||
#00000020,
|
||||
#00000010,
|
||||
#00000010,
|
||||
#00000080
|
||||
);
|
||||
|
||||
--callout-rgb: 238, 240, 241;
|
||||
--callout-border-rgb: 172, 175, 176;
|
||||
--card-rgb: 180, 185, 188;
|
||||
--card-border-rgb: 131, 134, 135;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
|
||||
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
||||
--secondary-glow: linear-gradient(
|
||||
to bottom right,
|
||||
rgba(1, 65, 255, 0),
|
||||
rgba(1, 65, 255, 0),
|
||||
rgba(1, 65, 255, 0.3)
|
||||
);
|
||||
|
||||
--tile-start-rgb: 2, 13, 46;
|
||||
--tile-end-rgb: 2, 5, 19;
|
||||
--tile-border: conic-gradient(
|
||||
#ffffff80,
|
||||
#ffffff40,
|
||||
#ffffff30,
|
||||
#ffffff20,
|
||||
#ffffff10,
|
||||
#ffffff10,
|
||||
#ffffff80
|
||||
);
|
||||
|
||||
--callout-rgb: 20, 20, 20;
|
||||
--callout-border-rgb: 108, 108, 108;
|
||||
--card-rgb: 100, 100, 100;
|
||||
--card-border-rgb: 200, 200, 200;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
@ -1,18 +1,22 @@
|
||||
import './globals.css'
|
||||
import './globals.css';
|
||||
|
||||
export const metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
}
|
||||
title: 'storbies my beloved',
|
||||
authors: { name: 'Nikola Kubiczek' },
|
||||
description: 'my things',
|
||||
colorScheme: 'dark',
|
||||
viewport: 'width=device-width,initial-scale=1.0',
|
||||
icons: ['icon.png'],
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
<html className="dark" lang="en" dir="ltr">
|
||||
<body className="bg-zinc-900 text-zinc-100">{children}</body>
|
||||
</html>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,271 +0,0 @@
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: inherit;
|
||||
justify-content: inherit;
|
||||
align-items: inherit;
|
||||
font-size: 0.85rem;
|
||||
max-width: var(--max-width);
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.description a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.description p {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--callout-rgb), 0.5);
|
||||
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.code {
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(33%, auto));
|
||||
width: var(--max-width);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem 1.2rem;
|
||||
border-radius: var(--border-radius);
|
||||
background: rgba(var(--card-rgb), 0);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0);
|
||||
transition: background 200ms, border 200ms;
|
||||
}
|
||||
|
||||
.card span {
|
||||
display: inline-block;
|
||||
transition: transform 200ms;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
opacity: 0.6;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
max-width: 34ch;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.center::before {
|
||||
background: var(--secondary-glow);
|
||||
border-radius: 50%;
|
||||
width: 480px;
|
||||
height: 360px;
|
||||
margin-left: -400px;
|
||||
}
|
||||
|
||||
.center::after {
|
||||
background: var(--primary-glow);
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.center::before,
|
||||
.center::after {
|
||||
content: '';
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
filter: blur(45px);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.logo,
|
||||
.thirteen {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.thirteen {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
padding: 25px 10px;
|
||||
margin-left: 16px;
|
||||
transform: translateZ(0);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 2px 8px -1px #0000001a;
|
||||
}
|
||||
|
||||
.thirteen::before,
|
||||
.thirteen::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Conic Gradient Animation */
|
||||
.thirteen::before {
|
||||
animation: 6s rotate linear infinite;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: var(--tile-border);
|
||||
}
|
||||
|
||||
/* Inner Square */
|
||||
.thirteen::after {
|
||||
inset: 0;
|
||||
padding: 1px;
|
||||
border-radius: var(--border-radius);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
rgba(var(--tile-start-rgb), 1),
|
||||
rgba(var(--tile-end-rgb), 1)
|
||||
);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.card:hover {
|
||||
background: rgba(var(--card-rgb), 0.1);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0.15);
|
||||
}
|
||||
|
||||
.card:hover span {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.thirteen::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.card:hover span {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile and Tablet */
|
||||
@media (max-width: 1023px) {
|
||||
.content {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: 120px;
|
||||
max-width: 320px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem 2.5rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
padding: 8rem 0 6rem;
|
||||
}
|
||||
|
||||
.center::before {
|
||||
transform: none;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.description a {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.description p,
|
||||
.description div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.description p {
|
||||
align-items: center;
|
||||
inset: 0 0 auto;
|
||||
padding: 2rem 1rem 1.4rem;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(var(--background-start-rgb), 1),
|
||||
rgba(var(--callout-rgb), 0.5)
|
||||
);
|
||||
background-clip: padding-box;
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.description div {
|
||||
align-items: flex-end;
|
||||
pointer-events: none;
|
||||
inset: auto 0 0;
|
||||
padding: 2rem;
|
||||
height: 200px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
rgb(var(--background-end-rgb)) 40%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.vercelLogo {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.logo,
|
||||
.thirteen img {
|
||||
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
334
src/app/page.tsx
334
src/app/page.tsx
@ -1,91 +1,267 @@
|
||||
import Image from 'next/image'
|
||||
import { Inter } from 'next/font/google'
|
||||
import styles from './page.module.css'
|
||||
'use client';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
import Image from 'next/image';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import blahaj from '../../public/blahaj.webp';
|
||||
import gitlab from '../../public/gitlab.svg';
|
||||
import picrew from '../../public/picrew.png';
|
||||
|
||||
export default function Home() {
|
||||
const date = new Date();
|
||||
const [day, month, year] = [
|
||||
date.getDate(),
|
||||
date.getMonth(),
|
||||
date.getFullYear(),
|
||||
];
|
||||
|
||||
const [C, M, Y, K] = [day / 31, month / 12, year / 10000, (year % 100) / 100];
|
||||
|
||||
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 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 (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.description}>
|
||||
<p>
|
||||
Get started by editing
|
||||
<code className={styles.code}>src/app/page.tsx</code>
|
||||
</p>
|
||||
<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>
|
||||
<a
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<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"
|
||||
>
|
||||
By{' '}
|
||||
<div className="grow bg-[#55CDFC] z-0"></div>
|
||||
<div className="grow bg-[#F7A8B8] z-0"></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>
|
||||
</motion.div>
|
||||
<div className="relative z-20 mx-auto w-72">
|
||||
<Image
|
||||
src="/vercel.svg"
|
||||
alt="Vercel Logo"
|
||||
className={styles.vercelLogo}
|
||||
width={100}
|
||||
height={24}
|
||||
src={picrew}
|
||||
alt="My Picrew"
|
||||
className="rounded-full shadow-2xl pointer-events-none select-none"
|
||||
priority
|
||||
/>
|
||||
</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">
|
||||
<span className="my-auto">
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=WzZPPXfYSvE"
|
||||
className="no-underline"
|
||||
target="_blank"
|
||||
>
|
||||
🐀
|
||||
</a>
|
||||
</span>
|
||||
<div className="flex flex-col text-center">
|
||||
<span>Nikola Kubiczek</span>
|
||||
<span className="text-sm font-semibold text-zinc-500">
|
||||
(she/her)
|
||||
</span>
|
||||
</div>
|
||||
<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 my-0 font-light text-lime-50">
|
||||
<span>me@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' 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??
|
||||
</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 💀
|
||||
</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_}`}
|
||||
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}` }}
|
||||
className="flex flex-col items-center col-span-full p-2 rounded-md border border-zinc-700 hover:border-[#7f7f84]"
|
||||
>
|
||||
<h1 className="font-semibold">Color of the day!</h1>
|
||||
<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>
|
||||
|
||||
<Image
|
||||
src={blahaj}
|
||||
alt="blahaj"
|
||||
className="mx-auto mt-6 rounded-md"
|
||||
/>
|
||||
<figcaption className="mt-[-1.25rem] text-xs text-center text-zinc-400">
|
||||
u/markyminkk on r/BLAHAJ
|
||||
</figcaption>
|
||||
</figure>
|
||||
</main>
|
||||
<footer className="my-2 text-center">
|
||||
<em>
|
||||
<a href="https://git.yaemiku.dev/yaemiku" target="_blank">
|
||||
yaemiku
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
© <span id="year">2023</span>
|
||||
</em>
|
||||
<br />
|
||||
|
||||
<div className={styles.center}>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/next.svg"
|
||||
alt="Next.js Logo"
|
||||
width={180}
|
||||
height={37}
|
||||
priority
|
||||
/>
|
||||
<div className={styles.thirteen}>
|
||||
<Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.grid}>
|
||||
<a
|
||||
href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={inter.className}>
|
||||
Docs <span>-></span>
|
||||
</h2>
|
||||
<p className={inter.className}>
|
||||
Find in-depth information about Next.js features and API.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={inter.className}>
|
||||
Templates <span>-></span>
|
||||
</h2>
|
||||
<p className={inter.className}>Explore the Next.js 13 playground.</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={inter.className}>
|
||||
Deploy <span>-></span>
|
||||
</h2>
|
||||
<p className={inter.className}>
|
||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
<em>
|
||||
Made with{' '}
|
||||
<a href="https://nextjs.org" target="_blank">
|
||||
NextJS
|
||||
</a>
|
||||
,{' '}
|
||||
<a href="https://framer.com" target="_blank">
|
||||
Framer Motion
|
||||
</a>{' '}
|
||||
and{' '}
|
||||
<a href="https://tailwindcss.com" target="_blank">
|
||||
TailwindCSS
|
||||
</a>{' '}
|
||||
</em>
|
||||
<br />
|
||||
<em>
|
||||
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">
|
||||
<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
|
||||
still half dreaming, I felt that my body was not homogeneous, that
|
||||
some parts were still those of a boy, and that my head was laughing
|
||||
at my leg and ridiculing it, that my leg was laughing at my head,
|
||||
that my finger was poking fun at my heart, my heart at my brain,
|
||||
that my nose was thumbing itself at my eye, my eye chuckling and
|
||||
bellowing at my nose — and all my parts were wildly raping each
|
||||
other in an all-encompassing and piercing state of pan-mockery. Nor
|
||||
did my fear lessen one iota when I reached full consciousness and
|
||||
began reflecting on my life. On the contrary, it intensified even as
|
||||
it was interrupted (or accentuated) by a giggle my mouth could not
|
||||
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">
|
||||
——— Witold Gombrowicz, Ferdydurke
|
||||
</figcaption>
|
||||
</figure>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user