mirror of
https://github.com/hex248/ob248.com.git
synced 2026-02-07 18:23:04 +00:00
59 lines
2.2 KiB
Plaintext
59 lines
2.2 KiB
Plaintext
---
|
|
import ProjectPage from "../../components/ProjectPage.astro";
|
|
import Demo from "../../components/Demo.astro";
|
|
|
|
export const metadata = {
|
|
title: "Wiskatron",
|
|
description: "Spotify listening activity with dynamic visuals",
|
|
date: "February 2024",
|
|
slug: "wiskatron",
|
|
image: "/wiskatron-icon.svg",
|
|
// url: "https://wiskatron.oliverbryan.com",
|
|
github: "https://github.com/hex248/wiskatron",
|
|
hidden: false,
|
|
tags: ["web", "react", "typescript", "spotify_api"],
|
|
};
|
|
---
|
|
|
|
<ProjectPage metadata={metadata}>
|
|
<p class="mb-4">
|
|
Spotify listening activity web app with dynamic visuals, built with
|
|
Next.js.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="bg-ayu-highlight p-4 rounded">
|
|
<h2 class="text-lg text-ayu-green-500 mb-2">Key features</h2>
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<li>Live fetch from Spotify API</li>
|
|
<li>OAuth 2.0 authentication</li>
|
|
<li>Dynamic colour palette extraction</li>
|
|
<li>Smooth song transitions</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-ayu-highlight p-4 rounded">
|
|
<h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<li>Next.js + TypeScript</li>
|
|
<li>Spotify API</li>
|
|
<li>OAuth 2.0 with fastify</li>
|
|
<li>Next.js Server-side rendering & API routes</li>
|
|
<li>Colour palette extraction with node-vibrant</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/wiskatron/1.png" title="Example 1" />
|
|
<Demo image="/images/wiskatron/2.png" title="Example 2" />
|
|
<Demo image="/images/wiskatron/3.png" title="Example 3" />
|
|
<Demo image="/images/wiskatron/4.png" title="Example 4" />
|
|
<Demo image="/images/wiskatron/5.png" title="Example 5" />
|
|
<Demo image="/images/wiskatron/6.png" title="Example 6" />
|
|
</div>
|
|
</div>
|
|
</ProjectPage>
|