<script lang="ts">
  import HeaderBar from '$lib/components/HeaderBar.svelte'
  import CardList from '$lib/components/CardList.svelte'
  import GalleryDisplay from '$lib/components/GalleryDisplay.svelte'

  import Title from '$lib/components/title/Title.svelte'
  import Projects from '$lib/components/projects/Projects.svelte'
  import Stack from '$lib/components/stack/Stack.svelte'
  import Footer from '$lib/components/Footer.svelte'
</script>


<main class="responsive">
  <Title/>
  <hr>

  <div class="large-space"></div>
  <CardList/>
  <div class="small-space"></div>
  <Projects/>
  <div class="small-space"></div>
  <Stack/>
  <div class="large-space"></div>
  <Footer/>
</main>

<nav class="bottom s small-blur large-elevate">
  <HeaderBar/>
</nav>

<nav class="top l m small-blur small-elevate">
  <HeaderBar/>
</nav>
<GalleryDisplay/>