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: improve performance and accessibility a bit

Browse source 
- compress images using webp
- add aria-labels and aria-hidden to some elements
- add robots.txt
- update packages
This commit is contained in:
trafficlunar 2025-12-02 19:51:16 +00:00
parent 78fa7539d6
commit c7b1565d48
21 changed files with 137 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/Clock.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import { onMount } from "svelte";
let clock = $state("");
let date = $state("");
let clock = $state("00:00:00 am");
let date = $state("1 Dec");
const myTimezone = "Europe/London";

9
src/components/Music.svelte
View file

@ -37,7 +37,14 @@
<a href={url} class="block relative h-24 group">
<div class="absolute p-2 flex gap-2 z-30 w-full">
<img src={image} alt="album cover" class="size-20 rounded-full animate-spin animate-duration-30s" />
<img
src={image}
width="80"
height="80"
fetchpriority="high"
alt="album cover"
class="size-20 rounded-full animate-spin animate-duration-30s"
/>
<div class="flex flex-col w-full min-w-0">
<h1 class="font-medium text-lg truncate">{song}</h1>

2
src/components/ProjectCard.svelte
View file

@ -23,7 +23,7 @@
<!-- Image -->
{#if image}
<div class="relative overflow-hidden">
<img src={image} alt="thumbnail" class="rounded-t-lg object-cover aspect-video w-full" />
<img src={image} width="600" height="300" loading="lazy" alt="thumbnail" class="rounded-t-lg object-cover aspect-video w-full" />
<div class="absolute inset-0 bg-linear-to-t from-mantle/90 via-mantle/30 to-transparent"></div>
</div>
{/if}

6
src/components/Projects.svelte
View file

@ -38,7 +38,7 @@
url: "https://github.com/trafficlunar/tomodachi-share",
websiteUrl: "https://tomodachishare.com",
year: 2025,
image: "/projects/tomodachi-share.png",
image: "/projects/tomodachi-share.webp",
},
{
name: "options-profiles",
@ -49,7 +49,7 @@
url: "https://github.com/trafficlunar/options-profiles",
websiteUrl: "https://modrinth.com/mod/options-profiles",
year: 2023,
image: "/projects/options-profiles.png",
image: "/projects/options-profiles.webp",
},
{
name: "api",
@ -70,7 +70,7 @@
url: "https://github.com/trafficlunar/blockmatic",
websiteUrl: "https://blockmatic.trafficlunar.net",
year: 2024,
image: "/projects/blockmatic.png",
image: "/projects/blockmatic.webp",
},
{
name: "website",

16
src/components/Socials.astro
View file

@ -14,28 +14,28 @@ import MailIcon from "../assets/icons/socials/mail.svg";
<ul class="grid grid-cols-4 [&_a]:flex [&_a]:justify-center [&_a]:size-full [&_a]:py-1">
<!-- z-50 for tooltips -->
<li class="z-50">
<a href="https://github.com/trafficlunar" data-tooltip="GitHub"><GitHubIcon /></a>
<a href="https://github.com/trafficlunar" data-tooltip="GitHub" aria-label="GitHub"><GitHubIcon /></a>
</li>
<li class="z-50">
<a href="https://bsky.app/profile/trafficlunar.net" data-tooltip="Bluesky"><BlueskyIcon /></a>
<a href="https://bsky.app/profile/trafficlunar.net" data-tooltip="Bluesky" aria-label="Bluesky"><BlueskyIcon /></a>
</li>
<li class="z-50">
<a href="https://www.twitter.com/trafficlunr" data-tooltip="Twitter"><TwitterIcon /></a>
<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"><DiscordIcon /></a>
<a href="https://discord.gg/48cXBFKvWQ" data-tooltip="Discord" aria-label="Discord"><DiscordIcon /></a>
</li>
<li>
<a href="https://www.reddit.com/user/trafficlunr" data-tooltip="Reddit"><RedditIcon /></a>
<a href="https://www.reddit.com/user/trafficlunr" data-tooltip="Reddit" aria-label="Reddit"><RedditIcon /></a>
</li>
<li>
<a href="https://anilist.co/user/trafficlunar/" data-tooltip="AniList"><AniListIcon /></a>
<a href="https://anilist.co/user/trafficlunar" data-tooltip="AniList" aria-label="AniList"><AniListIcon /></a>
</li>
<li>
<a href="https://www.last.fm/user/axolotlmaid" data-tooltip="Last.FM"><LastFMIcon /></a>
<a href="https://www.last.fm/user/axolotlmaid" data-tooltip="Last.FM" aria-label="Last.FM"><LastFMIcon /></a>
</li>
<li>
<a href="mailto:hello@trafficlunar.net" data-tooltip="E-mail"><MailIcon /></a>
<a href="mailto:hello@trafficlunar.net" data-tooltip="E-mail" aria-label="E-mail"><MailIcon /></a>
</li>
</ul>
</section>

10
src/components/Webring.astro
View file

@ -1,6 +1,8 @@
---
import { Image } from "astro:assets";
import ArrowRightIcon from "../assets/icons/arrow-right.svg";
import ArrowLeftIcon from "../assets/icons/arrow-left.svg";
import CatppuccinIcon from "../../public/catppuccin.webp";
---
<div class="w-full flex justify-center items-center">
@ -8,12 +10,15 @@ import ArrowLeftIcon from "../assets/icons/arrow-left.svg";
<ArrowLeftIcon
class="size-10.5 p-2 origin-right opacity-65 hover:opacity-100 hover:scale-110 transition-all duration-300"
style="transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);"
aria-label="Previous site in Catppuccin Webring"
/>
</a>
<a data-tooltip="Catppuccin Webring" href="https://ctp-webr.ing/">
<img
src="/catppuccin.png"
<Image
src={CatppuccinIcon}
width="48"
height="48"
alt="catppuccin webring"
class="size-12 opacity-65 hover:opacity-100 hover:scale-110 transition-all duration-300"
style="transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);"
@ -24,6 +29,7 @@ import ArrowLeftIcon from "../assets/icons/arrow-left.svg";
<ArrowRightIcon
class="size-10.5 p-2 origin-left opacity-65 hover:opacity-100 hover:scale-110 transition-all duration-300"
style="transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);"
aria-label="Next site in Catppuccin Webring"
/>
</a>
</div>