Finished for the time being

src/components/general/pfpname.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 export function PFPName() {
   return (
     <div className="flex flex-row items-center justify-center">
-      <Image src={"/gib_pfp.jpg"} alt={"Gabriel's Profile Picture"}
+      <Image src={"/original.png"} alt={"Gabriel's Profile Picture"}
         width={80} height={80} className="rounded-full my-2"
       />
       <div className="mx-4 text-center my-auto">

src/components/general/techchart.tsx

@@ -1,16 +1,6 @@
 "use client"
-import { Bar, BarChart, XAxis, YAxis } from "recharts"
+import { Bar, BarChart, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"
-import {
+import { Card, CardHeader, CardContent } from "~/components/ui/card"
-  Card,
-  CardContent,
-  CardHeader,
-} from "~/components/ui/card"
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "~/components/ui/chart2"
 
 const chartData = [
   { technology: "Linux", proficiency: 95 },
@@ -26,58 +16,38 @@ const chartData = [
   { technology: "Swift", proficiency: 60 },
 ]
 
-const chartConfig = {
+export default function TechChart() {
-  proficiency: {
-    label: "Proficiency",
-    color: "hsl(var(--chart-1))",
-  },
-} satisfies ChartConfig
-
-export default function Component() {
   return (
     <Card className="max-w-2xl mx-auto">
-      <CardHeader/>
+      <CardHeader />
       <CardContent>
-        <ChartContainer config={chartConfig}>
+        {/* The key here is `ResponsiveContainer` */}
+        <ResponsiveContainer width="100%" height={500}>
           <BarChart
             accessibilityLayer
             data={chartData}
             layout="vertical"
-            margin={{
+            barCategoryGap="10%"  // Percent-based or pixel-based vertical space between bars
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
-            }}
           >
-            <XAxis
+            {/* XAxis, YAxis */}
-              type="number"
+            <XAxis type="number" hide />
-              dataKey="proficiency"
+            <YAxis 
-              domain={[0, 100]}
+              dataKey="technology" 
-              tickCount={0}
+              type="category" 
-              axisLine={false}
-              tickLine={false}
-              fontSize={12}
-              width={1000}
-            />
-            <YAxis
-              dataKey="technology"
-              type="category"
               tickLine={false}
               axisLine={false}
-              width={100}
+              width={125} // Give Y-Axis ample room to show long text
-            />
+              fontSize={18} 
-            <ChartTooltip
+              stroke="hsl(var(--primary)"
-              cursor={false}
-              content={<ChartTooltipContent />}
             />
             <Bar 
               dataKey="proficiency" 
-              fill="var(--color-proficiency)" 
+              fill="hsl(var(--chart-1)" 
-              radius={[0, 4, 4, 0]}
+              barSize={30}
+              radius={[10, 10, 10, 10]}
             />
           </BarChart>
-        </ChartContainer>
+        </ResponsiveContainer>
       </CardContent>
     </Card>
   )

src/components/projects/fuse.tsx

@@ -14,13 +14,13 @@ export default function Fuse() {
         <AccordionItem value="item-1">
           <AccordionTrigger>
             <div className="flex flex-row">
-              <h1 className="md:text-2xl font-semibold text-center">
+              <h1 className="text-lg md:text-2xl font-semibold text-center">
                 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 mr-4" size={22} />
+                < FaGithub className="my-auto ml-2 mr-8 md:mr-0" size={22} />
               </Link>
             </div>
           </AccordionTrigger>
@@ -39,6 +39,15 @@ export default function Fuse() {
                 </Link>. ‎This Web Application connects to a PostgreSQL Database & is
                 also self-hosted using a Docker Container.
               </p>
+              <video
+                src="/videos/FuseRNDemo.mp4"
+                autoPlay
+                loop
+                muted
+                playsInline
+                className="rounded-lg shadow-lg my-4 mx-auto w-[120px] md:w-[200px]"
+              />
+
             </div>
           </AccordionContent>
         </AccordionItem>

src/components/projects/lazyprimeagen.tsx

@@ -14,13 +14,13 @@ export default function LazyPrimeagen() {
         <AccordionItem value="item-1">
           <AccordionTrigger>
             <div className="flex flex-row mx-auto">
-              <h1 className="md:text-2xl font-semibold text-center mx-auto">
+              <h1 className="text-lg md: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} />
+                < FaGithub className="my-auto ml-2 mr-8 md:mr-0" size={22} />
               </Link>
             </div>
           </AccordionTrigger>

src/components/projects/sunhat.tsx

@@ -14,11 +14,11 @@ export default function Sunhat() {
         <AccordionItem value="item-1">
           <AccordionTrigger>
             <div className="flex flex-row mx-auto">
-              <h1 className="md:text-2xl font-semibold text-center mx-auto">Sunhat (Bash)</h1>
+              <h1 className="text-lg md: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} />
+                < FaGithub className="my-auto ml-2 mr-8 md:mr-0" size={22} />
               </Link>
             </div>
           </AccordionTrigger>

src/components/projects/techtracker.tsx

@@ -13,7 +13,7 @@ export default function TechTracker() {
       <Accordion type="single" collapsible className="w-5/6 md:w-1/3">
         <AccordionItem value="item-1">
           <AccordionTrigger>
-            <h1 className="md:text-2xl font-semibold text-center mx-auto">Tech Tracker (Next.js, Swift & MySQL)</h1>
+            <h1 className="text-lg md:text-2xl font-semibold text-center mx-auto">Tech Tracker (Next.js, Swift & MySQL)</h1>
           </AccordionTrigger>
           <AccordionContent>
             <div className="flex flex-col">
@@ -26,7 +26,7 @@ export default function TechTracker() {
                 <Link href="https://git.gbrown.org/gib/Tech_Tracker_Web"
                   className="my-auto"
                   >
-                  < FaGithub className="my-auto ml-2" size={22} />
+                  < FaGithub className="my-auto ml-2 mr-8 md:mr-0" size={22} />
                 </Link>
               </div>
               <p className="indent-4">
@@ -65,7 +65,7 @@ export default function TechTracker() {
                 loop
                 muted
                 playsInline
-                className="rounded-lg shadow-lg my-4 mx-auto w-[200px]"
+                className="rounded-lg shadow-lg my-4 mx-auto w-[120px] md:w-[200px]"
               />
             </div>
           </AccordionContent>

src/components/projects/tenantportal.tsx

@@ -14,13 +14,13 @@ export default function TenantPortal() {
         <AccordionItem value="item-1">
           <AccordionTrigger>
             <div className="flex flex-row mx-auto">
-              <h1 className="md:text-2xl font-semibold text-center mx-auto">
+              <h1 className="text-lg md: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} />
+                < FaGithub className="my-auto ml-2 mr-8 md:mr-0" size={22} />
               </Link>
             </div>
           </AccordionTrigger>

src/components/projects/wiredworld.tsx

@@ -14,13 +14,13 @@ export default function WiredWorld() {
         <AccordionItem value="item-1">
           <AccordionTrigger>
             <div className="flex flex-row mx-auto">
-              <h1 className="md:text-2xl font-semibold text-center mx-auto">
+              <h1 className="text-lg md: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} />
+                < FaGithub className="my-auto ml-2 mr-8 md:mr-0" size={22} />
               </Link>
             </div>
           </AccordionTrigger>