style/fix: fix header for mobile, add phone page and links, update footer style, update readme, replace tilde with blog

components/Footer.tsx

@@ -1,13 +1,25 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHeart } from '@fortawesome/free-solid-svg-icons';
+import { TbCopyrightOff } from "react-icons/tb"
+import { RxDividerVertical } from "react-icons/rx"
+import { SiNextdotjs } from "react-icons/si"
+import Link from 'next/link'
 
 export default function Footer() {
   return (
-    <footer className="bg-gray-800 py-6">
-      <div className="container mx-auto px-4 text-center">
-        <a href="https://git.pontusmail.org/aidan/aidxnCC" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
-          <FontAwesomeIcon icon={faHeart} className="text-md mr-1" /> This website is free, open source and in the public domain.
-        </a>
+    <footer className="bg-gray-800 text-gray-400 py-4">
+      <div className="flex flex-col sm:flex-row container mx-auto px-4 text-center items-center justify-center">
+        <Link href="https://git.pontusmail.org/aidan/aidxnCC" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors mb-2 sm:mb-0">
+          <div className="flex items-center justify-center">
+            <TbCopyrightOff className="text-md mr-2" />
+            Open Source and Copyright-Free
+          </div>
+        </Link>
+        <RxDividerVertical className="hidden sm:block mx-4"/>
+        <Link href="https://nextjs.org" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors mb-2 sm:mb-0">
+          <div className="flex items-center justify-center">
+            <SiNextdotjs className="text-md mr-2" />
+            Built with Next.js
+          </div>
+        </Link>
       </div>
     </footer>
   )

components/Header.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import Link from 'next/link';
-import { House, Link as LinkIcon, User, Phone, BookOpen, Music, Users, X, Menu } from 'lucide-react';
+import { House, Link as LinkIcon, User, Phone, BookOpen, Music, Rss, X, Menu } from 'lucide-react';
 
 interface NavItemProps {
   href: string;
@@ -30,22 +30,17 @@ export default function Header() {
         <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-hidden">
+        <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 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'}`}>
+        <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'}`}>
           <NavItem href="/" icon={House}>Home</NavItem>
           <NavItem href="/about" icon={User}>About</NavItem>
           <NavItem href="/contact" icon={Phone}>Contact</NavItem>
           <NavItem href="/domains" icon={LinkIcon}>Domains</NavItem>
           <NavItem href="/manifesto" icon={BookOpen}>Manifesto</NavItem>
           <NavItem href="/music" icon={Music}>Music</NavItem>
-          <div className="flex items-center">
-            <NavItem href="https://tilde.club/~lxu" icon={Users}>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>
-          </div>
+          <NavItem href="https://disfunction.blog" icon={Rss}>Blog</NavItem>
         </ul>
       </nav>
     </header>

components/pages/About.tsx

@@ -5,6 +5,7 @@ import FeaturedRepos from '../widgets/FeaturedRepos'
 import Image from 'next/image'
 import { useState } from 'react'
 import Link from 'next/link'
+import Button from '../objects/Button'
 
 export default function About() {
   const [imageError, setImageError] = useState(false);
@@ -45,6 +46,14 @@ export default function About() {
           My Google Pixel 7 Pro (cheetah) runs LineageOS 22.1, and has been one of my favorite additions to my life. It is proudly rooted with KernelSU-Next. It has suffered one drop to it's back on a tile floor.
         </p>
       </div>
+      <div className="mt-12">
+        <h2 className="text-2xl font-semibold mb-4 text-gray-200">Devices</h2>
+        <p className="text-gray-300 mb-4">You can learn more about the devices I use daily with the pages below:</p>
+        <Button
+          href="/phone"
+          label="My Phone"
+        />
+      </div>
       <div className="mt-12">
         <h2 className="text-2xl font-semibold mb-4 text-gray-200">My Gitea/GitHub Contributions</h2>
         <p className="text-gray-300 mb-4">Most of my repositories have migrated to <Link href="https://git.pontusmail.org/" className="text-blue-400 hover:underline">LibreCloud Git</Link>. My username is <Link href="https://git.pontusmail.org/aidan/" className="text-blue-400 hover:underline">aidan</Link>.</p>