Initial commit: fristy.net personal site

app/error.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+export default function Error({
+    reset,
+}: {
+    error: Error & { digest?: string };
+    reset: () => void;
+}) {
+    return (
+        <div className="mx-auto flex w-full max-w-4xl flex-1 flex-col items-center justify-center gap-4 px-5 py-20 text-center">
+            <p className="font-mono text-sm text-blurple-soft">{"// 500"}</p>
+            <h2 className="text-2xl font-bold">Bir şeyler ters gitti / Something went wrong</h2>
+            <button
+                type="button"
+                onClick={reset}
+                className="rounded-full bg-blurple px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-blurple-soft hover:text-void"
+            >
+                Tekrar dene / Retry
+            </button>
+        </div>
+    );
+}

app/globals.css

@@ -0,0 +1,43 @@
+@import "tailwindcss";
+
+@theme {
+    --color-void: #060913;
+    --color-panel: #0c1222;
+    --color-blurple: #5865f2;
+    --color-blurple-soft: #8891ff;
+    --color-mint: #57f287;
+    --font-sans: var(--font-cascadia), ui-monospace, SFMono-Regular, monospace;
+    --font-mono: var(--font-cascadia), ui-monospace, SFMono-Regular, monospace;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    background-color: var(--color-void);
+    color: #e8ecf6;
+    font-family: var(--font-sans);
+    background-image:
+        radial-gradient(60rem 30rem at 80% -10%, rgba(88, 101, 242, 0.16), transparent 60%),
+        radial-gradient(50rem 26rem at 10% 0%, rgba(87, 242, 135, 0.07), transparent 60%);
+    background-attachment: fixed;
+}
+
+::selection {
+    background: rgba(88, 101, 242, 0.45);
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+::-webkit-scrollbar-track {
+    background: var(--color-void);
+}
+::-webkit-scrollbar-thumb {
+    background: #232c47;
+    border-radius: 8px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-blurple);
+}

app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { Cascadia_Mono } from "next/font/google";
+import "./globals.css";
+import { getDictionary } from "@/lib/i18n/get-dictionary";
+import { getLocale } from "@/lib/i18n/get-locale";
+import { SITE_URL } from "@/lib/site";
+
+const cascadiaCode = Cascadia_Mono({
+    variable: "--font-cascadia",
+    subsets: ["latin"],
+});
+
+export async function generateMetadata(): Promise<Metadata> {
+    const locale = await getLocale();
+    const dict = getDictionary(locale);
+    return {
+        metadataBase: new URL(SITE_URL),
+        title: {
+            default: dict.meta.title,
+            template: "%s · fristy.net",
+        },
+        description: dict.meta.description,
+        openGraph: {
+            title: dict.meta.title,
+            description: dict.meta.description,
+            url: "/",
+            type: "website",
+        },
+    };
+}
+
+export default async function RootLayout({ children }: LayoutProps<"/">) {
+    const locale = await getLocale();
+    return (
+        <html lang={locale} className={`${cascadiaCode.variable} h-full antialiased`}>
+            <body className="min-h-full flex flex-col">{children}</body>
+        </html>
+    );
+}

app/loading.tsx

@@ -0,0 +1,15 @@
+export default function Loading() {
+    return (
+        <div
+            className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-5 py-14"
+            aria-busy="true"
+        >
+            <div className="h-10 w-48 animate-pulse rounded-full bg-white/5" />
+            <div className="h-64 animate-pulse rounded-2xl bg-white/5" />
+            <div className="grid gap-4 sm:grid-cols-2">
+                <div className="h-44 animate-pulse rounded-2xl bg-white/5" />
+                <div className="h-44 animate-pulse rounded-2xl bg-white/5" />
+            </div>
+        </div>
+    );
+}

