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

bug fixes and optomizations to yield successful build

Browse Source
This commit is contained in:
Aidan 2025-01-07 19:38:46 -05:00
parent 5fcf00a506
commit 228f71b049
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/Music.tsx
View File

@ -7,15 +7,31 @@ import { faPlay, faStepBackward, faStepForward, faArrowLeft, faArrowRight } from
export default function Home() { export default function Home() {
const [timePeriod, setTimePeriod] = useState('2020s'); const [timePeriod, setTimePeriod] = useState('2020s');
const [songs, setSongs] = useState([]); interface Song {
albumArt: string;
name: string;
artist: string;
duration: string;
link?: string;
}
const [songs, setSongs] = useState<Song[]>([]);
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(0);
useEffect(() => { useEffect(() => {
fetch('/data/music.json') fetch('/data/music.json')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
const selectedPeriod = data.find(period => period.timePeriod === timePeriod); interface Song {
const songsList = selectedPeriod ? selectedPeriod.songs : []; albumArt: string;
name: string;
artist: string;
duration: string;
}
interface Period {
timePeriod: string;
songs: Song[];
}
const selectedPeriod = data.find((period: Period) => period.timePeriod === timePeriod); const songsList = selectedPeriod ? selectedPeriod.songs : [];
setSongs(songsList); setSongs(songsList);
setCurrentIndex(Math.floor(Math.random() * songsList.length)); setCurrentIndex(Math.floor(Math.random() * songsList.length));
}); });
@ -24,7 +40,7 @@ export default function Home() {
useEffect(() => { useEffect(() => {
const selectElement = document.getElementById('timePeriod'); const selectElement = document.getElementById('timePeriod');
if (selectElement) { if (selectElement) {
setTimePeriod(selectElement.value); setTimePeriod((selectElement as HTMLSelectElement).value);
} }
}, []); }, []);

5
app/components/pages/About.tsx
View File

@ -1,6 +1,7 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons' import { faUser } from '@fortawesome/free-solid-svg-icons'
import GitHubFeatured from '../GitHubFeatured' import GitHubFeatured from '../GitHubFeatured'
import Image from 'next/image'
export default function About() { export default function About() {
return ( return (
@ -29,8 +30,8 @@ export default function About() {
<h2 className="text-2xl font-semibold mb-4 text-gray-200">My GitHub Contributions</h2> <h2 className="text-2xl font-semibold mb-4 text-gray-200">My GitHub Contributions</h2>
<p className="text-gray-300 mb-4">You can find me on GitHub as <a href="https://github.com/ihatenodejs/" className="text-blue-400 hover:underline">ihatenodejs</a>.</p> <p className="text-gray-300 mb-4">You can find me on GitHub as <a href="https://github.com/ihatenodejs/" className="text-blue-400 hover:underline">ihatenodejs</a>.</p>
<div className="flex flex-col md:flex-row justify-center gap-4"> <div className="flex flex-col md:flex-row justify-center gap-4">
<img src="https://github-readme-stats.vercel.app/api?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&count_private=true" alt="ihatenodejs's Stats" className="w-full md:w-1/2" /> <Image src="https://github-readme-stats.vercel.app/api?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&count_private=true" alt="ihatenodejs's Stats" width={500} height={200} className="w-full md:w-1/2" />
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&layout=compact" alt="ihatenodejs's Top Languages" className="w-full md:w-1/3" /> <Image src="https://github-readme-stats.vercel.app/api/top-langs/?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&layout=compact" alt="ihatenodejs's Top Languages" width={500} height={200} className="w-full md:w-1/3" />
</div> </div>
</div> </div>
<div className="mt-12"> <div className="mt-12">