migrate from fontawesome to lucide-react (i hate fontawesome now), add manifesto from old website (w/ edits), improve function names

app/components/Header.tsx

@@ -1,22 +1,19 @@
 "use client";
 
-import { useState } from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
-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';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { House, Link as LinkIcon, User, Phone, BookOpen, Rss, Music, SquareTerminal, X, Menu } from 'lucide-react';
 
 interface NavItemProps {
   href: string;
-  icon: IconDefinition;
+  icon: React.ElementType;
   children: React.ReactNode;
 }
 
 const NavItem = ({ href, icon, children }: NavItemProps) => (
   <div className="nav-item">
     <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" />
+      {React.createElement(icon, { className: "text-md mr-2", strokeWidth: 2.5, size: 20 })}
       {children}
     </Link>
   </div>
@@ -34,17 +31,18 @@ export default function Header() {
           aidxn.cc
         </Link>
         <button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-none">
-          <FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-2xl" />
+          {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'}`}>
-          <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>
+          <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="https://blog.aidxn.fun/" icon={Rss}>Blog</NavItem>
+          <NavItem href="/music" icon={Music}>Music by Time</NavItem>
           <div className="flex items-center">
-            <NavItem href="https://tilde.club/~lxu" icon={faTerminal}>Tilde</NavItem>
+            <NavItem href="https://tilde.club/~lxu" icon={SquareTerminal}>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>

app/components/pages/About.tsx

@@ -1,7 +1,6 @@
 "use client"
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { User } from 'lucide-react'
 import FeaturedRepos from '../widgets/FeaturedRepos'
 import Image from 'next/image'
 import { useState } from 'react'
@@ -12,7 +11,9 @@ export default function About() {
 
   return (
     <div className="max-w-2xl mx-auto text-center">
-      <FontAwesomeIcon icon={faUser} className="text-6xl mb-6" />
+      <div className='mb-6 flex justify-center'>
+        <User size={60} />
+      </div>
       <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
         About Me
       </h1>

app/components/pages/Contact.tsx

@@ -1,12 +1,14 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPhone, faEnvelope } from '@fortawesome/free-solid-svg-icons'
 import { faGithub, faTelegram } from '@fortawesome/free-brands-svg-icons'
+import { Phone } from 'lucide-react'
 import ContactButton from '../objects/ContactButton'
 
 export default function Contact() {
   return (
     <div className="max-w-2xl mx-auto text-center">
-      <FontAwesomeIcon icon={faPhone} className="text-6xl mb-6" />
+      <div className='mb-6 flex justify-center'>
+        <Phone size={60} />
+      </div>
       <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
         Contact
       </h1>

app/components/pages/Domains.tsx

@@ -1,11 +1,12 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { Link } from 'lucide-react'
 import domains from '../../../public/data/domains.json'
 
 export default function About() {
   return (
     <div className="max-w-2xl mx-auto text-center">
-      <FontAwesomeIcon icon={faLink} className="text-6xl mb-6" />
+      <div className='mb-6 flex justify-center'>
+        <Link size={60} />
+      </div>
       <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
         My Domains
       </h1>

app/components/pages/Manifesto.tsx

@@ -0,0 +1,63 @@
+import { BookOpen } from 'lucide-react'
+
+export default function About() {
+  return (
+    <div className="max-w-2xl mx-auto text-center">
+      <div className='mb-6 flex justify-center'>
+        <BookOpen size={60} />
+      </div>
+      <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
+        Manifesto
+      </h1>
+      <div className="px-6 pt-6">
+        <h2 className="text-2xl font-semibold mb-4 text-gray-200">
+          1. Empathy and Understanding
+        </h2>
+        <p className="text-gray-300 mb-4">
+          We live in a distant world. People I meet are from all over, which can be hard to understand for others. I aim to utilize my ability to connect by understanding and getting interested in people&apos;s lives. I pledge to:
+        </p>
+        <ul className="list-disc list-inside text-left text-gray-300 mt-8 mb-4">
+          <li>Listen deeply and genuinely</li>
+          <li>Suspend judgment and seek to understand</li>
+          <li>Recognize the humanity in every digital interaction</li>
+        </ul>
+        <h2 className="text-2xl font-semibold mb-4 mt-12 text-gray-200">
+          2. Unconditional Sharing!
+        </h2>
+        <p className="text-gray-300 mb-4">
+          Information should be free and accessible to all. I will:
+        </p>
+        <ul className="list-disc list-inside text-left text-gray-300 mt-8 mb-4">
+          <li>Make all of my work free and accessible to all (e.g. public domain Wikipedia contributions)</li>
+          <li>Creating and sharing content for others benefit</li>
+          <li>Supporting open-source principles</li>
+          <li>Creating extensive documentation on all of my projects</li>
+        </ul>
+        <h2 className="text-2xl font-semibold mb-4 mt-12 text-gray-200">
+          3. Genuine Human Connection
+        </h2>
+        <p className="text-gray-300 mb-4">
+          I aim to create a genuine human connection with all people I meet, regardless of who or where they are from.
+        </p>
+        <h2 className="text-2xl font-semibold mb-4 mt-12 text-gray-200">
+          4. Privacy & Self-Hosted Services
+        </h2>
+        <p className="text-gray-300 mb-4">
+          In terms of my personal (some public) services, I commit to never selling, viewing or share personal information with third parties or myself. I will:
+        </p>
+        <ul className="list-disc list-inside text-left text-gray-300 mt-8 mb-4">
+          <li>Respect user data as a fundamental human right</li>
+          <li>Not implement tracking and/or monetization in my services</li>
+          <li>Focus my services to focus on being free and open</li>
+          <li>Suggest/support technologies that help privacy</li>
+        </ul>
+        <h2 className="text-2xl font-semibold mb-4 mt-12 text-gray-200">
+          I Commit
+        </h2>
+        <p className="text-gray-300 mb-4">
+          I am not perfect, that&apos;s for sure, but I am committed. I promise to continuously learn, grow, and adapt to my environment, goals, purpose, and the people around me.
+        </p>
+      </div>
+    </div>
+  )
+}

app/manifesto/page.tsx

@@ -0,0 +1,15 @@
+import Header from '../components/Header'
+import ManifestoPg from '../components/pages/Manifesto'
+import Footer from '../components/Footer'
+
+export default function Manifesto() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-grow container mx-auto px-4 py-12">
+        <ManifestoPg />
+      </main>
+      <Footer />
+    </div>
+  )
+}

app/time-periods/early-summer-2024/page.tsx

@@ -2,7 +2,7 @@ import Header from '../../components/Header'
 import WhatWasGoingOn from '../../components/pages/time-periods/early-summer-2024/WhatWasGoingOn'
 import Footer from '../../components/Footer'
 
-export default function Music() {
+export default function EarlySummer2024() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />

app/time-periods/late-summer-2024/page.tsx

@@ -2,7 +2,7 @@ import Header from '../../components/Header'
 import WhatWasGoingOn from '../../components/pages/time-periods/late-summer-2024/WhatWasGoingOn'
 import Footer from '../../components/Footer'
 
-export default function Music() {
+export default function LateSummer2024() {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />