Add random stuff

package-lock.json

@@ -11,7 +11,8 @@
 				"moment": "^2.30.1",
 				"qs": "^6.12.2",
 				"sanitize.css": "^13.0.0",
-				"svelte-markdown": "^0.4.1"
+				"svelte-markdown": "^0.4.1",
+				"svg-round-corners": "^0.4.3"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
@@ -2525,6 +2526,11 @@
 				}
 			}
 		},
+		"node_modules/svg-round-corners": {
+			"version": "0.4.3",
+			"resolved": "https://registry.npmjs.org/svg-round-corners/-/svg-round-corners-0.4.3.tgz",
+			"integrity": "sha512-9zxcdLa9Bh2Bddxa760wSzspWLJ1nTRMKIsVH6MjNm8QssbZGbmY0pOnjwrp/cST+mfod2l3lpbuKFe+c3wHjw=="
+		},
 		"node_modules/tiny-glob": {
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",

package.json

@@ -28,6 +28,7 @@
 		"moment": "^2.30.1",
 		"qs": "^6.12.2",
 		"sanitize.css": "^13.0.0",
-		"svelte-markdown": "^0.4.1"
+		"svelte-markdown": "^0.4.1",
+		"svg-round-corners": "^0.4.3"
 	}
 }

src/components/atoms/ContainerDualColumn.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  export let leftWidth = "50%";
+  export let leftRatio = "1";
-  export let rightWidth = "50%";
+  export let rightRatio = "1";
 </script>
 
 <div
   class="container"
-  style={`--column-left-width: ${leftWidth}; --column-right-width: ${rightWidth}`}
+  style={`--column-left-flex: ${leftRatio}; --column-right-flex: ${rightRatio}`}
 >
   <div class="column-left">
     <slot name="left" />
@@ -31,7 +31,8 @@
       }
 
       .column-left {
-        width: var(--column-left-width);
+        height: 100%;
+        flex: var(--column-left-flex);
 
         @include portrait {
           width: 100%;
@@ -40,6 +41,8 @@
 
       .column-spacer {
         width: 2em;
+        display: flex;
+        height: 2em;
 
         @include portrait {
           display: none;
@@ -47,7 +50,8 @@
       }
 
       .column-right {
-        width: var(--column-right-width);
+        height: 100%;
+        flex: var(--column-right-flex);
 
         @include portrait {
           width: 100%;

src/components/atoms/ZigZag.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { randInt } from "$lib";
+  import * as svgRoundCorners from "svg-round-corners";
+
+  const { parsePath, roundCommands } =
+    /** @ts-ignore */
+    svgRoundCorners?.default ?? svgRoundCorners;
+
+  const maxPoints = 100;
+  const points = [];
+
+  const mul = 995 / maxPoints;
+
+  const maxSpreadX = 1000 / maxPoints;
+
+  // for (let j = 0; j < 10; j++) {
+  for (let i = 1; i < maxPoints; i++) {
+    points.push(`${randInt(i * mul, i * mul + maxSpreadX)},${randInt(0, 100)}`);
+  }
+  // }
+  const downPoints = `M5,${randInt(0, 100)} ${points.map((p) => `L${p}`).join(" ")}`;
+  const originalPath = parsePath(downPoints);
+  const { path } = roundCommands(originalPath, 10, 3);
+
+  const color = ["primary", "orange", "green", "cyan", "red"][randInt(0, 4)];
+</script>
+
+<div class="zigzag" style={`--stroke-color: var(--color-${color})`}>
+  <svg viewBox="0 0 1000 100" preserveAspectRatio="none">
+    <path fill="transparent" d={path} />
+  </svg>
+</div>
+
+<style lang="scss">
+  @layer component {
+    .zigzag {
+      display: block;
+      height: 100%;
+      width: 100%;
+
+      svg {
+        filter: drop-shadow(0 0 20px var(--stroke-color));
+      }
+      path {
+        stroke: color-mix(in srgb, var(--stroke-color), #fff 65%);
+        stroke-width: 5;
+      }
+    }
+  }
+</style>

src/components/molecules/Filler.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import ZigZag from "../atoms/ZigZag.svelte";
+</script>
+
+<div class="filler">
+  <ZigZag />
+</div>
+
+<style lang="scss">
+  @layer component {
+    .filler {
+      padding: 1em;
+      display: flex;
+      flex: 1 1 auto;
+    }
+  }
+</style>

src/components/organisms/Introduction.svelte

@@ -7,7 +7,7 @@
 
 </script>
 <Box title="About">
-  <ContainerDualColumn leftWidth="34%" rightWidth="63%">
+  <ContainerDualColumn leftRatio="1" rightRatio="2">
     <Thumbnail
       slot="left"
       imageData={{

src/lib/index.ts

@@ -10,6 +10,10 @@ export function formatDateRelative(date: Date | string): string {
 	return moment(date).fromNow();
 }
 
+export function randInt(min: number, max: number): number {
+	return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
 export type ImageMetadata = {
 	caption?: string;
 	altText?: string;

src/routes/+page.svelte

@@ -2,6 +2,7 @@
   import Box from "../components/atoms/Box.svelte";
   import ContainerDualColumn from "../components/atoms/ContainerDualColumn.svelte";
   import ContainerMedium from "../components/atoms/ContainerMedium.svelte";
+    import Filler from "../components/molecules/Filler.svelte";
   import Introduction from "../components/organisms/Introduction.svelte";
   import Links from "../components/organisms/Links.svelte";
   import Socials from "../components/organisms/Socials.svelte";
@@ -10,18 +11,21 @@
 <ContainerMedium>
   <h1>Welcome to my website</h1>
 
-  <ContainerDualColumn leftWidth="65%" rightWidth="35%">
+  <ContainerDualColumn leftRatio="2" rightRatio="1">
     <div slot="left">
       <Introduction />
       <Socials />
+      <Filler/>
     </div>
     <Links slot="right" />
   </ContainerDualColumn>
-  <ContainerDualColumn leftWidth="35%" rightWidth="65%">
+  <ContainerDualColumn leftRatio="35%" rightRatio="65%">
     <Box slot="left" title="Projects">
       <ul>
         <li>
-          <a href="https://git.trivernis.net/trivernis/website-frontend">This Website</a>
+          <a href="https://git.trivernis.net/trivernis/website-frontend"
+            >This Website</a
+          >
         </li>
         <li>
           <a href="https://git.trivernis.net/trivernis/silo">Silo</a>
@@ -36,3 +40,8 @@
     </Box>
   </ContainerDualColumn>
 </ContainerMedium>
+
+<style lang="scss">
+  @layer page {
+  }
+</style>