76 lines
2.9 KiB
TypeScript
Executable File
76 lines
2.9 KiB
TypeScript
Executable File
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "~/components/ui/accordion"
|
|
import Link from "next/link";
|
|
import { FaGithub } from "react-icons/fa";
|
|
|
|
export default function TechTracker() {
|
|
return (
|
|
<section className="my-6 flex flex-col items-center justify-center m-auto">
|
|
<Accordion type="single" collapsible className="w-5/6 md:w-1/3">
|
|
<AccordionItem value="item-1">
|
|
<AccordionTrigger>
|
|
<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">
|
|
<div className="flex flex-row my-4 mx-auto">
|
|
<Link href="https://techtracker.gbrown.org">
|
|
<h2 className="text-lg font-semibold text-center">
|
|
Tech Tracker Web Application
|
|
</h2>
|
|
</Link>
|
|
<Link href="https://git.gbrown.org/gib/Tech_Tracker_Web"
|
|
className="my-auto"
|
|
>
|
|
< FaGithub className="my-auto ml-2 mr-8 md:mr-0" size={22} />
|
|
</Link>
|
|
</div>
|
|
<p className="indent-4">
|
|
A Next.js Web Application that allows City of Gulfport IT Employees to
|
|
update their status throughout the day using the T3 Stack which includes
|
|
TypeScript, TailwindCSS, Auth.js, PostgreSQL, Drizzle, & Shadcnui.
|
|
</p>
|
|
<video
|
|
src="/videos/techtrackerwebdemo.mp4"
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
className="max-w-full h-auto rounded-lg shadow-lg my-4"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<Link href="https://git.gbrown.org/gib/Tech_Tracker_iOS"
|
|
className="flex flex-row mx-auto my-4"
|
|
>
|
|
<h2 className="text-lg font-semibold text-center">
|
|
Tech Tracker Native iOS Application
|
|
</h2>
|
|
< FaGithub className="my-auto ml-2" size={22} />
|
|
</Link>
|
|
<p className="indent-4">
|
|
A Native iOS Application written in Swift & Distributed to City of
|
|
Gulfport IT Employees using TestFlight. This application uses APIs
|
|
provided by the Next.js Tech Tracker Web Application.
|
|
</p>
|
|
<video
|
|
src="/videos/techtrackeriosdemo.mp4"
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
className="rounded-lg shadow-lg my-4 mx-auto w-[120px] md:w-[200px]"
|
|
/>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
</section>
|
|
);
|
|
};
|