mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-23 18:51:31 +08:00
Added tools page
This commit is contained in:
srleom
48
src/components/ToolSection.astro
Normal file
48
src/components/ToolSection.astro
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
import { cn } from '@/utils'
|
||||
import { Icon } from 'astro-icon/components'
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
title: string
|
||||
tools: {
|
||||
name: string
|
||||
description: string
|
||||
href: string
|
||||
iconPath: string
|
||||
iconBgColour: string
|
||||
}[]
|
||||
}
|
||||
const { class: className, title, tools, ...props } = Astro.props
|
||||
---
|
||||
|
||||
<div
|
||||
class={cn(
|
||||
className,
|
||||
'flex flex-col rounded-xl border border-border py-5 px-3 gap-y-4 sm:gap-y-6'
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<h2 class='px-2 text-lg font-medium'>{title}</h2>
|
||||
<div class='grid grid-cols-1 gap-x-2 gap-y-3 sm:grid-cols-2 sm:gap-y-4'>
|
||||
{
|
||||
tools.map((tool) => (
|
||||
<a
|
||||
class='group relative hover:bg-transparent '
|
||||
href={tool.href}
|
||||
id={tool.name}
|
||||
target='_blank'
|
||||
>
|
||||
<div class='relative flex flex-row items-center gap-x-4 px-2 py-0.5 transition-all'>
|
||||
<div class='absolute -inset-0 z-10 rounded-lg border border-border bg-muted opacity-0 transition-all group-hover:opacity-50' />
|
||||
<Icon name={tool.iconPath} class='z-20 h-10 w-10 rounded-lg bg-muted p-2' />
|
||||
<div class='z-20 flex flex-col'>
|
||||
<h3 class='font-medium'>{tool.name}</h3>
|
||||
<p class='text-muted-foreground'>{tool.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@ -9,12 +9,20 @@
|
||||
>
|
||||
<a class='flex-none text-xl font-semibold' href='/' aria-label='Brand'>resume</a>
|
||||
|
||||
<div class='flex flex-row items-center justify-center gap-x-7'>
|
||||
<div class='flex flex-row items-center justify-center gap-x-5 sm:gap-x-7'>
|
||||
<a
|
||||
href='/blog'
|
||||
class='flex-none text-[1.05rem] font-medium hover:text-foreground/75'
|
||||
aria-label='Nav Menu'>Blog</a
|
||||
>
|
||||
aria-label='Nav Menu Item'
|
||||
>Blog
|
||||
</a>
|
||||
<a
|
||||
href='/tools'
|
||||
class='flex-none text-[1.05rem] font-medium hover:text-foreground/75'
|
||||
aria-label='Nav Menu Item'
|
||||
>Tools
|
||||
</a>
|
||||
|
||||
<button
|
||||
id='toggleDarkMode'
|
||||
class='relative rounded-md border border-border p-1.5 transition-all hover:bg-border'
|
||||
|
||||
1
src/icons/arc.svg
Normal file
1
src/icons/arc.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="37.41" height="32" viewBox="0 0 256 219"><path fill="#FFF" d="M123.632.012c13.836.398 26.332 8.52 32.32 21.089l23.761 49.984l.382-.966a58.846 58.846 0 0 0 2.315-7.64l.332-1.548c4.004-20.02 23.463-32.977 43.52-29.016a36.982 36.982 0 0 1 29.018 43.526c-5.337 26.652-19.095 51.387-38.829 70.983l-.625.607l8.33 17.514c9.668 20.33-.349 44.903-21.4 51.799l-.95.297l-.725.219a36.691 36.691 0 0 1-9.897 1.373a37.012 37.012 0 0 1-33.42-21.102l-6.43-13.518l-1.622.402c-8.692 2.054-17.508 3.192-26.328 3.367l-2.405.024c-8.488 0-17.116-.987-25.736-2.9l-1.7-.396l-6.177 12.987a36.972 36.972 0 0 1-20.713 18.852l-1.1.382a36.963 36.963 0 0 1-28.96-2.484c-17.56-9.334-24.256-31.186-15.688-49.235l7.67-16.129l-.67-.65C17.39 137.46 9.054 125.67 3.524 112.996l-.737-1.733l-.106-.281C-4.93 92.058 4.21 70.517 23.122 62.86c14.834-6.005 31.278-1.693 41.39 9.578l.19.218l24.446-51.422A36.858 36.858 0 0 1 121.535.01L122.57 0z"/><path fill="#1A007F" d="m87.118 170.045l21.896-46.068c-16.724-3.552-33.551-13.897-43.068-26.482L43.05 145.63c12.723 10.793 27.999 19.276 44.068 24.414"/><path fill="#4E000A" d="M178.495 96.115c-11 13.483-26.275 23.483-42.62 27.379l21.827 45.93c15.931-5.38 30.827-14.069 43.69-25.206z"/><path fill="#1A007F" d="M43.05 145.631L31.602 169.7c-5.828 12.241-1.449 27.31 10.551 33.689c12.724 6.758 28.379 1.483 34.517-11.38l10.448-21.964A130.635 130.635 0 0 1 43.05 145.63"/><path fill="#FF9396" d="M223.942 43.565a25.137 25.137 0 0 0-29.585 19.723c-2.414 12.07-8.069 23.31-15.862 32.862l22.862 48.137c21.103-18.31 36.688-43.24 42.275-71.137c2.724-13.655-6.104-26.896-19.69-29.585"/><path fill="#002DC8" d="M135.875 123.494c-4.896 1.172-9.896 1.793-14.896 1.793c-3.896 0-7.93-.448-11.965-1.31c-16.724-3.552-33.551-13.897-43.068-26.482c-2.38-3.138-4.31-6.414-5.655-9.759c-5.207-12.862-19.862-19.068-32.724-13.896C14.705 79.047 8.5 93.702 13.671 106.563c5.896 14.62 16.31 28.034 29.379 39.068a130.48 130.48 0 0 0 44.033 24.414c11.069 3.551 22.551 5.517 33.862 5.517c12.551 0 24.93-2.173 36.723-6.138z"/><path fill="#FF536A" d="m213.425 169.596l-12.068-25.378l-22.862-48.103l-.034.035s0-.035.034-.035l-33.24-69.93a25.144 25.144 0 0 0-22.69-14.344c-9.69 0-18.517 5.586-22.689 14.345L65.98 97.495c9.517 12.585 26.344 22.93 43.068 26.482l10.965-23.034c1.035-2.173 4.138-2.173 5.173 0l10.724 22.551h.069h-.07l21.828 45.93l10.724 22.551a25.103 25.103 0 0 0 22.723 14.345c2.242 0 4.483-.31 6.69-.931c15.138-4.173 22.31-21.586 15.551-35.793"/></svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
1
src/icons/chatgpt.svg
Normal file
1
src/icons/chatgpt.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="31.51" height="32" viewBox="0 0 256 260"><path d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483m-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87l51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601M37.158 197.93a48.345 48.345 0 0 1-5.781-32.589l1.534.921l51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803M23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272l-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405zm179.466 41.695l-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213m21.742-32.69l-1.535-.922l-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391zM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87l-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367zm11.868-25.58L128.067 97.3l28.188 16.218v32.434l-28.086 16.218l-28.188-16.218z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
src/icons/figma.svg
Normal file
1
src/icons/figma.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21.34" height="32" viewBox="0 0 256 384"><path fill="#0ACF83" d="M64 384c35.328 0 64-28.672 64-64v-64H64c-35.328 0-64 28.672-64 64s28.672 64 64 64"/><path fill="#A259FF" d="M0 192c0-35.328 28.672-64 64-64h64v128H64c-35.328 0-64-28.672-64-64"/><path fill="#F24E1E" d="M0 64C0 28.672 28.672 0 64 0h64v128H64C28.672 128 0 99.328 0 64"/><path fill="#FF7262" d="M128 0h64c35.328 0 64 28.672 64 64s-28.672 64-64 64h-64z"/><path fill="#1ABCFE" d="M256 192c0 35.328-28.672 64-64 64s-64-28.672-64-64s28.672-64 64-64s64 28.672 64 64"/></svg>
|
||||
|
After Width: | Height: | Size: 578 B |
1
src/icons/notion.svg
Normal file
1
src/icons/notion.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 15 15"><path fill="currentColor" d="M3.258 3.117c.42.341.577.315 1.366.262l7.433-.446c.158 0 .027-.157-.026-.183l-1.235-.893c-.236-.184-.551-.394-1.155-.341l-7.198.525c-.262.026-.315.157-.21.262zm.446 1.732v7.821c0 .42.21.578.683.552l8.17-.473c.472-.026.525-.315.525-.656V4.324c0-.34-.131-.525-.42-.499l-8.538.499c-.315.026-.42.184-.42.525m8.065.42c.052.236 0 .472-.237.499l-.394.078v5.775c-.341.183-.657.288-.92.288c-.42 0-.525-.131-.84-.525L6.803 7.342v3.911l.815.184s0 .472-.657.472l-1.812.105c-.053-.105 0-.367.184-.42l.472-.13V6.292L5.15 6.24c-.053-.236.078-.577.446-.604l1.944-.13L10.22 9.6V5.978l-.683-.079c-.053-.289.157-.499.42-.525zm-9.93-3.937L9.326.781c.919-.08 1.156-.026 1.733.394l2.39 1.68c.395.288.526.367.526.682v9.212c0 .578-.21.92-.946.971l-8.694.525c-.552.027-.815-.052-1.104-.42l-1.76-2.283c-.315-.42-.446-.735-.446-1.103V2.25c0-.472.21-.866.814-.918"/></svg>
|
||||
|
After Width: | Height: | Size: 956 B |
1
src/icons/obsidian.svg
Normal file
1
src/icons/obsidian.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
1
src/icons/vscode.svg
Normal file
1
src/icons/vscode.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32.26" height="32" viewBox="0 0 256 254"><defs><linearGradient id="logosVisualStudioCode0" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient><path id="logosVisualStudioCode1" d="M180.828 252.605a15.872 15.872 0 0 0 12.65-.486l52.501-25.262a15.94 15.94 0 0 0 9.025-14.364V41.197a15.939 15.939 0 0 0-9.025-14.363l-52.5-25.263a15.877 15.877 0 0 0-18.115 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638l-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233l100.507 91.695a15.853 15.853 0 0 0 5.464 3.571m10.464-183.649l-76.262 57.889l76.262 57.888z"/></defs><mask id="logosVisualStudioCode2" fill="#fff"><use href="#logosVisualStudioCode1"/></mask><path fill="#0065A9" d="M246.135 26.873L193.593 1.575a15.885 15.885 0 0 0-18.123 3.08L3.466 161.482c-4.626 4.219-4.62 11.502.012 15.714l14.05 12.772a10.625 10.625 0 0 0 13.569.604L238.229 33.436c6.949-5.271 16.93-.315 16.93 8.407v-.61a15.938 15.938 0 0 0-9.024-14.36" mask="url(#logosVisualStudioCode2)"/><path fill="#007ACC" d="m246.135 226.816l-52.542 25.298a15.887 15.887 0 0 1-18.123-3.08L3.466 92.207c-4.626-4.218-4.62-11.502.012-15.713l14.05-12.773a10.625 10.625 0 0 1 13.569-.603l207.132 157.135c6.949 5.271 16.93.315 16.93-8.408v.611a15.939 15.939 0 0 1-9.024 14.36" mask="url(#logosVisualStudioCode2)"/><path fill="#1F9CF0" d="M193.428 252.134a15.892 15.892 0 0 1-18.125-3.083c5.881 5.88 15.938 1.715 15.938-6.603V11.273c0-8.318-10.057-12.483-15.938-6.602a15.892 15.892 0 0 1 18.125-3.084l52.533 25.263a15.937 15.937 0 0 1 9.03 14.363V212.51c0 6.125-3.51 11.709-9.03 14.363z" mask="url(#logosVisualStudioCode2)"/><path fill="url(#logosVisualStudioCode0)" fill-opacity=".25" d="M180.828 252.605a15.874 15.874 0 0 0 12.65-.486l52.5-25.263a15.938 15.938 0 0 0 9.026-14.363V41.197a15.939 15.939 0 0 0-9.025-14.363L193.477 1.57a15.877 15.877 0 0 0-18.114 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638l-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233l100.506 91.695a15.857 15.857 0 0 0 5.465 3.571m10.464-183.65l-76.262 57.89l76.262 57.888z" mask="url(#logosVisualStudioCode2)"/></svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
87
src/pages/tools/index.astro
Normal file
87
src/pages/tools/index.astro
Normal file
@ -0,0 +1,87 @@
|
||||
---
|
||||
import PageLayout from '@/layouts/BaseLayout.astro'
|
||||
import ToolSection from '@/components/ToolSection.astro'
|
||||
import Button from '@/components/Button.astro'
|
||||
|
||||
const DESIGN = [
|
||||
{
|
||||
name: 'Figma',
|
||||
description: 'Design Tool',
|
||||
href: 'https://www.figma.com/',
|
||||
iconPath: 'figma',
|
||||
iconBgColour: '#000001'
|
||||
}
|
||||
]
|
||||
|
||||
const PRODUCTIVITY = [
|
||||
{
|
||||
name: 'Arc',
|
||||
description: 'Browser',
|
||||
href: 'https://arc.net/',
|
||||
iconPath: 'arc',
|
||||
iconBgColour: '#414350'
|
||||
},
|
||||
{
|
||||
name: 'Notion',
|
||||
description: 'Note Taking',
|
||||
href: 'https://www.notion.so/product',
|
||||
iconPath: 'notion',
|
||||
iconBgColour: '#EFEFEE'
|
||||
},
|
||||
{
|
||||
name: 'Obsidian',
|
||||
description: 'Long-form Writing',
|
||||
href: 'https://obsidian.md/',
|
||||
iconPath: 'obsidian',
|
||||
iconBgColour: '#7A3EE8'
|
||||
}
|
||||
]
|
||||
|
||||
const DEVELOPMENT = [
|
||||
{
|
||||
name: 'VS Code',
|
||||
description: 'IDE',
|
||||
href: 'https://code.visualstudio.com/',
|
||||
iconPath: 'vscode',
|
||||
iconBgColour: '#2C2C32'
|
||||
},
|
||||
{
|
||||
name: 'ChatGPT',
|
||||
description: 'AI',
|
||||
href: 'https://chat.openai.com/',
|
||||
iconPath: 'chatgpt',
|
||||
iconBgColour: '#06A67F'
|
||||
}
|
||||
]
|
||||
---
|
||||
|
||||
<PageLayout meta={{ title: 'Home' }}>
|
||||
<div class='w-full'>
|
||||
<Button title='Back' href='/' style='button'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='14'
|
||||
height='14'
|
||||
viewBox='0 0 24 24'
|
||||
slot='icon-before'
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='m6.921 12.5l5.792 5.792L12 19l-7-7l7-7l.713.708L6.921 11.5H19v1z'
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</Button>
|
||||
|
||||
<div class='mt-5 flex w-full flex-col gap-y-10'>
|
||||
<div>
|
||||
<h1 class='mb-1 text-2xl font-bold'>Tools</h1>
|
||||
<p>Tools and software I use daily</p>
|
||||
</div>
|
||||
|
||||
<ToolSection title='Design' tools={DESIGN} />
|
||||
<ToolSection title='Productivity' tools={PRODUCTIVITY} />
|
||||
<ToolSection title='Development' tools={DEVELOPMENT} />
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
Reference in New Issue
Block a user