Fixed light mode, changed padding of spotify card.

2025-09-10 19:24:04 -06:00 · 2025-09-10 19:24:04 -06:00 · fe7c5c3335
commit fe7c5c3335
parent 9b6f84be27
5 changed files with 145 additions and 50 deletions
--- a/app/components/avatar-motion.tsx
+++ b/app/components/avatar-motion.tsx
@ -0,0 +1,44 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+type AvatarMotionProps = {
+  src: string;
+  alt: string;
+  size?: number; // px
+  className?: string;
+};
+
+export function AvatarMotion({
+  src,
+  alt,
+  size = 160,
+  className,
+}: AvatarMotionProps) {
+  // tailwind classes for typical 160px size
+  const baseSizeClasses = size === 160 ? "h-40 w-40" : "";
+
+  return (
+    <motion.div
+      whileHover={{ scale: 1.03, y: -2 }}
+      whileTap={{ scale: 0.98 }}
+      transition={{ type: "spring", stiffness: 360, damping: 22, mass: 0.6 }}
+      className="inline-block group"
+    >
+      <Image
+        src={src}
+        alt={alt}
+        width={size}
+        height={size}
+        className={cn(
+          baseSizeClasses,
+          "rounded-full object-cover ring-2 ring-neutral-200 shadow-lg transition-shadow duration-300 group-hover:shadow-xl dark:shadow-none dark:ring-neutral-800",
+          className,
+        )}
+        priority
+      />
+    </motion.div>
+  );
+}
--- a/app/components/dotbackground.tsx
+++ b/app/components/dotbackground.tsx
@ -9,13 +9,13 @@ export function DotBackground({ className }: { className?: string }) {
      <div
        className={cn(
          "absolute inset-0",
-          "[background-size:20px_20px]",
-          "[background-image:radial-gradient(#d4d4d4_1px,transparent_1px)]",
+          "[background-size:28px_28px]",
+          "[background-image:radial-gradient(var(--dot-color)_1px,transparent_1px)]",
          "dark:[background-image:radial-gradient(#404040_1px,transparent_1px)]",
        )}
      />
      {/* Radial gradient for the container to give a faded look */}
-      <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
+      <div className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,transparent_30%,black)]"></div>
    </div>
  )
 }
--- a/app/globals.css
+++ b/app/globals.css
@ -1,14 +1,21 @@
@import "tailwindcss";

 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  /* Light mode tokens */
+  --background: #fbfbfb; /* off-white to reduce glare */
+  --surface: #ffffff33;     /* card/background surface */
+  --foreground: #0f1720;  /* readable body text */
+  --muted: rgba(15, 23, 32, 0.55);
+  --accent: #0f1720;      /* link/accent (monochrome) */
+  --dot-color: rgba(120, 120, 120, 0.576);
+  --card-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
+  --radius: 10px;
 }

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
-  --font-sans: var(--font-cabin);
+  --font-sans: "Cabin", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-geist-mono);
 }

