FIX: <main> is now in the layout which will define margins

Still having issues with Skills component
This commit is contained in:
Hayden Hargreaves 2025-02-24 15:41:12 -07:00
parent 633bc9dd11
commit 4e91775608
6 changed files with 229 additions and 238 deletions

View File

@ -162,5 +162,4 @@
<h3 class="text-sm font-semibold text-gray-200">{tool}</h3>
</div>
{/each}
<!-- <h3 class="text-sm font-semibold text-gray-200">{tools.join(' - ')}</h3> -->
</div>

View File

@ -7,6 +7,8 @@
<div class="bg-[#1b1b1c]">
<Navbar />
{@render children()}
<main class="mx-[13%] my-[4%] h-fit min-h-screen">
{@render children()}
</main>
<Footer />
</div>

View File

@ -3,38 +3,35 @@
import Skills from '../components/skills.svelte';
</script>
<main class="h-fit w-full">
<!-- Introduction Section -->
<div class="flex flex h-fit w-full">
<div class="flex size-full justify-end">
<div class="my-16 w-3/4">
<h1 class="p-2 font-mono text-6xl font-[900] text-blue-300">
Building things that matter.
</h1>
<p class="my-5 p-2 text-gray-200 italic">
I am a <span class="text-blue-300">software engineering student</span> at Embry Riddle
Aeronautical University, Prescott. I am interested in
<span class="font-semibold">building things that matter</span> and making a difference in the
world.
</p>
</div>
</div>
<div class="size-full"></div>
</div>
<div class="flex h-full w-full flex-row">
<!-- Left Column -->
<div class="flex size-full flex-col items-end">
<div class="h-full w-3/4">
<Projects />
</div>
</div>
<!-- Right Column -->
<div class="flex size-full justify-center">
<div class="h-full w-3/4">
<Skills />
</div>
<!-- Introduction Section -->
<div class="flex flex h-fit w-full">
<div class="flex size-full">
<div class="">
<h1 class="py-2 font-mono text-6xl font-[900] text-blue-300">Building things that matter.</h1>
<p class="my-5 py-2 text-gray-200 italic">
I am a <span class="text-blue-300">software engineering student</span> at Embry Riddle
Aeronautical University, Prescott. I am interested in
<span class="font-semibold">building things that matter</span> and making a difference in the
world.
</p>
</div>
</div>
</main>
<!-- DO NOT DELETE THIS -->
<div class="size-full"></div>
</div>
<div class="mt-24 flex h-full w-full flex-row">
<!-- Left Column -->
<div class="flex h-full w-2/3 flex-col">
<div class="w-3/4">
<Projects />
</div>
</div>
<!-- Right Column -->
<div class="flex h-full w-1/3 justify-center">
<div class="h-full w-full">
<Skills />
</div>
</div>
</div>

View File

