---
import Layout from "../layouts/Layout.astro";
import Intro from "../components/Intro.astro";
import Projects from "../components/Projects.astro";
import Posts from "../components/Posts.astro";
import WaveDivider from "../components/WaveDivider.astro";
import Webring from "../components/Webring.astro";
import SpotifyNowPlaying from "../components/SpotifyNowPlaying.astro";
import Socials from "../components/Socials.astro";

// TODO: Fill in your preferences.
const variables = {
  name: "Kristian Emil Takvam",
  subtitles:
    "This is my blog where I share my thoughts on programming, technology, and life in general. Stay tuned for updates!",
};  
---

<Layout title={variables.name}>
  <main>
    <Intro name={variables.name} subtitle={variables.subtitles} />
    <WaveDivider color="rosewater" speed={100} size={0.8} direction="left" />

    <Posts />
    <WaveDivider color="teal" speed={100} size={0.8} direction="left" />
    
    <Projects />
    <WaveDivider color="flamingo" speed={100} size={0.8} direction="right" />

    <SpotifyNowPlaying />
    <WaveDivider color="mauve" speed={100} size={0.8} direction="left" />

    <!--<Webring />
    <WaveDivider color="pink" speed={100} size={0.8} direction="right" />
    -->
    <Socials />
  </main>
</Layout>