@ -16,11 +23,56 @@
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
+    --accent: #ededed; /* keep links readable in dark mode */
+    --surface: #69696900; /* dark surfaces for cards */
+  }
+
+  a {
+    border-bottom-color: rgba(237, 237, 237, 0.25);
  }
 }

 body {
-  background: var(--background);
+  background: linear-gradient(180deg, var(--background), color-mix(in srgb, var(--background) 85%, rgb(6, 6, 6) 15%) 60%);
  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Cabin", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.48;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
+}
+
+/* Link styling */
+a {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(15, 23, 32, 0.18);
+  transition: color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
+}
+a:hover {
+  color: color-mix(in srgb, var(--accent) 80%, black 20%);
+  border-bottom-color: transparent;
+  text-decoration: underline;
+}
+
+/* Visited links keep same color (no blue/purple) */
+a:visited {
+  color: var(--accent);
+}
+
+/* Spotify card wrapper */
+.spotify-card {
+  display: inline-block;
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--card-shadow);
+  padding: 14px;
+}
+
+/* Small, muted text */
+.footer-small {
+  color: var(--muted);
+  font-size: 12px;
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,6 +1,5 @@
 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";

@ -14,11 +13,6 @@ const geistMono = Geist_Mono({
  subsets: ["latin"],
 });

-const cabin = Cabin({
-  variable: "--font-cabin",
-  subsets: ["latin"],
-  display: "swap",
-});

 export const metadata: Metadata = {
  title: {
@ -50,8 +44,16 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
      <body
-        className={`${geistSans.variable} ${geistMono.variable} ${cabin.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <DotBackground />
        {children}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,6 +1,6 @@
-import Image from "next/image"
 import React from "react"
 import { FlipWords } from "@/components/ui/flip-words"
+import { AvatarMotion } from "@/app/components/avatar-motion"

 export const metadata = {
  title: "Nicholai",
@ -20,16 +20,13 @@ export default function Home() {
  const year = new Date().getFullYear();

  return (
-    <main className="flex min-h-screen items-center justify-center text-neutral-100 antialiased">
+    <main className="flex min-h-screen items-center justify-center 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
+          <AvatarMotion
            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
+            size={160}
          />
        </section>

@ -37,35 +34,35 @@ export default function Home() {
          <h1 id="intro-title" className="text-2xl font-semibold">
            Nicholai
          </h1>
-          <p className="text-xs text-neutral-400 font-normal">
+          <p className="text-xs text-neutral-600 dark: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 className="text-sm text-neutral-700 dark:text-neutral-400">
+            <FlipWords words={["VFX Artist", "Developer", "Guitarist", "Owns a gun"]} className="text-neutral-900 dark: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">
+          <p className="text-xs font-medium uppercase tracking-wider text-neutral-600 dark:text-neutral-500">
            Hyperlinks
          </p>
          <ul className="space-y-1">
-            <li className="text-neutral-200">
+            <li className="text-neutral-900 dark:text-neutral-200">
              VFX Supervisor at{" "}
              <a
                href="https://biohazardvfx.com"
-                className="underline decoration-neutral-500 hover:decoration-neutral-300"
+                className=""
                target="_blank"
                rel="noopener noreferrer"
              >
                Biohazard VFX
              </a>
            </li>
-            <li className="text-neutral-200">
+            <li className="text-neutral-900 dark:text-neutral-200">
              Developer{" "}
              <a
                href="https://fortura.cc"
-                className="underline decoration-neutral-500 hover:decoration-neutral-300"
+                className=""
                target="_blank"
                rel="noopener noreferrer"
              >
@ -75,15 +72,15 @@ export default function Home() {
            <li>
              <a
                href="mailto:nicholai@biohazardvfx.com"
-                className="text-xs underline decoration-neutral-500 hover:decoration-neutral-300"
+                className="text-xs"
              >
                Email me
              </a>
            </li>
-            <li className="text-neutral-200">
+            <li className="text-neutral-900 dark:text-neutral-200">
              <a
                href="https://www.instagram.com/nicholai.exe/"
-                className="underline decoration-neutral-500 hover:decoration-neutral-300"
+                className=""
                target="_blank"
                rel="me noopener noreferrer"
              >
@ -94,24 +91,24 @@ export default function Home() {
          </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 aria-labelledby="listening-title" className="w-full space-y-4">
+            <h3 id="listening-title" className="text-sm font-medium uppercase tracking-wider text-neutral-600 dark:text-neutral-500 mb-4">
+              Listening
+            </h3>
+            <div className="flex-1 flex items-center justify-center">
+              <iframe
+                title="Spotify playlist"
+                style={{ borderRadius: 12 }}
+                src="https://open.spotify.com/embed/playlist/1kV9JPnhvpfk0UtcpslRpa?utm_source=generator&theme=0"
+                width="290"
+                height="220"
+                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">
+        <footer className="pt-6 text-center text-xs text-neutral-600 dark:text-neutral-500">
          © {year} Nicholai · $6.39 well spent.
        </footer>
      </div>