feat: contact text

This commit is contained in:
trafficlunar 2026-03-21 19:02:41 +00:00
parent eca7077915
commit d23f8486fc
3 changed files with 15 additions and 8 deletions

View file

@ -35,7 +35,7 @@ import MailIcon from "../assets/icons/socials/mail.svg";
<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" aria-label="E-mail"><MailIcon /></a>
<a href="mailto:hello@trafficlunar.net" data-tooltip="Email" aria-label="Email"><MailIcon /></a>
</li>
</ul>
</section>

View file

@ -26,7 +26,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/50 *: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 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>
@ -44,7 +44,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/50 *: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 mb-4 *:bg-surface0/30 *:shadow *:border *:border-surface1/50 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<TypeScriptIcon class="size-5" />
<span>TypeScript</span>
@ -74,7 +74,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/50 *: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 mb-4 *: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>
@ -103,7 +103,7 @@ import LinuxIcon from "../assets/icons/coding/linux.svg";
<span>infrastructure</span>
<hr class="grow border-surface0" />
</div>
<div class="flex gap-1 *:bg-surface0/50 *: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>
<PostgresIcon class="size-5" />
<span>PostgreSQL</span>

View file

@ -13,10 +13,17 @@ import LocationIcon from "../assets/icons/location.svg";
<section class="transition-[translate,opacity] duration-300 delay-100 starting:opacity-0 starting:translate-y-4 text-[0.938rem]">
<legend>about</legend>
<p>
Hey! I'm <strong class="text-peach">trafficlunar</strong>. I'm a <Age client:only /> year old self-proclaimed full-stack developer.
Hey! I'm <strong class="text-peach">trafficlunar</strong>. I'm a <Age client:only /> year old self-taught programmer.
</p>
<p class="mt-2">I like coding things, maintaining and setting up servers, playing video games, watching anime, and listening to music.</p>
<p class="mt-2">
<p class="mt-2">If you're looking to contact me, here are the best ways from fastest to slowest response:</p>
<ol class="list-decimal pl-8 text-sm mt-2">
<li>Discord <span class="text-surface2">(fastest, within a day or two)</span></li>
<li>Twitter <span class="text-surface2">(fastest)</span></li>
<li>Reddit <span class="text-surface2">(fast)</span></li>
<li>Email <span class="text-surface2">(really slow, within days or even a month, probably weeks tbh)</span></li>
</ol>
<p class="mt-4">
This site was made using Astro + Svelte and is hosted on both
<a href="https://pages.cloudflare.com/" class="link" data-tooltip="At trafficlunar.net!">Cloudflare Pages (?)</a> and <a
href="https://nekoweb.org/"
@ -28,7 +35,7 @@ import LocationIcon from "../assets/icons/location.svg";
I use Arch BTW and Hyprland with the Catppuccin
<span class="text-red">F</span><span class="text-peach">r</span><span class="text-yellow">a</span><span class="text-green">p</span><span class="text-blue"
>p</span
><span class="text-mauve">é</span> color scheme for everything (including this website!)
><span class="text-mauve">é</span> color scheme for everything (including this website!) I self-host a bunch of services and I also own a 3D printer.
</p>
<div class="flex gap-1 mt-4">