aidan/aidxnCC
1
1
Fork 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions

layout/feat/chore: use card-like layout instead, lastplayed design changes (it fits better with new design), add donation section, bump deps

Browse source
This commit is contained in:
Aidan 2025-04-24 02:25:18 -04:00
parent 06ffdd7925
commit 8ca18ee2ae
5 changed files with 108 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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 />