Add more body sections
parent
a8005943f5
commit
b10423fbdf
GPG Key ID:
D3993665FF92E1C3
|
|
@ -7,20 +7,34 @@ const links = [
|
|||
{ text: 'Hobbies', link: '/#hobbies' },
|
||||
{ text: 'Contact Me', link: '/#contact' },
|
||||
]
|
||||
|
||||
const buttonPaddingX = 'px-[.75rem]'
|
||||
const buttonPaddingY = 'py-[.5rem]'
|
||||
|
||||
const spacing = 'space-x-[.25rem]'
|
||||
---
|
||||
|
||||
<div class="fixed z-navbar w-full backdrop-blur-sm">
|
||||
<div
|
||||
class="max-h-navbar-h bg-background-light px-screen-x py-screen-y opacity-80"
|
||||
class={`max-h-navbar-h bg-background-light ${buttonPaddingX} ${buttonPaddingY} opacity-80`}
|
||||
>
|
||||
<ul
|
||||
role="list"
|
||||
class="flex w-full items-center space-x-screen-x whitespace-nowrap font-normal"
|
||||
class={`flex w-full items-center whitespace-nowrap font-normal ${spacing}`}
|
||||
>
|
||||
<a href="/" rel="prefetch" class="mr-auto text-[1.25rem] font-bold"
|
||||
>{homeText}</a
|
||||
>
|
||||
{links.map((link) => <a href={link.link}>{link.text}</a>)}
|
||||
{
|
||||
links.map((link) => (
|
||||
<a
|
||||
href={link.link}
|
||||
class={`rounded hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none ${buttonPaddingX} ${buttonPaddingY}`}
|
||||
>
|
||||
{link.text}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
layout: './Section.astro'
|
||||
title: 'Contact Me'
|
||||
slug: 'contact'
|
||||
background: true
|
||||
---
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
layout: './Section.astro'
|
||||
title: 'Experience & Skills'
|
||||
slug: 'experience'
|
||||
background: true
|
||||
---
|
||||
|
||||
import Subsection from './Subsection.astro'
|
||||
|
||||
Although I am most familiar with JavaScript and C#, I have used several other programming languages [i.e. Java, Python, C++, Kotlin] and can quickly learn new ones.
|
||||
|
||||
I have also used multiple web frameworks. I am most familiar with Express.js and React, but I have also used ASP.NET, Astro, and a bit of Django and Next.js. I plan to become more familiar with Django, Rails, and Laravel for backend along with Svelte and SolidJS for frontend.
|
||||
|
||||
I am also familiar with Linux since I use Arch Linux on my laptop and work with Linux Debian VMs on my server. Along with that, I have worked with PostgreSQL and MS SQL in my projects and at work, and I have also touched Google Cloud and Azure, using them for my self-hosted cloud, a cybersecurity course, and for work-related tasks.
|
||||
|
||||
Although I have learned most of these skills in my spare time, I have also used them in the professional world:
|
||||
|
||||
<Subsection title="Scrumfish" subtitle="Nampa, ID">
|
||||
Worked on backend and frontend for multiple projects using ASP.NET, MS SQL,
|
||||
and React to create APIs, a login system with MFA, and functional frontend
|
||||
components.
|
||||
</Subsection>
|
||||
|
||||
<Subsection title="R-Technics" subtitle="Boise, ID">
|
||||
Performed Windows server maintenance tasks and created a prototype in C# to
|
||||
pull song data using the SongSelect API, which was later integrated into the
|
||||
company's main product.
|
||||
</Subsection>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
layout: './Section.astro'
|
||||
title: 'Hobbies'
|
||||
slug: 'hobbies'
|
||||
background: false
|
||||
---
|
||||
|
||||
Besides programming and working with technology, I enjoy biking and playing Minecraft modpacks. Biking gives me a way to explore the outdoors while traveling to where I need to go, and it is also less costly and more environmentally sustainable than travelling via car.
|
||||
|
|
@ -9,21 +9,25 @@ 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:
|
||||
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)">
|
||||
<Subsection
|
||||
title="GroceRead"
|
||||
subtitle="HackAI, UTD 2023"
|
||||
url="https://devpost.com/software/groceread"
|
||||
>
|
||||
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
|
||||
<Subsection title="zzzz" subtitle="Axxess Hackathon, UTD 2023">
|
||||
Educational chatbot that teaches anatomical 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)">
|
||||
<Subsection title="Score Tracker" subtitle="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
|
||||
|
|
@ -31,4 +35,4 @@ I also have other projects viewable on multiple git platforms (Github, Forgejo),
|
|||
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).
|
||||
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].
|
||||
|
|
|
|||
|
|
@ -1,30 +1,40 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string
|
||||
subtitle: string
|
||||
url: string | null
|
||||
}
|
||||
|
||||
const { title, url } = Astro.props
|
||||
const { title, subtitle, url } = Astro.props
|
||||
|
||||
const fontSize = 'text-[.9rem]'
|
||||
const fontSizeH3 = 'text-[1.4rem]'
|
||||
const fontSpacing = 'leading-[1.5rem]'
|
||||
|
||||
const margin = 'm-[-1rem] p-[1rem]'
|
||||
const background = 'bg-[#00000020]'
|
||||
const backgroundHover = 'hover:bg-[#000000cc]'
|
||||
const textColorHover = 'hover:text-[#ffffff]'
|
||||
---
|
||||
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class={`block rounded ${
|
||||
url && `${textColorHover} ${backgroundHover}`
|
||||
url &&
|
||||
`hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none`
|
||||
} ${fontSize} ${margin} ${background}`}
|
||||
>
|
||||
<div class={`mx-auto max-w-page-w space-y-paragraph`}>
|
||||
<h3 class={`font-bold ${fontSizeH3}`}>
|
||||
{title}
|
||||
</h3>
|
||||
<span class={`flex flex-col`}>
|
||||
<h3 class={`font-bold ${fontSizeH3}`}>{title}</h3>
|
||||
{
|
||||
subtitle && (
|
||||
<span class={`font-thin italic ${fontSpacing}`}>
|
||||
{subtitle}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
</span>
|
||||
<slot />
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,10 @@ module.exports = {
|
|||
background: '#dbf6db',
|
||||
'background-dark': '#bbd8bb',
|
||||
'background-light': '#ffffff',
|
||||
'background-hover': '#000000cc',
|
||||
font: '#000000',
|
||||
'font-light': '#004f07',
|
||||
'font-hover': '#ffffff',
|
||||
pattern: 'rgba(0,0,0,.02)',
|
||||
},
|
||||
fontFamily: {
|
||||
|
|
|
|||
Reference in New Issue