[#1] Added a new full page photo header.

src/App.jsx

@@ -1,12 +1,12 @@
 import "@fontsource/open-sans";
 import './App.scss';
 import Portfolio from "./sections/Portfolio";
-import Header from "./sections/Header";
+import PhotoHeader from "./sections/headers/PhotoHeader";
 
 const App = () => {
     return (
         <div>
-            <Header />
+            <PhotoHeader />
             <Portfolio /> 
         </div>
     );

src/sections/Portfolio.jsx

@@ -29,6 +29,16 @@ const images = [{
     id: 5,
     imagePath: 'images/5.jpg',
     thumbPath: 'images/5.jpg'
+},
+// {
+//     id: 6,
+//     imagePath: 'images/6.jpg',
+//     thumbPath: 'images/6.jpg'
+// },
+{
+    id: 7,
+    imagePath: 'images/7.jpg',
+    thumbPath: 'images/7.jpg'
 }
 ];
 

src/sections/headers/Header.jsx

@@ -1,4 +1,4 @@
-import SiteLogo from "../elements/SiteLogo";
+import SiteLogo from "../../elements/SiteLogo";
 import './Header.scss';
 
 const Header = () => {

src/sections/headers/PhotoHeader.jsx

@@ -0,0 +1,12 @@
+import Header from "./Header";
+import './PhotoHeader.scss';
+
+const PhotoHeader = () => {
+    return(
+        <div className='photo-header-container'>
+            <Header />
+        </div>
+    );
+};
+
+export default PhotoHeader;

src/sections/headers/PhotoHeader.scss

@@ -0,0 +1,6 @@
+.photo-header-container {
+    background-image: url('../../../public/images/7.jpg');
+    background-position: center center;
+    background-size: cover;
+    height: 100vh;
+}