diff --git a/package-lock.json b/package-lock.json index 0fcf280..6c1c395 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "lucide-react": "^0.511.0", "next": "15.3.2", "react": "^19.0.0", + "react-audio-player": "^0.17.0", "react-dom": "^19.0.0", "react-markdown": "^10.1.0" }, @@ -4385,7 +4386,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -4780,7 +4780,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -5632,7 +5631,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -5956,7 +5954,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -6014,6 +6011,19 @@ "node": ">=0.10.0" } }, + "node_modules/react-audio-player": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/react-audio-player/-/react-audio-player-0.17.0.tgz", + "integrity": "sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-dom": { "version": "19.1.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", @@ -6030,7 +6040,6 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "node_modules/react-markdown": { diff --git a/package.json b/package.json index d7fef1b..963c850 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "lucide-react": "^0.511.0", "next": "15.3.2", "react": "^19.0.0", + "react-audio-player": "^0.17.0", "react-dom": "^19.0.0", "react-markdown": "^10.1.0" }, diff --git a/public/banner_alt.webp b/public/banner_alt.webp new file mode 100644 index 0000000..3f31ef1 Binary files /dev/null and b/public/banner_alt.webp differ diff --git a/public/banner_final.jpg b/public/banner_final.jpg new file mode 100644 index 0000000..0fa9796 Binary files /dev/null and b/public/banner_final.jpg differ diff --git a/public/file.svg b/public/file.svg deleted file mode 100644 index 004145c..0000000 --- a/public/file.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/globe.svg b/public/globe.svg deleted file mode 100644 index 567f17b..0000000 --- a/public/globe.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/musical_notes.gif b/public/musical_notes.gif new file mode 100644 index 0000000..adca53b Binary files /dev/null and b/public/musical_notes.gif differ diff --git a/public/musical_notes_final.gif b/public/musical_notes_final.gif new file mode 100644 index 0000000..28a5023 Binary files /dev/null and b/public/musical_notes_final.gif differ diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/record_player.svg b/public/record_player.svg new file mode 100644 index 0000000..93a2702 --- /dev/null +++ b/public/record_player.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/songs/blood_instrumental.mp3 b/public/songs/blood_instrumental.mp3 new file mode 100644 index 0000000..4c4d256 Binary files /dev/null and b/public/songs/blood_instrumental.mp3 differ diff --git a/public/songs/dna_instrumental.mp3 b/public/songs/dna_instrumental.mp3 new file mode 100644 index 0000000..0acb4c3 Binary files /dev/null and b/public/songs/dna_instrumental.mp3 differ diff --git a/public/songs/duckworth_instrumental.mp3 b/public/songs/duckworth_instrumental.mp3 new file mode 100644 index 0000000..42cd378 Binary files /dev/null and b/public/songs/duckworth_instrumental.mp3 differ diff --git a/public/songs/fear_instrumental.mp3 b/public/songs/fear_instrumental.mp3 new file mode 100644 index 0000000..332b8ad Binary files /dev/null and b/public/songs/fear_instrumental.mp3 differ diff --git a/public/songs/feel_instrumental.mp3 b/public/songs/feel_instrumental.mp3 new file mode 100644 index 0000000..3ca1e9d Binary files /dev/null and b/public/songs/feel_instrumental.mp3 differ diff --git a/public/songs/god_instrumental.mp3 b/public/songs/god_instrumental.mp3 new file mode 100644 index 0000000..a153da4 Binary files /dev/null and b/public/songs/god_instrumental.mp3 differ diff --git a/public/songs/humble_instrumental.mp3 b/public/songs/humble_instrumental.mp3 new file mode 100644 index 0000000..535dd02 Binary files /dev/null and b/public/songs/humble_instrumental.mp3 differ diff --git a/public/songs/xxx_instrumental.mp3 b/public/songs/xxx_instrumental.mp3 new file mode 100644 index 0000000..a9d625f Binary files /dev/null and b/public/songs/xxx_instrumental.mp3 differ diff --git a/public/songs/yah_instrumental.mp3 b/public/songs/yah_instrumental.mp3 new file mode 100644 index 0000000..31ed6b7 Binary files /dev/null and b/public/songs/yah_instrumental.mp3 differ diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index 7705396..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/window.svg b/public/window.svg deleted file mode 100644 index b2b2a44..0000000 --- a/public/window.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index a81dcc7..d662b47 100644 --- a/src/app/page.tsx +++ b/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 (
DAMN. + {/* Parallax Hero Section */} @@ -51,7 +53,7 @@ export default function Home() {
@@ -20,6 +22,8 @@ export default async function PostPage({ params }: PostPageProps) { return (
+ + {post.title}
diff --git a/src/components/recordbox.tsx b/src/components/recordbox.tsx new file mode 100644 index 0000000..f97dc6d --- /dev/null +++ b/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(); + + useEffect(() => { + setFirstSong(randomSong()); + }, []); + + return
+ {"It's { notes = ref; }} + /> + + { player = element; }} + src={firstSong} + onPlay={() => {started(player, notes)}} + onEnded={() => {ended(player, notes)}} + onPause={() => {stopped(player, notes)}} + /> +
+} + +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; +} \ No newline at end of file