diff --git a/src/components/Home.js b/src/components/Home.js index 4d3f141..80ff069 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -3,14 +3,26 @@ import Masonry from 'masonry-layout'; import images from '../data/Images'; // Import the image URLs import './Home.css'; // Ensure you have your CSS for styling +// Shuffle function to randomize the array +const shuffleArray = (array) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; // Swap elements + } + return array; +}; + const Home = () => { const masonryRef = useRef(null); + + // Shuffle images on component mount + const shuffledImages = shuffleArray([...images]); // Create a copy and shuffle useEffect(() => { const masonry = new Masonry(masonryRef.current, { itemSelector: '.gallery-photo', columnWidth: '.gallery-photo', - percentPosition: true + percentPosition: true, }); // Layout Masonry after images have loaded @@ -33,8 +45,8 @@ const Home = () => { return (
- {images.map((image, index) => ( - {`Jake + {shuffledImages.map((image, index) => ( + {`© ))}
);