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

fixed widget project

Browse source
This commit is contained in:
liyunze 2025-07-02 10:17:23 +10:00
parent 8abf775077
commit 9c311c207b
3 changed files with 65 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/projects/ProjectsComponent.astro
View file

@ -67,20 +67,22 @@ import Project from "./Project.astro";
>
<TaskWidget
classList={`
widget
[perspective:200px] absolute [transform:translateX(-10px)_translateY(5px)_translateZ(-40px)_rotateY(-3deg)]
w-full h-full
widget aspect-video
[perspective:200px] absolute
w-full
opacity-10
top-1/2 left-1/2
background-widget right
`}
client:visible
/>
<TaskWidget
classList={`
widget
widget aspect-video
[perspective:200px] absolute
[transform:translateX(-20px)_translateZ(-40px)_rotateY(-3deg)]
w-full h-full
hover:[transform:translateX(0)_translateY(0)_translateZ(0)_rotateY(0)]`}
frontfacing-widget right
top-1/2 left-1/2
w-full`}
client:visible
/>
</Project>
@ -143,8 +145,8 @@ import Project from "./Project.astro";
.image-container:hover > img,
.image-container:hover .widget,
.image-container:hover video {
transform: rotateY(0deg) rotateX(0deg) translateZ(0px) translateX(0)
translateY(0);
transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
translateX(-50%) translateY(-50%);
}
.image-container:hover > .visit-div {

22
src/components/projects/TaskWidget.svelte
View file

@ -121,7 +121,7 @@
let { classList }: Props = $props();
</script>
<div class={`${classList} aspect-video`}>
<div class={`${classList} overflow-hidden`}>
<!-- task bot -->
<div class="task-widget absolute flex h-[99%] w-full flex-col">
<div
@ -163,6 +163,26 @@
</div>
<style>
.background-widget.left {
transform: translateX(calc(-50% + 25px)) translateY(calc(-50% + 5px))
translateZ(-50px) rotateY(5deg);
}
.background-widget.right {
transform: translateX(calc(-50%)) translateY(calc(-50% + 5px))
translateZ(-50px) rotateY(-3deg);
}
.frontfacing-widget.left {
transform: translateX(calc(-50% + 35px)) translateY(calc(-50%))
translateZ(-50px) rotateY(5deg);
}
.frontfacing-widget.right {
transform: translateX(calc(-50% - 10px)) translateY(-50%)
translateZ(-50px) rotateY(-3deg);
}
.primary {
animation: primary 20s linear infinite;
}

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

@ -89,24 +89,24 @@
<img
src={image_src}
alt={image_alt}
class="absolute max-w-full
rounded-xl
border-2 border-solid border-white opacity-40
{positionLeft
? '[transform:rotateY(5deg)_translateX(50px)_translateY(5px)_translateZ(-50px)]'
: '[transform:rotateY(-5deg)_translateX(-20px)_translateY(5px)_translateZ(-50px)]'}"
class="background-img absolute
top-1/2
left-1/2 max-w-full rounded-xl border-2
border-solid border-white
opacity-40
{positionLeft ? 'left' : 'right'}"
width="700"
/>
<!-- svelte-ignore a11y_media_has_caption -->
<video
width="700"
class="playable absolute max-w-full
rounded-xl border-2 border-solid border-white
class="playable frontfacing-vid absolute
top-1/2 left-1/2 max-w-full rounded-xl
border-2
border-solid border-white
opacity-100
{positionLeft
? '[transform:rotateY(5deg)_translateX(60px)_translateZ(-50px)]'
: '[transform:rotateY(-5deg)_translateX(-30px)_translateZ(-50px)]'}"
{positionLeft ? 'left' : 'right'}"
>
<source src={video_src} type="video/webm" />
</video>
@ -147,3 +147,25 @@
</div>
</div>
</div>
<style>
.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-vid.left {
transform: translateX(calc(-50% + 35px)) translateY(calc(-50%))
translateZ(-50px) rotateY(5deg);
}
.frontfacing-vid.right {
transform: translateX(calc(-50% - 10px)) translateY(-50%)
translateZ(-50px) rotateY(-3deg);
}
</style>