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() { export function PFPName() {
return ( return (
<div className="flex flex-row items-center justify-center"> <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" width={80} height={80} className="rounded-full my-2"
/> />
<div className="mx-4 text-center my-auto"> <div className="mx-4 text-center my-auto">

View File

@ -1,16 +1,6 @@
"use client" "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 = [ const chartData = [
{ technology: "Linux", proficiency: 95 }, { technology: "Linux", proficiency: 95 },
@ -26,58 +16,38 @@ const chartData = [
{ technology: "Swift", proficiency: 60 }, { 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 ( return (
<Card className="max-w-2xl mx-auto"> <Card className="max-w-2xl mx-auto">
<CardHeader/> <CardHeader />
<CardContent> <CardContent>
<ChartContainer config={chartConfig}> {/* The key here is `ResponsiveContainer` */}
<ResponsiveContainer width="100%" height={500}>
<BarChart <BarChart
accessibilityLayer accessibilityLayer
data={chartData} data={chartData}
layout="vertical" 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"
domain={[0, 100]}
tickCount={0}
axisLine={false}
tickLine={false}
fontSize={12}
width={1000}
/>
<YAxis <YAxis
dataKey="technology" dataKey="technology"
type="category" type="category"
tickLine={false} tickLine={false}
axisLine={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 <Bar
dataKey="proficiency" dataKey="proficiency"
fill="var(--color-proficiency)" fill="hsl(var(--chart-1)"
radius={[0, 4, 4, 0]} barSize={30}
radius={[10, 10, 10, 10]}
/> />
</BarChart> </BarChart>
</ChartContainer> </ResponsiveContainer>
</CardContent> </CardContent>
</Card> </Card>
) )

View File

@ -14,13 +14,13 @@ export default function Fuse() {
<AccordionItem value="item-1"> <AccordionItem value="item-1">
<AccordionTrigger> <AccordionTrigger>
<div className="flex flex-row"> <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) Fuse (React Native, Next.js, & PostgreSQL)
</h1> </h1>
<Link href="https://git.gbrown.org/gib/fuse_expo" <Link href="https://git.gbrown.org/gib/fuse_expo"
className="my-auto" 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> </Link>
</div> </div>
</AccordionTrigger> </AccordionTrigger>
@ -39,6 +39,15 @@ export default function Fuse() {
</Link>. This Web Application connects to a PostgreSQL Database & is </Link>. This Web Application connects to a PostgreSQL Database & is
also self-hosted using a Docker Container. also self-hosted using a Docker Container.
</p> </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> </div>
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>

View File

@ -14,13 +14,13 @@ export default function LazyPrimeagen() {
<AccordionItem value="item-1"> <AccordionItem value="item-1">
<AccordionTrigger> <AccordionTrigger>
<div className="flex flex-row mx-auto"> <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) Lazy Primeagen Neovim Config (Lua)
</h1> </h1>
<Link href="https://github.com/gibbyb/Lazy_Primeagen" <Link href="https://github.com/gibbyb/Lazy_Primeagen"
className="my-auto" 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> </Link>
</div> </div>
</AccordionTrigger> </AccordionTrigger>

View File

@ -14,11 +14,11 @@ export default function Sunhat() {
<AccordionItem value="item-1"> <AccordionItem value="item-1">
<AccordionTrigger> <AccordionTrigger>
<div className="flex flex-row mx-auto"> <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" <Link href="https://git.gbrown.org/gib/sunhat"
className="my-auto" 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> </Link>
</div> </div>
</AccordionTrigger> </AccordionTrigger>

View File

@ -13,7 +13,7 @@ export default function TechTracker() {
<Accordion type="single" collapsible className="w-5/6 md:w-1/3"> <Accordion type="single" collapsible className="w-5/6 md:w-1/3">
<AccordionItem value="item-1"> <AccordionItem value="item-1">
<AccordionTrigger> <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> </AccordionTrigger>
<AccordionContent> <AccordionContent>
<div className="flex flex-col"> <div className="flex flex-col">
@ -26,7 +26,7 @@ export default function TechTracker() {
<Link href="https://git.gbrown.org/gib/Tech_Tracker_Web" <Link href="https://git.gbrown.org/gib/Tech_Tracker_Web"
className="my-auto" 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> </Link>
</div> </div>
<p className="indent-4"> <p className="indent-4">
@ -65,7 +65,7 @@ export default function TechTracker() {
loop loop
muted muted
playsInline 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> </div>
</AccordionContent> </AccordionContent>

View File

@ -14,13 +14,13 @@ export default function TenantPortal() {
<AccordionItem value="item-1"> <AccordionItem value="item-1">
<AccordionTrigger> <AccordionTrigger>
<div className="flex flex-row mx-auto"> <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) Tenant Portal (Next.js & PostgreSQL)
</h1> </h1>
<Link href="https://git.gbrown.org/gib/rent_portal" <Link href="https://git.gbrown.org/gib/rent_portal"
className="my-auto" 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> </Link>
</div> </div>
</AccordionTrigger> </AccordionTrigger>

View File

@ -14,13 +14,13 @@ export default function WiredWorld() {
<AccordionItem value="item-1"> <AccordionItem value="item-1">
<AccordionTrigger> <AccordionTrigger>
<div className="flex flex-row mx-auto"> <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) Wired World (PHP & MySQL)
</h1> </h1>
<Link href="https://github.com/gibbyb/WiredWorld" <Link href="https://github.com/gibbyb/WiredWorld"
className="my-auto" 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> </Link>
</div> </div>
</AccordionTrigger> </AccordionTrigger>