trafficlunar/website
1
0
Fork 0
mirror of https://github.com/trafficlunar/website.git synced 2026-06-28 06:04:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: website

Browse source
This commit is contained in:
trafficlunar 2025-05-03 17:40:21 +01:00
parent fc22cf0330
commit 215e6944a8
45 changed files with 709 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/construction.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"><path fill="currentColor" d="M5.926 3.556a1.778 1.778 0 0 0-1.778 1.778h-2.37A1.778 1.778 0 0 0 0 7.111v13.037a1.778 1.778 0 0 0 1.778 1.778h2.37V32h2.37V21.926h18.963V32h2.37V21.926h2.37A1.778 1.778 0 0 0 32 20.148V7.111a1.778 1.778 0 0 0-1.778-1.778h-2.37a1.778 1.778 0 0 0-3.556 0H7.704a1.778 1.778 0 0 0-1.778-1.778m-4.741 7.081l4.119-4.119h5.985L1.185 16.622zm1.748 10.104L17.156 6.519h5.985L8.919 20.741zM29.007 6.519h1.215a.593.593 0 0 1 .593.593v3.585L20.77 20.741h-5.985zm1.807 10.044v3.585a.593.593 0 0 1-.593.593h-3.585z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 623 B

1
src/assets/icons/coding/astro.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M9.24 19.035c-.901-.826-1.164-2.561-.789-3.819c.65.793 1.552 1.044 2.486 1.186c1.44.218 2.856.137 4.195-.524c.153-.076.295-.177.462-.278c.126.365.159.734.115 1.11c-.107.915-.56 1.622-1.283 2.158c-.289.215-.594.406-.892.608c-.916.622-1.164 1.35-.82 2.41l.034.114a2.4 2.4 0 0 1-1.07-.918a2.6 2.6 0 0 1-.412-1.401c-.003-.248-.003-.497-.036-.74c-.081-.595-.36-.86-.883-.876a1.034 1.034 0 0 0-1.075.843q-.013.058-.033.126M4.1 15.007s2.666-1.303 5.34-1.303l2.016-6.26c.075-.304.296-.51.544-.51c.25 0 .47.206.545.51l2.016 6.26c3.167 0 5.34 1.303 5.34 1.303L15.363 2.602c-.13-.366-.35-.602-.645-.602H9.283c-.296 0-.506.236-.645.602c-.01.024-4.538 12.405-4.538 12.405"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 779 B

1
src/assets/icons/coding/go.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"><path fill="currentColor" d="M2.417 14.286c-.063 0-.078-.031-.047-.078l.328-.422c.031-.047.104-.078.167-.078h5.563c.063 0 .078.047.047.094l-.266.406a.23.23 0 0 1-.156.094zM.063 15.719c-.063 0-.078-.031-.047-.078l.328-.422c.031-.042.109-.073.172-.073H7.62c.063 0 .094.047.078.094l-.125.37c-.016.063-.078.094-.141.094zm3.77 1.432c-.063 0-.078-.047-.047-.089l.219-.391c.031-.047.094-.094.156-.094h3.115c.063 0 .094.047.094.109l-.031.375c0 .063-.063.109-.109.109zm16.172-3.146c-.979.25-1.651.438-2.62.688c-.234.063-.245.078-.453-.156c-.229-.266-.401-.438-.729-.594c-.984-.479-1.932-.344-2.818.234c-1.063.688-1.604 1.698-1.589 2.958c.01 1.25.87 2.276 2.099 2.448c1.063.141 1.948-.234 2.651-1.026c.141-.172.266-.359.422-.578h-3.01c-.323 0-.406-.203-.297-.469a26 26 0 0 1 .797-1.698a.43.43 0 0 1 .391-.25h5.672c-.031.422-.031.844-.094 1.266a6.65 6.65 0 0 1-1.281 3.052c-1.12 1.479-2.583 2.401-4.438 2.646c-1.526.203-2.948-.094-4.193-1.026c-1.151-.87-1.807-2.026-1.979-3.458c-.198-1.698.297-3.224 1.328-4.568c1.104-1.448 2.568-2.365 4.359-2.693c1.464-.266 2.87-.094 4.13.76c.828.547 1.417 1.297 1.807 2.198c.094.141.031.219-.156.266zm5.156 8.62c-1.417-.036-2.708-.438-3.802-1.375a4.9 4.9 0 0 1-1.682-3.005c-.281-1.76.203-3.318 1.26-4.708c1.141-1.495 2.51-2.271 4.365-2.599c1.589-.281 3.083-.125 4.443.797c1.229.839 1.995 1.974 2.193 3.469c.266 2.104-.339 3.818-1.792 5.286c-1.026 1.042-2.286 1.698-3.74 1.99c-.417.083-.839.094-1.245.146zm3.709-6.297c-.016-.203-.016-.359-.047-.516c-.281-1.542-1.698-2.411-3.177-2.073c-1.448.328-2.385 1.25-2.729 2.714c-.276 1.214.313 2.448 1.438 2.943c.854.375 1.714.328 2.536-.094c1.234-.641 1.901-1.635 1.979-2.974"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
src/assets/icons/coding/intellij.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 128 128"><path fill="currentColor" d="M21.906 5.484L4.961 51.848l11.45 3.83L6.276 74.434L23.49 88.027l-1.584 5.305l-7.508 26.293l35.852-12.957l24.55 15.85l45.083-18.057l2.105-67.781l-20.918 20.406v43.984H26.93V26.93h74.14v30.152l20.918-20.402L85.176 7.398L71.037 23.295l-10.83-13.287l-38.3-4.524zM27.93 27.93v72.14h72.14V27.93zm38.875 8.64h6.093v17.86a12.4 12.4 0 0 1-.668 4.254a7.92 7.92 0 0 1-4.964 4.879a12.1 12.1 0 0 1-4.036.632l.086.047a10.8 10.8 0 0 1-5.351-1.219a12.3 12.3 0 0 1-3.559-2.875l3.766-4.207c.687.778 1.484 1.45 2.367 2a4.85 4.85 0 0 0 2.621.73a3.46 3.46 0 0 0 2.668-1.058a5.07 5.07 0 0 0 .977-3.449zm-30.207.028h13.64v4.996h-3.816v17.261h3.816v5h-13.64v-5h3.824V41.594h-3.824zm-.051 50.148h27.43v4.574h-27.43z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 813 B

