From 5fd59191afb784f59ab77d7c167e74f77a92474d Mon Sep 17 00:00:00 2001
From: Nick Bland <nisky38@hotmail.com>
Date: Sun, 15 May 2022 23:34:47 +1000
Subject: [PATCH] Add initial splash image

Add just dark splash image to confirm container size. Needed to do this so that I could work out bugs in content rendering.
---
 pages/index.tsx    | 16 ++++++++++++----
 tailwind.config.js |  4 ++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index c830131..6cde354 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,5 @@
 import type {NextPage} from 'next';
+import Image from "next/image";
 import NavBar from "../components/navbar";
 import {Footer} from "../components/footer"
 
@@ -6,13 +7,20 @@ const Home: NextPage = () => {
     return (
         <div className="">
             <NavBar title="Home | nickbland.dev"></NavBar>
-
+            
             <main className="">
                 {/* MAIN BANNER SECTION BELOW */}
-                <div className="">
-
+                <div className="container relative min-w-full min-h-screen flex flex-col items-center py-12 ">
+                    <Image
+                    className=""
+                    src="/splashDarkFinal.jpg"
+                    alt="Dark background splash screen"
+                    layout="fill"     
+                    quality="100"
+                    priority
+                    />
                 </div>
-                
+                {/* <div className="w-full mt-8 relat" */}
             </main>
             <Footer></Footer>   
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 266156b..1010358 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,6 +25,10 @@ module.exports = {
         },
       },
       display: ['dark'],
+      backgroundImage: {
+        'splashDark': "url('/splashDarkFinal.jpg')",
+        'splashLight': "url('/splashLightFinal.jpg')",
+      },
     },
   },
   plugins: [],