youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: background dots on portfolio page

Browse source
This commit is contained in:
Youwen Wu 2024-06-28 22:39:53 -07:00
parent 22773e89f3
commit b75f2c7085
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
1 changed files with 69 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
src/routes/portfolio/+page.svelte
View file

@ -11,72 +11,74 @@
<meta name="author" content="Youwen Wu" /> <meta name="author" content="Youwen Wu" />
</svelte:head> </svelte:head>
<main class="container mx-auto max-w-5xl my-20 dots-background"> <div class="dots-background py-20">
<h1 class="font-serif text-5xl font-medium tracking-tight"> <main class="container mx-auto max-w-5xl bg-background rounded-lg py-4">
Portfolio <h1 class="font-serif text-5xl font-medium tracking-tight">
<hr class="w-32 mt-0.5 h-1 bg-muted-foreground rounded-lg" /> Portfolio
</h1> <hr class="w-32 mt-0.5 h-1 bg-muted-foreground rounded-lg" />
<p class="text-xl mt-4"> </h1>
Here's some of the stuff I've worked on which I think is notable or interesting enough to write <p class="text-xl mt-4">
about. Here's some of the stuff I've worked on which I think is notable or interesting enough to
</p> write about.
<h2 class="text-4xl font-serif font-medium mt-8">Projects</h2> </p>
<hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" /> <h2 class="text-4xl font-serif font-medium mt-8">Projects</h2>
<Card.Root class="p-0 md:p-6 mt-8"> <hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" />
<Card.Header> <Card.Root class="p-0 md:p-6 mt-8">
<Card.Title class="text-4xl font-serif tracking-normal font-medium">Jankboard</Card.Title> <Card.Header>
<div class="w-24 h-1 bg-green-800 dark:bg-green-400 rounded-lg" /> <Card.Title class="text-4xl font-serif tracking-normal font-medium">Jankboard</Card.Title>
<div class="flex flex-wrap gap-2 py-2"> <div class="w-24 h-1 bg-green-800 dark:bg-green-400 rounded-lg" />
<Badge>Robotics</Badge> <div class="flex flex-wrap gap-2 py-2">
<Badge variant="secondary">License: GPLv3</Badge> <Badge>Robotics</Badge>
<Badge variant="outline">Web Technology</Badge> <Badge variant="secondary">License: GPLv3</Badge>
<Badge variant="outline">Rust</Badge> <Badge variant="outline">Web Technology</Badge>
</div> <Badge variant="outline">Rust</Badge>
</Card.Header>
<Card.Content class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="col-span-2 flex flex-col justify-between">
<div class="space-y-4 text-lg">
<p>
Jankboard is a fully custom control dashboard for Team 1280's robot competing in the
2024 season of the FIRST Robotics Competition.
</p>
<p>
It displays the robot's telemetry through a network connection established via the
NetworkTables protocol, including speed, orientation, acceleration, heading, and other
vital metrics. It also features a full 3D robot visualization and looks like a Tesla UI.
It was used in production for the first time at the <a
class="link"
href="https://cafirst.org/frc/centralvalley/">Central Valley Regional</a
>, where we made it to the playoffs as 2nd pick.
</p>
<p>
It's built with <a class="link" href="https://tauri.app/">Tauri</a>,
<a class="link" href="https://svelte.dev/">Svelte</a>, and
<a class="link" href="https://www.rust-lang.org/">Rust</a>.
</p>
</div> </div>
<div class="flex flex-wrap gap-2 mt-8"> </Card.Header>
<Button <Card.Content class="grid grid-cols-1 md:grid-cols-3 gap-4">
class="inline-flex gap-2 md:basis-auto basis-full" <div class="col-span-2 flex flex-col justify-between">
href="https://github.com/youwen5/jankboard"><Image /> Gallery</Button <div class="space-y-4 text-lg">
> <p>
<Button Jankboard is a fully custom control dashboard for Team 1280's robot competing in the
class="inline-flex gap-2 md:basis-auto basis-full" 2024 season of the FIRST Robotics Competition.
href="https://github.com/youwen5/jankboard" </p>
variant="outline"><Code /> Source</Button <p>
> It displays the robot's telemetry through a network connection established via the
NetworkTables protocol, including speed, orientation, acceleration, heading, and other
vital metrics. It also features a full 3D robot visualization and looks like a Tesla
UI. It was used in production for the first time at the <a
class="link"
href="https://cafirst.org/frc/centralvalley/">Central Valley Regional</a
>, where we made it to the playoffs as 2nd pick.
</p>
<p>
It's built with <a class="link" href="https://tauri.app/">Tauri</a>,
<a class="link" href="https://svelte.dev/">Svelte</a>, and
<a class="link" href="https://www.rust-lang.org/">Rust</a>.
</p>
</div>
<div class="flex flex-wrap gap-2 mt-8">
<Button
class="inline-flex gap-2 md:basis-auto basis-full"
href="https://github.com/youwen5/jankboard"><Image /> Gallery</Button
>
<Button
class="inline-flex gap-2 md:basis-auto basis-full"
href="https://github.com/youwen5/jankboard"
variant="outline"><Code /> Source</Button
>
</div>
</div> </div>
</div> <div class="flex justify-center md:justify-end col-span-1">
<div class="flex justify-center md:justify-end col-span-1"> <img
<img src="/assets/portfolio/images/team-1280-logo.png"
src="/assets/portfolio/images/team-1280-logo.png" alt="team 1280 logo"
alt="team 1280 logo" class="border-2 border-muted rounded-lg p-2 w-full h-fit"
class="border-2 border-muted rounded-lg p-2 w-full h-fit" />
/> </div>
</div> </Card.Content>
</Card.Content> </Card.Root>
</Card.Root> <h2 class="text-4xl font-serif font-medium mt-8">Research</h2>
<h2 class="text-4xl font-serif font-medium mt-8">Research</h2> <hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" />
<hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" /> <p class="text-lg mt-8">Nothing here for now...</p>
<p class="text-lg mt-8">Nothing here for now...</p> </main>
</main> </div>