light7734/bonfire
1
1
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity

refactor: remove tilt effect from cards
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
light7734 2025-10-31 21:38:44 +03:30
parent 22dd43b6ed
commit ce3ec5bbc8
Signed by: light7734
GPG key ID: 8C30176798F1A6BA
2 changed files with 2 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/routes/bio.svelte
View file

@ -1,36 +1,11 @@
<script lang="ts"> <script lang="ts">
const bio = ` const bio = `
`; `;
let tiltX = 0;
let tiltY = 0;
function handleMouseMove(event: MouseEvent) {
const card = event.currentTarget as HTMLElement;
const rect = card.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const percentX = (x - centerX) / centerX;
const percentY = (centerY - y) / centerY; // Invert Y for natural tilt
const maxTilt = 2;
tiltX = percentY * maxTilt;
tiltY = percentX * maxTilt;
}
function handleMouseLeave() {
tiltX = 0;
tiltY = 0;
}
</script> </script>
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div <div
class="bg-card border-border relative mx-auto w-full max-w-2xl rounded-lg border border-dark-muted transition-all duration-300 ease-out hover:scale-[1.01] hover:shadow-[5px_5px_5px_#000000]" class="bg-card border-border relative mx-auto w-full max-w-2xl rounded-lg border border-dark-muted transition-all duration-100 ease-out hover:scale-[1.01] hover:shadow-[5px_5px_5px_#000000]"
style="transform: perspective(1000px) rotateX({tiltX}deg) rotateY({tiltY}deg);"
on:mousemove={handleMouseMove}
on:mouseleave={handleMouseLeave}
> >
<div class="mx-auto flex max-w-2xl origin-center"> <div class="mx-auto flex max-w-2xl origin-center">
<img <img

27
src/routes/project.svelte
View file

@ -35,36 +35,11 @@
let expanded = false; let expanded = false;
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
let tiltX = 0;
let tiltY = 0;
function handleMouseMove(event: MouseEvent) {
const card = event.currentTarget as HTMLElement;
const rect = card.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const percentX = (x - centerX) / centerX;
const percentY = (centerY - y) / centerY; // Invert Y for natural tilt
const maxTilt = 2;
tiltX = percentY * maxTilt;
tiltY = percentX * maxTilt;
}
function handleMouseLeave() {
tiltX = 0;
tiltY = 0;
}
</script> </script>
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div <div
class="bg-card border-border relative mx-auto w-full max-w-2xl rounded-lg border transition-all duration-300 ease-out hover:scale-[1.01] hover:shadow-[5px_5px_5px_#000000]" class="bg-card border-border relative mx-auto w-full max-w-2xl rounded-lg border transition-all duration-100 ease-out hover:scale-[1.01] hover:shadow-[5px_5px_5px_#000000]"
style="transform: perspective(1000px) rotateX({tiltX}deg) rotateY({tiltY}deg);"
on:mousemove={handleMouseMove}
on:mouseleave={handleMouseLeave}
> >
<div class="p-6"> <div class="p-6">
<div class="mb-4 flex items-center gap-4"> <div class="mb-4 flex items-center gap-4">