diff --git a/src/components/Home.css b/src/components/Home.css
index c243d6f..62085c0 100644
--- a/src/components/Home.css
+++ b/src/components/Home.css
@@ -5,13 +5,11 @@
}
.gallery-photo {
- margin: 4px;
- margin-left: 4px;
- margin-right: 4px;
- border-radius: 8px;
+ margin: 0.6vw;
+ border-radius: 5px;
display: block;
height: auto;
- max-width: 30vw; /* Do not mix with max-height! */
+ max-width: 31vw; /* Do not mix with max-height! */
object-fit: cover;
}
diff --git a/src/components/Home.js b/src/components/Home.js
index 47e9f58..4d3f141 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,53 +1,40 @@
import React, { useEffect, useRef } from 'react';
import Masonry from 'masonry-layout';
-import './Home.css'; // Global styles
+import images from '../data/Images'; // Import the image URLs
+import './Home.css'; // Ensure you have your CSS for styling
const Home = () => {
const masonryRef = useRef(null);
- // Use require.context to load all images from the static/photos directory
- const importAll = (r) => {
- let images = {};
- r.keys().forEach((item) => { images[item.replace('./', '')] = r(item); });
- return images;
- };
-
- const images = importAll(require.context('../../static/photos', false, /\.(png|jpe?g|svg)$/));
-
useEffect(() => {
- // Initialize Masonry after images have loaded
const masonry = new Masonry(masonryRef.current, {
itemSelector: '.gallery-photo',
columnWidth: '.gallery-photo',
- percentPosition: true,
- horizontalOrder: true,
+ percentPosition: true
});
- // Layout Masonry after all images have loaded
- const imgLoad = images => {
- const imgLoad = images.map(img => {
- return new Promise((resolve) => {
- const imgElement = new Image();
- imgElement.src = img;
- imgElement.onload = resolve;
- });
- });
- return Promise.all(imgLoad);
+ // Layout Masonry after images have loaded
+ const imagesLoaded = () => {
+ masonry.layout();
};
- imgLoad(Object.values(images)).then(() => {
- masonry.layout();
+ // Add event listener for image load
+ const imgElements = masonryRef.current.querySelectorAll('img');
+ imgElements.forEach(img => {
+ img.addEventListener('load', imagesLoaded);
});
return () => {
- masonry.destroy(); // Cleanup on unmount
+ imgElements.forEach(img => {
+ img.removeEventListener('load', imagesLoaded);
+ });
};
- }, [images]);
+ }, []);
return (
- {Object.keys(images).map((key, index) => (
-
+ {images.map((image, index) => (
+
))}
);
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
new file mode 100644
index 0000000..610cbcd
--- /dev/null
+++ b/src/components/Navbar.css
@@ -0,0 +1,34 @@
+.navbar {
+ display: flex;
+ justify-content: space-between; /* Space between logo, title, and icons */
+ align-items: center; /* Center items vertically */
+ background-color: #333; /* Background color of the navbar */
+ padding: 10px 20px; /* Padding for the navbar */
+}
+
+.navbar-logo .logo {
+ height: 50px; /* Set a height for the logo */
+ border-radius: 10px; /* Rounded corners for the logo */
+}
+
+.navbar-title h1 {
+ color: white; /* Text color */
+ font-family: 'Arial', sans-serif; /* Specify your desired font */
+ font-size: 24px; /* Font size for the title */
+ margin: 0; /* Remove default margin */
+}
+
+.navbar-icons {
+ display: flex; /* Use flexbox for icons */
+ gap: 15px; /* Space between icons */
+}
+
+.navbar-icons .icon {
+ height: 30px; /* Set a height for the icons */
+ width: 30px; /* Set a width for the icons */
+ transition: transform 0.2s; /* Smooth transition for hover effect */
+}
+
+.navbar-icons .icon:hover {
+ transform: scale(1.1); /* Scale up the icon on hover */
+}
\ No newline at end of file
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 763fbf5..0ebcc26 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,13 +1,27 @@
import React from 'react';
import { Link } from 'react-router-dom';
+import './Navbar.css';
+import logo from './static/navbar-logo.png';
const Navbar = () => {
return (
-
-
+
+
+
+
+
+
+
+
Photography Portfolio
+
+
);
};
diff --git a/src/components/static/navbar-logo.png b/src/components/static/navbar-logo.png
new file mode 100644
index 0000000..cf5bc4d
Binary files /dev/null and b/src/components/static/navbar-logo.png differ
diff --git a/src/data/Images.js b/src/data/Images.js
new file mode 100644
index 0000000..504cfff
--- /dev/null
+++ b/src/data/Images.js
@@ -0,0 +1,8 @@
+/* Images are loaded from urls to avoid checking everything in to git. */
+const images = [
+ "https://i.imgur.com/OA575Dq.jpg",
+ "https://i.imgur.com/OA575Dq.jpg",
+ "https://i.imgur.com/OA575Dq.jpg",
+];
+
+export default images;
\ No newline at end of file
diff --git a/static/photos/JMR02473.jpg b/static/photos/JMR02473.jpg
deleted file mode 100644
index 1cf9b08..0000000
Binary files a/static/photos/JMR02473.jpg and /dev/null differ
diff --git a/static/photos/JMR02474.jpg b/static/photos/JMR02474.jpg
deleted file mode 100644
index 8f8ce97..0000000
Binary files a/static/photos/JMR02474.jpg and /dev/null differ
diff --git a/static/photos/JMR02475.jpg b/static/photos/JMR02475.jpg
deleted file mode 100644
index b9a2d3b..0000000
Binary files a/static/photos/JMR02475.jpg and /dev/null differ
diff --git a/static/photos/JMR02476.jpg b/static/photos/JMR02476.jpg
deleted file mode 100644
index 48b4c65..0000000
Binary files a/static/photos/JMR02476.jpg and /dev/null differ
diff --git a/static/photos/JMR02477.jpg b/static/photos/JMR02477.jpg
deleted file mode 100644
index b0c5b68..0000000
Binary files a/static/photos/JMR02477.jpg and /dev/null differ
diff --git a/static/photos/JMR02478.jpg b/static/photos/JMR02478.jpg
deleted file mode 100644
index 0027609..0000000
Binary files a/static/photos/JMR02478.jpg and /dev/null differ
diff --git a/static/photos/JMR02479.jpg b/static/photos/JMR02479.jpg
deleted file mode 100644
index 2da3488..0000000
Binary files a/static/photos/JMR02479.jpg and /dev/null differ
diff --git a/static/photos/JMR02480.jpg b/static/photos/JMR02480.jpg
deleted file mode 100644
index f009e79..0000000
Binary files a/static/photos/JMR02480.jpg and /dev/null differ
diff --git a/static/photos/JMR02481.jpg b/static/photos/JMR02481.jpg
deleted file mode 100644
index e4c236f..0000000
Binary files a/static/photos/JMR02481.jpg and /dev/null differ
diff --git a/static/photos/JMR02483.jpg b/static/photos/JMR02483.jpg
deleted file mode 100644
index 7b66fd5..0000000
Binary files a/static/photos/JMR02483.jpg and /dev/null differ