Remake the home page

public/static/svg/chevron.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+</svg>

src/components/Tab.tsx

@@ -0,0 +1,17 @@
+import { createSignal } from "solid-js"
+
+
+export default function Tab(props: any) {
+  const [state, setState] = createSignal(false);
+  const toggle = () => setState(!state());
+    
+  return (
+    <section class="c-tab" classList={{active: state()}}>
+      <button class="c-tab__button" onClick={toggle}>
+        <img class="chevron" src="/static/svg/chevron.svg" alt=""/>
+        <span class="title">{props.title}</span>
+      </button>
+      {state() && <div>{props.children}</div>}
+    </section>
+  )
+}

src/pages/index.md

@@ -1,24 +0,0 @@
----
-layout: ../layouts/Home.astro
-title: "Welcome to kamoshi.org!"
-date: "2020–12–09"
----
-
-# Welcome to my personal website
-You've somehow made your way to the internet nexus of my activities - the place where I write and do random stuff! This website is a weird amalgamation of all my various interests and thoughts, so it probably is pretty random at times. It is also a [living document](https://en.wikipedia.org/wiki/Living_document) continously evolving throughout the time. It can change at any time without prior notice in any way imaginable, be wary of the fact anything here could be deleted or edited.
-
-Now that you've been warned, please enjoy the transient ramblings that are present here at this time. Why "Kamoshi"? It's a pretty long story...
-
-## Interactive map with my Geotagged photos
-Throughout the last few years I've been taking photos in random places. I've spent some time geotagging them, and I've been able to create a map of them. It takes a horrendous amount of time to geotag them, and honestly I've forgotten some places, so it will take a while to add at least some of the rest.
-
-[Take me to the map!](/map/)
-
-## A short guide to the Hanafuda card game
-I've been playing Hanafuda for a while now, so I decided to write a short guide to the game. I am by no means good at the game, so take everything with a grain of salt, but it should be enough to get you started.
-
-[Take me to the guide!](/posts/)
-
-## Thanks for visiting!
-
-

src/pages/index.mdx

@@ -0,0 +1,36 @@
+---
+layout: ../layouts/Home.astro
+title: "Welcome to kamoshi.org!"
+date: "2020–12–09"
+---
+import Tab from '../components/Tab';
+
+# Welcome!
+
+You have somehow found this little floating rock in the middle of the Internet! Some questions you might have while seeing this are page are…
+
+<Tab title="What is this place?" client:load>
+It's just my personal website which I use to play around with webdev and write random stuff. You can find here random stuff written by me, which might or might not be interesting. Who knows.
+</Tab>
+<Tab title="Why did I make this place?" client:load>
+No reason really, it was just a random idea that I had one summer. Afterwards I just started adding more and more stuff in my free time until I got to this point. The styles are all written by me from scratch, by the way :smile:
+</Tab>
+
+Now that you're here, please enjoy the transient writings that are currently present, here, at this time, for you. Why "Kamoshi"? It's a pretty long story…
+
+## Interactive map with my Geotagged photos
+
+Throughout the last few years I've been taking photos of random things in random places. I've decided to spend some of my free time geotagging them and I managed to create a map of them. It takes a lot of time to geotag them though, so it can take a while for me to add them all to the map.
+
+[Take me to the map!](/map/)
+
+## A short guide to the Hanafuda card game
+I've been playing Hanafuda for a while now, so I decided to write a short introduction into this interesting card game. I am by no means good at the game, so take everything with a grain of salt, but I feel like it should be enough to get you started.
+
+[Take me to the guide!](/posts/hanafuda/)
+
+---
+
+Thanks for visiting! :smile:
+
+

src/styles/components/_tab.scss

@@ -0,0 +1,38 @@
+.c-tab {
+  width: auto;
+  margin: 0.5em 2em;
+  padding: 0.5em 1em;
+  background-color: white;
+  border: 1px gray dashed;
+  border-radius: 0.2em;
+
+  &__button {
+    cursor: pointer;
+    display: flex;
+    width: auto;
+    text-align: left;
+    background-color: unset;
+    border: unset;
+
+    &:focus-within,
+    &:hover {
+      .title {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .title {
+    margin-left: 0.5em;
+  }
+
+  .chevron {
+    display: block;
+    min-width: 1em;
+    transition: transform linear 100ms;
+  }
+
+  &.active .chevron {
+    transform: rotate(90deg);
+  }
+}

src/styles/styles.scss

@@ -8,6 +8,7 @@
 // Components
 @use 'components/map';
 @use 'components/search';
+@use 'components/tab';
 
 // Partials
 @use 'partials/nav';