1
src/assets/icons/coding/java.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M6.175 10.333c-1.208.408-1.955.97-1.955 1.593c0 .848 1.389 1.587 3.44 1.97m0 0c-.762.386-1.217.875-1.217 1.408c0 1.243 2.487 2.251 5.555 2.251a13 13 0 0 0 2.223-.187m-6.56-3.471a18 18 0 0 0 3.226.28c1.708 0 3.265-.216 4.445-.573m1.11-3.48c-1.411.417-3.379.676-5.555.676c-4.295 0-7.778-1.008-7.778-2.252c0-.96 2.077-1.78 5-2.104"/><path d="M22 19.07C22 20.688 17.523 22 12 22S2 20.688 2 19.07c0-1.15 1.707-2.146 5-2.626m11.76-7.656c4.214-1.094 4.816 5.468-1.205 7.656M17.558 2c-.74.123-2.133.815-1.778 2.593c.356 1.777-.148 2.716-.444 2.963M13.113 2c-.741.148-2.134.978-1.778 3.111s-.148 2.704-.444 3"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 828 B

1
src/assets/icons/coding/lua.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512"><path fill="currentColor" fill-rule="evenodd" d="M255.916 63.517c106.273 0 192.425 86.151 192.425 192.425s-86.152 192.425-192.425 192.425S63.49 362.215 63.49 255.942S149.642 63.517 255.916 63.517m79.708 56.364c31.126 0 56.359 25.232 56.359 56.358s-25.233 56.359-56.359 56.359s-56.358-25.233-56.358-56.359s25.232-56.358 56.358-56.358M97.317 74.199l-10.02-11.501a256.5 256.5 0 0 1 26.783-20.39l8.422 12.718a241 241 0 0 0-25.185 19.173M43.06 398.96a256 256 0 0 0 20.539 26.671l11.445-10.084a241 241 0 0 1-19.312-25.079zM179.288 27.28l-4.849-14.463a257 257 0 0 0-31.148 12.775l6.701 13.703a242 242 0 0 1 29.296-12.015M74.886 96.518L63.436 86.44a256 256 0 0 0-20.526 26.68l12.677 8.484a241 241 0 0 1 19.298-25.087m-35.142 52.497l-13.678-6.753a259 259 0 0 0-12.896 31.09l14.442 4.911a243 243 0 0 1 12.132-29.248M143.5 486.422a259 259 0 0 0 31.158 12.725l4.834-14.468a243 243 0 0 1-29.315-11.972zM13.217 338.778a259 259 0 0 0 12.968 31.062l13.666-6.778a244 244 0 0 1-12.204-29.228zm483.212-101.422l15.21-1.17a255 255 0 0 0-4.796-33.33l-14.922 3.167a240 240 0 0 1 4.508 31.333M19.392 208.844l-14.958-2.989a258 258 0 0 0-4.423 33.37l15.22 1.008a243 243 0 0 1 4.16-31.389m-4.17 63.047L0 272.89a255.5 255.5 0 0 0 4.426 33.382l14.956-3a240 240 0 0 1-4.16-31.382m72.25 177.47a256 256 0 0 0 26.794 20.376l8.415-12.724a241 241 0 0 1-25.194-19.16zm304.068 6.034l8.561 12.625a256 256 0 0 0 26.558-20.686l-10.148-11.39a241 241 0 0 1-24.971 19.451M241.315 15.226L240.393 0a257 257 0 0 0-33.398 4.237l2.91 14.974a242 242 0 0 1 31.41-3.985m197.379 398.152l11.56 9.951a256 256 0 0 0 20.23-26.906l-12.77-8.344a241 241 0 0 1-19.02 25.3m34.562-52.882l13.752 6.603a259 259 0 0 0 12.554-31.228l-14.494-4.755a243 243 0 0 1-11.812 29.38m23.513-91.48a242.5 242.5 0 0 1-3.815 31.431l14.99 2.826A258 258 0 0 0 512 269.856zm.923-98.565a260 260 0 0 0-13.305-30.918l-13.592 6.926a244.5 244.5 0 0 1 12.522 29.095zM207.21 507.706a258 258 0 0 0 33.394 4.24l.925-15.226a242 242 0 0 1-31.41-3.989zM307.406 4.75a258 258 0 0 0-33.35-4.577l-1.078 15.216a242 242 0 0 1 31.367 4.305zm-34.218 491.804l1.084 15.216a255.5 255.5 0 0 0 33.357-4.61l-3.083-14.94a240 240 0 0 1-31.358 4.334m97.694-469.812a257 257 0 0 0-31.013-13.086l-4.993 14.414a242 242 0 0 1 29.166 12.306zM335.06 483.786l5.025 14.403a260 260 0 0 0 30.99-13.137l-6.852-13.629a244 244 0 0 1-29.163 12.363m113.286-363.905c31.13 0 56.364-25.235 56.364-56.364S479.475 7.153 448.346 7.153s-56.364 25.235-56.364 56.364s25.235 56.364 56.364 56.364" clip-rule="evenodd"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
src/assets/icons/coding/next.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m4-14h-1.35v4H16zM9.346 9.71l6.059 7.828l1.054-.809L9.683 8H8v7.997h1.346z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 268 B

1
src/assets/icons/coding/python.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M21.57 9.429c-.354-1.355-1-2.42-2.355-2.42H17.41v2.13c0 1.645-1.42 3.032-2.936 3.032H9.665c-1.322 0-2.355 1.13-2.355 2.452v4.55c0 1.257 1.13 2.032 2.355 2.451c1.485.452 2.936.549 4.775 0c1.194-.355 2.356-1.032 2.356-2.452v-1.807h-4.743v-.58h7.162c1.355 0 1.904-.968 2.355-2.42c.484-1.581.484-3.033 0-4.936m-6.84 9.033c.485 0 .904.42.904.904s-.42.903-.903.903c-.484.032-.904-.42-.904-.903c-.032-.484.387-.904.904-.904m-5.29-6.904h4.775c1.322 0 2.355-1.097 2.355-2.452V4.621c0-1.258-1.097-2.226-2.356-2.452c-1.58-.225-3.323-.225-4.774 0c-2.033.355-2.356 1.097-2.356 2.452v1.807h4.775v.58H5.342c-1.355 0-2.581.872-2.936 2.42c-.452 1.807-.452 2.936 0 4.808c.355 1.42 1.13 2.42 2.549 2.42h1.549v-2.162c-.033-1.581 1.355-2.936 2.936-2.936m-.29-6.356a.923.923 0 0 1-.904-.903c0-.484.42-.904.903-.904s.904.42.904.904s-.42.903-.904.903"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 947 B

