rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 07:44:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed projects section

Browse source
This commit is contained in:
liyunze 2025-07-01 23:28:15 +10:00
parent 366441fb11
commit 8abf775077
2 changed files with 38 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/components/projects/Project.astro
View file

@ -33,7 +33,7 @@ const leftProject = position == "left";
--- ---
<div <div
class="flex h-fit w-full flex-col justify-center px-10 lg:px-20" class="flex h-fit w-full flex-col justify-center px-10 lg:px-20 mb-10"
class:list={leftProject ? "lg:flex-row" : "lg:flex-row-reverse"} class:list={leftProject ? "lg:flex-row" : "lg:flex-row-reverse"}
> >
<div <div
@ -49,10 +49,12 @@ const leftProject = position == "left";
class={`absolute max-w-full class={`absolute max-w-full
aspect-video aspect-video
opacity-40 opacity-40
border-2 border-solid border-white rounded-xl`} border-2 border-solid border-white rounded-xl
top-1/2 left-1/2
background-img`}
class:list={leftProject class:list={leftProject
? "[transform:translateX(50px)_translateY(5px)_rotateY(5deg)_rotateX(0deg)_translateZ(-50px)]" ? "left"
: "[transform:translateX(10px)_translateY(5px)_translateZ(-50px)_rotateY(-3deg)]"} : "right"}
width="700" width="700"
/> />
<Image <Image
@ -62,10 +64,11 @@ const leftProject = position == "left";
class={`absolute max-w-full class={`absolute max-w-full
aspect-video aspect-video
opacity-100 opacity-100
border-2 border-solid border-white rounded-xl`} border-2 border-solid border-white rounded-xl
top-1/2 left-1/2 frontfacing-img`}
class:list={leftProject class:list={leftProject
? "[transform:rotateY(5deg)_rotateX(0deg)_translateX(60px)_translateZ(-50px)]" ? "left"
: "[transform:translateZ(-50px)_rotateY(-3deg)]"} : "right"}
/> />
) )
} }
@ -126,13 +129,30 @@ const leftProject = position == "left";
</div> </div>
</div> </div>
<style> <style>
.image-container img { .image-container img {
transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out;
} }
.background-img.left {
transform: translateX(calc(-50% + 25px)) translateY(calc(-50% + 5px)) translateZ(-50px) rotateY(5deg);
}
.background-img.right {
transform: translateX(calc(-50%)) translateY(calc(-50% + 5px)) translateZ(-50px) rotateY(-3deg);
}
.frontfacing-img.left {
transform: translateX(calc(-50% + 35px)) translateY(calc(-50%)) translateZ(-50px) rotateY(5deg);
}
.frontfacing-img.right {
transform: translateX(calc(-50% - 10px)) translateY(-50%) translateZ(-50px) rotateY(-3deg);
}
@media (min-width: 1025px) { @media (min-width: 1025px) {
.image-container:hover > img { .image-container:hover > img {
transform: rotateY(0deg) rotateX(0deg) translateZ(0px); transform: rotateY(0deg) rotateX(0deg) translateZ(0px) translateX(-50%) translateY(-50%);
} }
.image-container:hover > .visit-div { .image-container:hover > .visit-div {
@ -140,5 +160,13 @@ const leftProject = position == "left";
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
transition-delay: 0.3s; transition-delay: 0.3s;
} }
.background-img.left {
transform: translateX(-50%) translateY(calc(-50% + 5px)) translateZ(-50px) rotateY(5deg);
}
.frontfacing-img.left {
transform: translateX(calc(-50% + 10px)) translateY(calc(-50%)) translateZ(-50px) rotateY(5deg);
}
} }
</style> </style>

2
src/components/projects/VideoProject.svelte
View file

@ -79,7 +79,7 @@
</script> </script>
<div <div
class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20" class="mb-10 flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
class:lg:flex-row={positionLeft} class:lg:flex-row={positionLeft}
class:lg:flex-row-reverse={!positionLeft} class:lg:flex-row-reverse={!positionLeft}
> >