juli0n21/homepage
1
0
Fork 0
mirror of https://github.com/JuLi0n21/homepage.git synced 2026-04-19 15:20:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

increase hover size and open folder on image click

Browse Source
This commit is contained in:
Julian Schlüter
2026-03-05 17:38:31 +01:00
parent 9d2fad8e59
commit 878885b40a
5 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/eai-xmpp/Screenshot From 2026-03-04 19-20-26.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
src/assets/eai-xmpp/Screenshot From 2026-03-04 19-20-32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
src/assets/eai-xmpp/Screenshot From 2026-03-04 19-20-51.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
src/assets/eai-xmpp/Screenshot From 2026-03-04 19-21-04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

23
src/pages/index.astro
View File

@@ -5,8 +5,9 @@ import { SITE_DESCRIPTION, SITE_TITLE } from '@ptypes/consts.ts';
let shuffled: string[] = []; let shuffled: string[] = [];
let images: string[] = []; let images: string[] = [];
const folder: string = 'https://fshare.kami.boo/folder/cmm9jbqvt00025omwu5cnpw9i';
const response = await fetch('https://fshare.kami.boo/api/server/folder/cmm9jbqvt00025omwu5cnpw9i') const api: string = 'https://fshare.kami.boo/api/server/folder/cmm9jbqvt00025omwu5cnpw9i';
const response = await fetch(api)
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
const files = data.files.map((f: Response) => `https://fshare.kami.boo/raw${f.url.substring(2)}`).sort(() => Math.random() - .5) as string[]; const files = data.files.map((f: Response) => `https://fshare.kami.boo/raw${f.url.substring(2)}`).sort(() => Math.random() - .5) as string[];
@@ -95,7 +96,7 @@ if (response.ok) {
} }
.tilted-container:hover { .tilted-container:hover {
transform: scale(1.05); transform: scale(1.10);
z-index: 1; z-index: 1;
} }
@@ -128,27 +129,27 @@ if (response.ok) {
<div class="gallery-wrapper"> <div class="gallery-wrapper">
<div class="scroll-track"> <div class="scroll-track">
{images.map((src) => ( {images.map((src) => (
<div class="tilted-container"> <a class="tilted-container" href={folder} target="_blank">
<img src={src} /> <img src={src} />
</div> </a>
))} ))}
{images.map((src) => ( {images.map((src) => (
<div class="tilted-container"> <a class="tilted-container" href={folder} target="_blank">
<img src={src} /> <img src={src} />
</div> </a>
))} ))}
</div> </div>
<div class="scroll-track track-reverse"> <div class="scroll-track track-reverse">
{shuffled.slice().reverse().map((src) => ( {shuffled.slice().reverse().map((src) => (
<div class="tilted-container"> <a class="tilted-container" href={folder} target="_blank">
<img src={src} /> <img src={src} />
</div> </a>
))} ))}
{shuffled.slice().reverse().map((src) => ( {shuffled.slice().reverse().map((src) => (
<div class="tilted-container"> <a class="tilted-container" href={folder} target="_blank">
<img src={src} /> <img src={src} />
</div> </a>
))} ))}
</div> </div>
</div> </div>