improved filter visuals

This commit is contained in:
Oliver Bryan
2025-09-30 20:34:37 +01:00
parent d53bd5a705
commit 342bca31e4
2 changed files with 30 additions and 17 deletions

View File

@@ -106,8 +106,8 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
</style> </style>
<Layout currentPage={{ title: "home", path: "/" }}> <Layout currentPage={{ title: "home", path: "/" }}>
<h2 class="text-2xl font-600 text-ayu-green-500">ABOUT</h2> <h2 class="text-2xl font-600 text-ayu-green-500 mb-2">ABOUT</h2>
<span class="flex flex-wrap gap-2 py-2"> <span class="flex flex-wrap gap-2 mb-2">
<a <a
href="https://github.com/hex248" href="https://github.com/hex248"
target="_blank" target="_blank"
@@ -127,7 +127,7 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
04oliverbryan@gmail.com 04oliverbryan@gmail.com
</a> </a>
</span> </span>
<ul class="list-disc ml-4 mb-4"> <ul class="list-disc ml-4 mb-2">
<li> <li>
<span class="text-ayu-red-500 font-500">Name: </span>Oliver Bryan <span class="text-ayu-red-500 font-500">Name: </span>Oliver Bryan
</li> </li>
@@ -158,21 +158,27 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
</li> </li>
</ul> </ul>
<h2 class="text-2xl font-600 text-ayu-green-500">PROJECTS</h2> <h2 class="text-2xl font-600 text-ayu-green-500 mt-6">PROJECTS</h2>
<div class="flex flex-wrap gap-2 py-2"> <div class="flex flex-col mb-2">
<div class="flex flex-wrap items-center gap-x-1 gap-y-1 mt-1">
<!-- <span class="text-sm mr-1 text-ayu-fg opacity-50 font-600"
>FILTER:</span
> -->
<Icon name="mdi:filter" class="w-5 h-5 text-ayu-gutter" />
{ {
sortedTags.map((tag) => ( sortedTags.map((tag) => (
<span <span
id={`tag-${tag}`} id={`tag-${tag}`}
data-tag={tag} data-tag={tag}
class="no-select cursor-pointer rounded-md border border-ayu-gutter text-ayu-fg px-2 py-0 text-sm font-500" class="no-select cursor-pointer rounded-md border border-ayu-gutter text-ayu-fg px-2 py-0 text-xs font-600"
> >
{tag} {tag}
</span> </span>
)) ))
} }
</div> </div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 py-2"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 py-2">
{ {
projects.map((project) => ( projects.map((project) => (

View File

@@ -11,7 +11,14 @@ export const metadata = {
url: "https://glimpse.ob248.com", url: "https://glimpse.ob248.com",
github: "https://github.com/hex248/glimpse", github: "https://github.com/hex248/glimpse",
hidden: false, hidden: false,
tags: ["web", "react", "typescript", "postgresql", "blobs", "database"], tags: [
"web",
"react",
"typescript",
"postgresql",
"blob_storage",
"database",
],
}; };
--- ---