Remake the home page
This commit is contained in:
parent
59725ddd9e
commit
dadedcb690
3
public/static/svg/chevron.svg
Normal file
3
public/static/svg/chevron.svg
Normal file
|
@ -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>
|
After Width: | Height: | Size: 291 B |
17
src/components/Tab.tsx
Normal file
17
src/components/Tab.tsx
Normal file
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -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!
|
||||
|
||||
|
36
src/pages/index.mdx
Normal file
36
src/pages/index.mdx
Normal file
|
@ -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:
|
||||
|
||||
|
38
src/styles/components/_tab.scss
Normal file
38
src/styles/components/_tab.scss
Normal file
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -8,6 +8,7 @@
|
|||
// Components
|
||||
@use 'components/map';
|
||||
@use 'components/search';
|
||||
@use 'components/tab';
|
||||
|
||||
// Partials
|
||||
@use 'partials/nav';
|
||||
|
|
Loading…
Reference in a new issue