Add more projects

src/app/page.tsx

@@ -3,6 +3,11 @@ import { PFPName } from "~/components/general/pfpname";
 import AboutMe from "~/components/general/aboutme";
 import TechChart from "~/components/general/techchart";
 import TechTracker from "~/components/projects/techtracker";
+import Sunhat from "~/components/projects/sunhat";
+import WiredWorld from "~/components/projects/wiredworld";
+import Fuse from "~/components/projects/fuse";
+import LazyPrimeagen from "~/components/projects/lazyprimeagen";
+import TenantPortal from "~/components/projects/tenantportal";
 //import Image from "next/image";
 //import Link from "next/link";
 
@@ -11,14 +16,19 @@ export default function HomePage() {
     <main className="min-h-screen">
       <div className="flex flex-row items-end justify-end">
         <div className="mr-8 mt-6">
-          <ThemeToggle />
+          < ThemeToggle />
         </div>
       </div>
-      <PFPName />
-      <AboutMe />
-      <TechChart />
+      < PFPName />
+      < AboutMe />
+      < TechChart />
       <h1 className="text-3xl font-semibold text-center my-8">Projects</h1>
-      <TechTracker />
+      < TechTracker />
+      < Fuse />
+      < Sunhat />
+      < TenantPortal />
+      < WiredWorld />
+      < LazyPrimeagen />
     </main>
   );
 }

src/components/general/techchart.tsx

