sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ added "Tools"-page

Browse source
This commit is contained in:
SindreKjelsrud 2023-08-29 11:57:38 +02:00
parent 95de68bda0
commit 02be38e66e
3 changed files with 112 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/pages/tools.astro Normal file
View file

@ -0,0 +1,51 @@
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import stackData from '../../public/data/tools.json'
---
<!DOCTYPE html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<div class="flex flex-col fixed w-screen p-5">
<Header title={SITE_TITLE} />
<main class="flex flex-col justify-center items-left mx-auto pt-8">
<h1 class="text-2xl">Tools</h1>
<p>Tools I use everyday (or at least most days)</p>
<ul class="pt-2">
{stackData.map((data) =>
<div class="p-2 mb-4 cards">
<ul>
<a
href={data.link}
class="flex gap-2"
>
<img src={data.icon} class="w-20 h-20" />
<div class="flex flex-col">
<p>
{data.name}
</p>
<div class="description">
<p>{data.description}</p>
</div>
<div class="tag">
<button class="flex auto border-solid border-2 px-1 rounded-md text-sm">
#{data.tag}
</button>
</div>
</div>
</a>
</ul>
</div>
)}
</ul>
</main>
<Footer />
</div>
</body>
</html>