Website is done, writing posts now

src/app/page.tsx

@@ -5,6 +5,7 @@ import { ChevronDown } from "lucide-react"
 import Navbar from "@/components/navbar";
 import {Post} from "@/lib/posts";
 import Link from "next/link";
+import RecordBox from "@/components/recordbox";
 
 export default function Home() {
   const [scrollY, setScrollY] = useState(0)
@@ -43,6 +44,7 @@ export default function Home() {
   return (
     <div className="relative font-mono">
       <title>DAMN.</title>
+      <RecordBox />
       <Navbar />
 
       {/* Parallax Hero Section */}
@@ -51,7 +53,7 @@ export default function Home() {
         <div
           className="absolute inset-0 w-full h-[120%] bg-cover bg-center bg-no-repeat"
           style={{
-            backgroundImage: `url('/banner.png')`,
+            backgroundImage: `url('/banner_final.jpg')`,
             transform: `translateY(${scrollY * 0.5}px)`,
             filter: "brightness(0.7) contrast(1.1)",
           }}

src/app/posts/[slug]/page.tsx

@@ -4,6 +4,8 @@ import Link from "next/link"
 import Markdown from 'react-markdown'
 import { ArrowLeft } from "lucide-react"
 import Navbar from "@/components/navbar";
+import Image from "next/image";
+import RecordBox from "@/components/recordbox";
 
 interface PostPageProps {
   params: Promise<{ slug: string }>
@@ -20,6 +22,8 @@ export default async function PostPage({ params }: PostPageProps) {
   return (
     <div className="min-h-screen bg-black text-white font-mono">
       <Navbar />
+      <RecordBox />
+
       <title>{post.title}</title>
       <div className="container mx-auto px-4 py-20">
         <div className="max-w-4xl mx-auto">

src/components/recordbox.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import Image from "next/image";
+import ReactAudioPlayer from "react-audio-player";
+import {useEffect, useState} from "react";
+
+export default function RecordBox() {
+  let player: ReactAudioPlayer | null = null;
+  let notes: HTMLImageElement | null = null;
+
+  const [firstSong, setFirstSong] = useState<string | undefined>();
+
+  useEffect(() => {
+    setFirstSong(randomSong());
+  }, []);
+
+  return <div>
+    <Image
+      className="hidden bottom-23 right-0 fixed z-50 pb-2 pr-2"
+      alt={"It's Playing"} width={100} height={100} src={"/musical_notes_final.gif"}
+      unoptimized={true}
+      ref={(ref) => { notes = ref; }}
+    />
+    <button>
+      <Image className="bottom-0 right-0 fixed z-50 pb-2 pr-2 cursor-pointer"
+             src={"/record_player.svg"} width={100} height={100} alt={"Player"}
+             onClick={() => {
+               if (player != null && notes != null) {
+                 if (player.audioEl.current.paused) {
+                   player.audioEl.current.play().then();
+                   notes.className = "bottom-23 right-0 fixed z-50 pb-2 pr-2";
+                 } else {
+                   player.audioEl.current.pause();
+                   notes.className = "hidden bottom-23 right-0 fixed z-50 pb-2 pr-2";
+                 }
+               }
+             }}
+      />
+    </button>
+    <ReactAudioPlayer
+      autoPlay={true} controls={false} className=""
+      volume={0.2}
+      ref={(element) => { player = element; }}
+      src={firstSong}
+      onPlay={() => {started(player, notes)}}
+      onEnded={() => {ended(player, notes)}}
+      onPause={() => {stopped(player, notes)}}
+    />
+  </div>
+}
+
+function started(player: ReactAudioPlayer | null, notes: HTMLImageElement | null) {
+  if (player != null && notes != null) {
+    notes.className = "bottom-23 right-0 fixed z-50 pb-2 pr-2";
+  }
+}
+
+function stopped(player: ReactAudioPlayer | null, notes: HTMLImageElement | null) {
+  if (player != null && notes != null) {
+    notes.className = "hidden bottom-23 right-0 fixed z-50 pb-2 pr-2";
+  }
+}
+
+function ended(player: ReactAudioPlayer | null, notes: HTMLImageElement | null) {
+  if (player != null && notes != null) {
+    notes.className = "hidden bottom-23 right-0 fixed z-50 pb-2 pr-2";
+    player.audioEl.current.src = randomSong();
+    player.audioEl.current.play().then();
+  }
+}
+
+function randomSong(): string {
+  const rand = Math.floor(Math.random() * 9);
+  let path = "/songs/";
+
+  if (rand == 0) {
+    path += "blood"
+  }
+  if (rand == 1) {
+    path += "dna"
+  }
+  if (rand == 2) {
+    path += "duckworth"
+  }
+  if (rand == 3) {
+    path += "fear"
+  }
+  if (rand == 4) {
+    path += "feel"
+  }
+  if (rand == 5) {
+    path += "god"
+  }
+  if (rand == 6) {
+    path += "humble"
+  }
+  if (rand == 7) {
+    path += "xxx"
+  }
+  if (rand == 8) {
+    path += "yah"
+  }
+
+  path += "_instrumental.mp3";
+
+  return path;
+}