1
src/assets/icons/coding/react.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M12 10.11c1.03 0 1.87.84 1.87 1.89c0 1-.84 1.85-1.87 1.85S10.13 13 10.13 12c0-1.05.84-1.89 1.87-1.89M7.37 20c.63.38 2.01-.2 3.6-1.7c-.52-.59-1.03-1.23-1.51-1.9a23 23 0 0 1-2.4-.36c-.51 2.14-.32 3.61.31 3.96m.71-5.74l-.29-.51c-.11.29-.22.58-.29.86c.27.06.57.11.88.16zm6.54-.76l.81-1.5l-.81-1.5c-.3-.53-.62-1-.91-1.47C13.17 9 12.6 9 12 9s-1.17 0-1.71.03c-.29.47-.61.94-.91 1.47L8.57 12l.81 1.5c.3.53.62 1 .91 1.47c.54.03 1.11.03 1.71.03s1.17 0 1.71-.03c.29-.47.61-.94.91-1.47M12 6.78c-.19.22-.39.45-.59.72h1.18c-.2-.27-.4-.5-.59-.72m0 10.44c.19-.22.39-.45.59-.72h-1.18c.2.27.4.5.59.72M16.62 4c-.62-.38-2 .2-3.59 1.7c.52.59 1.03 1.23 1.51 1.9c.82.08 1.63.2 2.4.36c.51-2.14.32-3.61-.32-3.96m-.7 5.74l.29.51c.11-.29.22-.58.29-.86c-.27-.06-.57-.11-.88-.16zm1.45-7.05c1.47.84 1.63 3.05 1.01 5.63c2.54.75 4.37 1.99 4.37 3.68s-1.83 2.93-4.37 3.68c.62 2.58.46 4.79-1.01 5.63c-1.46.84-3.45-.12-5.37-1.95c-1.92 1.83-3.91 2.79-5.38 1.95c-1.46-.84-1.62-3.05-1-5.63c-2.54-.75-4.37-1.99-4.37-3.68s1.83-2.93 4.37-3.68c-.62-2.58-.46-4.79 1-5.63c1.47-.84 3.46.12 5.38 1.95c1.92-1.83 3.91-2.79 5.37-1.95M17.08 12c.34.75.64 1.5.89 2.26c2.1-.63 3.28-1.53 3.28-2.26s-1.18-1.63-3.28-2.26c-.25.76-.55 1.51-.89 2.26M6.92 12c-.34-.75-.64-1.5-.89-2.26c-2.1.63-3.28 1.53-3.28 2.26s1.18 1.63 3.28 2.26c.25-.76.55-1.51.89-2.26m9 2.26l-.3.51c.31-.05.61-.1.88-.16c-.07-.28-.18-.57-.29-.86zm-2.89 4.04c1.59 1.5 2.97 2.08 3.59 1.7c.64-.35.83-1.82.32-3.96c-.77.16-1.58.28-2.4.36c-.48.67-.99 1.31-1.51 1.9M8.08 9.74l.3-.51c-.31.05-.61.1-.88.16c.07.28.18.57.29.86zm2.89-4.04C9.38 4.2 8 3.62 7.37 4c-.63.35-.82 1.82-.31 3.96a23 23 0 0 1 2.4-.36c.48-.67.99-1.31 1.51-1.9"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
src/assets/icons/coding/rust.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="m21.9 11.7l-.9-.5V11l.7-.7c.1-.1.1-.3 0-.4l-.1-.1l-.9-.3c0-.1 0-.2-.1-.2l.6-.8c.1-.1.1-.3-.1-.4c0 0-.1 0-.1-.1l-1-.2c0-.1-.1-.1-.1-.2l.4-.9v-.3c-.1-.1-.2-.1-.3-.1h-1s0-.1-.1-.1l.2-1c0-.2-.1-.3-.2-.3h-.1l-1 .2c0-.1-.1-.1-.2-.2v-1q0-.3-.3-.3h-.1l-.9.4h-.1L16 3c0-.2-.2-.3-.3-.2h-.1l-.8.6c-.1 0-.2 0-.2-.1l-.3-.9c-.1-.1-.2-.2-.4-.2c0 0-.1 0-.1.1L13 3h-.2l-.5-.8c-.1-.2-.3-.2-.5-.2l-.1.1l-.5.9H11l-.7-.7c-.1-.1-.3-.1-.4 0l-.1.1l-.3.9c-.1 0-.2 0-.2.1l-.8-.6c-.2-.1-.4-.1-.5.1V3l-.2 1s-.1 0-.2.1l-.9-.4c-.1-.1-.3 0-.4.1v1.1c0 .1-.1.1-.1.2l-1-.2c-.2-.1-.3 0-.3.2v.1l.2 1c-.1 0-.1.1-.2.1h-1q-.3 0-.3.3v.1l.4.9v.2L3 8c-.2 0-.3.2-.3.3v.1l.6.8c0 .1 0 .2-.1.2l-.8.4c-.1.1-.2.2-.2.4c0 0 0 .1.1.1l.7.7v.2l-.8.5c-.2.1-.2.3-.2.4l.1.1l.9.6v.2l-.7.7c-.1.1-.1.3 0 .4l.1.1l.9.3c0 .1 0 .2.1.2l-.6.8c-.1.1-.1.3.1.4c0 0 .1 0 .1.1l1 .2c0 .1.1.1.1.2l-.4.9c-.1.1 0 .3.1.4h1.1c.1 0 .1.1.2.1l-.2 1c0 .2.1.3.2.3h.1l1-.2c0 .1.1.1.2.2v1q0 .3.3.3h.1l.9-.4h.1l.2 1c0 .2.2.3.3.2h.1l.8-.6c.1 0 .2 0 .2.1l.3.9c.1.1.2.2.4.2c0 0 .1 0 .1-.1l.8-.7h.2l.5.8c.1.1.3.2.4.1l.1-.1l.5-.8h.2l.7.7c.1.1.3.1.4 0l.1-.1l.3-.9c.1 0 .2 0 .2-.1l.8.6c.1.1.3.1.4-.1c0 0 0-.1.1-.1l.2-1c.1 0 .1-.1.2-.1l.9.4c.1.1.3 0 .4-.1v-1.1l.2-.2l1 .2c.2 0 .3-.1.3-.2v-.1l-.2-1l.2-.2h1q.3 0 .3-.3v-.1l-.4-.9c0-.1.1-.1.1-.2l1-.2c.2 0 .3-.2.2-.3v-.1l-.6-.8l.1-.2l.9-.3c.1-.1.2-.2.2-.4c0 0 0-.1-.1-.1L21 13v-.2l.8-.5c.2-.1.2-.3.1-.6q0 .15 0 0m-5.7 7c-.3-.1-.5-.4-.5-.7c.1-.3.4-.5.7-.5c.3.1.5.4.5.7c0 .4-.3.6-.7.5m-.2-1.9c-.3-.1-.6.1-.6.4l-.4 1.4q-1.35.6-3 .6c-1.1 0-2.1-.2-3.1-.7l-.3-1.4c-.1-.3-.3-.5-.6-.4l-1.2.3c-.2-.2-.4-.5-.6-.7h6c.1 0 .1 0 .1-.1v-2.1c0-.1 0-.1-.1-.1h-1.7v-1.3h1.9c.2 0 .9 0 1.2 1c.1.3.2 1.3.4 1.6c.1.3.6 1 1.1 1h3.1c-.2.3-.4.5-.7.8zm-8.3 1.9c-.3.1-.6-.1-.7-.5c-.1-.3.1-.6.5-.7s.6.1.7.5c0 .3-.2.6-.5.7M5.4 9.5c.1.3 0 .7-.3.8s-.7 0-.8-.3s0-.7.3-.8c.4-.1.7 0 .8.3m-.7 1.6l1.3-.5c.3-.1.4-.4.3-.7L6 9.3h1V14H5c-.3-1-.4-1.9-.3-2.9m5.6-.4V9.3h2.5c.1 0 .9.1.9.7c0 .5-.6.7-1.1.7zm9 1.2v.5h-.8c-.1 0-.1 0-.1.1v.3c0 .8-.5 1-.9 1s-.8-.2-.9-.4c-.2-1.3-.6-1.5-1.2-2c.7-.5 1.5-1.2 1.5-2.1c0-1-.7-1.6-1.1-1.9c-.7-.4-1.4-.5-1.6-.5H6.6c1.1-1.2 2.5-2 4.1-2.3l.9 1c.2.2.5.2.8 0l1-1c2.1.4 3.9 1.7 5 3.6l-.7 1.6c-.1.3 0 .6.3.7l1.3.6zm-7.7-8c.2-.2.6-.2.8 0s.2.6 0 .8q-.45.45-.9 0c-.2-.2-.1-.5.1-.8m6.9 5.6c.1-.3.5-.4.8-.3s.4.5.3.8s-.5.4-.8.3s-.4-.5-.3-.8"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

