Initial commit

src/components/Controls.module.css

@@ -0,0 +1,72 @@
+.Controls {
+  position: fixed;
+  background: var(--clr-bg-secondary);
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 18px;
+  border-radius: 12px;
+  width: 64px;
+  height: 200px;
+}
+
+.controlsWrapper, .gooWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 18px;
+  box-sizing: border-box;
+}
+
+.gooWrapper {
+  filter: url('#goo');
+}
+
+.control, .blob {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+.control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(100% - 36px);
+  height: auto;
+  padding: 18px;
+  box-sizing: border-box;
+}
+
+.control > img {
+  width: 100%;
+}
+
+.blob {
+  background: var(--clr-bg);
+  border-radius: 16px;
+  aspect-ratio: 1/1;
+  transition: all .5s;
+  width: 0;
+  height: 0;
+}
+
+.selected {
+  width: 64px;
+  height: 64px;
+}
+
+.control:nth-child(1), .blob:nth-child(1) {
+  top: 60px;
+}
+
+.control:nth-child(2), .blob:nth-child(2) {
+  top: 120px;
+}
+
+.control:nth-child(3), .blob:nth-child(3) {
+  top: 180px;
+}

src/components/Controls.tsx

@@ -0,0 +1,62 @@
+import { For, createSignal } from 'solid-js';
+
+import styles from './Controls.module.css';
+import homeIcon from '../assets/icons/home.svg'
+import gridIcon from '../assets/icons/grid.svg'
+
+export default () => {
+  const [selected, setSelected] = createSignal(0);
+  const [blobby, setBlobby] = createSignal([0]);
+  const controls = [
+    { icon: homeIcon },
+    { icon: gridIcon },
+    { icon: homeIcon },
+  ]
+
+  return (
+    <>
+      <div class={styles.Controls}>
+        <div class={styles.gooWrapper}>
+          <For each={controls}>{(control, i) =>
+            <div 
+              class={styles.blob}
+              classList={{
+                [styles.selected]: blobby().includes(i())
+              }}
+            ></div>
+          }</For>
+        </div>
+        <div class={styles.controlsWrapper}>
+          <For each={controls}>{(control, i) =>
+            <div 
+              onClick={() => {
+                if (i() !== selected()) {
+                  setSelected(i())
+                  setBlobby(b => [i(), ...b])
+                  setTimeout(() => {
+                    setBlobby(b => [i()])
+                  }, 500)
+                }
+              }}
+              class={styles.control}
+            >
+              <img 
+                src={control.icon}
+              />
+            </div>
+          }</For>
+        </div>
+      </div>
+
+      <svg style="display: none;" xmlns="http://www.w3.org/2000/svg" version="1.1">
+      <defs>
+      <filter id="goo">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+        <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
+        <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
+      </filter>
+      </defs>
+      </svg>
+    </>
+  )
+}

src/components/Hero.module.css

@@ -0,0 +1,30 @@
+.Hero {
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--clr-bg);
+}
+
+.gradientText {
+  font-size: 72px;
+  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient 5s ease infinite;
+  width: max-content;
+  margin: auto;
+  background-size: 200% auto;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}

src/components/Hero.tsx

@@ -0,0 +1,20 @@
+import { useI18n } from "@solid-primitives/i18n";
+
+import styles from './Hero.module.css';
+
+export default () => {
+  const [t] = useI18n();
+
+  return (
+    <header class={styles.Hero}>
+      <div>
+        <h1 class={styles.gradientText}>
+          {t('my_name')}
+        </h1>
+        <div>
+          {t('tagline')}
+        </div>
+      </div>
+    </header>
+  )
+};

src/components/Projects/Project.tsx

@@ -0,0 +1,9 @@
+import styles from './Project.module.css';
+
+export default () => {
+  return (
+    <div class={styles.Project}>
+
+    </div>
+  )
+}

src/components/Projects/Projects.tsx

@@ -0,0 +1,9 @@
+import styles from './Projects.module.css';
+
+export default () => {
+  return (
+    <div class={styles.Projects}>
+      
+    </div>
+  )
+};