✨ added "Tools"-page
This commit is contained in:
parent
95de68bda0
commit
02be38e66e
3 changed files with 112 additions and 10 deletions
31
public/data/tools.json
Normal file
31
public/data/tools.json
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "Obsidian",
|
||||||
|
"description": "Private and flexible note‑taking app that adapts to the way you think",
|
||||||
|
"link": "https://obsidian.md/",
|
||||||
|
"icon": "https://img.icons8.com/?size=512&id=q53th37bGbV0&format=png",
|
||||||
|
"tag": "productivity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "GitHub",
|
||||||
|
"description": "Code hosting for all projects",
|
||||||
|
"link": "https://github.com/",
|
||||||
|
"icon": "https://img.icons8.com/?size=512&id=52539&format=png",
|
||||||
|
"tag": "webdev"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Alacritty",
|
||||||
|
"description": "A modern terminal emulator that comes with sensible defaults, but allows for extensive configuration",
|
||||||
|
"link": "https://alacritty.org/",
|
||||||
|
"icon": "https://cdn.icon-icons.com/icons2/3053/PNG/512/alacritty_macos_bigsur_icon_190410.png",
|
||||||
|
"tag": "productivity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Figma",
|
||||||
|
"description": "Design tool for all design artifacts and social media handles",
|
||||||
|
"link": "https://www.figma.com/",
|
||||||
|
"icon": "https://img.icons8.com/?size=512&id=zfHRZ6i1Wg0U&format=png",
|
||||||
|
"tag": "design"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
51
src/pages/tools.astro
Normal file
51
src/pages/tools.astro
Normal 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>
|
|
@ -1,19 +1,39 @@
|
||||||
/*
|
:root {
|
||||||
The CSS in this style tag is based off of Bear Blog's default CSS.
|
--light-bg: #FFF8EA;
|
||||||
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
|
--light-1: #594545;
|
||||||
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
|
--light-2: #815B5B;
|
||||||
*/
|
--light-3: #9E7676;
|
||||||
|
--light-hover: #DAC0A3;
|
||||||
|
--dark-bg: #27374D;
|
||||||
|
--dark-1: #DDE6ED;
|
||||||
|
--dark-2: #9DB2BF;
|
||||||
|
--dark-3: #526D82;
|
||||||
|
--dark-hover: #001C30;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: #FFF8EA;
|
background-color: var(--light-bg);
|
||||||
color: #815B5B;
|
color: var(--light-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
html.dark {
|
html.dark {
|
||||||
background-color: #27374D;
|
background-color: var(--dark-bg);
|
||||||
color: #DDE6ED;
|
color: var(--dark-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Verdana, sans-serif;
|
font-family: Verdana, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* TOOLS */
|
||||||
|
.cards :hover { background: var(--light-hover) }
|
||||||
|
|
||||||
|
.dark .cards :hover { background: var(--dark-hover) }
|
||||||
|
|
||||||
|
.description p { color: var(--light-2); }
|
||||||
|
|
||||||
|
.dark .description p { color: var(--dark-2); }
|
||||||
|
|
||||||
|
.tag button { color: var(--light-3); border-color: var(--light-3); }
|
||||||
|
|
||||||
|
.dark .tag button { color: var(--dark-3); border-color: var(--dark-3); }
|
Loading…
Add table
Reference in a new issue