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

optimized loading page speed

Browse source
This commit is contained in:
liyunze 2024-08-04 12:21:16 +10:00
parent bb79b3c590
commit f8b343c213
3 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/projects/aim-lab.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/images/projects/chess-opencv.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

35
src/components/sections/MoreProjects.svelte
View file

@ -23,7 +23,7 @@
) { ) {
video.addEventListener("mouseenter", () => { video.addEventListener("mouseenter", () => {
if (userInteracted) { if (userInteracted) {
video.volume = 0.1; video.volume = 0.2;
} else { } else {
video.muted = true; video.muted = true;
} }
@ -54,19 +54,16 @@
<div <div
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5" class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
> >
<!-- svelte-ignore a11y-media-has-caption --> <img
<video src="/images/projects/chess-opencv.webp"
alt="computer vision chess bot"
class="absolute max-w-full class="absolute max-w-full
top-1/2 left-1/2 top-1/2 left-1/2
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40 [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
border-2 border-solid border-white rounded-xl" border-2 border-solid border-white rounded-xl"
width="700" width="700"
> />
<source
src="/videos/chess_opencv_demo.webm"
type="video/webm"
/>
</video>
<!-- svelte-ignore a11y-media-has-caption --> <!-- svelte-ignore a11y-media-has-caption -->
<video <video
width="700" width="700"
@ -148,6 +145,13 @@
> >
Python Python
</div> </div>
<div
class="w-fit bg-[#3178C6] text-white
rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-300"
>
OpenCV
</div>
<div <div
class="w-fit bg-[#0078D4] text-white class="w-fit bg-[#0078D4] text-white
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
@ -160,16 +164,15 @@
<div <div
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5" class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
> >
<!-- svelte-ignore a11y-media-has-caption --> <img
<video src="/images/projects/aim-lab.webp"
src="/videos/aim_lab_demo.webm" alt="aim lab"
class="absolute max-w-full class="absolute max-w-full
top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40 top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
border-2 border-solid border-white rounded-xl" border-2 border-solid border-white rounded-xl"
width="700" width="700"
> />
<source src="/videos/aim_lab_demo.webm" /></video
>
<!-- svelte-ignore a11y-media-has-caption --> <!-- svelte-ignore a11y-media-has-caption -->
<video <video
width="700" width="700"
@ -185,10 +188,12 @@
</div> </div>
<style> <style>
.image-container img,
.image-container video { .image-container video {
transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out;
} }
@media (min-width: 1025px) { @media (min-width: 1025px) {
.image-container:hover > img,
.image-container:hover > video { .image-container:hover > video {
transform: rotateY(0deg) rotateX(0deg) translateZ(0px) transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
translateX(-50%) translateY(-50%); translateX(-50%) translateY(-50%);