From 38707b38686d2ae2f6b4a526723b4f1b03e98d2e Mon Sep 17 00:00:00 2001
From: Dan Kotowski <dan@dankotowski.dev>
Date: Mon, 8 May 2023 21:38:11 -0500
Subject: [PATCH] Extract header section to own component

---
 src/App.svelte               | 18 ++----------------
 src/lib/HeaderSection.svelte | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/HeaderSection.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 57efbed..5dfdadd 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,5 @@
 <script>
-  import Hero from './lib/components/Hero.svelte'
-  import headshotPhoto from './assets/headshot.jpg'
+  import HeaderSection from "./lib/HeaderSection.svelte";
   import SkillsSection from "./lib/SkillsSection.svelte";
   import ExpSection from "./lib/ExpSection.svelte";
   import ContactSection from "./lib/ContactSection.svelte";
@@ -8,20 +7,7 @@
 
 <div class="pb-16 lg:pb-24">
   <header class="bg-gray-900">
-    <div class="container mx-auto">
-      <Hero
-        imageUrl={headshotPhoto}
-        imageAlt="Headshot photograph of Dan Kotowski"
-        title="Dan Kotowski"
-      >
-        <p class="mt-6 text-lg lg:text-xl text-gray-300">
-          Senior web software engineer with strong technical and interpersonal skills
-        </p>
-        <p class="mt-6 text-yellow-600 italic">
-          Note: This webpage is a work in progress.
-        </p>
-      </Hero>
-    </div>
+    <HeaderSection />
   </header>
 
   <main>
diff --git a/src/lib/HeaderSection.svelte b/src/lib/HeaderSection.svelte
new file mode 100644
index 0000000..f00429e
--- /dev/null
+++ b/src/lib/HeaderSection.svelte
@@ -0,0 +1,19 @@
+<script>
+import headshotPhoto from "../assets/headshot.jpg";
+import Hero from "./components/Hero.svelte";
+</script>
+
+<div class="container mx-auto">
+  <Hero
+    imageUrl={headshotPhoto}
+    imageAlt="Headshot photograph of Dan Kotowski"
+    title="Dan Kotowski"
+  >
+    <p class="mt-6 text-lg lg:text-xl text-gray-300">
+      Senior web software engineer with strong technical and interpersonal skills
+    </p>
+    <p class="mt-6 text-yellow-600 italic">
+      Note: This webpage is a work in progress.
+    </p>
+  </Hero>
+</div>