Extract header section to own component

src/App.svelte

@@ -1,6 +1,5 @@
 <script>
-  import Hero from './lib/components/Hero.svelte'
+  import HeaderSection from "./lib/HeaderSection.svelte";
-  import headshotPhoto from './assets/headshot.jpg'
   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">
+    <HeaderSection />
-      <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>
   </header>
 
   <main>

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>