Finished for the time being

This commit is contained in:
Gabriel Brown 2024-09-17 16:27:51 -05:00
parent 071e5e4a12
commit f4be746695
10 changed files with 42 additions and 63 deletions

BIN
public/original.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 386 KiB

BIN
public/videos/FuseRNDemo.mp4 Executable file

Binary file not shown.

View File

@ -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">

View File

@ -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 (
<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={{
left: 0,
right: 0,
top: 0,
bottom: 0,
}}
barCategoryGap="10%" // Percent-based or pixel-based vertical space between bars
>
<XAxis
type="number"
dataKey="proficiency"
domain={[0, 100]}
tickCount={0}
axisLine={false}
tickLine={false}
fontSize={12}
width={1000}
/>
<YAxis
dataKey="technology"
type="category"
{/* XAxis, YAxis */}
<XAxis type="number" hide />
<YAxis
dataKey="technology"
type="category"
tickLine={false}
axisLine={false}
width={100}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent />}
width={125} // Give Y-Axis ample room to show long text
fontSize={18}
stroke="hsl(var(--primary)"
/>
<Bar
dataKey="proficiency"
fill="var(--color-proficiency)"
radius={[0, 4, 4, 0]}
fill="hsl(var(--chart-1)"
barSize={30}
radius={[10, 10, 10, 10]}
/>
</BarChart>
</ChartContainer>
</ResponsiveContainer>
</CardContent>
</Card>
)

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>