1
src/assets/icons/coding/svelte.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M10.99 1.974c2.92-1.86 6.957-.992 9.001 1.934a6.27 6.27 0 0 1 1.072 4.74a5.9 5.9 0 0 1-.88 2.198c.64 1.221.855 2.62.61 3.977a5.88 5.88 0 0 1-2.657 3.94l-5.127 3.268c-2.92 1.86-6.957.993-9.002-1.933a6.27 6.27 0 0 1-1.07-4.741a5.9 5.9 0 0 1 .88-2.198a6.2 6.2 0 0 1-.611-3.977a5.88 5.88 0 0 1 2.658-3.94zM8.049 20.25c.782.29 1.633.332 2.44.123c.369-.099.72-.253 1.042-.458l5.128-3.267a3.54 3.54 0 0 0 1.598-2.37a3.77 3.77 0 0 0-.645-2.85a4.07 4.07 0 0 0-4.37-1.62c-.369.099-.72.253-1.042.458l-1.957 1.246a1.1 1.1 0 0 1-.314.138a1.227 1.227 0 0 1-1.5-.899a1.1 1.1 0 0 1-.01-.45a1.07 1.07 0 0 1 .48-.713l5.129-3.268a1.1 1.1 0 0 1 .314-.138a1.23 1.23 0 0 1 1.317.489c.157.222.23.492.207.762l-.018.19l.191.058a6.6 6.6 0 0 1 2.005 1.003l.263.192l.096-.295q.078-.235.123-.478a3.77 3.77 0 0 0-.644-2.85a4.07 4.07 0 0 0-4.371-1.621a3.7 3.7 0 0 0-1.042.458L7.34 7.357a3.54 3.54 0 0 0-1.6 2.37a3.77 3.77 0 0 0 .645 2.85a4.07 4.07 0 0 0 4.371 1.62c.369-.099.72-.253 1.042-.457l1.956-1.248q.148-.093.315-.137a1.23 1.23 0 0 1 1.5.899c.034.147.037.3.011.449a1.07 1.07 0 0 1-.482.713l-5.127 3.269a1.1 1.1 0 0 1-.314.137a1.23 1.23 0 0 1-1.317-.488a1.15 1.15 0 0 1-.207-.762l.017-.19l-.19-.058a6.6 6.6 0 0 1-2.005-1.003l-.263-.192l-.096.295a4 4 0 0 0-.123.478a3.77 3.77 0 0 0 .644 2.85a4.07 4.07 0 0 0 1.93 1.498"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/assets/icons/coding/typescript.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M19.131 3H4.869c-.955 0-1.73.787-1.73 1.758v14.484c0 .97.775 1.758 1.73 1.758h14.262c.956 0 1.73-.787 1.73-1.758V4.758c0-.97-.774-1.758-1.73-1.758m-5.712 9.984h-2.215v6.434H9.439v-6.434H7.223v-1.441h6.196zm5.712 5.277c-.139.317-.377.552-.658.739a3 3 0 0 1-.969.386a5.6 5.6 0 0 1-1.177.12a6.5 6.5 0 0 1-1.211-.11a3.7 3.7 0 0 1-1.004-.33v-1.689l-.066-.053l.066-.015v.068q.441.357.972.545c.347.133.727.2 1.108.2c.242 0 .426-.021.589-.06a1.4 1.4 0 0 0 .415-.168a.7.7 0 0 0 .246-.253a.7.7 0 0 0-.052-.738a1.3 1.3 0 0 0-.346-.335a3 3 0 0 0-.52-.295c-.207-.095-.418-.194-.657-.292c-.589-.281-1.053-.562-1.35-.95c-.301-.35-.45-.808-.45-1.335c0-.422.08-.76.242-1.055c.173-.316.377-.548.658-.738c.277-.193.588-.334.969-.422c.38-.088.762-.133 1.177-.133s.762.024 1.073.073c.311.05.602.127.865.229v1.652a2.3 2.3 0 0 0-.415-.242a3.8 3.8 0 0 0-.97-.275a3 3 0 0 0-.45-.033a2.4 2.4 0 0 0-.553.057a1.3 1.3 0 0 0-.416.161a.8.8 0 0 0-.26.25a.6.6 0 0 0-.093.327q0 .194.104.351q.103.152.295.296c.114.091.27.183.45.274c.207.091.394.183.623.278c.311.133.588.281.83.422c.243.14.447.305.623.492c.187.175.322.387.416.633s.142.523.142.843c0 .457-.108.809-.246 1.125"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/assets/icons/coding/vscodium.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 128 128"><path fill="currentColor" d="M61.773 2.91c-3.652 2.344-4.707 7.2-2.351 10.84C72.359 33.79 75.414 48.902 74.09 62.148c-5.356 25.364-16.996 30.508-27.172 30.508c-9.934 0-7.273-16.344.195-21.129c4.457-2.785 10.164-4.593 14.547-4.593c4.34 0 7.86-3.508 7.86-7.836c0-4.332-3.52-7.84-7.86-7.84c-5.117 0-10.14 1.078-14.824 2.906c.957-4.516 1.309-9.398.07-14.586c-1.879-7.883-7.285-15.406-16.68-22.703a7.86 7.86 0 0 0-5.8-1.598a7.86 7.86 0 0 0-5.235 2.961a7.826 7.826 0 0 0 1.38 11c7.652 5.946 10.179 10.344 11.042 13.965c.867 3.621.172 7.504-1.566 12.844c-2.219 7.191-4.793 13.613-5.922 19.773c-.555 3.032-.602 6.328-.746 8.965c-5.512-5.37-7.668-12.46-7.668-22.824c0-4.328-3.52-7.84-7.86-7.836s-7.855 3.508-7.855 7.836c0 14.152 4.137 27.617 15.23 36.602c10.04 9.562 35.57 6.027 35.57 21.386c0 4.332 6.345 6.442 10.684 6.442c4.454 0 10.055-2.977 10.055-6.442c0-17.426 18.363-28.015 48.59-27.969c4.344.008 7.863-3.5 7.871-7.828c.008-4.332-3.504-7.847-7.848-7.855c-2.066 0-4.082.07-6.066.187c3.379-7.949 4.879-16.699 4.566-26.148c-.14-4.328-3.773-7.723-8.113-7.582c-4.344.144-7.746 3.77-7.601 8.098c.41 12.375-.055 23.425-9.274 29.253c-2.62 1.653-5.672 3.09-8.562 3.09c2.246-6.101 3.941-12.547 4.632-19.488c.446-4.434.493-9.7-.015-13.785c-.781-6.336-1.73-13.524.676-18.938c2.16-4.66 7-6.613 14.109-6.613c4.336-.004 7.852-3.512 7.852-7.836c.003-4.332-3.512-7.844-7.852-7.848c-10.563 0-18.57 5.56-23.11 12.274c-2.37-5.066-5.261-10.29-8.753-15.7a7.87 7.87 0 0 0-4.942-3.413a7.9 7.9 0 0 0-3.066-.059a7.9 7.9 0 0 0-2.856 1.121m0 0"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
src/assets/icons/location.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M11.262 22.134S4 16.018 4 10a8 8 0 1 1 16 0c0 6.018-7.262 12.134-7.262 12.134c-.404.372-1.069.368-1.476 0M12 13.5a3.5 3.5 0 1 0 0-7a3.5 3.5 0 0 0 0 7"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 290 B

