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

README.md

@@ -13,6 +13,8 @@ It's built with Next.js and Tailwind CSS. aidxnCC will always be a work in progr
 
 To deploy with Vercel, simply click the button above. When prompted for environment variables, see the section below.
 
+**Own a server? Deploy on your own!** F*** Vercel, check out [Coolify](https://coolify.io/), a free and open-source alternative to Vercel. 
+
 ## Contributing
 
 Any and all contributions are welcome! Simply create a pull request and I should have a response to you within a day.

app/phone/page.tsx

@@ -0,0 +1,250 @@
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import { Smartphone, Cpu, MemoryStick, HardDrive, Hash, Hammer, Music, Folder, Layers, SquarePen } from "lucide-react"
+import { FaGoogle, FaYoutube } from "react-icons/fa"
+import { VscTerminalLinux } from "react-icons/vsc"
+import { MdOutlineAndroid } from "react-icons/md"
+import { LuPackageOpen } from "react-icons/lu"
+import { RiTelegram2Fill } from "react-icons/ri"
+import Image from "next/image"
+import Link from "next/link"
+import { FaStarHalfStroke, FaStar } from "react-icons/fa6"
+
+export default function About() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="grow container mx-auto px-2 sm:px-4 py-8 md:py-12">
+        <div className="max-w-2xl mx-auto text-center">
+          <div className="mb-6 flex justify-center">
+            <Smartphone 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 Phone
+          </h1>
+        </div>
+        <div className="px-2 sm:px-6 pt-6">
+          <div className="flex flex-col lg:flex-row items-start gap-6 md:gap-8">
+            <div className="w-full max-w-sm mx-auto lg:mx-0">
+              <Image
+                src="/img/cheetah.png"
+                alt="Google Pixel 7 Pro (cheetah)"
+                width={450}
+                height={450}
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
+              <div className="w-full text-center lg:text-left">
+                <h1 className="text-4xl font-semibold mt-3 text-gray-200 flex items-center justify-center lg:justify-start">
+                  <FaGoogle size={30} className="mr-2" />
+                  Pixel 7 Pro
+                </h1>
+                <h3 className="text-xl font-semibold mb-4 text-slate-500">cheetah</h3>
+                <hr />
+                <h1 className="text-3xl font-semibold my-3 text-gray-200 flex items-center justify-center lg:justify-start">
+                  <Cpu className="mr-2" />
+                  Specifications
+                </h1>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <Cpu className="mr-2" size={20} />
+                  <b className="mr-1">CPU:</b> Google Tensor G2
+                </p>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <HardDrive className="mr-2" size={20} />
+                  <b className="mr-1">Storage:</b> 128GB
+                </p>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <MemoryStick className="mr-2" size={20} />
+                  <b className="mr-1">RAM:</b> 12GB
+                </p>
+                <hr className="mt-4" />
+                <h1 className="text-3xl font-semibold my-3 text-gray-200 flex items-center justify-center lg:justify-start">
+                  <Hash className="mr-2" />
+                  Modifications
+                </h1>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <VscTerminalLinux className="mr-2" size={20} />
+                  <b className="mr-1">Kernel:</b>
+                  <Link
+                    className="underline hover:glow transition-all"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://github.com/WildPlusKernel/GKI_KernelSU_SUSFS/"
+                  >
+                    android13-5.10.WILD
+                  </Link>
+                </p>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <MdOutlineAndroid className="mr-2" size={20} />
+                  <b className="mr-1">ROM:</b>
+                  <Link
+                    className="underline hover:glow transition-all"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://axionaosp.github.io"
+                  >
+                    AxionAOSP v1.1
+                  </Link>
+                </p>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <Hammer className="mr-2" size={20} />
+                  <b className="mr-1">Root:</b>
+                  <Link
+                    className="underline hover:glow transition-all"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://github.com/rifsxd/KernelSU-Next"
+                  >
+                    KernelSU-Next
+                  </Link>
+                </p>
+              </div>
+              <div className="w-full mt-8 lg:mt-0 text-center lg:text-left lg:ml-8">
+                <h1 className="text-3xl font-semibold my-3 text-gray-200 flex items-center justify-center lg:justify-start">
+                  <LuPackageOpen className="mr-2" />
+                  Apps
+                </h1>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <Music className="mr-2" size={20} />
+                  <b className="mr-1">Music:</b>
+                  <Link
+                    className="underline hover:glow transition-all"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://qobuz.com"
+                  >
+                    Qobuz
+                  </Link>
+                </p>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <Folder className="mr-2" size={20} />
+                  <b className="mr-1">Files:</b>
+                  <Link
+                    className="underline hover:glow transition-all"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://mixplorer.com/"
+                  >
+                    MiXplorer Beta
+                  </Link>
+                </p>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <RiTelegram2Fill className="mr-2" size={20} />
+                  <b className="mr-1">Telegram:</b>
+                  <Link
+                    className="underline hover:glow transition-all"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://github.com/arslan4k1390/Cherrygram"
+                  >
+                    Cherrygram
+                  </Link>
+                </p>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <FaYoutube className="mr-2" size={20} />
+                  <b className="mr-1">YouTube:</b>
+                  <Link
+                    className="underline hover:glow transition-all"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://github.com/NoName-exe/revanced-extended"
+                  >
+                    ReVanced Extended
+                  </Link>
+                </p>
+                <hr className="mt-4" />
+                <h1 className="text-3xl font-semibold my-3 text-gray-200 flex items-center justify-center lg:justify-start">
+                  <Layers className="mr-2" />
+                  Modules
+                </h1>
+                <ul className="list-disc list-inside space-y-1">
+                  <li className="mb-0.5">
+                    <Link
+                      className="underline hover:glow transition-all"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://github.com/chiteroman/PlayIntegrityFix"
+                    >
+                      Play Integrity Fix
+                    </Link>
+                  </li>
+                  <li className="mb-0.5">
+                    <Link
+                      className="underline hover:glow transition-all"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://github.com/5ec1cff/TrickyStore"
+                    >
+                      Tricky Store
+                    </Link>
+                  </li>
+                  <li className="mb-0.5">
+                    <Link
+                      className="underline hover:glow transition-all"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://github.com/LSPosed/LSPosed.github.io/releases"
+                    >
+                      Shamiko
+                    </Link>
+                  </li>
+                  <li className="mb-0.5">
+                    <Link
+                      className="underline hover:glow transition-all"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://github.com/mywalkb/LSPosed_mod/releases"
+                    >
+                      LSPosed_mod
+                    </Link>
+                  </li>
+                  <li className="mb-0.5">
+                    <Link
+                      className="underline hover:glow transition-all"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://github.com/Dr-TSNG/ZygiskNext"
+                    >
+                      Zygisk Next
+                    </Link>
+                  </li>
+                  <li className="mb-0.5">
+                    <Link
+                      className="underline hover:glow transition-all"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://github.com/sidex15/susfs4ksu-module"
+                    >
+                      SUSFS for KernelSU
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+              <div className="w-full mt-8 lg:mt-0 text-center lg:text-left lg:ml-8">
+                <h1 className="text-3xl font-semibold my-3 text-gray-200 flex items-center justify-center lg:justify-start">
+                  <SquarePen className="mr-2" />
+                  Review
+                </h1>
+                <p className="mb-1 flex items-center justify-center lg:justify-start">
+                  <b className="mr-1">Rating:</b>
+                  <FaStar size={15} /> <FaStar size={15} /> <FaStar size={15} /> <FaStar size={15} />{" "}
+                  <FaStarHalfStroke size={15} />
+                </p>
+                <p className="max-w-sm">
+                  I have really enjoyed using this phone in my daily life, and it has been the perfect companion, in
+                  comparison to my previous phone.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}
+

components/Footer.tsx

@@ -1,13 +1,25 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { TbCopyrightOff } from "react-icons/tb"
-import { faHeart } from '@fortawesome/free-solid-svg-icons';
+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">
+    <footer className="bg-gray-800 text-gray-400 py-4">
-      <div className="container mx-auto px-4 text-center">
+      <div className="flex flex-col sm:flex-row container mx-auto px-4 text-center items-center justify-center">
-        <a href="https://git.pontusmail.org/aidan/aidxnCC" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
+        <Link href="https://git.pontusmail.org/aidan/aidxnCC" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors mb-2 sm:mb-0">
-          <FontAwesomeIcon icon={faHeart} className="text-md mr-1" /> This website is free, open source and in the public domain.
+          <div className="flex items-center justify-center">
-        </a>
+            <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://disfunction.blog" icon={Rss}>Blog</NavItem>
-            <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>
         </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>

package.json

@@ -19,6 +19,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-fast-marquee": "^1.6.5",
+    "react-icons": "^5.5.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {