Add projects section
parent
7f90bc9445
commit
a8005943f5
GPG Key ID:
D3993665FF92E1C3
|
|
@ -13,9 +13,13 @@ const links = [
|
|||
<div
|
||||
class="max-h-navbar-h bg-background-light px-screen-x py-screen-y opacity-80"
|
||||
>
|
||||
<ul role="list" class="flex w-full space-x-screen-x whitespace-nowrap">
|
||||
<a href="/" rel="prefetch"><b>{homeText}</b></a>
|
||||
<li class="w-full"></li>
|
||||
<ul
|
||||
role="list"
|
||||
class="flex w-full items-center space-x-screen-x whitespace-nowrap font-normal"
|
||||
>
|
||||
<a href="/" rel="prefetch" class="mr-auto text-[1.25rem] font-bold"
|
||||
>{homeText}</a
|
||||
>
|
||||
{links.map((link) => <a href={link.link}>{link.text}</a>)}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@ slug: 'about'
|
|||
background: true
|
||||
---
|
||||
|
||||
I am a incoming sophomore at the University of Texas at Dallas who loves programming and tech in general. Although web development and web hosting are my main interests, I enjoy branching out and exploring other ways to work with technology and create things.
|
||||
I am an incoming sophomore at the University of Texas at Dallas who loves programming and tech in general. Although web development and web hosting are my main interests, I enjoy branching out and exploring other ways to work with technology and create things.
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const imageAlt = 'black and white portrait of myself'
|
|||
---
|
||||
|
||||
<section class={`w-full ${viewHeight} ${padding}`}>
|
||||
<div class={`mx-auto h-full flex items-center max-w-page-w`}>
|
||||
<div class="mx-auto flex h-full max-w-page-w items-center">
|
||||
<h1 class={`font-medium ${textMainSize}`}>
|
||||
<i
|
||||
><b><u>{text[0]}</u></b><span class="text-font-light"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
layout: './Section.astro'
|
||||
title: 'Projects'
|
||||
slug: 'projects'
|
||||
background: false
|
||||
---
|
||||
|
||||
import Subsection from './Subsection.astro'
|
||||
|
||||
My biggest personal project so far is building a server to self-host my cloud ecosystem. My server uses a Proxmox hypervisor along with Linux Debian VMs and Docker containers running services such as TrueNAS, Syncthing, Nextcloud, Plex, Forejo, Pterodactyl, and others. To get around carrier-grade NAT limitations, I host a VPN using Google Cloud and use nftables to route traffic so I can make services publicly accessible.
|
||||
|
||||
I also have other projects viewable on multiple git platforms (Github, Forgejo), most of which came from hackathons, game jams, and school projects. Of these, the most interesting are:
|
||||
|
||||
<Subsection title="GroceRead (HackAI UTD 2023)">
|
||||
Android app intended to help visually-impaired people navigate grocery
|
||||
stores by telling the user the product the phone camera is pointed at. Uses
|
||||
Chooch API for object detection.
|
||||
</Subsection>
|
||||
|
||||
<Subsection title="zzzz (Axxess UTD 2023)">
|
||||
Educational chatbot that teaches body part terminology and suggests others
|
||||
for the user to learn about. Wrote the API layer of the backend using
|
||||
Django, and created most of the frontend using React.
|
||||
</Subsection>
|
||||
|
||||
<Subsection title="Score Tracker (HS senior project)">
|
||||
Web app that allows coaches of HS sports teams to submit game scores. Scores
|
||||
would then be publicly viewable on the app's homepage and could be managed
|
||||
through an admin interface. Created with Express.js, PostgreSQL, and vanilla
|
||||
JavaScript for frontend. This was my first personal web project developed
|
||||
from scratch.
|
||||
</Subsection>
|
||||
|
||||
Some other projects and activities I have worked on include Med Check (MetroHacks 2022), zzz (UTD SGDA 2023 Spring Jam), zzz (UTD SGDA 2022 Thanksgiving Jam), ZipVersionControl (FLL #1790, yrs 2017-2019), FIRST Tech Challenge roboics (2021-2022), and FIRST Lego League robotics (2013-2019, #1790).
|
||||
|
|
@ -14,20 +14,20 @@ const fontSizeH2 = 'text-[1.5rem]'
|
|||
const paddingX = 'px-[1rem]'
|
||||
const paddingT = 'pt-[1.5rem]'
|
||||
const paddingB = 'pb-[2.5rem]'
|
||||
|
||||
const spacing = 'pb-[.5rem]'
|
||||
const anchorDistance = 'mt-[-5rem] pt-[5rem]'
|
||||
---
|
||||
|
||||
<section
|
||||
class={`${paddingX} ${paddingT} ${paddingB} ${fontSize} ${
|
||||
frontmatter.background ? 'bg-background-dark' : ''
|
||||
}`}
|
||||
id={frontmatter.slug}
|
||||
>
|
||||
<div class={`mx-auto max-w-page-w`}>
|
||||
<h2 class={`font-bold ${spacing} ${fontSizeH2}`}>
|
||||
{frontmatter.title}
|
||||
</h2>
|
||||
<slot />
|
||||
<div class={anchorDistance} id={frontmatter.slug}>
|
||||
<div class={`mx-auto max-w-page-w space-y-paragraph`}>
|
||||
<h2 class={`font-bold ${fontSizeH2}`}>
|
||||
{frontmatter.title}
|
||||
</h2>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string
|
||||
url: string | null
|
||||
}
|
||||
|
||||
const { title, url } = Astro.props
|
||||
|
||||
const fontSize = 'text-[.9rem]'
|
||||
const fontSizeH3 = 'text-[1.4rem]'
|
||||
|
||||
const margin = 'm-[-1rem] p-[1rem]'
|
||||
const background = 'bg-[#00000020]'
|
||||
const backgroundHover = 'hover:bg-[#000000cc]'
|
||||
const textColorHover = 'hover:text-[#ffffff]'
|
||||
---
|
||||
|
||||
<a
|
||||
href={url}
|
||||
class={`block rounded ${
|
||||
url && `${textColorHover} ${backgroundHover}`
|
||||
} ${fontSize} ${margin} ${background}`}
|
||||
>
|
||||
<div class={`mx-auto max-w-page-w space-y-paragraph`}>
|
||||
<h3 class={`font-bold ${fontSizeH3}`}>
|
||||
{title}
|
||||
</h3>
|
||||
<slot />
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -20,7 +20,7 @@ import '@fontsource-variable/jetbrains-mono'
|
|||
<Head title={title} description={description}>
|
||||
<SEO title={title} description={description} />
|
||||
</Head>
|
||||
<body class="min-h-screen w-screen font-main text-font">
|
||||
<body class="min-h-screen w-screen font-main font-light text-font">
|
||||
<Background>
|
||||
<Navbar />
|
||||
<main class="pt-navbar-h">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@ const pattern = 'heropattern-circuitboard-pattern'
|
|||
---
|
||||
|
||||
<div class="bg-background">
|
||||
<div class={`h-full min-h-screen w-full bg-contain bg-repeat ${pattern}`}>
|
||||
<div
|
||||
class={`h-full min-h-screen w-full bg-circuitboard bg-repeat ${pattern}`}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,11 +23,13 @@ module.exports = {
|
|||
},
|
||||
backgroundSize: {
|
||||
contain: 'contain',
|
||||
circuitboard: '40rem',
|
||||
},
|
||||
spacing: {
|
||||
'screen-x': '2rem',
|
||||
'screen-y': '1rem',
|
||||
'navbar-h': '4rem',
|
||||
paragraph: '1rem',
|
||||
},
|
||||
maxWidth: {
|
||||
'page-w': '45rem',
|
||||
|
|
|
|||
Reference in New Issue