1
src/assets/icons/person.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M12 12q-1.65 0-2.825-1.175T8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12m-8 6v-.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2v.8q0 .825-.587 1.413T18 20H6q-.825 0-1.412-.587T4 18"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 368 B

1
src/assets/icons/socials/bluesky.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M12 11.388c-.906-1.761-3.372-5.044-5.665-6.662c-2.197-1.55-3.034-1.283-3.583-1.033C2.116 3.978 2 4.955 2 5.528c0 .575.315 4.709.52 5.4c.68 2.28 3.094 3.05 5.32 2.803c-3.26.483-6.157 1.67-2.36 5.898c4.178 4.325 5.726-.927 6.52-3.59c.794 2.663 1.708 7.726 6.444 3.59c3.556-3.59.977-5.415-2.283-5.898c2.225.247 4.64-.523 5.319-2.803c.205-.69.52-4.825.52-5.399c0-.575-.116-1.55-.752-1.838c-.549-.248-1.386-.517-3.583 1.033c-2.293 1.621-4.76 4.904-5.665 6.664"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 575 B

1
src/assets/icons/socials/discord.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

1
src/assets/icons/socials/github.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 679 B

1
src/assets/icons/socials/lastfm.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512"><path fill="currentColor" d="m225.8 367.1l-18.8-51s-30.5 34-76.2 34c-40.5 0-69.2-35.2-69.2-91.5c0-72.1 36.4-97.9 72.1-97.9c66.5 0 74.8 53.3 100.9 134.9c18.8 56.9 54 102.6 155.4 102.6c72.7 0 122-22.3 122-80.9c0-72.9-62.7-80.6-115-92.1c-25.8-5.9-33.4-16.4-33.4-34c0-19.9 15.8-31.7 41.6-31.7c28.2 0 43.4 10.6 45.7 35.8l58.6-7c-4.7-52.8-41.1-74.5-100.9-74.5c-52.8 0-104.4 19.9-104.4 83.9c0 39.9 19.4 65.1 68 76.8c44.9 10.6 79.8 13.8 79.8 45.7c0 21.7-21.1 30.5-61 30.5c-59.2 0-83.9-31.1-97.9-73.9c-32-96.8-43.6-163-161.3-163C45.7 113.8 0 168.3 0 261c0 89.1 45.7 137.2 127.9 137.2c66.2 0 97.9-31.1 97.9-31.1"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 695 B

1
src/assets/icons/socials/mail.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 249 B

1
src/assets/icons/socials/myanimelist.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M8.273 7.247v8.423l-2.103-.003v-5.216l-2.03 2.404l-1.989-2.458l-.02 5.285H.001L0 7.247h2.203l1.865 2.545l2.015-2.546zm8.628 2.069l.025 6.335h-2.365l-.008-2.871h-2.8c.07.499.21 1.266.417 1.779c.155.381.298.751.583 1.128l-1.705 1.125c-.349-.636-.622-1.337-.878-2.082a9.3 9.3 0 0 1-.507-2.179c-.085-.75-.097-1.471.107-2.212a3.9 3.9 0 0 1 1.161-1.866c.313-.293.749-.5 1.1-.687s.743-.264 1.107-.359a7.4 7.4 0 0 1 1.191-.183c.398-.034 1.107-.066 2.39-.028l.545 1.749H14.51c-.593.008-.878.001-1.341.209a2.24 2.24 0 0 0-1.278 1.92l2.663.033l.038-1.81zm3.992-2.099v6.627l3.107.032l-.43 1.775h-4.807V7.187z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 717 B