@ -2,182 +2,177 @@
import Link from '../../components/link.svelte';
</script>
<main class="flex h-fit flex-col items-center">
<!-- First Row -->
<div class="w-3/4">
<!-- My Name Section -->
<div class="w-3/4">
<h1 class="py-20 font-mono text-6xl font-[600] text-gray-300">
My name is<br />
<span class="text-blue-300">Hayden Hargreaves.</span>
<br />
I like to build tools.
</h1>
</div>
<!-- First Row -->
<div class="w-full">
<!-- My Name Section -->
<div class="my-14 w-3/4">
<h1 class="font-mono text-6xl font-[600] text-gray-300">
My name is<br />
<span class="text-blue-300">Hayden Hargreaves.</span>
<br />
I like to build tools.
</h1>
</div>
<!-- Column Layout for About Page -->
<div class="flex h-fit w-full">
<!-- Left Column -->
<div class="h-full w-2/3">
<!-- Personal Information -->
<div class="h-fit w-full">
<h2 class="py-4 text-2xl font-[600] text-blue-300">Personal Information</h2>
<p class="w-3/4 text-gray-200">
My name is Hayden Hargreaves, and I am a software engineering student at
<Link href="https://prescott.erau.edu" text="Embry Riddle Aeronautical University." />
I am also pursing a minor in Cyber Security. I am a freshmen who intends to graduate in Spring,
2028. I have a passion for building and seeing my ideas come to life.
</p>
<p class="my-4 w-3/4 text-gray-200">
In my free time I like to workout, play airsoft, go mountain biking, and play video
games. I have been playing airsoft for nearly two years and have loved it from day one!
I own countless airsoft guns which include an
<span class="text-blue-300">Elite Force H&amp;K 416 A5</span>, an
<span class="text-blue-300"> Elite Force 1911 TAC</span>, a
<span class="text-blue-300">JAG Arms Scattergun Super CQB</span>, and many more.
</p>
<p class="my-4 w-3/4 text-gray-200">
Back at home, I have a dog named <span class="text-blue-300">Penny</span> who is a mini golden-doodle.
She was named after the character Penny from the show "The Big Bang Theory". She is a very
energetic dog who loves to play and run around. She will be five years old this July!
</p>
<!-- Column Layout for About Page -->
<div class="flex h-fit w-full">
<!-- Left Column -->
<div class="h-full w-2/3">
<!-- Personal Information -->
<div class="h-fit w-full">
<h2 class="py-4 text-2xl font-[600] text-blue-300">Personal Information</h2>
<p class="w-3/4 text-gray-200">
My name is Hayden Hargreaves, and I am a software engineering student at
<Link href="https://prescott.erau.edu" text="Embry Riddle Aeronautical University." />
I am also pursing a minor in Cyber Security. I am a freshmen who intends to graduate in Spring,
2028. I have a passion for building and seeing my ideas come to life.
</p>
<p class="my-4 w-3/4 text-gray-200">
In my free time I like to workout, play airsoft, go mountain biking, and play video games.
I have been playing airsoft for nearly two years and have loved it from day one! I own
countless airsoft guns which include an
<span class="text-blue-300">Elite Force H&amp;K 416 A5</span>, an
<span class="text-blue-300"> Elite Force 1911 TAC</span>, a
<span class="text-blue-300">JAG Arms Scattergun Super CQB</span>, and many more.
</p>
<p class="my-4 w-3/4 text-gray-200">
Back at home, I have a dog named <span class="text-blue-300">Penny</span> who is a mini golden-doodle.
She was named after the character Penny from the show "The Big Bang Theory". She is a very
energetic dog who loves to play and run around. She will be five years old this July!
</p>
<div class="my-4 flex w-3/4 justify-center">
<img
class="h-fit w-2/3"
src="/pennyBowBG.png"
alt="My dog penny with a christmas bow on her head."
/>
</div>
</div>
<!-- Experience -->
<div class="my-8 h-fit w-full">
<h2 class="py-4 text-2xl font-[600] text-blue-300">Experience</h2>
<p class="mb-4 w-3/4 text-gray-200">
I have been programming for nearly <span class="text-blue-300">half a decade</span>. I
started programming in high school where I learned web development using HTML, CSS, and
some basic JavaScript. From there, I started to learn software development basics using
<span class="text-blue-300">Java</span>. Since then I have learned to love
<Link href="https://go.dev" text="Go" /> and have dipped my feet into the water of countless
programming languages.
</p>
<p class="my-4 w-3/4 text-gray-200">
In the past three years, I have moved from using Window to
<span class="text-blue-300">Linux</span>
exclusively. I have used countless distributions ranging from Ubuntu to Arch Linux, but I
have settled on <span class="text-blue-300">NixOS</span> as my daily driver. During this
journey I developed a "need for speed" and this led to me to
<span class="text-blue-300">Neovim</span>. Inspired by
<Link
text="The Primeagen"
href="https://x.com/ThePrimeagen?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"
/>, I have discovered a love for software toolchain development and have been building
many small Neovim plugins to help my day-to-day life as a developer.
</p>
<p class="w-3/4 text-gray-200">
I have been employed as a Staff Accountant at
<span class="text-blue-300">Bottom Line Business Solutions (BLBS)</span> since 2020. In
2023, following a hack at the previous data hosting company, I was tasked with
developing a new data hosting solution. I developed a custom solution using Go and it is
hosted on a Linux server on site. Implementing a strong partial and complete backup
system and
<Link
text="RAID 10"
href="https://www.techtarget.com/searchstorage/definition/RAID-10-redundant-array-of-independent-disks"
/>
storage, I was able to ensure that the data is safe and secure. This solution has been in
use since 2024 and has been a great success.
</p>
<p class="my-4 w-3/4 text-gray-200">
While working on the data hosting solution, I developed an interest in server management
and have since been managing the BLBS server, as well as my own <span
class="text-blue-300"
>
personal server</span
>. Both servers run Ubuntu Server and can be accessed remotely and securely using SSH
keys. This has been a great learning experience and has helped me develop a strong
understanding of server management and the Linux kernel.
</p>
<p class="my-4 w-3/4 text-gray-200">
In September of 2023, I was hired by the <span class="text-blue-300">
Backcountry Horsemen of California
</span>
to rebuild their website. They wanted it to be modeled after their previous site from the
90's. I developed the site using raw HTML and TailwindCSS because there was no need for anything
fancy for a static website. Plus, I did not have access to their server, just an FTP portal
to upload the files. The website was complete in April of 2024 and has since been in use.
This opportunity was a great learning experience and helped me realize that I do not want
to be a front-end web developer.
</p>
<p class="my-4 w-3/4 text-gray-200">
My most recent endeavor is a research project sponsored by Embry Riddle. I am working
with
<Link href="https://faculty.erau.edu/Seth.McNeill" text="Dr. Seth McNeill" />
to create an <span class="text-blue-300">Acoustic Drone Detection Sensor Network</span>.
We are able to detect drones with just sound having a nearly 95% accuracy rate. My
portion of this project is the network infrastructure. I have developed an
<span class="text-blue-300"> Internet of Things (IoT)</span> network that connects all of
the sensors between a gateway. Any data collected by the sensors is sent to AWS where it
is processed and then stored locally on a server. This project has been an amazing experience
and has helped me to develop a strong understanding of IoT networks and the AWS ecosystem.
Furthermore, it has opened my eyes to the world of research and has introduced me to many
bright individuals.
</p>
<div class="my-4 flex w-3/4 justify-center">
<img
class="h-fit w-2/3"
src="/pennyBowBG.png"
alt="My dog penny with a christmas bow on her head."
/>
</div>
</div>
<!-- Right Column -->
<div class="h-full w-1/3">
<div class="w-full">
<!-- Education Section -->
<h2 class="py-2 text-xl font-semibold text-blue-300">EDUCATION</h2>
<div class="mb-4">
<h3 class="text-sm font-semibold text-gray-200">
Embry Riddle Aeronautical University - 2028
</h3>
<p class="py text-xs text-gray-200">
Bachelor of Science in Software Engineering with minor in Cyber Intelligence and
Security (4.00 GPA)
</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">West-MEC Central Campus - 2024</h3>
<p class="py text-xs text-gray-200">Coding &amp; Programming (4.00 GPA)</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">Paradise Honors High School - 2024</h3>
<p class="py text-xs text-gray-200">Honors Student, 13 out of 213 (4.51 WGPA)</p>
</div>
<!-- Experience -->
<div class="my-8 h-fit w-full">
<h2 class="py-4 text-2xl font-[600] text-blue-300">Experience</h2>
<p class="mb-4 w-3/4 text-gray-200">
I have been programming for nearly <span class="text-blue-300">half a decade</span>. I
started programming in high school where I learned web development using HTML, CSS, and
some basic JavaScript. From there, I started to learn software development basics using
<span class="text-blue-300">Java</span>. Since then I have learned to love
<Link href="https://go.dev" text="Go" /> and have dipped my feet into the water of countless
programming languages.
</p>
<p class="my-4 w-3/4 text-gray-200">
In the past three years, I have moved from using Window to
<span class="text-blue-300">Linux</span>
exclusively. I have used countless distributions ranging from Ubuntu to Arch Linux, but I have
settled on <span class="text-blue-300">NixOS</span> as my daily driver. During this
journey I developed a "need for speed" and this led to me to
<span class="text-blue-300">Neovim</span>. Inspired by
<Link
text="The Primeagen"
href="https://x.com/ThePrimeagen?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"
/>, I have discovered a love for software toolchain development and have been building
many small Neovim plugins to help my day-to-day life as a developer.
</p>
<p class="w-3/4 text-gray-200">
I have been employed as a Staff Accountant at
<span class="text-blue-300">Bottom Line Business Solutions (BLBS)</span> since 2020. In
2023, following a hack at the previous data hosting company, I was tasked with developing
a new data hosting solution. I developed a custom solution using Go and it is hosted on a
Linux server on site. Implementing a strong partial and complete backup system and
<Link
text="RAID 10"
href="https://www.techtarget.com/searchstorage/definition/RAID-10-redundant-array-of-independent-disks"
/>
storage, I was able to ensure that the data is safe and secure. This solution has been in use
since 2024 and has been a great success.
</p>
<p class="my-4 w-3/4 text-gray-200">
While working on the data hosting solution, I developed an interest in server management
and have since been managing the BLBS server, as well as my own <span
class="text-blue-300"
>
personal server</span
>. Both servers run Ubuntu Server and can be accessed remotely and securely using SSH
keys. This has been a great learning experience and has helped me develop a strong
understanding of server management and the Linux kernel.
</p>
<p class="my-4 w-3/4 text-gray-200">
In September of 2023, I was hired by the <span class="text-blue-300">
Backcountry Horsemen of California
</span>
to rebuild their website. They wanted it to be modeled after their previous site from the 90's.
I developed the site using raw HTML and TailwindCSS because there was no need for anything
fancy for a static website. Plus, I did not have access to their server, just an FTP portal
to upload the files. The website was complete in April of 2024 and has since been in use. This
opportunity was a great learning experience and helped me realize that I do not want to be
a front-end web developer.
</p>
<p class="my-4 w-3/4 text-gray-200">
My most recent endeavor is a research project sponsored by Embry Riddle. I am working with
<Link href="https://faculty.erau.edu/Seth.McNeill" text="Dr. Seth McNeill" />
to create an <span class="text-blue-300">Acoustic Drone Detection Sensor Network</span>.
We are able to detect drones with just sound having a nearly 95% accuracy rate. My portion
of this project is the network infrastructure. I have developed an
<span class="text-blue-300"> Internet of Things (IoT)</span> network that connects all of the
sensors between a gateway. Any data collected by the sensors is sent to AWS where it is processed
and then stored locally on a server. This project has been an amazing experience and has helped
me to develop a strong understanding of IoT networks and the AWS ecosystem. Furthermore, it
has opened my eyes to the world of research and has introduced me to many bright individuals.
</p>
</div>
</div>
<!-- Contact Info Section -->
<h2 class="mt-14 py-2 text-xl font-semibold text-blue-300">CONTACTS</h2>
<div class="mb-4">
<h3 class="text-sm font-semibold text-gray-200">Email</h3>
<p class="py text-xs text-gray-200">hhargreaves2006@gmail.com</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">Phone</h3>
<p class="py text-xs text-gray-200">(623) 237 - 0838</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">Location</h3>
<p class="py text-xs text-gray-200">Prescott, AZ</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">LinkedIn</h3>
<p class="py text-xs text-gray-200">Hayden Hargreaves</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">X</h3>
<p class="py text-xs text-gray-200">@azpect_3120</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">GitHub</h3>
<p class="py text-xs text-gray-200">Azpect3120</p>
</div>
<!-- Right Column -->
<div class="h-full w-1/3">
<div class="w-full">
<!-- Education Section -->
<h2 class="py-2 text-xl font-semibold text-blue-300">EDUCATION</h2>
<div class="mb-4">
<h3 class="text-sm font-semibold text-gray-200">
Embry Riddle Aeronautical University - 2028
</h3>
<p class="py text-xs text-gray-200">
Bachelor of Science in Software Engineering with minor in Cyber Intelligence and
Security (4.00 GPA)
</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">West-MEC Central Campus - 2024</h3>
<p class="py text-xs text-gray-200">Coding &amp; Programming (4.00 GPA)</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">Paradise Honors High School - 2024</h3>
<p class="py text-xs text-gray-200">Honors Student, 13 out of 213 (4.51 WGPA)</p>
</div>
<!-- Contact Info Section -->
<h2 class="mt-14 py-2 text-xl font-semibold text-blue-300">CONTACTS</h2>
<div class="mb-4">
<h3 class="text-sm font-semibold text-gray-200">Email</h3>
<p class="py text-xs text-gray-200">hhargreaves2006@gmail.com</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">Phone</h3>
<p class="py text-xs text-gray-200">(623) 237 - 0838</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">Location</h3>
<p class="py text-xs text-gray-200">Prescott, AZ</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">LinkedIn</h3>
<p class="py text-xs text-gray-200">Hayden Hargreaves</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">X</h3>
<p class="py text-xs text-gray-200">@azpect_3120</p>
</div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">GitHub</h3>
<p class="py text-xs text-gray-200">Azpect3120</p>
</div>
</div>
</div>
</div>
</main>
</div>

