trafficlunar/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add more to about section

Browse source 
- also keep profile picture at same height and width to stop layout
changing on load
This commit is contained in:
trafficlunar 2025-11-30 21:55:24 +00:00
parent 94d38235d7
commit 78fa7539d6
2 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/Layout.astro
View file

@ -48,7 +48,7 @@ import Lunar from "../assets/lunar.svg";
<img
src="/pfp.png"
alt="profile picture"
class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause max-h-40 max-w-40"
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>

21
src/pages/index.astro
View file

@ -10,12 +10,29 @@ import LocationIcon from "../assets/icons/location.svg";
---
<Layout>
<section class="transition-all duration-300 delay-100 starting:opacity-0 starting:translate-y-4">
<section class="transition-all 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.
</p>
<p class="mt-2">I like coding things, maintaining and setting up servers, playing video games, and listening to music.</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">
This site was made using <a href="https://astro.build/" class="link">Astro</a> + <a href="https://svelte.dev/" class="link">Svelte</a> 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/"
class="link"
data-tooltip="At trafficlunar.nekoweb.org!">Nekoweb (?)</a
>.
</p>
<p class="mt-2">
I use <a href="https://archlinux.org/" class="link">Arch</a> BTW and <a href="https://hypr.land/" class="link">Hyprland</a> with <a
href="https://github.com/catppuccin/catppuccin?tab=readme-ov-file#-palette"
class="link">Catppuccin</a
>
<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 schemes for everything (including this website!)
</p>
<div class="flex gap-1 mt-4">
<div data-tooltip="Pronouns" class="text-sm rounded bg-peach/25 text-peach w-fit pl-1 pr-2 py-1 flex gap-1 items-center">