80 lines
2.3 KiB
Svelte
80 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
// Sample portfolio images - replace with your actual nail art images
|
|
const portfolioImages = [
|
|
{
|
|
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Hand%2C_fingers_-_back.jpg/1024px-Hand%2C_fingers_-_back.jpg',
|
|
alt: 'lorem ipsum'
|
|
},
|
|
{
|
|
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Palm%2C_fingers.jpg/1024px-Palm%2C_fingers.jpg',
|
|
alt: 'lorem ipsum'
|
|
},
|
|
{
|
|
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Hand_parts_-_en.svg/1920px-Hand_parts_-_en.svg.png',
|
|
alt: 'lorem ipsum'
|
|
},
|
|
{
|
|
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Scheme_human_hand_bones-en.svg/1920px-Scheme_human_hand_bones-en.svg.png',
|
|
alt: 'lorem ipsum'
|
|
},
|
|
{
|
|
src: 'https://upload.wikimedia.org/wikipedia/commons/a/a1/3D_Medical_Animation_Human_Wrist.jpg',
|
|
alt: 'lorem ipsum'
|
|
},
|
|
{
|
|
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wrist_and_hand_deeper_palmar_dissection-en.svg/1920px-Wrist_and_hand_deeper_palmar_dissection-en.svg.png',
|
|
alt: 'lorem ipsum'
|
|
},
|
|
{
|
|
src: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Wrist_extensor_compartments_%28numbered%29.PNG',
|
|
alt: 'lorem ipsum'
|
|
},
|
|
{
|
|
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Gray812and814.svg/1920px-Gray812and814.svg.png',
|
|
alt: 'lorem ipsum'
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<section class="w-full overflow-hidden py-16">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<h2 class="mb-12 text-center text-2xl font-semibold">Our Portfolio</h2>
|
|
</div>
|
|
|
|
<div class="relative w-full overflow-hidden">
|
|
<div class="animate-scroll flex">
|
|
{#each [...portfolioImages, ...portfolioImages] as image}
|
|
<div class="group flex-shrink-0">
|
|
<img
|
|
src={image.src}
|
|
alt={image.alt}
|
|
class="h-80 w-64 object-cover saturate-100 transition-all duration-500 md:saturate-75 md:group-hover:saturate-100"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.animate-scroll {
|
|
animation: scroll 40s linear infinite;
|
|
width: calc(256px * 16); /* 16 images total (8 duplicated) * 256px width */
|
|
}
|
|
|
|
/* images scale on hover */
|
|
.group:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
</style>
|