aidan/aidxnCC
Archived
1
1
Fork 0
Code Issues Pull Requests Actions Activity

add music info buttons and pages

Browse Source
This commit is contained in:
Aidan 2025-01-08 09:14:02 -05:00
parent 28fc3ea7d8
commit b88c258896
9 changed files with 164 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/BackButton.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
const BackButton: React.FC<{ href: string }> = ({ href }) => {
return (
<Link href={href} legacyBehavior>
<a className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 mt-4 rounded inline-flex items-center">
<FontAwesomeIcon icon={faArrowLeft} className="mr-2" />
Back
</a>
</Link>
);
};
export default BackButton;

32
app/components/MusicInfo.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import Link from 'next/link';
const MusicInfo: React.FC = () => {
return (
<div className="max-w-2xl mx-auto text-center text-gray-200">
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Late Summer 2024</h2>
<div className="flex justify-center space-x-4">
<Link href="/time-periods/late-summer-2024/what-was-going-on" legacyBehavior>
<a className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
WHAT WAS GOING ON
</a>
</Link>
</div>
</section>
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Early Summer 2024</h2>
<div className="flex justify-center space-x-4">
<Link href="/time-periods/early-summer-2024/what-was-going-on" legacyBehavior>
<a className="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
WHAT WAS GOING ON
</a>
</Link>
</div>
</section>
</div>
);
};
export default MusicInfo;

27
app/components/pages/time-periods/early-summer-2024/WhatWasGoingOn.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import BackButton from '../../../BackButton';
const WhatWasGoingOnLateSummer2024: React.FC = () => {
return (
<div className="max-w-2xl mx-auto text-center">
<h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
What was going on during the start of summer 2024?
</h1>
<div className="px-6 pt-6">
<p className="text-gray-300 mb-4">
During Early Summer 2024, I was walking a ton in towns all across Massachusetts. During this time, I would listen to a <i>lot</i> of music. I regret not finding out about LastFM for so long... During this time, I was always happy, especially when I had music or a YouTube video playing. I would also call my friends often during this time.
</p>
<h2 className="text-2xl font-semibold mb-4 mt-12 text-gray-200">Context</h2>
<p className="text-gray-300 mb-4">
This summer was the one where I came back from my abusive treatment center. I was finally free from the place that had been holding me back for so long. So as you can imagine, I felt free as a bird.
</p>
<p className="text-gray-300 mb-4">
With this chance to explore, being in so many different towns, I really had a good time and made good memories, which I will not be writing about.
</p>
<BackButton href="/music" />
</div>
</div>
);
};
export default WhatWasGoingOnLateSummer2024;

26
app/components/pages/time-periods/late-summer-2024/WhatWasGoingOn.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import BackButton from '../../../BackButton';
const WhatWasGoingOnLateSummer2024: React.FC = () => {
return (
<div className="max-w-2xl mx-auto text-center">
<h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
What was going on during the end of summer 2024?
</h1>
<div className="px-6 pt-6">
<p className="text-gray-300 mb-4">
During late summer 2024, my depression and the "after effects" of treatment really kicked in. I had quit going to my therapist as I didn't feel like they were doing much of anything for me. I am very happy to say that since I quit my therapist, I have been doing much better.
</p>
<p className="text-gray-300 mb-4">
At this time, the baseball season was over, so I was walking around much less. I was still listening to a lot of music and I started getting into less depressed songs. I was also starting to get into more "normal" music, which was an interesting phase (which I believe I'm still in).
</p>
<p className="text-gray-300 mb-4">
A highlight of late summer 2024 was a vacation I took. This vacation has entire albums which remind me of it and I will always cherish those memories deeply.
</p>
<BackButton href="/music" />
</div>
</div>
);
};
export default WhatWasGoingOnLateSummer2024;

2
app/music/page.tsx
View File

@ -1,5 +1,6 @@
import Header from '../components/Header'
import MusicWidget from '../components/Music'
import MusicInfo from '../components/MusicInfo'
import Footer from '../components/Footer'
export default function Music() {
@ -8,6 +9,7 @@ export default function Music() {
<Header />
<main className="flex-grow container mx-auto px-4 py-12">
<MusicWidget />
<MusicInfo />
</main>
<Footer />
</div>

15
app/time-periods/early-summer-2024/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import Header from '../../components/Header'
import WhatWasGoingOn from '../../components/pages/time-periods/early-summer-2024/WhatWasGoingOn'
import Footer from '../../components/Footer'
export default function Music() {
return (
<div className="min-h-screen flex flex-col">
<Header />
<main className="flex-grow container mx-auto px-4 py-12">
<WhatWasGoingOn />
</main>
<Footer />
</div>
)
}

15
app/time-periods/early-summer-2024/what-was-going-on/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import Header from '../../../components/Header'
import WhatWasGoingOn from '../../../components/pages/time-periods/early-summer-2024/WhatWasGoingOn'
import Footer from '../../../components/Footer'
export default function Music() {
return (
<div className="min-h-screen flex flex-col">
<Header />
<main className="flex-grow container mx-auto px-4 py-12">
<WhatWasGoingOn />
</main>
<Footer />
</div>
)
}

15
app/time-periods/late-summer-2024/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import Header from '../../components/Header'
import WhatWasGoingOn from '../../components/pages/time-periods/late-summer-2024/WhatWasGoingOn'
import Footer from '../../components/Footer'
export default function Music() {
return (
<div className="min-h-screen flex flex-col">
<Header />
<main className="flex-grow container mx-auto px-4 py-12">
<WhatWasGoingOn />
</main>
<Footer />
</div>
)
}

15
app/time-periods/late-summer-2024/what-was-going-on/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import Header from '../../../components/Header'
import WhatWasGoingOn from '../../../components/pages/time-periods/late-summer-2024/WhatWasGoingOn'
import Footer from '../../../components/Footer'
export default function Music() {
return (
<div className="min-h-screen flex flex-col">
<Header />
<main className="flex-grow container mx-auto px-4 py-12">
<WhatWasGoingOn />
</main>
<Footer />
</div>
)
}