Finished for the time being
This commit is contained in:
parent
071e5e4a12
commit
f4be746695
BIN
public/original.png
Executable file
BIN
public/original.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
BIN
public/videos/FuseRNDemo.mp4
Executable file
BIN
public/videos/FuseRNDemo.mp4
Executable file
Binary file not shown.
@ -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">
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user