header improvements, add error handling for images on about page, update deps
This commit is contained in:
parent
c32abf7eba
commit
1950e8fca9
@ -6,34 +6,45 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faWordpressSimple } from '@fortawesome/free-brands-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() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const toggleMenu = () => {
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
const toggleMenu = () => setIsOpen(!isOpen);
|
||||
|
||||
return (
|
||||
<header className="bg-gray-800">
|
||||
<nav className="container mx-auto px-4 py-6 flex justify-between items-center">
|
||||
<Link href="/" className="text-gray-300 hover:text-white text-2xl">aidxn.cc</Link>
|
||||
<div className="md:hidden">
|
||||
<button onClick={toggleMenu} className="text-gray-300 focus:outline-none">
|
||||
<FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-2xl" />
|
||||
</button>
|
||||
</div>
|
||||
<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'}`}>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<header className="bg-gray-800 shadow-lg">
|
||||
<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 font-bold transition-all duration-300 hover:glow">
|
||||
aidxn.cc
|
||||
</Link>
|
||||
<button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-none">
|
||||
<FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-2xl" />
|
||||
</button>
|
||||
<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'}`}>
|
||||
<NavItem href="/" icon={faHouse}>Home</NavItem>
|
||||
<NavItem href="/about" icon={faUser}>About</NavItem>
|
||||
<NavItem href="/contact" icon={faPhone}>Contact</NavItem>
|
||||
<NavItem href="/domains" icon={faLink}>Domains</NavItem>
|
||||
<NavItem href="https://blog.aidxn.fun/" icon={faWordpressSimple}>Blog</NavItem>
|
||||
<NavItem href="/music" icon={faMusic}>Music by Time</NavItem>
|
||||
<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">
|
||||
<FontAwesomeIcon icon={faTerminal} className="text-md mr-2" /> Tilde
|
||||
</Link>
|
||||
<a href="https://tilde.wiki/Tildeverse" className="text-gray-300 hover:text-green-400 ml-1" target="_blank" rel="noopener noreferrer">
|
||||
<NavItem href="https://tilde.club/~lxu" icon={faTerminal}>Tilde</NavItem>
|
||||
<a href="https://tilde.wiki/Tildeverse" className="text-gray-300 hover:text-green-400 ml-1 text-sm" target="_blank" rel="noopener noreferrer">
|
||||
<sup>what?</sup>
|
||||
</a>
|
||||
</li>
|
||||
@ -41,4 +52,5 @@ export default function Header() {
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
"use client"
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faUser } from '@fortawesome/free-solid-svg-icons'
|
||||
import GitHubFeatured from '../widgets/GitHubFeatured'
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function About() {
|
||||
const [imageError, setImageError] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<FontAwesomeIcon icon={faUser} className="text-6xl mb-6" />
|
||||
@ -29,10 +33,28 @@ export default function About() {
|
||||
<div className="mt-12">
|
||||
<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>
|
||||
<div className="flex flex-col md:flex-row justify-center gap-4">
|
||||
<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" />
|
||||
<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" />
|
||||
</div>
|
||||
{!imageError && (
|
||||
<div className="flex flex-col md:flex-row justify-center gap-4">
|
||||
<img
|
||||
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 className="mt-12">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-gray-200">Featured Projects</h2>
|
||||
|
||||
@ -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 {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@ -42,3 +32,16 @@ html {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -22,6 +22,7 @@ const nextConfig: NextConfig = {
|
||||
pathname: '/**',
|
||||
},
|
||||
],
|
||||
dangerouslyAllowSVG: true,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -22,13 +22,13 @@
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.7.2",
|
||||
"typescript": "^5.7.3",
|
||||
"@types/node": "^20.17.12",
|
||||
"@types/react": "^19.0.3",
|
||||
"@types/react": "^19.0.4",
|
||||
"@types/react-dom": "^19.0.2",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint": "^9.18.0",
|
||||
"eslint-config-next": "15.1.3",
|
||||
"@eslint/eslintrc": "^3.2.0"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user