satr14/5th-site-expanded
1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweaks

Browse source
This commit is contained in:
satr14 2025-07-05 21:10:53 +07:00
commit 118cf9f858
5 changed files with 653 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/app.css
View file

@ -1,17 +1,23 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
font-family: Stray;
src: url("/stray.otf") format("opentype");
}
@tailwind base;
@tailwind components;
@tailwind utilities;
* { @apply transition-all duration-300 ease-in-out; }
html { @apply h-full scroll-smooth; }
body { @apply bg-ctp-crust text-ctp-text h-full; }
body { @apply bg-ctp-crust text-ctp-text h-full font-[Roboto,_sans-serif]; }
h1 { @apply text-3xl md:text-4xl font-semibold my-4; }
h2 { @apply text-2xl md:text-3xl font-bold my-4; }
h3 { @apply text-xl md:text-2xl font-bold my-4; }
h4 { @apply text-lg md:text-xl font-bold my-4; }
h5 { @apply text-base md:text-lg font-bold my-4; }
h6 { @apply text-sm md:text-base font-bold my-4; }
a { @apply text-ctp-sapphire hover:text-ctp-sky underline focus:before:content-['_[_'] focus:after:content-['_]_'] focus:outline-none focus:no-underline; }
a { @apply text-ctp-sapphire hover:text-ctp-sky focus:outline-none no-underline; }
article { @apply p-2 sm:p-4 text-ctp-subtext0; }
p { @apply my-4 text-sm sm:text-base; }
code { @apply bg-ctp-overlay0 p-0.5 rounded-md; }

4
src/lib/index.ts
View file

@ -158,7 +158,7 @@ export function timeAgo(unixTimestamp: number): string {
export function randomStr(length: number): string {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'.toUpperCase();
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789'.toUpperCase();
const charactersLength = characters.length;
let counter = 0;
while (counter < length) {
@ -205,5 +205,7 @@ export default {
},
discord: "882595027132493864",
github: "SX-9",
reddit: "Frequent_Outside_741",
steam: "satr14",
blog: "https://blog.satr14.my.id/",
}

11
src/routes/+page.svelte
View file

@ -34,7 +34,7 @@
<div class="fixed top-0 left-0 w-full h-full overflow-hidden flex justify-center items-center select-none" transition:blur={{
duration: 1000, easing: cubicOut,
}}>
<div class="group whitespace-nowrap text-center text-5xl font-mono my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-base">
<div class="font-[Stray] group whitespace-nowrap text-center text-5xl my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-base">
<span class="inline-block animate-scrolling-text-to-l">{randomStr(charAmount)}</span><br>
<span class="block">{randomStr(Math.round(charAmount-data.name.length/2))}<a href={'https://github.com/'+data.github+'/5th-site'} target="_blank" class="group-hover:px-8 no-underline text-ctp-subtext1 group-hover:text-ctp-text">{data.name.toUpperCase()}</a>{randomStr(Math.round(charAmount-data.name.length/2))}</span>
<span class="inline-block animate-scrolling-text-to-r">{randomStr(charAmount)}</span><br>
@ -63,15 +63,17 @@
duration: 1500, easing: cubicOut, y: 200, opacity: 0,
}}>
<div class="max-w-3xl mx-auto px-4 pt-2 sm:pt-4">
<header>
<header class="overflow-hidden">
<nav class="flex flex-col-reverse sm:flex-row justify-center sm:justify-between items-center sm:gap-4 text-lg max-w-full w-full px-4 overflow-y-auto text-nowrap">
<div class="flex justify-center gap-4">
<a href={'https://github.com/'+data.github} target="_blank">github</a>
<a href={'https://discordapp.com/users/'+data.discord} target="_blank">discord</a>
<a href={'https://www.reddit.com/user/'+data.reddit} target="_blank">reddit</a>
<a href={'https://steamcommunity.com/id/'+data.steam} target="_blank">steam</a>
<a href={data.blog} target="_blank">blog</a>
</div>
<!-- svelte-ignore a11y-autofocus -->
<a href="/#abt" id="abt" class="text-center no-underline text-xl font-extrabold animate-bounce" autofocus>&uarr;</a>
<!-- svelte-ignore a11y_autofocus -->
<a href="/#abt" id="abt" class="text-center no-underline text-xl font-extrabold" autofocus>&uarr;</a>
<p class="text-center m-0 font-mono italic hidden sm:block">curl https://satr14.my.id</p>
</nav>
</header>
@ -82,7 +84,6 @@
<p>{data.description}</p>
<p class="text-sm"><i>
It's <b>{time}</b> in <b>{data.timezone}</b>.
<b>{days || 'Today'}</b> { days ? 'day' + (days === 1 ? '' : 's') + ' until my birthday.' : 'is my birthday!' }
</i></p>
<p class="flex flex-wrap gap-2 text-sm">
{#each data.skills as skill}