diff --git a/src/components/general/techchart.tsx b/src/components/general/techchart.tsx
index 58dcf04..fd41643 100644
--- a/src/components/general/techchart.tsx
+++ b/src/components/general/techchart.tsx
@@ -1,16 +1,6 @@
"use client"
-import { Bar, BarChart, XAxis, YAxis } from "recharts"
-import {
- Card,
- CardContent,
- CardHeader,
-} from "~/components/ui/card"
-import {
- type ChartConfig,
- ChartContainer,
- ChartTooltip,
- ChartTooltipContent,
-} from "~/components/ui/chart2"
+import { Bar, BarChart, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"
+import { Card, CardHeader, CardContent } from "~/components/ui/card"
const chartData = [
{ technology: "Linux", proficiency: 95 },
@@ -26,58 +16,38 @@ const chartData = [
{ technology: "Swift", proficiency: 60 },
]
-const chartConfig = {
- proficiency: {
- label: "Proficiency",
- color: "hsl(var(--chart-1))",
- },
-} satisfies ChartConfig
-
-export default function Component() {
+export default function TechChart() {
return (
-
+
-
+ {/* The key here is `ResponsiveContainer` */}
+
-
-
+
- }
+ width={125} // Give Y-Axis ample room to show long text
+ fontSize={18}
+ stroke="hsl(var(--primary)"
/>
-
+
)
diff --git a/src/components/projects/fuse.tsx b/src/components/projects/fuse.tsx
index 34b7aa7..dd61e83 100644
--- a/src/components/projects/fuse.tsx
+++ b/src/components/projects/fuse.tsx
@@ -14,13 +14,13 @@ export default function Fuse() {
-
+
Fuse (React Native, Next.js, & PostgreSQL)
- < FaGithub className="my-auto ml-2 mr-4" size={22} />
+ < FaGithub className="my-auto ml-2 mr-8 md:mr-0" size={22} />
@@ -39,6 +39,15 @@ export default function Fuse() {
. This Web Application connects to a PostgreSQL Database & is
also self-hosted using a Docker Container.
+
+
diff --git a/src/components/projects/lazyprimeagen.tsx b/src/components/projects/lazyprimeagen.tsx
index 3a5e395..d5099d6 100644
--- a/src/components/projects/lazyprimeagen.tsx
+++ b/src/components/projects/lazyprimeagen.tsx
@@ -14,13 +14,13 @@ export default function LazyPrimeagen() {