121 lines
4.3 KiB
TypeScript
121 lines
4.3 KiB
TypeScript
import Image from "next/image"
|
|
import React from "react"
|
|
import { FlipWords } from "@/components/ui/flip-words"
|
|
|
|
export const metadata = {
|
|
title: "Nicholai",
|
|
description: "Professional portfolio of Nicholai — VFX Supervisor & Developer",
|
|
openGraph: {
|
|
title: "Nicholai — VFX Supervisor & Developer",
|
|
description: "Professional portfolio of Nicholai — VFX Supervisor & Developer",
|
|
url: "https://nicholai.work",
|
|
images: ["/images/profile.jpg"],
|
|
type: "website",
|
|
},
|
|
};
|
|
|
|
export const dynamic = "force-dynamic"
|
|
|
|
export default function Home() {
|
|
const year = new Date().getFullYear();
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center justify-center text-neutral-100 antialiased">
|
|
<div className="w-full max-w-xl mx-auto flex flex-col items-center text-center gap-8 px-4 py-12">
|
|
<section aria-label="Profile photo">
|
|
<Image
|
|
src="/images/profile.jpg"
|
|
alt="Hand drawn portrait of Nicholai"
|
|
width={160}
|
|
height={160}
|
|
className="h-40 w-40 rounded-full object-cover ring-1 ring-neutral-800"
|
|
priority
|
|
/>
|
|
</section>
|
|
|
|
<section aria-labelledby="intro-title" className="space-y-2">
|
|
<h1 id="intro-title" className="text-2xl font-semibold">
|
|
Nicholai
|
|
</h1>
|
|
<p className="text-xs text-neutral-400 font-normal">
|
|
I wanted to justify the $6.39 I spent on the domain.
|
|
</p>
|
|
<div className="text-sm text-neutral-400">
|
|
<FlipWords words={["VFX Artist", "Developer", "Guitarist", "Owns a gun"]} className="text-neutral-200" />
|
|
</div>
|
|
</section>
|
|
|
|
<nav aria-label="Hyperlinks" className="w-full space-y-1">
|
|
<p className="text-xs font-medium uppercase tracking-wider text-neutral-500">
|
|
Hyperlinks
|
|
</p>
|
|
<ul className="space-y-1">
|
|
<li className="text-neutral-200">
|
|
VFX Supervisor at{" "}
|
|
<a
|
|
href="https://biohazardvfx.com"
|
|
className="underline decoration-neutral-500 hover:decoration-neutral-300"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Biohazard VFX
|
|
</a>
|
|
</li>
|
|
<li className="text-neutral-200">
|
|
Developer{" "}
|
|
<a
|
|
href="https://fortura.cc"
|
|
className="underline decoration-neutral-500 hover:decoration-neutral-300"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Fortura Data Solutions
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="mailto:nicholai@biohazardvfx.com"
|
|
className="text-xs underline decoration-neutral-500 hover:decoration-neutral-300"
|
|
>
|
|
Email me
|
|
</a>
|
|
</li>
|
|
<li className="text-neutral-200">
|
|
<a
|
|
href="https://www.instagram.com/nicholai.exe/"
|
|
className="underline decoration-neutral-500 hover:decoration-neutral-300"
|
|
target="_blank"
|
|
rel="me noopener noreferrer"
|
|
>
|
|
Instagram
|
|
</a>
|
|
<span className="text-xs text-neutral-500"> - I hate Instagram</span>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<section aria-labelledby="listening-title" className="w-full space-y-2">
|
|
<p id="listening-title" className="mt-2 text-xs font-medium uppercase tracking-wider text-neutral-500">
|
|
Listening
|
|
</p>
|
|
<div className="relative w-full max-w-sm mx-auto py-2">
|
|
<iframe
|
|
title="Spotify playlist"
|
|
style={{ borderRadius: 12 }}
|
|
src="https://open.spotify.com/embed/playlist/1kV9JPnhvpfk0UtcpslRpa?utm_source=generator&theme=0"
|
|
width="100%"
|
|
height="200"
|
|
loading="lazy"
|
|
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<footer className="pt-6 text-center text-xs text-neutral-500">
|
|
© {year} Nicholai · $6.39 well spent.
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|