trafficlunar/website
1
0
Fork 0
mirror of https://github.com/trafficlunar/website.git synced 2026-08-12 12:29:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: bunch of changes

Browse source
This commit is contained in:
trafficlunar 2026-07-08 23:55:25 +01:00
parent de9b144597
commit a088586c4a
15 changed files with 67 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/Computer.svelte
View file

@ -98,16 +98,16 @@
});
</script>
<div class="relative transition-[translate,opacity] duration-300 delay-200 starting:opacity-0 starting:translate-y-4">
<div class="relative transition-[translate,opacity] duration-300 delay-100 starting:opacity-0 starting:translate-y-4">
<div class="flex justify-center items-center absolute -top-2 right-2 z-0">
<div class="w-4 h-4 rounded-full {online ? 'bg-green' : 'bg-red'}"></div>
<div class="w-4 h-4 rounded-full absolute animate-duration-2s animate-delay-2s {online ? 'bg-green animate-ping' : 'bg-red'}"></div>
</div>
<section class="mb-0!">
<section>
<legend>computer</legend>
<div class="font-mono text-sm mb-4 space-y-4">
<div class="font-mono text-sm space-y-4">
<!-- System Stats Row -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
@ -188,6 +188,11 @@
</div>
</div>
<div class="flex justify-between text-xs text-overlay1 my-2">
<p>// All time data since 9 November 2025</p>
<p>Past hour:</p>
</div>
<div class="relative h-96 rounded-md bg-mantle border border-surface0 p-2 shadow-sm">
<Chart
data={chartData}
@ -318,7 +323,5 @@
</Tooltip.Root>
</Chart>
</div>
<p class="text-xs text-overlay1 mt-2">* Since 9 November 2025</p>
</section>
</div>

4
src/components/Music.svelte
View file

@ -26,13 +26,13 @@
});
</script>
<div class="relative transition-[translate,opacity] duration-300 delay-100 starting:opacity-0 starting:translate-y-4">
<div class="relative transition-[translate,opacity] duration-300 delay-200 starting:opacity-0 starting:translate-y-4">
<div class="flex justify-center items-center absolute -top-2 right-2 z-0">
<div class="w-4 h-4 rounded-full {playing ? 'bg-green' : 'bg-red'}"></div>
<div class="w-4 h-4 rounded-full absolute animate-duration-2s animate-delay-2s {playing ? 'bg-green animate-ping' : 'bg-red'}"></div>
</div>
<section class="p-2!">
<section class="p-2! mb-0!">
<legend>last.fm</legend>
<a href={url} class="block relative h-24 group">

10
src/components/ProjectCard.svelte
View file

