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

better padding, bump

Browse source 
p-4 will now be the default for small screens (mobile devices), and p-8
for sm+ sized devices. this does not apply everywhere, like in the
TopPick.tsx component
This commit is contained in:
Aidan 2025-08-23 23:39:05 -04:00
parent 3fe4b7b369
commit dee931f3a8
9 changed files with 36 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app/about/page.tsx
View file

@ -45,7 +45,7 @@ export default function About() {
{mainStrings.map((section, index) => {
if (mainSections[index] === t('about.sections.featuredProjects')) {
return (
<section key={index} className="p-8 border-2 border-gray-700 rounded-lg lg:col-span-2 hover:border-gray-600 transition-colors duration-300">
<section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg lg:col-span-2 hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
{section.map((text, index) => (
<p key={index} className="text-gray-300 leading-relaxed mt-2">
@ -57,7 +57,7 @@ export default function About() {
)
} else if (mainSections[index] === t('about.sections.contributions')) {
return (
<section key={index} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
{section.map((text, index) => (
<p key={index} className="text-gray-300 leading-relaxed mt-2">
@ -78,7 +78,7 @@ export default function About() {
{!imageError && (
<div className="flex flex-col justify-center items-center w-full mt-4 gap-4">
<Image
src="https://github-readme-stats.vercel.app/api?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&count_private=true"
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={420}
height={200}
@ -89,7 +89,7 @@ export default function About() {
className="max-w-full h-auto"
/>
<Image
src="https://github-readme-stats.vercel.app/api/top-langs/?username=ihatenodejs&theme=dark&show_icons=true&hide_border=true&layout=compact"
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={300}
height={200}
@ -105,7 +105,7 @@ export default function About() {
)
} else if (mainSections[index] === t('about.sections.devices')) {
return (
<section key={index} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
{Object.entries(section).map(([key, value], index) => (
<div key={index}>
@ -160,7 +160,7 @@ export default function About() {
)
} else if (mainSections[index] === t('about.sections.hobbies')) {
return (
<section key={index} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
{section.map((text, index) => (
<p key={index} className="text-gray-300 leading-relaxed mt-2">
@ -185,7 +185,7 @@ export default function About() {
)
} else if (mainSections[index] === t('about.sections.projects')) {
return (
<section key={index} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
{section.map((text, index) => (
<p key={index} className="text-gray-300 leading-relaxed mt-2">
@ -213,7 +213,7 @@ export default function About() {
)
} else {
return (
<section key={index} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section key={index} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{mainSections[index]}</h2>
{section.map((text, index) => (
<p key={index} className="text-gray-300 leading-relaxed mt-2">

8
app/ai/components/AIStack.tsx
View file

@ -8,7 +8,7 @@ interface AIStackProps {
export default function AIStack({ tools }: AIStackProps) {
const getStatusColor = (status: string) => {
switch(status) {
switch (status) {
case 'primary': return 'text-green-400 border-green-400 bg-green-400/10'
case 'active': return 'text-blue-400 border-blue-400 bg-blue-400/10'
case 'occasional': return 'text-yellow-400 border-yellow-400 bg-yellow-400/10'
@ -17,7 +17,7 @@ export default function AIStack({ tools }: AIStackProps) {
}
const getStatusLabel = (status: string) => {
switch(status) {
switch (status) {
case 'primary': return 'Primary'
case 'active': return 'Active Use'
case 'occasional': return 'Occasional Use'
@ -26,7 +26,7 @@ export default function AIStack({ tools }: AIStackProps) {
}
return (
<section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<Bot size={24} />
My AI Stack
@ -70,4 +70,4 @@ export default function AIStack({ tools }: AIStackProps) {
</div>
</section>
)
}
}

4
app/ai/components/FavoriteModels.tsx
View file

@ -7,7 +7,7 @@ interface FavoriteModelsProps {
export default function FavoriteModels({ models }: FavoriteModelsProps) {
return (
<section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<Star size={24} />
Favorite Models
@ -36,4 +36,4 @@ export default function FavoriteModels({ models }: FavoriteModelsProps) {
</div>
</section>
)
}
}

4
app/ai/components/ToolReviews.tsx
View file

@ -7,7 +7,7 @@ interface ToolReviewsProps {
export default function ToolReviews({ reviews }: ToolReviewsProps) {
return (
<section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<MessageSquare size={24} />
Tool Reviews
@ -51,4 +51,4 @@ export default function ToolReviews({ reviews }: ToolReviewsProps) {
</div>
</section>
)
}
}

4
app/ai/components/TopPick.tsx
View file

@ -9,7 +9,7 @@ export default function TopPick() {
<Trophy size={32} />
Top Pick of 2025
</h2>
<div className="p-8 border-2 border-[#c15f3c] rounded-lg bg-orange-500/5">
<div className="p-6 sm:p-8 border-2 border-[#c15f3c] rounded-lg bg-orange-500/5">
<div className="grid md:grid-cols-2 gap-6">
<div className="flex items-center gap-4">
<SiClaude className="text-6xl text-[#c15f3c]" />
@ -46,4 +46,4 @@ export default function TopPick() {
</div>
</div>
)
}
}

8
app/page.tsx
View file

@ -57,7 +57,7 @@ export default function Home() {
</div>
{mainSections.map((section, secIndex) => (
<section key={secIndex} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section key={secIndex} className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<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">
@ -67,7 +67,7 @@ export default function Home() {
</section>
))}
<section id="contact" className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section id="contact" className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<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
@ -78,7 +78,7 @@ export default function Home() {
</Button>
</section>
<section id="donation" className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<section id="donation" className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
<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>
@ -129,4 +129,4 @@ export default function Home() {
<Footer />
</div>
);
}
}

13
components/Header.tsx
View file

@ -134,15 +134,21 @@ export default function Header() {
const toggleMenu = () => setIsOpen(!isOpen);
return (
<header className="bg-gray-800 shadow-lg">
<nav className="container mx-auto px-4 py-4 flex justify-between items-center">
<header className="bg-gray-800 relative">
{isOpen && (
<div
className="fixed inset-0 backdrop-blur-md z-40 lg:hidden"
onClick={toggleMenu}
/>
)}
<nav className="container mx-auto px-4 py-4 flex justify-between items-center relative z-50">
<Link href="/" className="text-gray-300 hover:text-white text-2xl font-bold transition-all duration-300 hover:glow">
aidxn.cc
</Link>
<button onClick={toggleMenu} className="lg:hidden text-gray-300 focus:outline-hidden">
{isOpen ? <X className="text-2xl" /> : <Menu className="text-2xl" />}
</button>
<ul className={`flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4 absolute lg:static bg-gray-800 lg:bg-transparent w-full lg:w-auto left-0 lg:left-auto top-16 lg:top-auto p-4 lg:p-0 transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden lg:flex'}`}>
<ul className={`flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4 absolute lg:static bg-gray-800 lg:bg-transparent w-full lg:w-auto left-0 lg:left-auto top-full lg:top-auto p-4 lg:p-0 transition-all duration-300 ease-in-out z-50 ${isOpen ? 'flex' : 'hidden lg:flex'}`}>
<NavItem href="/" icon={House}>Home</NavItem>
<NavItem href="/about" icon={User}>About</NavItem>
<NavItem href="/ai" icon={Brain}>AI</NavItem>
@ -160,4 +166,3 @@ export default function Header() {
</header>
);
}

4
components/widgets/NowPlaying.tsx
View file

@ -272,7 +272,7 @@ const NowPlaying: React.FC = () => {
return (
<div className="flex justify-center items-center">
<div className="relative w-52 h-95 bg-[#D4C29A] rounded-xs shadow-2xl border border-[#BFAF8A]">
<div className="relative w-52 h-95 bg-[#D4C29A] rounded-xs border border-[#BFAF8A] z-10">
{/* Volume buttons */}
<div className="absolute -left-[2.55px] top-8 rounded-l w-[1.75px] flex flex-col z-0">
<div className="h-8 bg-[#BFAF8A] border-b border-[#A09070] rounded-l cursor-pointer" onClick={() => setVolume(v => Math.min(100, v + 5))}></div> {/* up */}
@ -379,4 +379,4 @@ const NowPlaying: React.FC = () => {
)
}
export default NowPlaying
export default NowPlaying

6
package.json
View file

@ -19,7 +19,7 @@
"next": "^15.5.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-i18next": "^15.7.1",
"react-i18next": "^15.7.2",
"react-icons": "^5.5.0",
"recharts": "^3.1.2",
"tailwind-merge": "^3.3.1",
@ -30,9 +30,9 @@
"@eslint/eslintrc": "^3.3.1",
"@tailwindcss/postcss": "^4.1.12",
"@types/node": "^20.19.11",
"@types/react": "^19.1.10",
"@types/react": "^19.1.11",
"@types/react-dom": "^19.1.7",
"eslint": "^9.33.0",
"eslint": "^9.34.0",
"eslint-config-next": "15.1.3",
"postcss": "^8.5.6",
"tailwindcss": "^4.1.12",