mirror of
https://github.com/ihatenodejs/aidxnCC.git
synced 2025-04-24 13:55:57 +00:00
layout/feat/chore: use card-like layout instead, lastplayed design changes (it fits better with new design), add donation section, bump deps
This commit is contained in:
parent
06ffdd7925
commit
8ca18ee2ae
81
app/page.tsx
81
app/page.tsx
@ -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 />
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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
35
package.json
@ -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"
|
||||
]
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user