@ -17,7 +17,10 @@
<div class="group relative hover:-translate-y-1 transition-transform duration-200">
<section class="h-full p-0! flex flex-col transition-colors group-hover:border-peach/50!">
{#if year}
<span class="absolute top-2 left-2 bg-peach text-base px-2 py-1 rounded-full text-xs font-medium z-10 shadow-md">{year}</span>
<span
class={`absolute bg-peach text-base px-2 py-1 rounded-full text-xs font-medium z-10 shadow-md
${image ? "top-2 left-2" : "top-4 right-4"}`}>{year}</span
>
{/if}
<!-- Image -->
@ -67,10 +70,7 @@
</a>
{#if websiteUrl}
<a
href={websiteUrl}
class="bg-peach/25 border border-peach/50 text-peach font-medium p-2 rounded-md flex justify-center items-center gap-2 text-sm"
>
<a href={websiteUrl} class="bg-peach/25 border border-peach/50 text-peach font-medium p-2 rounded-md flex justify-center items-center gap-2 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 48 48"
><g fill="none" stroke="currentColor" stroke-width="3"
><path stroke-linejoin="round" d="M3 24a21 21 0 1 0 42 0a21 21 0 1 0-42 0" /><path

9
src/components/Projects.svelte
View file

@ -72,6 +72,15 @@
year: 2024,
image: "/projects/blockmatic.webp",
},
{
name: "jellyfin-spicetify",
owner: "trafficlunar",
description: "Spicetify plugin to play Jellyfin songs on the Spotify client - maybe I'll continue it eventually",
stargazers_count: 0,
language: "",
url: "https://github.com/trafficlunar/jellyfin-spicetify",
year: 2026,
},
{
name: "website",
owner: "trafficlunar",

7
src/components/Socials.astro
View file

@ -23,7 +23,12 @@ import MailIcon from "../assets/icons/socials/mail.svg";
<a href="https://www.twitter.com/trafficlunr" data-tooltip="Twitter" aria-label="Twitter"><TwitterIcon /></a>
</li>
<li class="z-50">
<a href="https://discord.gg/48cXBFKvWQ" data-tooltip="Discord" aria-label="Discord"><DiscordIcon /></a>
<button
data-tooltip="Discord"
aria-label="Discord"
class="flex justify-center size-full py-1 cursor-pointer"
onclick="alert('My username is trafficlunar! (This alert is *hopefully* temporary)')"><DiscordIcon /></button
>
</li>
<li>
<a href="https://www.reddit.com/user/trafficlunr" data-tooltip="Reddit" aria-label="Reddit"><RedditIcon /></a>

53
src/components/Tools.astro
View file

@ -1,19 +1,15 @@
---
import VSCodiumIcon from "../assets/icons/coding/vscodium.svg";
import IntelliJIdeaIcon from "../assets/icons/coding/intellij.svg";
import TypeScriptIcon from "../assets/icons/coding/typescript.svg";
import GoIcon from "../assets/icons/coding/go.svg";
import RustIcon from "../assets/icons/coding/rust.svg";
import LuaUIcon from "../assets/icons/coding/lua.svg";
import JavaIcon from "../assets/icons/coding/java.svg";
import PythonIcon from "../assets/icons/coding/python.svg";
import SvelteIcon from "../assets/icons/coding/svelte.svg";
import ReactIcon from "../assets/icons/coding/react.svg";
import NextIcon from "../assets/icons/coding/next.svg";
import AstroIcon from "../assets/icons/coding/astro.svg";
import TailwindIcon from "../assets/icons/coding/tailwind.svg";
import PostgresIcon from "../assets/icons/coding/postgres.svg";
import DockerIcon from "../assets/icons/coding/docker.svg";
import LinuxIcon from "../assets/icons/coding/linux.svg";
---
<section class="mb-0! transition-[translate,opacity] duration-300 delay-200 starting:opacity-0 starting:translate-y-4">
@ -21,24 +17,6 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<!-- separator -->
<div class="flex items-center gap-2 text-overlay1 text-sm font-medium mb-2">
<hr class="w-4 border-surface0" />
<span>editors</span>
<hr class="grow border-surface0" />
</div>
<div class="flex flex-wrap gap-1 mb-4 *:bg-surface0/30 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<VSCodiumIcon class="size-5" />
<span>VSCodium</span>
</div>
<div>
<IntelliJIdeaIcon class="size-5" />
<span>IntelliJ IDEA</span>
</div>
</div>
<!-- separator -->
<div class="flex items-center gap-2 text-overlay1 text-sm font-medium my-2">
<hr class="w-4 border-surface0" />
<span>languages</span>
<hr class="grow border-surface0" />
@ -57,7 +35,7 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<RustIcon class="size-5" />
<span>Rust</span>
</div>
<div data-tooltip="The Roblox version">
<div data-tooltip="yes, the Roblox version">
<LuaUIcon class="size-5" />
<span>Luau</span>
</div>
@ -65,6 +43,10 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<JavaIcon class="size-5" />
<span>Java</span>
</div>
<div>
<PythonIcon class="size-5" />
<span>Python</span>
</div>
</div>
<!-- separator -->
@ -74,7 +56,7 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<hr class="grow border-surface0" />
</div>
<div class="flex flex-wrap gap-1 mb-4 *:bg-surface0/30 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div class="flex flex-wrap gap-1 *:bg-surface0/30 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<SvelteIcon class="size-5" />
<span>Svelte</span>
@ -96,25 +78,4 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<span>Tailwind</span>
</div>
</div>
<!-- separator -->
<div class="flex flex-wrap items-center gap-2 text-overlay1 text-sm font-medium my-2">
<hr class="w-4 border-surface0" />
<span>infrastructure</span>
<hr class="grow border-surface0" />
</div>
<div class="flex flex-wrap gap-1 *:bg-surface0/30 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<PostgresIcon class="size-5" />
<span>PostgreSQL</span>
</div>
<div>
<DockerIcon class="size-5" />
<span>Docker</span>
</div>
<div>
<LinuxIcon class="size-5" />
<span>Linux</span>
</div>
</div>
</section>