diff --git a/README.md b/README.md index e215bc4..08e6c51 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,31 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# Nicholai's website -## Getting Started +This is my personal website built with Next.js 15, Tailwind CSS, and TypeScript. -First, run the development server: +## Tech Stack + +Next.js 15, Tailwind CSS, Cabin font family, Turbopack, Typescript. + +### Prerequisites + +- Node.js 18+ installed (node modules: densest thing in the known universe.) +- npm, yarn, pnpm, whatever honestly. + +### Installation + +1. Clone the repository: +```bash +git clone https://git.biohazardvfx.com/Nicholai/nicholais-website.git +``` + +2. Install dependencies: +```bash +npm install +``` + +### Development + +Run the development server: ```bash npm run dev @@ -16,21 +39,21 @@ bun dev Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +### Building for Production -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +```bash +npm run build +``` -## Learn More +### Deployment -To learn more about Next.js, take a look at the following resources: +## License -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +This project is open source, take it. I don't give a fuck. I am not your dad. -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +## Author -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +Nicholai - VFX Supervisor & Developer +- Website: [nicholai.work](https://nicholai.work) +- Email: nicholai@biohazardvfx.com +- Instagram: [@nicholai.exe](https://www.instagram.com/nicholai.exe/) diff --git a/app/components/dotbackground.tsx b/app/components/dotbackground.tsx new file mode 100644 index 0000000..2f70476 --- /dev/null +++ b/app/components/dotbackground.tsx @@ -0,0 +1,21 @@ +import { cn } from "@/lib/utils" + +export function DotBackground({ className }: { className?: string }) { + return ( +
+
+ {/* Radial gradient for the container to give a faded look */} +
+
+ ) +} \ No newline at end of file diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/globals.css b/app/globals.css index a2dc41e..7ccf2df 100644 --- a/app/globals.css +++ b/app/globals.css @@ -8,7 +8,7 @@ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); + --font-sans: var(--font-cabin); --font-mono: var(--font-geist-mono); } diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..cb613e9 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; +import { Cabin } from "next/font/google"; import "./globals.css"; +import { DotBackground } from "@/app/components/dotbackground"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -12,9 +14,33 @@ const geistMono = Geist_Mono({ subsets: ["latin"], }); +const cabin = Cabin({ + variable: "--font-cabin", + subsets: ["latin"], + display: "swap", +}); + export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: { + default: "Nicholai", + template: "%s · Nicholai", + }, + description: "Professional portfolio of Nicholai — VFX Supervisor & Developer", + openGraph: { + title: "Nicholai", + description: "Professional portfolio of Nicholai — VFX Supervisor & Developer", + url: "https://nicholai.work", + siteName: "Nicholai", + images: ["/images/profile.jpg"], + locale: "en_US", + type: "website", + }, + alternates: { + canonical: "https://nicholai.work", + }, + icons: { + icon: "/favicon.ico", + }, }; export default function RootLayout({ @@ -25,8 +51,9 @@ export default function RootLayout({ return ( + {children} diff --git a/app/page.tsx b/app/page.tsx index 21b686d..3c57bc2 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,103 +1,120 @@ -import Image from "next/image"; +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() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
+ const year = new Date().getFullYear(); -
- - Vercel logomark +
+
+ Hand drawn portrait of Nicholai +
+ +
+

+ Nicholai +

+

+ I wanted to justify the $6.39 I spent on the domain. +

+
+ +
+
+ + + +
+

+ Listening +

+
+