azpect/hhargreaves.net
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/skills.svelte
View File

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

4
src/routes/+layout.svelte
View File

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

63
src/routes/+page.svelte
View File

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

333
src/routes/about/+page.svelte
View File

@ -2,182 +2,177 @@
import Link from '../../components/link.svelte'; import Link from '../../components/link.svelte';
</script> </script>
<main class="flex h-fit flex-col items-center"> <!-- First Row -->
<!-- First Row --> <div class="w-full">
<div class="w-3/4"> <!-- My Name Section -->
<!-- My Name Section --> <div class="my-14 w-3/4">
<div class="w-3/4"> <h1 class="font-mono text-6xl font-[600] text-gray-300">
<h1 class="py-20 font-mono text-6xl font-[600] text-gray-300"> My name is<br />
My name is<br /> <span class="text-blue-300">Hayden Hargreaves.</span>
<span class="text-blue-300">Hayden Hargreaves.</span> <br />
<br /> I like to build tools.
I like to build tools. </h1>
</h1> </div>
</div>
<!-- Column Layout for About Page --> <!-- Column Layout for About Page -->
<div class="flex h-fit w-full"> <div class="flex h-fit w-full">
<!-- Left Column --> <!-- Left Column -->
<div class="h-full w-2/3"> <div class="h-full w-2/3">
<!-- Personal Information --> <!-- Personal Information -->
<div class="h-fit w-full"> <div class="h-fit w-full">
<h2 class="py-4 text-2xl font-[600] text-blue-300">Personal Information</h2> <h2 class="py-4 text-2xl font-[600] text-blue-300">Personal Information</h2>
<p class="w-3/4 text-gray-200"> <p class="w-3/4 text-gray-200">
My name is Hayden Hargreaves, and I am a software engineering student at My name is Hayden Hargreaves, and I am a software engineering student at
<Link href="https://prescott.erau.edu" text="Embry Riddle Aeronautical University." /> <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, 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. 2028. I have a passion for building and seeing my ideas come to life.
</p> </p>
<p class="my-4 w-3/4 text-gray-200"> <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 In my free time I like to workout, play airsoft, go mountain biking, and play video games.
games. I have been playing airsoft for nearly two years and have loved it from day one! I have been playing airsoft for nearly two years and have loved it from day one! I own
I own countless airsoft guns which include an 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 H&amp;K 416 A5</span>, an
<span class="text-blue-300"> Elite Force 1911 TAC</span>, a <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. <span class="text-blue-300">JAG Arms Scattergun Super CQB</span>, and many more.
</p> </p>
<p class="my-4 w-3/4 text-gray-200"> <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. 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 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! energetic dog who loves to play and run around. She will be five years old this July!
</p> </p>
<div class="my-4 flex w-3/4 justify-center"> <div class="my-4 flex w-3/4 justify-center">
<img <img
class="h-fit w-2/3" class="h-fit w-2/3"
src="/pennyBowBG.png" src="/pennyBowBG.png"
alt="My dog penny with a christmas bow on her head." 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> </div>
</div> </div>
<!-- Right Column --> <!-- Experience -->
<div class="h-full w-1/3"> <div class="my-8 h-fit w-full">
<div class="w-full"> <h2 class="py-4 text-2xl font-[600] text-blue-300">Experience</h2>
<!-- Education Section --> <p class="mb-4 w-3/4 text-gray-200">
<h2 class="py-2 text-xl font-semibold text-blue-300">EDUCATION</h2> I have been programming for nearly <span class="text-blue-300">half a decade</span>. I
<div class="mb-4"> started programming in high school where I learned web development using HTML, CSS, and
<h3 class="text-sm font-semibold text-gray-200"> some basic JavaScript. From there, I started to learn software development basics using
Embry Riddle Aeronautical University - 2028 <span class="text-blue-300">Java</span>. Since then I have learned to love
</h3> <Link href="https://go.dev" text="Go" /> and have dipped my feet into the water of countless
<p class="py text-xs text-gray-200"> programming languages.
Bachelor of Science in Software Engineering with minor in Cyber Intelligence and </p>
Security (4.00 GPA) <p class="my-4 w-3/4 text-gray-200">
</p> In the past three years, I have moved from using Window to
</div> <span class="text-blue-300">Linux</span>
<div class="my-4"> exclusively. I have used countless distributions ranging from Ubuntu to Arch Linux, but I have
<h3 class="text-sm font-semibold text-gray-200">West-MEC Central Campus - 2024</h3> settled on <span class="text-blue-300">NixOS</span> as my daily driver. During this
<p class="py text-xs text-gray-200">Coding &amp; Programming (4.00 GPA)</p> journey I developed a "need for speed" and this led to me to
</div> <span class="text-blue-300">Neovim</span>. Inspired by
<div class="my-4"> <Link
<h3 class="text-sm font-semibold text-gray-200">Paradise Honors High School - 2024</h3> text="The Primeagen"
<p class="py text-xs text-gray-200">Honors Student, 13 out of 213 (4.51 WGPA)</p> href="https://x.com/ThePrimeagen?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"
</div> />, 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 --> <!-- Right Column -->
<h2 class="mt-14 py-2 text-xl font-semibold text-blue-300">CONTACTS</h2> <div class="h-full w-1/3">
<div class="mb-4"> <div class="w-full">
<h3 class="text-sm font-semibold text-gray-200">Email</h3> <!-- Education Section -->
<p class="py text-xs text-gray-200">hhargreaves2006@gmail.com</p> <h2 class="py-2 text-xl font-semibold text-blue-300">EDUCATION</h2>
</div> <div class="mb-4">
<div class="my-4"> <h3 class="text-sm font-semibold text-gray-200">
<h3 class="text-sm font-semibold text-gray-200">Phone</h3> Embry Riddle Aeronautical University - 2028
<p class="py text-xs text-gray-200">(623) 237 - 0838</p> </h3>
</div> <p class="py text-xs text-gray-200">
<div class="my-4"> Bachelor of Science in Software Engineering with minor in Cyber Intelligence and
<h3 class="text-sm font-semibold text-gray-200">Location</h3> Security (4.00 GPA)
<p class="py text-xs text-gray-200">Prescott, AZ</p> </p>
</div> </div>
<div class="my-4"> <div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">LinkedIn</h3> <h3 class="text-sm font-semibold text-gray-200">West-MEC Central Campus - 2024</h3>
<p class="py text-xs text-gray-200">Hayden Hargreaves</p> <p class="py text-xs text-gray-200">Coding &amp; Programming (4.00 GPA)</p>
</div> </div>
<div class="my-4"> <div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">X</h3> <h3 class="text-sm font-semibold text-gray-200">Paradise Honors High School - 2024</h3>
<p class="py text-xs text-gray-200">@azpect_3120</p> <p class="py text-xs text-gray-200">Honors Student, 13 out of 213 (4.51 WGPA)</p>
</div> </div>
<div class="my-4">
<h3 class="text-sm font-semibold text-gray-200">GitHub</h3> <!-- Contact Info Section -->
<p class="py text-xs text-gray-200">Azpect3120</p> <h2 class="mt-14 py-2 text-xl font-semibold text-blue-300">CONTACTS</h2>
</div> <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>
</div> </div>
</div> </div>
</main> </div>

64
src/routes/blog/+page.svelte
View File

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

2
src/routes/blog/[title]/+page.svelte
View File

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