me
/
ethanreece.com
Archived
1
0
Fork 0
Code Pull Requests Actions Activity

Add more body sections

main
Ethan Reece 2023-06-02 16:17:51 -05:00
parent a8005943f5
commit b10423fbdf
Signed by: me
GPG Key ID: D3993665FF92E1C3
7 changed files with 88 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/content/global/Navbar.astro
View File

@ -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>

6
src/components/content/index/Contact.astro
View File

@ -0,0 +1,6 @@
---
layout: './Section.astro'
title: 'Contact Me'
slug: 'contact'
background: true
---

28
src/components/content/index/Experience.mdx
View File

@ -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>

8
src/components/content/index/Hobbies.mdx
View File

@ -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.

16
src/components/content/index/Projects.mdx
View File

@ -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].

24
src/components/content/index/Subsection.astro
View File

@ -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>

2
tailwind.config.cjs
View File

@ -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: {