app/not-found.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import { SiteFooter } from "@/components/site-footer";
+import { SiteHeader } from "@/components/site-header";
+import { getDictionary } from "@/lib/i18n/get-dictionary";
+import { getLocale } from "@/lib/i18n/get-locale";
+
+export default async function NotFound() {
+    const locale = await getLocale();
+    const dict = getDictionary(locale);
+    return (
+        <div className="flex min-h-full flex-1 flex-col">
+            <SiteHeader dict={dict.nav} locale={locale} />
+            <main className="mx-auto flex w-full max-w-4xl flex-1 flex-col items-center justify-center px-5 py-20 text-center">
+                <p className="font-mono text-sm text-blurple-soft">{"// 404"}</p>
+                <h1 className="mt-2 bg-gradient-to-r from-white via-blurple-soft to-mint bg-clip-text text-8xl font-black tracking-tight text-transparent">
+                    404
+                </h1>
+                <h2 className="mt-4 text-2xl font-bold">{dict.notFound.title}</h2>
+                <p className="mt-2 max-w-md text-zinc-400">{dict.notFound.subtitle}</p>
+                <Link
+                    href="/"
+                    className="mt-8 rounded-full bg-blurple px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-blurple-soft hover:text-void"
+                >
+                    {dict.notFound.home}
+                </Link>
+            </main>
+            <SiteFooter dict={dict.footer} />
+        </div>
+    );
+}

app/page.tsx

@@ -0,0 +1,68 @@
+import { ContactSection } from "@/components/contact-section";
+import { DiscordCard } from "@/components/discord-card";
+import { ProjectsSection } from "@/components/projects-section";
+import { SectionHeading } from "@/components/section-heading";
+import { SiteFooter } from "@/components/site-footer";
+import { SiteHeader } from "@/components/site-header";
+import { getRepos } from "@/lib/gitea";
+import { getDictionary } from "@/lib/i18n/get-dictionary";
+import { getLocale } from "@/lib/i18n/get-locale";
+import { DISCORD_ID, discordProfileUrl, getLanyard } from "@/lib/lanyard";
+
+export default async function Home() {
+    const locale = await getLocale();
+    const dict = getDictionary(locale);
+    const [repos, presence] = await Promise.all([getRepos(), getLanyard()]);
+
+    return (
+        <div id="top" className="flex min-h-full flex-1 flex-col">
+            <SiteHeader dict={dict.nav} locale={locale} />
+            <main className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-20 px-5 py-14">
+                <section className="pt-6 text-center sm:pt-10">
+                    <p className="font-mono text-sm text-blurple-soft">{dict.hero.greeting}</p>
+                    <h1 className="mt-2 bg-[linear-gradient(to_right,#7ee7d8,#7ccbff,#7f8cff,#b56dff,#f38ad8)] bg-clip-text text-6xl font-black tracking-tight text-transparent sm:text-7xl">
+                        fristy
+                    </h1>
+                    <p className="mx-auto mt-5 max-w-xl text-zinc-400">{dict.hero.tagline}</p>
+                    <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+                        <a
+                            href="#projects"
+                            className="rounded-full bg-blurple px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-blurple-soft hover:text-void"
+                        >
+                            {dict.hero.ctaProjects}
+                        </a>
+                        <a
+                            href="#contact"
+                            className="rounded-full border border-white/15 px-6 py-3 text-sm text-zinc-300 transition-colors hover:border-blurple hover:text-white"
+                        >
+                            {dict.hero.ctaContact}
+                        </a>
+                    </div>
+                </section>
+
+                <section id="discord" className="scroll-mt-24">
+                    <SectionHeading
+                        kicker="lanyard"
+                        title={dict.discord.title}
+                        action={
+                            <a
+                                href={discordProfileUrl(DISCORD_ID)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-sm font-medium text-blurple-soft transition-colors hover:text-white"
+                            >
+                                {dict.discord.profile} →
+                            </a>
+                        }
+                    />
+                    <DiscordCard initial={presence} dict={dict.discord} />
+                </section>
+
+                <ProjectsSection repos={repos} dict={dict.projects} locale={locale} />
+
+                <ContactSection dict={dict.contact} />
+            </main>
+            <SiteFooter dict={dict.footer} />
+        </div>
+    );
+}