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

Compare commits

merge into: satr14:master
Branches Tags
satr14:master
satr14:bg-effect
...
pull from: satr14:bg-effect
Branches Tags
satr14:master
satr14:bg-effect
Sign in to create a new pull request.

1 commit
master ... bg-effect

Author SHA1 Message Date
Satria
d4ebf69173 add more text 2026-03-24 08:12:17 +07:00
1 changed files with 28 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/routes/+page.svelte
View file

@ -79,24 +79,34 @@
<div class="fixed top-0 left-0 w-full h-full overflow-hidden flex justify-center items-center select-none" transition:blur={{ <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, duration: 1000, easing: cubicOut,
}}> }}>
<div class="font-[Stray,monospace] group whitespace-nowrap text-center text-5xl my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-base"> <div class="font-[Stray,monospace] group whitespace-nowrap text-center text-5xl my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-surface2">
{#each Array(10) as _,i}
<div class="inline-flex relative overflow-hidden"> <div class="inline-flex relative overflow-hidden">
<span class="animate-[marquee_10s_linear_infinite] whitespace-nowrap"> <span class="whitespace-nowrap" style="opacity: {i*0.1}; animation: marquee {5 + i * 3}s linear infinite;">
{randomStr(charAmount)} {randomStr(charAmount)}
</span> </span>
<span class="absolute top-0 animate-[marquee2_10s_linear_infinite] whitespace-nowrap"> <span class="absolute top-0 whitespace-nowrap" style="opacity: {i*0.1}; animation: marquee2 {5 + i * 3}s linear infinite;">
{randomStr(charAmount)} {randomStr(charAmount)}
</span> </span>
</div><br> </div><br>
<span class="block">{randomStr(Math.round(charAmount-data.name.length/2))}<a href="https://git.satr14.my.id/satr14/5th-site-expanded" 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> {/each}
<span class="block">
{randomStr(Math.round(charAmount-data.name.length/2), false)}
<a href="https://git.satr14.my.id/satr14/5th-site-expanded" target="_blank" class="no-underline text-ctp-subtext1 group-hover:text-ctp-text">
{data.name.toUpperCase()}
</a>
{randomStr(Math.round(charAmount-data.name.length/2), false)}
</span>
{#each Array(9) as _,i}
<div class="inline-flex relative overflow-hidden"> <div class="inline-flex relative overflow-hidden">
<span class="animate-[marquee_10s_linear_infinite_reverse] whitespace-nowrap"> <span class="whitespace-nowrap" style="opacity: {(9-i)*0.1}; animation: marquee {26 - i * 3}s linear infinite reverse;">
{randomStr(charAmount)} {randomStr(charAmount)}
</span> </span>
<span class="absolute top-0 animate-[marquee2_10s_linear_infinite_reverse] whitespace-nowrap"> <span class="absolute top-0 whitespace-nowrap" style="opacity: {(9-i)*0.1}; animation: marquee2 {26 - i * 3}s linear infinite reverse;">
{randomStr(charAmount)} {randomStr(charAmount)}
</span> </span>
</div><br> </div><br>
{/each}
</div> </div>
</div> </div>