@@ -18,6 +18,7 @@ const chartData = [
   { technology: "TypeScript", proficiency: 85 },
   { technology: "Next.js", proficiency: 80 },
   { technology: "React", proficiency: 80 },
+  { technology: "SQL", proficiency: 80 },
   { technology: "React Native", proficiency: 75 },
   { technology: "Java", proficiency: 75 },
   { technology: "PHP", proficiency: 70 },
@@ -34,7 +35,7 @@ const chartConfig = {
 
 export default function Component() {
   return (
-    <Card className="max-w-xl mx-auto">
+    <Card className="max-w-2xl mx-auto">
       <CardHeader/>
       <CardContent>
         <ChartContainer config={chartConfig}>
@@ -63,7 +64,7 @@ export default function Component() {
               type="category"
               tickLine={false}
               axisLine={false}
-              width={90}
+              width={100}
             />
             <ChartTooltip
               cursor={false}

src/components/projects/fuse.tsx

@@ -0,0 +1,49 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion"
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+
+export default function Fuse() {
+  return (
+    <section className="my-6 flex flex-col items-center justify-center m-auto">
+      <Accordion type="single" collapsible className="w-1/3">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>
+            <div className="flex flex-row mx-auto">
+              <h1 className="text-2xl font-semibold text-center mx-auto">
+                Fuse (React Native, Next.js, & PostgreSQL)
+              </h1>
+              <Link href="https://git.gbrown.org/gib/fuse_expo"
+                className="my-auto"
+              >
+                < FaGithub className="my-auto ml-2" size={22} />
+              </Link>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="flex flex-col">
+              <p className="indent-4">
+                Fuse is an Expo Application that served as a way to learn React
+                Native. This application was made for my girlfriend & I in order to send
+                each other messages, as well as provide a countdown timer for the next
+                time we would be together, as we are in a long distance relationship.
+                This application uses API&apos;s provided by a ‎ 
+                <Link href="https://ismadelinethecutest.gibbyb.com"
+                  className="underline hover:text-blue-500"
+                >
+                   Next.js Web Application I also made for my girlfriend.
+                </Link>
+                ‎ This Web Application connect to a PostgreSQL
+                Database & is also self-hosted using a Docker Container.
+              </p>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </section>
+  );
+};

src/components/projects/lazyprimeagen.tsx

@@ -0,0 +1,41 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion"
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+
+export default function LazyPrimeagen() {
+  return (
+    <section className="my-6 flex flex-col items-center justify-center m-auto">
+      <Accordion type="single" collapsible className="w-1/3">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>
+            <div className="flex flex-row mx-auto">
+              <h1 className="text-2xl font-semibold text-center mx-auto">
+                Lazy Primeagen Neovim Config (Lua)
+              </h1>
+              <Link href="https://github.com/gibbyb/Lazy_Primeagen"
+                className="my-auto"
+              >
+                < FaGithub className="my-auto ml-2" size={22} />
+              </Link>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="flex flex-col items-center justify-center">
+              <p className="indent-4 items-center justify-center">
+                Lazy Primeagen is simply ThePrimeagen&apos;s Neovim Config, but with the 
+                deprecated Packer.nvim replaced with Lazy.nvim. This project is meant
+                to be exactly the same as ThePrimeagen&apos;s Neovim Config, just with Lazy.nvim
+                instead of Packer.nvim.
+              </p>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </section>
+  );
+};

src/components/projects/sunhat.tsx

@@ -0,0 +1,41 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion"
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+
+export default function Sunhat() {
+  return (
+    <section className="my-6 flex flex-col items-center justify-center m-auto">
+      <Accordion type="single" collapsible className="w-1/3">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>
+            <div className="flex flex-row mx-auto">
+              <h1 className="text-2xl font-semibold text-center mx-auto">Sunhat (Bash)</h1>
+              <Link href="https://git.gbrown.org/gib/sunhat"
+                className="my-auto"
+              >
+                < FaGithub className="my-auto ml-2" size={22} />
+              </Link>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="flex flex-col">
+              <p className="indent-4">
+                Sunhat is a fork of DHH&apos;s Omakub, an opinionated Ubuntu setup that
+                I have contributed to in the past. Sunhat is a complete rewrite as it
+                supports Fedora rather than Ubuntu. This project serves as my own personal
+                Fedora setup script, but provides a lot of wisdom to newcomers in the
+                Fedora / Linux community.
+              </p>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+
+    </section>
+  );
+};

src/components/projects/techtracker.tsx

@@ -13,7 +13,7 @@ export default function TechTracker() {
       <Accordion type="single" collapsible className="w-1/3">
         <AccordionItem value="item-1">
           <AccordionTrigger>
-            <h1 className="text-2xl font-semibold text-center mx-auto">Tech Tracker</h1>
+            <h1 className="text-2xl font-semibold text-center mx-auto">Tech Tracker (Next.js, Swift & MySQL)</h1>
           </AccordionTrigger>
           <AccordionContent>
             <div className="flex flex-col">
@@ -23,7 +23,9 @@ export default function TechTracker() {
                     Tech Tracker Web Application
                   </h2>
                 </Link>
-                <Link href="https://git.gbrown.org/gib/Tech_Tracker_Web">
+                <Link href="https://git.gbrown.org/gib/Tech_Tracker_Web"
+                  className="my-auto"
+                  >
                   < FaGithub className="my-auto ml-2" size={22} />
                 </Link>
               </div>
@@ -46,7 +48,9 @@ export default function TechTracker() {
                 <h2 className="text-lg font-semibold text-center">
                   Tech Tracker Native iOS Application
                 </h2>
-                <Link href="https://git.gbrown.org/gib/Tech_Tracker_iOS">
+                <Link href="https://git.gbrown.org/gib/Tech_Tracker_iOS"
+                  className="my-auto"
+                >
                   < FaGithub className="my-auto ml-2" size={22} />
                 </Link>
               </div>

src/components/projects/tenantportal.tsx

@@ -0,0 +1,53 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion"
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+
+export default function TenantPortal() {
+  return (
+    <section className="my-6 flex flex-col items-center justify-center m-auto">
+      <Accordion type="single" collapsible className="w-1/3">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>
+            <div className="flex flex-row mx-auto">
+              <h1 className="text-2xl font-semibold text-center mx-auto">
+                Tenant Portal (Next.js & PostgreSQL)
+              </h1>
+              <Link href="https://git.gbrown.org/gib/rent_portal"
+                className="my-auto"
+              >
+                < FaGithub className="my-auto ml-2" size={22} />
+              </Link>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="flex flex-col items-center justify-center">
+              <div className="flex flex-row my-4 mx-auto">
+                <Link href="https://tenantportal.gibbyb.com">
+                  <h2 className="text-lg font-semibold text-center underline hover:text-blue-500">
+                    Tenant Portal Website
+                  </h2>
+                </Link>
+              </div>
+              <p className="indent-4 items-center justify-center">
+                Tenant Portal is a Next.js Web Application that is a work in progress,
+                but will serve as an interface for future tenants of the company I rent
+                from. This application currently is only used by myself & my roommate,
+                as we continue to beta test the application & as I continue to develop it.
+              </p>
+              <p className="indent-4 items-center justify-center">
+                This web application uses the T3 Stack which includes Next.js, TypeScript,
+                TailwindCSS, Auth.js, PostgreSQL, Drizzle, & Shadcnui.
+              </p>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+
+    </section>
+  );
+};

src/components/projects/wiredworld.tsx

@@ -0,0 +1,48 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion"
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+
+export default function WiredWorld() {
+  return (
+    <section className="my-6 flex flex-col items-center justify-center m-auto">
+      <Accordion type="single" collapsible className="w-1/3">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>
+            <div className="flex flex-row mx-auto">
+              <h1 className="text-2xl font-semibold text-center mx-auto">
+                Wired World (PHP & MySQL)
+              </h1>
+              <Link href="https://github.com/gibbyb/WiredWorld"
+                className="my-auto"
+              >
+                < FaGithub className="my-auto ml-2" size={22} />
+              </Link>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="flex flex-col">
+              <div className="flex flex-row my-4 mx-auto">
+                <Link href="https://wiredworld.gbrown.org">
+                  <h2 className="text-lg font-semibold text-center underline hover:text-blue-500">
+                    Wired World Website
+                  </h2>
+                </Link>
+              </div>
+              <p className="indent-4">
+                Wired World is a strange project of mine which was made as an assignment
+                while I was in school for my Database Management class. Wired World is 
+                an online store written entirely from scratch using PHP & MySQL & is 
+                self-hosted using a PHP Docker Container & Caddy as the reverse proxy.
+              </p>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </section>
+  );
+};