mirror of
https://github.com/hex248/ob248.com.git
synced 2026-02-07 18:23:04 +00:00
81 lines
2.4 KiB
Plaintext
81 lines
2.4 KiB
Plaintext
---
|
|
import ProjectPage from "../../components/ProjectPage.astro";
|
|
import Demo from "../../components/Demo.astro";
|
|
|
|
export const metadata = {
|
|
title: "Watercooler",
|
|
description:
|
|
"Virtual office space for remote teams allowing quick questions and spontaneous chats.",
|
|
date: "March 2025",
|
|
slug: "watercooler",
|
|
image: "/watercooler-icon.svg",
|
|
// github: "https://github.com/hex248/watercooler",
|
|
hidden: true,
|
|
tags: [
|
|
"web",
|
|
"react",
|
|
"typescript",
|
|
"webrtc",
|
|
"livekit",
|
|
"postgresql",
|
|
"oauth",
|
|
],
|
|
};
|
|
---
|
|
|
|
<style>
|
|
.green {
|
|
color: var(--ayu-green-500);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--ayu-blue-500);
|
|
color: var(--ayu-blue-500);
|
|
transition:
|
|
color 0.1s,
|
|
border-color 0.1s;
|
|
margin-bottom: 16px;
|
|
}
|
|
a:hover {
|
|
color: var(--ayu-blue-600);
|
|
border-color: var(--ayu-blue-600);
|
|
}
|
|
</style>
|
|
|
|
<ProjectPage metadata={metadata}>
|
|
<p>watercooler description here</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="bg-ayu-highlight p-4 rounded mt-4">
|
|
<h2 class="text-lg text-ayu-green-500 mb-2">Key features</h2>
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<li>feature1</li>
|
|
<li><span class="green">Status:</span> active prototype</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-ayu-highlight p-4 rounded mt-4">
|
|
<h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<li>LiveKit (WebRTC)</li>
|
|
<li>Next.js + TypeScript</li>
|
|
<li>Prisma ORM + PostgreSQL</li>
|
|
<li>Tailwind CSS</li>
|
|
<li>Google OAuth with NextAuth.js</li>
|
|
<li>Next.js Server-side rendering & API routes</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
|
|
<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/idk.png" title="idk" />
|
|
<Demo image="/images/watercooler/idk.png" title="idk" />
|
|
<Demo image="/images/watercooler/idk.png" title="idk" />
|
|
</div>
|
|
</div>
|
|
</ProjectPage>
|