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

header improvements, add error handling for images on about page, update deps

Browse Source
This commit is contained in:
Aidan 2025-01-11 00:08:47 -05:00
parent c32abf7eba
commit 1950e8fca9
5 changed files with 79 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/components/Header.tsx
View File

@ -6,34 +6,45 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWordpressSimple } from '@fortawesome/free-brands-svg-icons'; import { faWordpressSimple } from '@fortawesome/free-brands-svg-icons';
import { faLink, faHouse, faUser, faPhone, faBars, faTimes, faTerminal, faMusic } from '@fortawesome/free-solid-svg-icons'; import { faLink, faHouse, faUser, faPhone, faBars, faTimes, faTerminal, faMusic } from '@fortawesome/free-solid-svg-icons';
interface NavItemProps {
href: string;
icon: any;
children: React.ReactNode;
}
const NavItem = ({ href, icon, children }: NavItemProps) => (
<li>
<Link href={href} className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all duration-300">
<FontAwesomeIcon icon={icon} className="text-md mr-2" />
{children}
</Link>
</li>
);
export default function Header() { export default function Header() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const toggleMenu = () => { const toggleMenu = () => setIsOpen(!isOpen);
setIsOpen(!isOpen);
};
return ( return (
<header className="bg-gray-800"> <header className="bg-gray-800 shadow-lg">
<nav className="container mx-auto px-4 py-6 flex justify-between items-center"> <nav className="container mx-auto px-4 py-4 flex justify-between items-center">
<Link href="/" className="text-gray-300 hover:text-white text-2xl">aidxn.cc</Link> <Link href="/" className="text-gray-300 hover:text-white text-2xl font-bold transition-all duration-300 hover:glow">
<div className="md:hidden"> aidxn.cc
<button onClick={toggleMenu} className="text-gray-300 focus:outline-none"> </Link>
<FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-2xl" /> <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-none">
</button> <FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-2xl" />
</div> </button>
<ul className={`flex-col md:flex-row md:flex space-x-0 md:space-x-3 absolute md:static bg-gray-800 md:bg-transparent w-full md:w-auto left-0 md:left-auto top-16 md:top-auto transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden'}`}> <ul className={`flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 absolute md:static bg-gray-800 md:bg-transparent w-full md:w-auto left-0 md:left-auto top-16 md:top-auto p-4 md:p-0 transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden md:flex'}`}>
<li><Link href="/" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faHouse} className="text-md mr-2" /> Home</Link></li> <NavItem href="/" icon={faHouse}>Home</NavItem>
<li><Link href="/about" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faUser} className="text-md mr-2" /> About</Link></li> <NavItem href="/about" icon={faUser}>About</NavItem>
<li><Link href="/contact" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faPhone} className="text-md mr-2" /> Contact</Link></li> <NavItem href="/contact" icon={faPhone}>Contact</NavItem>
<li><Link href="/domains" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faLink} className="text-md mr-2" /> Domains</Link></li> <NavItem href="/domains" icon={faLink}>Domains</NavItem>
<li><Link href="https://blog.aidxn.fun/" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faWordpressSimple} className="text-md mr-2" /> Blog</Link></li> <NavItem href="https://blog.aidxn.fun/" icon={faWordpressSimple}>Blog</NavItem>
<li><Link href="/music" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faMusic} className="text-md mr-2" /> Music by Time</Link></li> <NavItem href="/music" icon={faMusic}>Music by Time</NavItem>
<li className="flex items-center"> <li className="flex items-center">
<Link href="https://tilde.club/~lxu" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"> <NavItem href="https://tilde.club/~lxu" icon={faTerminal}>Tilde</NavItem>
<FontAwesomeIcon icon={faTerminal} className="text-md mr-2" /> Tilde <a href="https://tilde.wiki/Tildeverse" className="text-gray-300 hover:text-green-400 ml-1 text-sm" target="_blank" rel="noopener noreferrer">
</Link>
<a href="https://tilde.wiki/Tildeverse" className="text-gray-300 hover:text-green-400 ml-1" target="_blank" rel="noopener noreferrer">
<sup>what?</sup> <sup>what?</sup>
</a> </a>
</li> </li>
@ -42,3 +53,4 @@ export default function Header() {
</header> </header>
); );
} }

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

@ -1,9 +1,13 @@
"use client"
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 '../widgets/GitHubFeatured' import GitHubFeatured from '../widgets/GitHubFeatured'
import Image from 'next/image' import { useState } from 'react'
export default function About() { export default function About() {
const [imageError, setImageError] = useState(false);
return ( return (
<div className="max-w-2xl mx-auto text-center"> <div className="max-w-2xl mx-auto text-center">
<FontAwesomeIcon icon={faUser} className="text-6xl mb-6" /> <FontAwesomeIcon icon={faUser} className="text-6xl mb-6" />
@ -29,10 +33,28 @@ export default function About() {
<div className="mt-12"> <div className="mt-12">
<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"> {!imageError && (
<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" /> <div className="flex flex-col md:flex-row justify-center gap-4">
<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" /> <img
</div> 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"
onError={() => setImageError(true)}
loading="eager"
/>
<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"
width={500}
height={200}
className="w-full md:w-1/3"
onError={() => setImageError(true)}
loading="eager"
/>
</div>
)}
</div> </div>
<div className="mt-12"> <div className="mt-12">
<h2 className="text-2xl font-semibold mb-4 text-gray-200">Featured Projects</h2> <h2 className="text-2xl font-semibold mb-4 text-gray-200">Featured Projects</h2>

23
app/globals.css
View File

@ -24,16 +24,6 @@ body {
} }
} }
.rounded-full {
border-radius: 9999px;
}
.transition-colors {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -42,3 +32,16 @@ html {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
} }
@keyframes pulse-glow {
0%, 100% {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
50% {
text-shadow: 0 0 20px rgba(255, 255, 255, 1);
}
}
.hover\:glow:hover {
animation: pulse-glow 2s infinite;
}

1
next.config.ts
View File

@ -22,6 +22,7 @@ const nextConfig: NextConfig = {
pathname: '/**', pathname: '/**',
}, },
], ],
dangerouslyAllowSVG: true,
}, },
}; };

6
package.json
View File

@ -22,13 +22,13 @@
"react-dom": "^19.0.0" "react-dom": "^19.0.0"
}, },
"devDependencies": { "devDependencies": {
"typescript": "^5.7.2", "typescript": "^5.7.3",
"@types/node": "^20.17.12", "@types/node": "^20.17.12",
"@types/react": "^19.0.3", "@types/react": "^19.0.4",
"@types/react-dom": "^19.0.2", "@types/react-dom": "^19.0.2",
"postcss": "^8.4.49", "postcss": "^8.4.49",
"tailwindcss": "^3.4.17", "tailwindcss": "^3.4.17",
"eslint": "^9.17.0", "eslint": "^9.18.0",
"eslint-config-next": "15.1.3", "eslint-config-next": "15.1.3",
"@eslint/eslintrc": "^3.2.0" "@eslint/eslintrc": "^3.2.0"
}, },