aidan/aidxnCC
1
0
Fork 0
mirror of https://github.com/ihatenodejs/aidxnCC.git synced 2025-04-24 21:55:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: aidan:06ffdd792522069f9b182e734de1d43bb45649e3
Branches Tags
aidan:main
...
compare: aidan:3c7c3e5a832d6748d9081b8e62e50750eb6ed6c4
Branches Tags
aidan:main

2 Commits
06ffdd7925 ... 3c7c3e5a83

Author SHA1 Message Date
Aidan
3c7c3e5a83 cf: fix api issue w/ pages builds 2025-04-24 02:31:47 -04:00
Aidan
8ca18ee2ae layout/feat/chore: use card-like layout instead, lastplayed design changes (it fits better with new design), add donation section, bump deps 2025-04-24 02:25:18 -04:00
6 changed files with 110 additions and 40 deletions
Show Stats Expand all files Collapse all files

2
app/api/now-playing/route.ts
View File

@ -1,5 +1,7 @@
import { NextResponse } from 'next/server'
export const runtime = 'edge';
export async function GET() {
try {
const response = await fetch("https://api.listenbrainz.org/1/user/p0ntus/playing-now", {

81
app/page.tsx
View File

@ -6,8 +6,10 @@ import Button from '@/components/objects/Button'
import Link from '@/components/objects/Link'
import LastPlayed from '@/components/widgets/LastPlayed'
import Image from 'next/image'
import { Mail } from 'lucide-react'
import { CreditCard, Mail, PillBottle, Scale } from 'lucide-react'
import { FaHandcuffs } from "react-icons/fa6"
import { useTranslation } from 'react-i18next'
import { SiGithubsponsors } from 'react-icons/si'
export default function Home() {
const { t } = useTranslation()
@ -27,24 +29,26 @@ export default function Home() {
return (
<div className="min-h-screen flex flex-col">
<Header />
<main className="grow container mx-auto px-4 py-12">
<div className="max-w-2xl mx-auto">
<div className="mb-12 text-center">
<Image
src="/ihatenodejs.jpg"
alt="My Profile Picture"
width={150}
height={150}
className="rounded-full mx-auto mb-6 border-4 border-gray-700"
/>
<h1 className="text-4xl font-bold mb-2 text-gray-100 glow">{t('home.profile.name')}</h1>
<p className="text-gray-400 text-xl">{t('home.profile.description')}</p>
<main className="w-full">
<div className="my-12 text-center">
<Image
src="/ihatenodejs.jpg"
alt="My Profile Picture"
width={150}
height={150}
className="rounded-full mx-auto mb-6 border-4 border-gray-700"
/>
<h1 className="text-4xl font-bold mb-2 text-gray-100 glow">{t('home.profile.name')}</h1>
<p className="text-gray-400 text-xl">{t('home.profile.description')}</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
<div className="p-8 border-2 border-gray-700 rounded-lg">
<LastPlayed />
</div>
<LastPlayed />
{mainSections.map((section, secIndex) => (
<section key={secIndex} id="about" className="mb-12">
<section key={secIndex} className="p-8 border-2 border-gray-700 rounded-lg">
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{section}</h2>
{mainStrings[secIndex].map((text: string, index: number) => (
<p key={index} className="text-gray-300 leading-relaxed mt-2">
@ -62,7 +66,7 @@ export default function Home() {
</section>
))}
<section id="contact">
<section id="contact" className="p-8 border-2 border-gray-700 rounded-lg">
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{t('home.contact.title')}</h2>
<p className="text-gray-300 mb-6">{t('home.contact.description')}</p>
<Button
@ -71,6 +75,49 @@ export default function Home() {
icon={Mail}
/>
</section>
<section id="donation" className="p-8 border-2 border-gray-700 rounded-lg">
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{t('home.donation.title')}</h2>
<p className="text-gray-300 mb-6">{t('home.donation.description')}</p>
<h4 className="text-lg font-semibold mb-2 text-gray-200">{t('home.donation.charities.title')}</h4>
<div className="grid grid-cols-1 md:grid-cols-2 md:text-sm gap-3">
<Button
href={'https://unsilenced.org'}
label={t('home.donation.charities.unsilenced')}
icon={FaHandcuffs}
target="_blank"
/>
<Button
href={'https://drugpolicy.org'}
label={t('home.donation.charities.drugpolicy')}
icon={PillBottle}
target="_blank"
/>
<Button
href={'https://www.aclu.org'}
label={t('home.donation.charities.aclu')}
icon={Scale}
target="_blank"
/>
</div>
<h4 className="text-lg font-semibold mt-5 mb-2 text-gray-200">{t('home.donation.donate.title')}</h4>
<div className="grid grid-cols-1 md:grid-cols-2 md:text-sm gap-3">
<Button
href={'https://donate.stripe.com/6oEeWVcXs9L9ctW4gj'}
label={t('home.donation.donate.stripe')}
icon={CreditCard}
target="_blank"
/>
<Button
href={'https://github.com/sponsors/ihatenodejs'}
label={t('home.donation.donate.github')}
icon={SiGithubsponsors}
target="_blank"
/>
</div>
</section>
</div>
</main>
<Footer />

4
components/objects/Button.tsx
View File

@ -5,13 +5,15 @@ interface ButtonProps {
href: string;
label: string;
icon?: React.ElementType;
target?: string;
}
const Button: React.FC<ButtonProps> = ({ href, label, icon }) => {
const Button: React.FC<ButtonProps> = ({ href, label, icon, target }) => {
return (
<Link
href={href}
className="inline-flex items-center bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
target={target}
>
{icon && React.createElement(icon, { size: 20, className: "mr-2" })}
{label}

12
components/widgets/LastPlayed.tsx
View File

@ -141,7 +141,7 @@ const NowPlaying: React.FC = () => {
if (loading) {
console.log("[LastPlayed] Loading state rendered")
return (
<div className="max-w-md mx-auto mb-12">
<div className="mb-12">
<h2 className="text-2xl font-bold mb-4 text-gray-200">Now Playing</h2>
<Progress value={steps > 0 ? (progress * 100) / steps : 0} className="mb-4" />
<div className="flex items-center justify-center space-x-2">
@ -157,7 +157,7 @@ const NowPlaying: React.FC = () => {
if (error) {
console.log("[LastPlayed] Error state rendered")
return (
<div className="max-w-md mx-auto mb-12">
<div className="mb-12">
<h2 className="text-2xl font-bold mb-4 text-gray-200">Now Playing</h2>
<div className="flex items-center justify-center text-red-500">
<AlertCircle className="text-red-500 mr-2" size={24} />
@ -174,11 +174,11 @@ const NowPlaying: React.FC = () => {
console.log("[LastPlayed] Rendered track:", track.track_name)
return (
<div className="max-w-md mx-auto mb-12">
<div className="mb-12">
<h2 className="text-2xl font-bold mb-4 text-gray-200">Now Playing</h2>
<div className="now-playing flex items-center border border-gray-300 rounded-lg p-4 bg-white/10 backdrop-filter backdrop-blur-lg shadow-lg">
<div className="now-playing flex items-center">
{coverArt ? (
<div className="relative w-24 h-24 rounded-lg mr-4 flex-shrink-0">
<div className="relative w-26 h-26 md:w-40 md:h-40 rounded-lg mr-4 flex-shrink-0">
<Image
src={coverArt || ""}
alt={track.track_name}
@ -189,7 +189,7 @@ const NowPlaying: React.FC = () => {
/>
</div>
) : (
<div className="w-24 h-24 bg-gray-200 rounded-lg mr-4 flex items-center justify-center flex-shrink-0">
<div className="w-26 h-26 md:w-40 md:h-40 bg-gray-200 rounded-lg mr-4 flex items-center justify-center flex-shrink-0">
<Music size={48} className="text-gray-400" />
</div>
)}

35
package.json
View File

@ -13,33 +13,36 @@
"@fortawesome/free-brands-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"@radix-ui/react-progress": "^1.1.2",
"@radix-ui/react-progress": "^1.1.4",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"geist": "^1.3.1",
"i18next": "^24.2.3",
"i18next-browser-languagedetector": "^8.0.4",
"i18next-browser-languagedetector": "^8.0.5",
"lucide-react": "^0.485.0",
"next": "^15.2.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "^15.3.1",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-fast-marquee": "^1.6.5",
"react-i18next": "^15.4.1",
"react-i18next": "^15.5.1",
"react-icons": "^5.5.0",
"tailwind-merge": "^3.0.2",
"tailwind-merge": "^3.2.0",
"tailwindcss-animate": "^1.0.7",
"tw-animate-css": "^1.2.5"
"tw-animate-css": "^1.2.8"
},
"devDependencies": {
"@eslint/eslintrc": "^3.3.1",
"@tailwindcss/postcss": "^4.0.17",
"@types/node": "^20.17.28",
"@types/react": "^19.0.12",
"@types/react-dom": "^19.0.4",
"eslint": "^9.23.0",
"@tailwindcss/postcss": "^4.1.4",
"@types/node": "^20.17.30",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"eslint": "^9.25.1",
"eslint-config-next": "15.1.3",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.17",
"typescript": "^5.8.2"
}
"tailwindcss": "^4.1.4",
"typescript": "^5.8.3"
},
"trustedDependencies": [
"unrs-resolver"
]
}

16
public/locales/en-US.json
View File

@ -25,6 +25,22 @@
"description": "Feel free to reach out for collaborations or just a hello :)",
"button": "Contact Me"
},
"donation": {
"title": "Support my work",
"description": "Feeling generous? Support me or one of the causes I support!",
"charities": {
"title": "Charities",
"description": "I support the following charities:",
"unsilenced": "Unsilenced",
"drugpolicy": "Drug Policy Alliance",
"aclu": "ACLU"
},
"donate": {
"title": "Donate to Me",
"stripe": "Stripe",
"github": "GitHub Sponsors"
}
},
"profile": {
"name": "Aidan",
"description": "SysAdmin, Developer, and Student"