1
src/assets/icons/socials/reddit.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286A.72.72 0 0 0 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0m4.388 3.199a1.999 1.999 0 1 1-1.947 2.46v.002a2.37 2.37 0 0 0-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363a2.802 2.802 0 1 1 2.908 4.753c-.088 3.256-3.637 5.876-7.997 5.876c-4.361 0-7.905-2.617-7.998-5.87a2.8 2.8 0 0 1 1.189-5.34c.645 0 1.239.218 1.712.585c1.275-.79 2.881-1.291 4.64-1.365v-.01a3.23 3.23 0 0 1 2.88-3.207a2 2 0 0 1 1.959-1.595m-8.085 8.376c-.784 0-1.459.78-1.506 1.797s.64 1.429 1.426 1.429s1.371-.369 1.418-1.385s-.553-1.841-1.338-1.841m7.406 0c-.786 0-1.385.824-1.338 1.841s.634 1.385 1.418 1.385c.785 0 1.473-.413 1.426-1.429c-.046-1.017-.721-1.797-1.506-1.797m-3.703 4.013c-.974 0-1.907.048-2.77.135a.222.222 0 0 0-.183.305a3.2 3.2 0 0 0 2.953 1.964a3.2 3.2 0 0 0 2.953-1.964a.222.222 0 0 0-.184-.305a28 28 0 0 0-2.769-.135"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1,001 B

1
src/assets/icons/socials/twitter.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.2 4.2 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.52 8.52 0 0 1-5.33 1.84q-.51 0-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 595 B

1
src/assets/icons/socials/youtube.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 626 B

1
src/assets/kawaii.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 37 KiB

1
src/assets/lunar.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M12 1.992a10 10 0 1 0 9.236 13.838c.341-.82-.476-1.644-1.298-1.31a6.5 6.5 0 0 1-6.864-10.787l.077-.08c.551-.63.113-1.653-.758-1.653h-.266l-.068-.006z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 270 B

1
src/assets/traffic-cone-alt.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M10.661.788l-.947 3.785h4.573L13.343.802A1.06 1.06 0 0 0 12.315 0h-.644a1.04 1.04 0 0 0-1.01.788zM8.571 8.002c-1.26 4.16-2.375 8.355-3.429 12.57H3.48c-.468 0-.917.186-1.249.517s-.517.78-.517 1.249V24h20.571v-1.546c0-1.04-.843-1.882-1.882-1.882h-1.546c-.984-4.232-2.235-8.394-3.429-12.57z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 408 B

1
src/assets/traffic-cone.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8.467" height="8.467" viewBox="0 0 8.467 8.467"><path fill="currentColor" d="M.896 6.798l2.502 1.445a1.67 1.67 0 0 0 1.668 0l2.502-1.445c.172-.099.278-.283.278-.482s-.106-.382-.278-.482L5.067 4.39a1.67 1.67 0 0 0-1.668 0L.896 5.835c-.172.099-.278.283-.278.482s.106.382.278.482z"/><path fill="currentColor" d="M4.156.007a.44.44 0 0 0-.339.29l-.695 2.007.695.401c.258.149.576.149.834 0l.695-.401L4.651.297a.44.44 0 0 0-.495-.29zM2.843 3.106l-1.112 3.21 2.503 1.445 2.502-1.445-1.112-3.21-.973.562c-.258.149-.576.149-.835 0l-.973-.562z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 588 B

25
src/components/Clock.svelte Normal file
View file

@ -0,0 +1,25 @@
<script lang="ts">
import { onMount } from "svelte";
let clock = $state("");
let date = $state("");
const myTimezone = "Europe/London";
onMount(() => {
const interval = setInterval(() => {
const dateObject = new Date();
clock = dateObject.toLocaleTimeString("en-US", { timeZone: myTimezone, hour: "2-digit", minute: "2-digit", second: "2-digit" }).toLowerCase();
date = dateObject.toLocaleDateString("en-GB", { timeZone: myTimezone, day: "numeric", month: "short" });
}, 100);
return () => clearInterval(interval);
});
</script>
<section class="font-mono !py-2.5">
<legend>clock</legend>
<span class="block font-bold text-lg">{clock}</span>
<span class="block text-xs">{date}</span>
</section>

12
src/components/Footer.astro Normal file
View file

@ -0,0 +1,12 @@
---
import child_process from "child_process";
// Get commit hash
const hash = child_process.execSync("git rev-parse --short HEAD").toString().trim();
---
<footer class="flex justify-between gap-3 text-peach/50 *:hover:text-peach *:transition-colors text-sm mt-4">
<a href="https://github.com/trafficlunar/website">Source code</a>
<!-- <span>•</span> -->
<a href=`https://github.com/trafficlunar/website/commit/${hash}` class="font-mono">{hash}</a>
</footer>

57
src/components/Music.svelte Normal file
View file

@ -0,0 +1,57 @@
<script lang="ts">
import { onMount } from "svelte";
let song = $state("loading...");
let artist = $state("...");
let image = $state("/missing.webp");
let url = $state("");
let playing = $state(false);
onMount(() => {
const get = async () => {
const request = await fetch("https://api.trafficlunar.net/song");
const data = await request.json();
song = data.song;
artist = data.artist;
image = data.image;
url = data.url;
playing = data.playing;
};
get();
const interval = setInterval(get, 30000);
return () => clearInterval(interval);
});
</script>
<a href={url} class="block relative h-20 group">
<div class="absolute size-full rounded-md flex gap-2 bg-mantle border border-surface0 z-10"></div>
<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>
<div class="absolute p-2 flex gap-2 z-30 w-full">
<img src={image} alt="album cover" class="size-16 rounded-full animate-spin animate-duration-30s" />
<div class="flex flex-col w-full min-w-0">
<h1 class="font-medium">{song}</h1>
<span class="text-xs">{artist}</span>
</div>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 20 20"
class="absolute right-2 top-2 z-10 text-overlay1 transition-all group-hover:top-1.5 group-hover:right-1.5 group-hover:text-peach"
><path
fill="currentColor"
d="M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v7.5c0 .966.784 1.75 1.75 1.75h7.5a1.75 1.75 0 0 0 1.75-1.75v-2a.75.75 0 0 1 1.5 0v2A3.25 3.25 0 0 1 13.75 17h-7.5A3.25 3.25 0 0 1 3 13.75v-7.5A3.25 3.25 0 0 1 6.25 3h2a.75.75 0 0 1 0 1.5zm4.25-.75a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V5.56l-3.72 3.72a.75.75 0 1 1-1.06-1.06l3.72-3.72h-3.19a.75.75 0 0 1-.75-.75"
/></svg
>
</a>

75
src/components/Projects.svelte Normal file
View file

