Website is done, writing posts now
19
package-lock.json
generated
@@ -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": {
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
BIN
public/banner_alt.webp
Normal file
|
After Width: | Height: | Size: 335 KiB |
BIN
public/banner_final.jpg
Normal file
|
After Width: | Height: | Size: 3.0 MiB |
@@ -1 +0,0 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 391 B |
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
BIN
public/musical_notes.gif
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/musical_notes_final.gif
Normal file
|
After Width: | Height: | Size: 18 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
33
public/record_player.svg
Normal file
@@ -0,0 +1,33 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!-- License: CC0. Made by SVG Repo: https://www.svgrepo.com/svg/289929/record-player-vinyl -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#E8E8E8;" d="M489.168,512H22.832C10.24,511.968,0.032,501.76,0,489.168V22.832C0.032,10.24,10.24,0.032,22.832,0
|
||||
H489.16c12.6,0.032,22.808,10.232,22.84,22.832V489.16C511.968,501.76,501.768,511.968,489.168,512z"/>
|
||||
<circle style="fill:#303030;" cx="249.68" cy="256" r="184"/>
|
||||
<circle cx="256" cy="256" r="206.336"/>
|
||||
<circle cx="256" cy="256" r="184"/>
|
||||
<path style="fill:#999999;" d="M256,443.248c-103.416,0.024-187.272-83.784-187.296-187.2
|
||||
c-0.024-103.416,83.784-187.272,187.2-187.296s187.272,83.784,187.296,187.2c0,0.016,0,0.032,0,0.048
|
||||
C443.088,359.344,359.344,443.104,256,443.248z M256,75.2C156.12,75.176,75.128,156.12,75.104,256s80.92,180.872,180.8,180.896
|
||||
s180.872-80.92,180.896-180.8c0-0.032,0-0.064,0-0.096C436.664,156.2,355.8,75.336,256,75.2z"/>
|
||||
<circle style="fill:#E21B1B;" cx="256" cy="256" r="68.4"/>
|
||||
<circle cx="40.4" cy="36.552" r="9.136"/>
|
||||
<g>
|
||||
<circle style="fill:#AAAAAA;" cx="65.656" cy="36.552" r="9.136"/>
|
||||
<circle style="fill:#AAAAAA;" cx="90.904" cy="36.552" r="9.136"/>
|
||||
</g>
|
||||
<circle style="fill:#E21B1B;" cx="40.528" cy="442.08" r="9.136"/>
|
||||
<circle style="fill:#AAAAAA;" cx="74.912" cy="442.08" r="9.136"/>
|
||||
<rect x="31.4" y="463.008" width="73.064" height="8.952"/>
|
||||
<g>
|
||||
<polygon style="fill:#AAAAAA;" points="351.248,367.184 335.176,356.704 424.448,219.784 424.448,53.416 443.648,53.416
|
||||
443.648,225.488 "/>
|
||||
<polygon style="fill:#AAAAAA;" points="397.08,296.952 340.144,384.176 321.416,346.544 355.088,294.96 "/>
|
||||
</g>
|
||||
<polygon style="fill:#CCCBCA;" points="334.416,372.672 340.144,384.176 443.648,225.488 443.648,53.416 434.048,53.416
|
||||
434.048,219.784 "/>
|
||||
<circle style="fill:#AAAAAA;" cx="434.08" cy="64.64" r="37.208"/>
|
||||
<circle cx="434.08" cy="64.64" r="20.408"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/songs/blood_instrumental.mp3
Normal file
BIN
public/songs/dna_instrumental.mp3
Normal file
BIN
public/songs/duckworth_instrumental.mp3
Normal file
BIN
public/songs/fear_instrumental.mp3
Normal file
BIN
public/songs/feel_instrumental.mp3
Normal file
BIN
public/songs/god_instrumental.mp3
Normal file
BIN
public/songs/humble_instrumental.mp3
Normal file
BIN
public/songs/xxx_instrumental.mp3
Normal file
BIN
public/songs/yah_instrumental.mp3
Normal file
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 128 B |
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
Before Width: | Height: | Size: 385 B |
@@ -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)",
|
||||
}}
|
||||
|
||||
@@ -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">
|
||||
|
||||
107
src/components/recordbox.tsx
Normal file
@@ -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;
|
||||
}
|
||||