View File

@ -11,37 +11,35 @@
});
</script>
<main class="mx-[7.5%] my-[5%] min-h-screen">
<!-- Header -->
<div class="my-8 w-1/2">
<h1 class="font-mono text-6xl font-[900] text-blue-300">Blog Posts.</h1>
<p class="my-5 py-2 text-gray-200 italic">
Here you can find a list of all the blog posts I have written. Some of them are about my
projects, some are about my thoughts, and some are about my experiences. I hope you enjoy!
<!-- Header -->
<div class="my-8 w-1/2">
<h1 class="font-mono text-6xl font-[900] text-blue-300">Blog Posts.</h1>
<p class="my-5 py-2 text-gray-200 italic">
Here you can find a list of all the blog posts I have written. Some of them are about my
projects, some are about my thoughts, and some are about my experiences. I hope you enjoy!
</p>
</div>
<!-- Posts List -->
<div class="w-2/3">
{#if data.posts.length === 0}
<h2 class="py-8 text-6xl font-semibold text-gray-300 italic opacity-30">404</h2>
<p class="w-2/3 text-gray-300">
Uh oh! There are no posts to show. Check back later for more content! If you think this is a
mistake or have any interesting ideas, please let me know by sending me an
<Link href="mailto:hhargreaves2006@gmail.com" text="email" />.
</p>
</div>
<!-- Posts List -->
<div class="w-2/3">
{#if data.posts.length === 0}
<h2 class="py-8 text-6xl font-semibold text-gray-300 italic opacity-30">404</h2>
<p class="w-2/3 text-gray-300">
Uh oh! There are no posts to show. Check back later for more content! If you think this is a
mistake or have any interesting ideas, please let me know by sending me an
<Link href="mailto:hhargreaves2006@gmail.com" text="email" />.
</p>
{/if}
{#each data.posts as post}
<div class="group my-5 rounded-sm border-l-4 border-blue-300 px-4">
<h2 class="text-xl">
<a href={post.path} class="group relative inline-block no-underline">
<span class="relative z-10 text-gray-300">{post.title}</span>
<span
class="absolute bottom-0 left-0 h-[3px] w-0 bg-blue-300 transition-all duration-300 group-hover:w-full"
></span>
</a>
</h2>
<p class="text-sm text-gray-400">{post.description}</p>
</div>
{/each}
</div>
</main>
{/if}
{#each data.posts as post}
<div class="group my-5 rounded-sm border-l-4 border-blue-300 px-4">
<h2 class="text-xl">
<a href={post.path} class="group relative inline-block no-underline">
<span class="relative z-10 text-gray-300">{post.title}</span>
<span
class="absolute bottom-0 left-0 h-[3px] w-0 bg-blue-300 transition-all duration-300 group-hover:w-full"
></span>
</a>
</h2>
<p class="text-sm text-gray-400">{post.description}</p>
</div>
{/each}
</div>

View File

@ -11,7 +11,7 @@
</p>
</main>
{:else}
<div class="blog-wrapper prose mx-[7.5%] my-[3%]">
<div class="blog-wrapper prose">
{@html data.post.content}
</div>
{/if}