@ -0,0 +1,75 @@
<script lang="ts">
import { onMount } from "svelte";
interface Project {
owner: string;
name: string;
description: string;
stars: number;
language: string;
url: string;
color?: string;
}
const languageColors: Record<string, string> = {
JavaScript: "bg-yellow",
TypeScript: "bg-blue",
Python: "bg-[#3572A5]",
Java: "bg-peach",
Rust: "bg-[#dea584]",
C: "bg-[#555555]",
"C++": "bg-[#f34b7d]",
Go: "bg-sapphire",
Astro: "bg-[#ff5a03]",
Svelte: "bg-[#ff3e00]",
};
let projects: Project[] = [];
onMount(async () => {
const response = await fetch("https://api.trafficlunar.net/projects");
const data: Project[] = await response.json();
projects = data.map((project) => ({ ...project, color: languageColors[project.language ?? ""] ?? "bg-overlay0" }));
});
</script>
<div class="grid grid-cols-2 gap-4">
{#each projects as project}
<a href={project.url} class="group">
<section class="h-full flex flex-col">
<h1 class="font-medium text-xl mb-1 text-nowrap overflow-hidden text-ellipsis w-11/12" title={project.name}>{project.name}</h1>
<p class="mb-4 text-sm text-subtext0">{project.description}</p>
<div class="text-sm flex gap-6 mt-auto">
<div class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="text-yellow"
><path
fill="currentColor"
d="m12 17.275l-4.15 2.5q-.275.175-.575.15t-.525-.2t-.35-.437t-.05-.588l1.1-4.725L3.775 10.8q-.25-.225-.312-.513t.037-.562t.3-.45t.55-.225l4.85-.425l1.875-4.45q.125-.3.388-.45t.537-.15t.537.15t.388.45l1.875 4.45l4.85.425q.35.05.55.225t.3.45t.038.563t-.313.512l-3.675 3.175l1.1 4.725q.075.325-.05.588t-.35.437t-.525.2t-.575-.15z"
/></svg
>
<span>{project.stars}</span>
</div>
<div class="flex items-center gap-1.5">
<div class={`size-4 rounded-full ${project.color}`}></div>
<span>{project.language}</span>
</div>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 20 20"
class="absolute right-4 top-4 text-overlay1 transition-all group-hover:top-3.5 group-hover:right-3.5 group-hover:text-peach"
><path
fill="currentColor"
d="M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v7.5c0 .966.784 1.75 1.75 1.75h7.5a1.75 1.75 0 0 0 1.75-1.75v-2a.75.75 0 0 1 1.5 0v2A3.25 3.25 0 0 1 13.75 17h-7.5A3.25 3.25 0 0 1 3 13.75v-7.5A3.25 3.25 0 0 1 6.25 3h2a.75.75 0 0 1 0 1.5zm4.25-.75a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V5.56l-3.72 3.72a.75.75 0 1 1-1.06-1.06l3.72-3.72h-3.19a.75.75 0 0 1-.75-.75"
/></svg
>
</section>
</a>
{/each}
</div>

40
src/components/Socials.astro Normal file
View file

@ -0,0 +1,40 @@
---
import GitHubIcon from "../assets/icons/socials/github.svg";
import BlueskyIcon from "../assets/icons/socials/bluesky.svg";
import RedditIcon from "../assets/icons/socials/reddit.svg";
import DiscordIcon from "../assets/icons/socials/discord.svg";
import YouTubeIcon from "../assets/icons/socials/youtube.svg";
import MyAnimeListIcon from "../assets/icons/socials/myanimelist.svg";
import LastFMIcon from "../assets/icons/socials/lastfm.svg";
import MailIcon from "../assets/icons/socials/mail.svg";
---
<section class="mt-8 !p-2">
<legend>socials</legend>
<ul class="grid grid-cols-4 [&_a]:flex [&_a]:justify-center [&_a]:size-full [&_a]:py-1">
<li class="z-50">
<a href="https://github.com/trafficlunar" data-tooltip="GitHub"><GitHubIcon /></a>
</li>
<li class="z-50">
<a href="https://bsky.app/profile/trafficlunar.net" data-tooltip="Bluesky"><BlueskyIcon /></a>
</li>
<li class="z-50">
<a href="https://www.reddit.com/user/trafficlunr" data-tooltip="Reddit"><RedditIcon /></a>
</li>
<li class="z-50">
<a href="https://discord.com/users/1076507715775496233" data-tooltip="Discord"><DiscordIcon /></a>
</li>
<li>
<a href="https://www.youtube.com/@trafficlunar" data-tooltip="YouTube"><YouTubeIcon /></a>
</li>
<li>
<a href="https://myanimelist.net/profile/trafficlunar" data-tooltip="MyAnimeList"><MyAnimeListIcon /></a>
</li>
<li>
<a href="https://www.last.fm/user/axolotlmaid" data-tooltip="Last.FM"><LastFMIcon /></a>
</li>
<li>
<a href="mailto:hello@trafficlunar.net" data-tooltip="E-mail"><MailIcon /></a>
</li>
</ul>
</section>

95
src/components/Tools.astro Normal file
View file

@ -0,0 +1,95 @@
---
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";
---
<section class="!mb-0">
<legend>tools</legend>
<!-- separator -->
<div class="flex items-center gap-4 text-subtext0 text-sm font-medium mb-2">
<hr class="w-4 border-surface1" />
<span>editors</span>
<hr class="flex-grow border-surface1" />
</div>
<div class="flex gap-1 mb-4 *:bg-surface0/50 *:border *:border-surface1 *: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-4 text-subtext0 text-sm font-medium my-2">
<hr class="w-4 border-surface1" />
<span>languages</span>
<hr class="flex-grow border-surface1" />
</div>
<div class="flex gap-1 mb-4 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<TypeScriptIcon class="size-5" />
<span>TypeScript</span>
</div>
<div>
<GoIcon class="size-5" />
<span>Go</span>
</div>
<div>
<RustIcon class="size-5" />
<span>Rust</span>
</div>
<div data-tooltip="The Roblox version">
<LuaUIcon class="size-5" />
<span>Luau</span>
</div>
<div>
<JavaIcon class="size-5" />
<span>Java</span>
</div>
<div>
<PythonIcon class="size-5" />
<span>Python</span>
</div>
</div>
<!-- separator -->
<div class="flex items-center gap-4 text-subtext0 text-sm font-medium my-2">
<hr class="w-4 border-surface1" />
<span>frameworks</span>
<hr class="flex-grow border-surface1" />
</div>
<div class="flex gap-1 *:bg-surface0/50 *:border *:border-surface1 *:rounded-md *:p-1.5 *:text-sm *:flex *:items-center *:gap-1.5">
<div>
<SvelteIcon class="size-5" />
<span>Svelte</span>
</div>
<div>
<ReactIcon class="size-5" />
<span>React</span>
</div>
<div>
<NextIcon class="size-5" />
<span>Next</span>
</div>
<div>
<AstroIcon class="size-5" />
<span>Astro</span>
</div>
</div>
</section>

59
src/layouts/Layout.astro Normal file
View file

@ -0,0 +1,59 @@
---
import "@fontsource-variable/inter";
import "@fontsource-variable/jetbrains-mono";
import "../style.css";
import { ClientRouter } from "astro:transitions";
import Socials from "../components/Socials.astro";
import Clock from "../components/Clock.svelte";
import Footer from "../components/Footer.astro";
import KawaiiLogo from "../assets/kawaii.svg";
import TrafficCone from "../assets/traffic-cone.svg";
import TrafficConeAlt from "../assets/traffic-cone-alt.svg";
import Construction from "../assets/construction.svg";
import Lunar from "../assets/lunar.svg";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>trafficlunar.net</title>
<ClientRouter />
</head>
<body class="bg-base text-text flex flex-col items-center">
<a href="/" transition:persist>
<KawaiiLogo class="w-full h-48 mt-16 transition-transform duration-300 hover:rotate-2 hover:scale-105" />
</a>
<Lunar class="fixed top-8 right-8 size-12 cursor-pointer animate-avoid hover:animate-running not-hover:animate-pause" />
<TrafficConeAlt class="fixed size-12 bottom-0 left-8 text-peach" />
<TrafficConeAlt class="fixed size-14 bottom-0 left-19 text-peach" />
<div class="max-w-4xl grid grid-cols-5 gap-4 py-8">
<div transition:persist>
<a href="/">
<img
src="/pfp.png"
alt="profile picture"
class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause"
/>
</a>
<Socials />
<Clock client:only />
</div>
<div class="col-span-4 flex flex-col">
<slot />
<Footer />
</div>
</div>
</body>
</html>

14
src/pages/404.astro Normal file
View file

@ -0,0 +1,14 @@
---
import Layout from "../layouts/Layout.astro";
import Construction from "../assets/construction.svg";
---
<Layout>
<section class="font-mono flex flex-col justify-center items-center h-96">
<h1 class="font-extrabold text-6xl">404</h1>
<h2 class="text">not found</h2>
<Construction class="size-16 absolute left-8 bottom-0" />
</section>
</Layout>

47
src/pages/index.astro
View file

@ -1,16 +1,37 @@
---
import Layout from "../layouts/Layout.astro";
import Projects from "../components/Projects.svelte";
import Tools from "../components/Tools.astro";
import PersonIcon from "../assets/icons/person.svg";
import LocationIcon from "../assets/icons/location.svg";
---
---
<Layout>
<section>
<legend>about</legend>
<p>Hey there, I'm <strong class="text-peach">trafficlunar</strong>. I'm a 15 year old self-proclaimed full-stack developer and sysadmin.</p>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
<div class="flex gap-1 mt-2">
<div class="text-sm rounded-lg bg-peach/25 text-peach w-fit px-2 py-0.5 flex gap-1 items-center">
<PersonIcon />
he/him
</div>
<div class="text-sm rounded-lg bg-peach/25 text-peach w-fit pl-1 pr-2 py-0.5 flex gap-1 items-center">
<LocationIcon />
Scotland
</div>
</div>
</section>
<Tools />
<div class="flex items-center gap-4 text-subtext0 text-sm font-medium my-4">
<hr class="flex-grow border-surface1" />
<span>projects</span>
<hr class="flex-grow border-surface1" />
</div>
<Projects client:only />
</Layout>

20
src/pages/status.astro Normal file
View file

@ -0,0 +1,20 @@
---
import Layout from "../layouts/Layout.astro";
import Music from "../components/Music.svelte";
---
<Layout>
<section class="!mb-0 !pt-3">
<legend>status</legend>
<div class="flex items-center gap-4 text-subtext0 text-sm font-medium mb-2">
<hr class="flex-grow border-surface1" />
<span>last.fm</span>
<hr class="flex-grow border-surface1" />
</div>
<Music client:only />
<p class="text-center mt-4 text-subtext1 text-sm">more coming soon...</p>
</section>
</Layout>

99
src/style.css Normal file
View file

@ -0,0 +1,99 @@
@import "tailwindcss";
@theme {
--font-sans: "Inter Variable", "sans-serif";
--font-mono: "JetBrains Mono Variable", "monospace";
--animate-avoid: avoid 200ms infinite cubic-bezier(1, 1.65, 0, 1);
@keyframes avoid {
0% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
100% {
transform: translateX(-5px);
}
}
/* Catppuccin Frappe */
--color-rosewater: #f2d5cf;
--color-flamingo: #eebebe;
--color-pink: #f4b8e4;
--color-mauve: #ca9ee6;
--color-red: #e78284;
--color-maroon: #ea999c;
--color-peach: #ef9f76;
--color-yellow: #e5c890;
--color-green: #a6d189;
--color-teal: #81c8be;
--color-sky: #99d1db;
--color-sapphire: #85c1dc;
--color-blue: #8caaee;
--color-lavender: #babbf1;
--color-text: #c6d0f5;
--color-subtext1: #b5bfe2;
--color-subtext0: #a5adce;
--color-overlay2: #949cbb;
--color-overlay1: #838ba7;
--color-overlay0: #737994;
--color-surface2: #626880;
--color-surface1: #51576d;
--color-surface0: #414559;
--color-base: #303446;
--color-mantle: #292c3c;
--color-crust: #232634;
--color-peach-darker: #695454;
}
@utility animate-duration-30s {
animation-duration: 30s;
}
@utility animate-duration-2s {
animation-duration: 2s;
}
@utility animate-delay-2s {
animation-delay: 2s;
}
@utility animate-running {
animation-play-state: running;
}
@utility animate-pause {
animation-play-state: paused;
}
section {
@apply bg-mantle/75 p-4 rounded-lg relative border border-surface0 shadow-md;
}
section:has(legend) {
@apply rounded-tl-none mb-8;
}
section legend {
@apply bg-mantle/75 absolute -left-[1px] bottom-full px-2 py-0.5 text-overlay2 font-medium text-xs rounded-t-md border border-surface0 border-b-0 font-sans;
}
[data-tooltip] {
@apply relative z-10;
}
[data-tooltip]::before {
@apply content-[''] absolute left-1/2 -translate-x-1/2 top-full size-0 border-4 border-transparent border-b-peach opacity-0 scale-75 transition-all duration-200 ease-out origin-bottom;
}
[data-tooltip]::after {
@apply content-[attr(data-tooltip)] absolute left-1/2 -translate-x-1/2 top-full mt-2 px-2 py-1 bg-peach-darker border border-peach rounded-md text-peach font-medium text-sm opacity-0 scale-75 transition-all duration-200 ease-out origin-top shadow-md whitespace-nowrap select-none pointer-events-none;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
@apply opacity-100 scale-100;
}