tags!

src/components/ProjectListItem.astro

@@ -7,6 +7,7 @@ const {
     slug,
     isDevMode = false,
     isHidden = false,
+    tags = [],
 } = Astro.props;
 ---
 
@@ -44,6 +45,7 @@ const {
 <a
     href={`/projects/${slug}`}
     class={`project-item block border-2 flex flex-col justify-between rounded-md ${isDevMode && isHidden ? "dev-hidden" : ""}`}
+    data-tags={tags.join(",")}
 >
     <div class="flex gap-4 p-4 pb-0">
         <div class="w-16 h-16 flex-shrink-0">
@@ -66,6 +68,17 @@ const {
             <p class="project-description text-sm">
                 {description}
             </p>
+            {
+                tags && tags.length > 0 && (
+                    <div class="flex gap-1.5 text-xs flex-wrap leading-3 items-center mb-1 no-select">
+                        {tags.map((tag: string, idx: number) => (
+                            <span class="flex items-center text-ayu-gutter font-500 rounded-md border border-ayu-gutter px-1.5 py-0.5">
+                                {tag}
+                            </span>
+                        ))}
+                    </div>
+                )
+            }
         </div>
     </div>
     <div class="w-full flex justify-end p-2 pt-1">

src/components/ProjectPage.astro

@@ -11,6 +11,7 @@ export interface Props {
         url?: string;
         github?: string;
         hidden: boolean;
+        tags?: string[];
     };
 }
 
@@ -85,6 +86,18 @@ const { metadata } = Astro.props;
             }
         </p>
 
+        {
+            metadata.tags && metadata.tags.length > 0 && (
+                <div class="flex gap-1.5 text-sm flex-wrap leading-3 items-center mb-2 no-select">
+                    {metadata.tags.map((tag: string, idx: number) => (
+                        <span class="flex items-center text-ayu-gutter font-500 rounded-md border border-ayu-gutter px-1.5 py-1">
+                            {tag}
+                        </span>
+                    ))}
+                </div>
+            )
+        }
+
         {
             metadata.url ? (
                 <a

src/pages/index.astro

@@ -12,6 +12,7 @@ interface ProjectMetadata {
     slug: string;
     hidden: boolean;
     image?: string;
+    tags?: string[];
 }
 
 interface AstroModule {
@@ -163,6 +164,7 @@ const projects: ProjectMetadata[] = Object.values(
                     slug={project.slug}
                     isDevMode={isDevMode}
                     isHidden={project.hidden}
+                    tags={project.tags || []}
                 />
             ))
         }

src/pages/projects/factor-e.astro

@@ -11,6 +11,7 @@ export const metadata = {
     image: "/factor-e-icon.svg",
     github: "https://github.com/hex248/factor-e",
     hidden: false,
+    tags: ["game", "cpp", "opengl", "cmake", "pixel-art"],
 };
 ---
 

src/pages/projects/glimpse.astro

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

src/pages/projects/mizu.astro

@@ -9,6 +9,7 @@ export const metadata = {
     slug: "mizu",
     image: "/mizu-icon.svg",
     hidden: true,
+    tags: ["nodejs", "typescript", "postgresql", "aws_s3", "discord"],
 };
 ---
 
@@ -22,6 +23,8 @@ export const metadata = {
         <ul class="list-disc list-inside space-y-1">
             <li>Node.js</li>
             <li>TypeScript</li>
+            <li>Express.js</li>
+            <li>Discord.js</li>
             <li>PostgreSQL</li>
             <li>AWS S3</li>
         </ul>

src/pages/projects/watercooler.astro

@@ -1,4 +1,4 @@
- ---
+---
 import ProjectPage from "../../components/ProjectPage.astro";
 import Demo from "../../components/Demo.astro";
 
@@ -11,6 +11,15 @@ export const metadata = {
     image: "/watercooler-icon.svg",
     // github: "https://github.com/hex248/watercooler",
     hidden: true,
+    tags: [
+        "web",
+        "react",
+        "typescript",
+        "webrtc",
+        "livekit",
+        "postgresql",
+        "oauth",
+    ],
 };
 ---
 
@@ -59,13 +68,13 @@ export const metadata = {
         </div>
     </div>
 
-     <div class="mt-4">
+    <div class="mt-4">
-         <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
+        <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
-         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-             <Demo image="/images/watercooler/office.png" title="Office space" />
+            <Demo image="/images/watercooler/office.png" title="Office space" />
-             <Demo image="/images/watercooler/idk.png" title="idk" />
+            <Demo image="/images/watercooler/idk.png" title="idk" />
-             <Demo image="/images/watercooler/idk.png" title="idk" />
+            <Demo image="/images/watercooler/idk.png" title="idk" />
-             <Demo image="/images/watercooler/idk.png" title="idk" />
+            <Demo image="/images/watercooler/idk.png" title="idk" />
-         </div>
+        </div>
-     </div>
+    </div>
 </ProjectPage>

src/pages/projects/wiskatron.astro

@@ -11,6 +11,7 @@ export const metadata = {
     // url: "https://wiskatron.oliverbryan.com",
     github: "https://github.com/hex248/wiskatron",
     hidden: false,
+    tags: ["web", "react", "typescript", "spotify_api"],
 };
 ---
 

src/styles/global.css

@@ -245,3 +245,11 @@ body {
     padding: 5px;
     text-align: center;
 }
+
+.no-select {
+    user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
+}