Feat: Portfolio mobile — background image + gallery animation + arrows/counter
- Background fixe mobile (BG GAME MOBILE.png, position bottom) - GalleryAnimation en plein écran sur mobile (position fixed, opacité 0.8) - Arrows + compteur 01/05 ajoutés (desktop grid-area 18/16, mobile 18/15) - Layout mobile : mockup centré, texte par-dessus, keywords masqués, nav horizontale 75px - Séparation desktop-only / mobile-only pour la galerie Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
a0798e71d0
commit
ae86f0ce1c
3 changed files with 178 additions and 10 deletions
|
|
@ -53,3 +53,18 @@
|
|||
grid-area: 1/16 / span 20 / span 1;
|
||||
height: 150%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 700px) {
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.mobile-only {
|
||||
display: inherit;
|
||||
}
|
||||
.desktop-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,6 +84,10 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
<div class="portfolio-gallery mobile-only" aria-hidden="true">
|
||||
<GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} />
|
||||
</div>
|
||||
|
||||
<section
|
||||
class="portfolio golden-grid"
|
||||
style={backgroundImage ? `--background-image: url('${backgroundImage}')` : ''}
|
||||
|
|
@ -100,8 +104,8 @@
|
|||
<div class="vertical-line-end" aria-hidden="true"></div>
|
||||
|
||||
{#if currentProject}
|
||||
<!-- Galerie animation (gauche) -->
|
||||
<div class="portfolio-gallery" aria-hidden="true">
|
||||
<!-- Galerie animation (gauche desktop / plein écran mobile) -->
|
||||
<div class="portfolio-gallery desktop-only" aria-hidden="true">
|
||||
<GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} />
|
||||
</div>
|
||||
|
||||
|
|
@ -116,6 +120,7 @@
|
|||
cls="portfolio-mockup-img"
|
||||
/>
|
||||
</div>
|
||||
<img class="content-background mobile-only" src="/assets/img/BG GAME MOBILE.408a3a253492f65d39f8.png" alt="">
|
||||
|
||||
<!-- Infos projet (droite) -->
|
||||
<div class="portfolio-text" aria-live="polite">
|
||||
|
|
@ -135,7 +140,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Sidebar navigation (extrême droite) -->
|
||||
<!-- Sidebar navigation -->
|
||||
<nav class="portfolio-nav" aria-label="Projets">
|
||||
<ul role="list">
|
||||
{#each projects as project, i}
|
||||
|
|
@ -154,11 +159,27 @@
|
|||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Arrows + counter -->
|
||||
<div class="portfolio-arrows font-face-danzza" aria-label="Navigation projets">
|
||||
<button
|
||||
class="portfolio-arrow portfolio-arrow--up"
|
||||
aria-label="Projet précédent"
|
||||
disabled={currentIndex === 0}
|
||||
onclick={() => { if (currentIndex > 0) { currentIndex--; setAnchor(currentIndex) } }}
|
||||
></button>
|
||||
<button
|
||||
class="portfolio-arrow portfolio-arrow--down"
|
||||
aria-label="Projet suivant"
|
||||
disabled={currentIndex >= projects.length - 1}
|
||||
onclick={() => { if (currentIndex < projects.length - 1) { currentIndex++; setAnchor(currentIndex) } }}
|
||||
></button>
|
||||
<span class="portfolio-counter">{String(currentIndex + 1).padStart(2, '0')}/{String(projects.length).padStart(2, '0')}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.portfolio {
|
||||
background-color: #000;
|
||||
background-image: var(--background-image, none);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -295,28 +316,160 @@
|
|||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Arrows + counter */
|
||||
.portfolio-arrows {
|
||||
grid-area: 18/16 / span 2 / span 3;
|
||||
z-index: var(--z-content);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
color: white;
|
||||
font-size: var(--font-size-caption);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.portfolio-arrow {
|
||||
width: 13px;
|
||||
min-width: 13px;
|
||||
height: 13px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.portfolio-arrow:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.portfolio-arrow--up {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M2 8L6 4L10 8'/%3E%3C/svg%3E");
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.portfolio-arrow--down {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M2 4L6 8L10 4'/%3E%3C/svg%3E");
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.portfolio-counter {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Mobile (≤ 700px) */
|
||||
@media (max-width: 700px) {
|
||||
.portfolio-gallery {
|
||||
grid-area: 1/1 / span 20 / span 20;
|
||||
opacity: 0.3;
|
||||
|
||||
.portfolio {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Gallery over background, under content */
|
||||
.portfolio-gallery {
|
||||
position: fixed;
|
||||
transform: translateX(-10vw);
|
||||
width: 120vw;
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content-background {
|
||||
position: fixed;
|
||||
top: -7rem;
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Mockup — centered top, behind text */
|
||||
.portfolio-mockup {
|
||||
grid-area: 3/4 / span 8 / span 14;
|
||||
grid-area: 4/4 / span 8 / span 14;
|
||||
z-index: var(--z-content);
|
||||
}
|
||||
|
||||
.portfolio-mockup :global(.portfolio-mockup-img) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Text — over mockup, centered */
|
||||
.portfolio-text {
|
||||
grid-area: 9/3 / span 6 / span 16;
|
||||
grid-area: 9/3 / span 7 / span 16;
|
||||
z-index: var(--z-content);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portfolio-text h2 {
|
||||
font-family: "Danzza Bold";
|
||||
font-size: var(--font-size-title-section-mobile);
|
||||
}
|
||||
|
||||
.portfolio-catchphrase {
|
||||
font-size: var(--font-size-subtitle-mobile);
|
||||
}
|
||||
|
||||
.portfolio-description {
|
||||
font-size: var(--font-size-paragraph-mobile);
|
||||
}
|
||||
|
||||
/* Hide keywords on mobile */
|
||||
.portfolio-keywords {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Nav thumbnails — horizontal, compact */
|
||||
.portfolio-nav {
|
||||
grid-area: 17/4 / span 2 / span 14;
|
||||
grid-area: 17/4 / span 1 / span 14;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-right: 0;
|
||||
height: 75px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-nav-item:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.portfolio-nav-item button {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portfolio-nav-item.active button {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.portfolio-nav-item:hover button {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.portfolio-nav-item img {
|
||||
width: 45px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.portfolio-nav-number {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Arrows — bottom right */
|
||||
.portfolio-arrows {
|
||||
grid-area: 18/15 / span 1 / span 3;
|
||||
font-size: var(--font-size-caption-mobile, 11px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet (701px–912px) */
|
||||
@media (min-width: 701px) and (max-width: 912px) {
|
||||
.portfolio-text h2 {
|
||||
font-size: var(--font-size-title-main-tablet);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue