studio-variable/world-game
3
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

style button and earth icon variant
All checks were successful
Deploy / Deploy to Production (push) Successful in 16s
Details

Browse source
This commit is contained in:
isUnknown 2026-03-09 11:57:28 +01:00
parent 802a3ed5bf
commit c41eec0385
4 changed files with 74 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/views/Portfolio.svelte
View file

@ -11,8 +11,9 @@
let sectionEl = $state(null)
// --- Derived ---
const isActive = $derived(slides.active?.id === 'portfolio')
const projects = $derived(data?.projects ?? [])
const isActive = $derived(slides.active?.id === 'portfolio')
const projects = $derived(data?.projects ?? [])
const backgroundImage = $derived(data?.background_image ?? null)
const currentProject = $derived(projects[currentIndex] ?? null)
// Capture du hash synchrone avant que tout effect puisse le modifier
@ -79,6 +80,7 @@
<section
class="portfolio golden-grid slide"
style={backgroundImage ? `--background-image: url('${backgroundImage}')` : ''}
bind:this={sectionEl}
ontouchstart={nav.onTouchStart}
ontouchend={nav.onTouchEnd}
@ -114,7 +116,7 @@
</div>
<div class="portfolio-links">
{#each currentProject.external_links as link}
<a href={link.url} target="_blank" rel="noopener noreferrer" class="button">{link.label}</a>
<a href={link.url} target="_blank" rel="noopener noreferrer" class="button earth-icon">{link.label}</a>
{/each}
</div>
</div>
@ -143,7 +145,11 @@
<style>
.portfolio {
background: #000;
background-color: #000;
background-image: var(--background-image, none);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Custom vertical lines */
@ -254,6 +260,10 @@
transition: transform 0.6s var(--ease-standard), opacity 0.6s var(--ease-standard);
}
.portfolio-nav-item:hover button {
transform: scale(1);
}
.portfolio-nav-item.active button {
transform: scale(1.5) translateX(-20%);
opacity: 1;