Skip to content

W
www
Commit a9e3a92b by PLN (Algolia)
Options

checkpoint ENSAD v1

parent 242c66eb
Showing with 117 additions and 48 deletions
next/.gitignore
......@@ -28,3 +28,6 @@ yarn-error.log*
.env.development.local
.env.test.local
.env.production.local
# LLM exchanges
code2prompt.json
next/components/ImageGallery.js
// next/components/ImageGallery.js
import { useState } from 'react';
import Image from 'next/image';
import Masonry from 'react-masonry-css';
......@@ -17,22 +18,22 @@ export default function ImageGallery({ images, slug }) {
<h3 className="text-xl font-semibold mb-4 text-purple-400">Galerie</h3>
<Masonry
breakpointCols={breakpointColumns}
className="masonry-grid"
className="masonry-grid" // Ensure this class or its child provides relative positioning for 'fill'
columnClassName="masonry-grid_column"
>
{images.map((image, i) => (
{images.map((imageSrc, i) => (
<div
key={i}
className="mb-4 cursor-pointer hover:opacity-75 transition-opacity"
onClick={() => setSelectedImage(image)}
onClick={() => setSelectedImage(imageSrc)}
>
<div className="relative rounded-lg overflow-hidden">
{/* Ensure this div is the relatively positioned parent for fill */}
<div className="relative aspect-square rounded-lg overflow-hidden"> {/* Tailwind's aspect-square utility */}
<Image
src={image}
src={imageSrc}
alt={`${slug} image ${i + 1}`}
width={300}
height={300}
className="w-full h-auto object-cover"
fill
className="object-cover" // object-cover will fill the square, cropping if necessary
/>
</div>
</div>
......@@ -50,9 +51,9 @@ export default function ImageGallery({ images, slug }) {
<Image
src={selectedImage}
alt="Selected image"
width={1200}
height={800}
className="max-w-full max-h-full object-contain"
width={1200} // These are for the lightbox, not the gallery thumbs
height={800} // These define the max dimensions and aspect ratio for the lightbox image
className="max-w-full max-h-full object-contain" // object-contain is good for lightbox
/>
<button
className="absolute top-4 right-4 text-white text-2xl hover:text-purple-400 transition-colors"
......
next/components/ParVaguesFooter.js
......@@ -21,15 +21,6 @@ export default function ParVaguesFooter() {
<div className={styles.neonGradient}></div>
<div className="max-w-6xl mx-auto px-4 relative z-10">
<div className="relative">
<Image
src="/images/parvagues/logo_text.png"
alt="ParVagues Logo"
width={48}
height={48}
className="object-contain"
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* About Column */}
<div>
......@@ -41,6 +32,16 @@ export default function ParVaguesFooter() {
{/* Social Column */}
<div className="flex flex-col items-center md:items-end">
<div className="flex justify-center mb-4 md:mb-0 md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
<Image
src="/images/parvagues/logo_text.png"
alt="ParVagues Logo"
width={96}
height={96}
className="md:mt-16"
/>
</div>
<div className="flex flex-wrap gap-4 justify-center md:justify-end">
{socialLinks.map((link, index) => (
<a
......
next/package-lock.json
......@@ -8,6 +8,7 @@
"name": "pln-www",
"version": "0.2.0",
"dependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"bootstrap": "^5.3.3",
"classnames": "^2.5.1",
"date-fns": "^3.3.1",
......@@ -810,6 +811,15 @@
"tslib": "^2.8.0"
}
},
"node_modules/@tailwindcss/aspect-ratio": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
"integrity": "sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==",
"license": "MIT",
"peerDependencies": {
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
}
},
"node_modules/@types/debug": {
"version": "4.1.12",
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
......@@ -3407,6 +3417,13 @@
"node": ">= 4.7.0"
}
},
"node_modules/tailwindcss": {
"version": "4.1.6",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.6.tgz",
"integrity": "sha512-j0cGLTreM6u4OWzBeLBpycK0WIh8w7kSwcUsQZoGLHZ7xDTdM69lN64AgoIEEwFi0tnhs4wSykUa5YWxAzgFYg==",
"license": "MIT",
"peer": true
},
"node_modules/trim-lines": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
......
next/package.json
......@@ -11,6 +11,7 @@
"node": ">=18.17.0"
},
"dependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"bootstrap": "^5.3.3",
"classnames": "^2.5.1",
"date-fns": "^3.3.1",
......
next/pages/parvagues.js
......@@ -115,6 +115,44 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
}, [selectedSection]);
// Carousel effect for section images
// next/pages/parvagues.js (snippet from useEffect for backgroundRef)
useEffect(() => {
if (!backgroundRef.current) return;
const images = backgroundRef.current.children;
if (images.length === 0) return; // Guard against no images
let index = 0;
// Initial setup for the very first image
for (let i = 0; i < images.length; i++) {
images[i].style.opacity = '0'; // Ensure all are initially transparent
}
if (images[index]) {
images[index].style.opacity = '0.7'; // Make the first one visible
}
const cycle = () => {
// Current image fades out
if (images[index]) {
images[index].style.opacity = '0';
}
index = (index + 1) % images.length;
// Next image fades in
if (images[index]) {
images[index].style.opacity = '0.7';
}
};
// Call cycle once to set the initial state correctly after a brief moment
// setTimeout(cycle, 100); // Or let the interval handle the first full cycle
const interval = setInterval(cycle, 3000); // Start cycling after 3s
return () => clearInterval(interval);
}, []); // Removed sectionImages.length from dependencies as it's not used here
useEffect(() => {
if (sectionImages.length > 1) {
const interval = setInterval(() => {
......@@ -134,29 +172,6 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
}
}, []);
// Animate background images
useEffect(() => {
if (!backgroundRef.current) return;
const images = backgroundRef.current.children;
let index = 0;
const cycle = () => {
for (let i = 0; i < images.length; i++) {
if (i === index) {
images[i].style.opacity = '0.7';
images[i].style.transition = 'opacity 0.5s ease';
} else {
images[i].style.opacity = '0';
}
}
index = (index + 1) % images.length;
};
const interval = setInterval(cycle, 3000);
return () => clearInterval(interval);
}, []);
const scrollToSection = (e) => {
e.preventDefault();
const section = document.getElementById('section1');
......@@ -381,7 +396,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
onClick={() => setSelectedSection('potentiel')}
>
<h3 className="text-xl font-semibold text-purple-400 mb-2">Potentiel</h3>
<p className="text-gray-300">Samples et synthés SuperCollider pour une palette sonore infinie</p>
<p className="text-gray-300">Samples glanés et synthés SuperCollider</p>
</div>
<div
......@@ -389,7 +404,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
onClick={() => setSelectedSection('composition')}
>
<h3 className="text-xl font-semibold text-purple-400 mb-2">Composition</h3>
<p className="text-gray-300">Code Haskell TidalCycles pour des patterns algorithmiques complexes</p>
<p className="text-gray-300">Code Haskell TidalCycles + input MIDI</p>
</div>
<div
......@@ -397,7 +412,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
onClick={() => setSelectedSection('performance')}
>
<h3 className="text-xl font-semibold text-purple-400 mb-2">Performance</h3>
<p className="text-gray-300">Live improvise avec contrôleur MIDI pour une interactivité totale</p>
<p className="text-gray-300">Performance live avec improvisation au contrôleur MIDI</p>
</div>
</div>
......
next/public/images/parvagues/logo.png
next/public/images/parvagues/logo.png

87.4 KB | W: | H:

next/public/images/parvagues/logo.png

584 KB | W: | H:

next/public/images/parvagues/logo.png
next/public/images/parvagues/logo.png
next/public/images/parvagues/logo.png
next/public/images/parvagues/logo.png
  • 2-up
  • Swipe
  • Onion skin
next/styles/parvagues.module.css
......@@ -381,10 +381,11 @@
background: rgba(0, 0, 0, 0.5);
}
.posterCollage {
position: absolute;
inset: 0;
opacity: 0.6;
opacity: 0.6; /* Base opacity for the container */
filter: grayscale(100%) brightness(0.3) contrast(1.2);
display: grid;
grid-template-columns: repeat(4, 1fr);
......@@ -403,7 +404,10 @@
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.7;
opacity: 0; /* Initial opacity to be controlled by JS */
/* The transition for opacity is now handled by the JS effect,
but you can keep a CSS transition if preferred for when JS changes style.opacity */
transition: opacity 0.5s ease;
}
.posterGradient {
......
next/yarn.lock
......@@ -140,6 +140,11 @@
resolved "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.1.0.tgz"
integrity sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==
"@img/sharp-libvips-linuxmusl-x64@1.1.0":
version "1.1.0"
resolved "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.1.0.tgz"
integrity sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==
"@img/sharp-linux-x64@0.34.1":
version "0.34.1"
resolved "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.1.tgz"
......@@ -147,6 +152,13 @@
optionalDependencies:
"@img/sharp-libvips-linux-x64" "1.1.0"
"@img/sharp-linuxmusl-x64@0.34.1":
version "0.34.1"
resolved "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.1.tgz"
integrity sha512-pax/kTR407vNb9qaSIiWVnQplPcGU8LRIJpDT5o8PdAx5aAA7AS3X9PS8Isw1/WfqgQorPotjrZL3Pqh6C5EBg==
optionalDependencies:
"@img/sharp-libvips-linuxmusl-x64" "1.1.0"
"@next/env@15.3.0":
version "15.3.0"
resolved "https://registry.npmjs.org/@next/env/-/env-15.3.0.tgz"
......@@ -157,6 +169,11 @@
resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.3.0.tgz"
integrity sha512-ZMQ9yzDEts/vkpFLRAqfYO1wSpIJGlQNK9gZ09PgyjBJUmg8F/bb8fw2EXKgEaHbCc4gmqMpDfh+T07qUphp9A==
"@next/swc-linux-x64-musl@15.3.0":
version "15.3.0"
resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.3.0.tgz"
integrity sha512-RFwq5VKYTw9TMr4T3e5HRP6T4RiAzfDJ6XsxH8j/ZeYq2aLsBqCkFzwMI0FmnSsLaUbOb46Uov0VvN3UciHX5A==
"@popperjs/core@^2.11.8":
version "2.11.8"
resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
......@@ -194,6 +211,11 @@
dependencies:
tslib "^2.8.0"
"@tailwindcss/aspect-ratio@^0.4.2":
version "0.4.2"
resolved "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz"
integrity sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==
"@types/debug@^4.0.0":
version "4.1.12"
resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz"
......@@ -1651,6 +1673,11 @@ swiper@^11.2.6:
resolved "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz"
integrity sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==
"tailwindcss@>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1":
version "4.1.6"
resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.6.tgz"
integrity sha512-j0cGLTreM6u4OWzBeLBpycK0WIh8w7kSwcUsQZoGLHZ7xDTdM69lN64AgoIEEwFi0tnhs4wSykUa5YWxAzgFYg==
trim-lines@^3.0.0:
version "3.0.1"
resolved "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment