From 6862f2dad1ae623e58e847c0459fb94d1446acf2 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sun, 7 Jul 2024 15:57:27 +0200
Subject: [PATCH] Move introduction and stuff into separate components

---
 src/components/organisms/Introduction.svelte | 33 ++++++++
 src/components/organisms/Links.svelte        | 42 ++++++++++
 src/components/organisms/Socials.svelte      | 10 +++
 src/routes/+page.svelte                      | 81 ++------------------
 4 files changed, 92 insertions(+), 74 deletions(-)
 create mode 100644 src/components/organisms/Introduction.svelte
 create mode 100644 src/components/organisms/Links.svelte
 create mode 100644 src/components/organisms/Socials.svelte

diff --git a/src/components/organisms/Introduction.svelte b/src/components/organisms/Introduction.svelte
new file mode 100644
index 0000000..07fcdcb
--- /dev/null
+++ b/src/components/organisms/Introduction.svelte
@@ -0,0 +1,33 @@
+<script>
+
+    import Box from "../atoms/Box.svelte";
+    import ContainerDualColumn from "../atoms/ContainerDualColumn.svelte";
+    import Paragraph from "../atoms/Paragraph.svelte";
+    import Thumbnail from "../molecules/Thumbnail.svelte";
+
+</script>
+<Box title="About">
+  <ContainerDualColumn leftWidth="34%" rightWidth="63%">
+    <Thumbnail
+      slot="left"
+      imageData={{
+        altText:
+          "A picture of Ferris, the Rust mascot. An orange crab plushie.",
+        formats: [
+          {
+            name: "original",
+            mime: "image/jpeg",
+            url: "/images/profile.jpg",
+          },
+        ],
+      }}
+    />
+    <Paragraph slot="right">
+      Heyyy. I'm a software developer and tinkerer from Germany. I do a lot of
+      stuff so this website is an attempt in providing an overview.
+      <br /><br />
+      Right now it's very much a work in progress as I'm figuring out how to properly
+      design a website (lol). But there's already some content to explore.
+    </Paragraph>
+  </ContainerDualColumn>
+</Box>
diff --git a/src/components/organisms/Links.svelte b/src/components/organisms/Links.svelte
new file mode 100644
index 0000000..e33d84f
--- /dev/null
+++ b/src/components/organisms/Links.svelte
@@ -0,0 +1,42 @@
+<script>
+  import Box from "../atoms/Box.svelte";
+</script>
+
+<Box title="Links" color="cyan">
+  <h3>My other Websites</h3>
+  <ul>
+    <li>
+      <a href="https://plantwiki.trivernis.net">Plantwiki</a>
+      (<a href="https://plantwiki.trivernis.dev">Dev</a>)
+    </li>
+    <li>
+      <a href="https://no-chromium.org">No Chromium</a>
+    </li>
+  </ul>
+
+  <h3>Me on other Platforms</h3>
+  <ul>
+    <li>
+      <a href="https://github.com/trivernis">GitHub</a>
+    </li>
+    <li>
+      <a href="https://codeberg.org/trivernis">Codeberg</a>
+    </li>
+  </ul>
+
+  <h3>My selfhosted stuff</h3>
+  <ul>
+    <li>
+      <a href="https://git.trivernis.net">Forgejo</a>
+    </li>
+    <li>
+      <a href="https://social.funkyfish.cool">Sharkey (Fediverse)</a>
+    </li>
+    <li>
+      <a href="https://lychee.trivernis.net">Lychee</a>
+    </li>
+    <li>
+      <a href="https://search.trivernis.net">SearchXNG</a>
+    </li>
+  </ul>
+</Box>
diff --git a/src/components/organisms/Socials.svelte b/src/components/organisms/Socials.svelte
new file mode 100644
index 0000000..265ddc9
--- /dev/null
+++ b/src/components/organisms/Socials.svelte
@@ -0,0 +1,10 @@
+<script>
+  import Box from "../atoms/Box.svelte";
+</script>
+
+<Box title="Socials" color="green">
+  Fediverse: <code>@trivernis@social.funkyfish.cool</code>
+  <br />
+  Matrix: <code>@trivernis:trivernis.net</code>
+  Email: <code>me@trivernis.net</code>
+</Box>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index beccea7..ef252e8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,86 +1,19 @@
 <script>
-  import "$lib/vars.scss";
-  import Box from "../components/atoms/Box.svelte";
   import ContainerDualColumn from "../components/atoms/ContainerDualColumn.svelte";
   import ContainerMedium from "../components/atoms/ContainerMedium.svelte";
-  import Paragraph from "../components/atoms/Paragraph.svelte";
-  import Thumbnail from "../components/molecules/Thumbnail.svelte";
+  import Introduction from "../components/organisms/Introduction.svelte";
+  import Links from "../components/organisms/Links.svelte";
+  import Socials from "../components/organisms/Socials.svelte";
 </script>
 
 <ContainerMedium>
   <h1>Welcome to my website</h1>
-  <ContainerDualColumn leftWidth="65%" rightWidth="35%">
-    <Box slot="left" title="About">
-      <ContainerDualColumn leftWidth="34%" rightWidth="63%">
-        <Thumbnail
-          slot="left"
-          imageData={{
-            altText:
-              "A picture of Ferris, the Rust mascot. An orange crab plushie.",
-            formats: [
-              {
-                name: "original",
-                mime: "image/jpeg",
-                url: "/images/profile.jpg",
-              },
-            ],
-          }}
-        />
-        <Paragraph slot="right">
-          Heyyy. I'm a software developer and tinkerer from Germany. I do a lot
-          of stuff so this website is an attempt in providing an overview.
-          <br /><br />
-          Right now it's very much a work in progress as I'm figuring out how to
-          properly design a website (lol). But there's already some content to explore.
-        </Paragraph>
-      </ContainerDualColumn>
-    </Box>
 
+  <ContainerDualColumn leftWidth="65%" rightWidth="35%">
+    <Introduction slot="left" />
     <div slot="right">
-      <Box title="Socials" color="green">
-        Fediverse: <code>@trivernis@social.funkyfish.cool</code>
-        <br>
-        Matrix: <code>@trivernis:trivernis.net</code>
-        Email: <code>me@trivernis.net</code>
-      </Box>
-      <Box title="Links" color="cyan">
-        <h3>My other Websites</h3>
-        <ul>
-          <li>
-            <a href="https://plantwiki.trivernis.net">Plantwiki</a>
-            (<a href="https://plantwiki.trivernis.dev">Dev</a>)
-          </li>
-          <li>
-            <a href="https://no-chromium.org">No Chromium</a>
-          </li>
-        </ul>
-
-        <h3>Me on other Platforms</h3>
-        <ul>
-          <li>
-            <a href="https://github.com/trivernis">GitHub</a>
-          </li>
-          <li>
-            <a href="https://codeberg.org/trivernis">Codeberg</a>
-          </li>
-        </ul>
-
-        <h3>My selfhosted stuff</h3>
-        <ul>
-          <li>
-            <a href="https://git.trivernis.net">Forgejo</a>
-          </li>
-          <li>
-            <a href="https://social.funkyfish.cool">Sharkey (Fediverse)</a>
-          </li>
-          <li>
-            <a href="https://lychee.trivernis.net">Lychee</a>
-          </li>
-          <li>
-            <a href="https://search.trivernis.net">SearchXNG</a>
-          </li>
-        </ul>
-      </Box>
+      <Socials />
+      <Links />
     </div>
   </ContainerDualColumn>
 </ContainerMedium>