mirror of
https://github.com/trafficlunar/website.git
synced 2026-06-27 21:54:08 +00:00
feat: improve performance and accessibility a bit
- compress images using webp - add aria-labels and aria-hidden to some elements - add robots.txt - update packages
This commit is contained in:
parent
78fa7539d6
commit
c7b1565d48
21 changed files with 137 additions and 72 deletions
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import "@fontsource-variable/jetbrains-mono";
|
|||
|
||||
import "../style.css";
|
||||
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
import Socials from "../components/Socials.astro";
|
||||
import Clock from "../components/Clock.svelte";
|
||||
import Online from "../components/Online.svelte";
|
||||
|
|
@ -12,9 +14,9 @@ import Header from "../components/Header.svelte";
|
|||
import Footer from "../components/Footer.astro";
|
||||
|
||||
import KawaiiLogo from "../assets/kawaii.svg";
|
||||
|
||||
import TrafficConeAlt from "../assets/traffic-cone-alt.svg";
|
||||
import Lunar from "../assets/lunar.svg";
|
||||
import ProfilePicture from "../../public/pfp.webp";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
@ -25,19 +27,53 @@ import Lunar from "../assets/lunar.svg";
|
|||
<meta name="generator" content={Astro.generator} />
|
||||
<title>trafficlunar.net</title>
|
||||
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="trafficlunar.net" />
|
||||
<meta name="description" content="welcome to trafficlunar's website!" />
|
||||
<meta name="keywords" content="trafficlunar, programming" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="language" content="English" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://trafficlunar.net" />
|
||||
<meta property="og:title" content="trafficlunar.net" />
|
||||
<meta property="og:description" content="welcome to trafficlunar's website!" />
|
||||
<meta property="og:image" content="https://trafficlunar.net/preview.webp" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://trafficlunar.net" />
|
||||
<meta property="twitter:title" content="trafficlunar.net" />
|
||||
<meta property="twitter:description" content="welcome to trafficlunar's website!" />
|
||||
<meta property="twitter:image" content="https://trafficlunar.net/preview.webp" />
|
||||
|
||||
<!-- Preconnect to API -->
|
||||
<link rel="preconnect" href="https://api.trafficlunar.net" crossorigin />
|
||||
|
||||
<script
|
||||
type="application/ld+json"
|
||||
set:html={JSON.stringify({
|
||||
"@context": "https://schema.org/",
|
||||
"@type": "Person",
|
||||
name: "trafficlunar",
|
||||
url: "https://trafficlunar.net",
|
||||
image: "https://trafficlunar.net/pfp.webp",
|
||||
sameAs: [
|
||||
"https://github.com/trafficlunar",
|
||||
"https://twitter.com/trafficlunr",
|
||||
"https://bsky.app/profile/trafficlunar.net",
|
||||
"https://anilist.co/user/trafficlunar",
|
||||
],
|
||||
})}
|
||||
/>
|
||||
</head>
|
||||
<body class="bg-base text-text flex flex-col items-center px-8">
|
||||
<a href="/" transition:persist>
|
||||
<a href="/" aria-label="trafficlunar logo" transition:persist>
|
||||
<KawaiiLogo class="w-full h-48 mt-16 drop-shadow-md transition-transform duration-300 hover:rotate-2 hover:scale-105" />
|
||||
</a>
|
||||
|
||||
<Lunar class="absolute top-8 right-8 size-12 animate-avoid hover:animate-running not-hover:animate-pause" />
|
||||
<Lunar aria-hidden class="absolute top-8 right-8 size-12 animate-avoid hover:animate-running not-hover:animate-pause" />
|
||||
|
||||
<div class="max-w-4xl w-full grid grid-cols-5 gap-4 py-8 max-[60rem]:grid-cols-1">
|
||||
<div
|
||||
|
|
@ -45,9 +81,13 @@ import Lunar from "../assets/lunar.svg";
|
|||
transition:persist
|
||||
>
|
||||
<a href="/">
|
||||
<img
|
||||
src="/pfp.png"
|
||||
<Image
|
||||
src={ProfilePicture}
|
||||
fetchpriority="high"
|
||||
width="160"
|
||||
height="160"
|
||||
alt="profile picture"
|
||||
decoding="async"
|
||||
class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause max-h-40 max-w-40 min-h-40 min-w-40"
|
||||
/>
|
||||
</a>
|
||||
|
|
@ -61,8 +101,8 @@ import Lunar from "../assets/lunar.svg";
|
|||
</div>
|
||||
|
||||
<div class="sm:col-span-4 flex flex-col relative">
|
||||
<TrafficConeAlt class="absolute size-12 bottom-full left-16 text-peach" />
|
||||
<TrafficConeAlt class="absolute size-14 bottom-full left-27 text-peach" />
|
||||
<TrafficConeAlt aria-hidden class="absolute size-12 bottom-full left-16 text-peach" />
|
||||
<TrafficConeAlt aria-hidden class="absolute size-14 bottom-full left-27 text-peach" />
|
||||
|
||||
<Header client:only />
|
||||
<!-- need <main /> for transitions -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue