adding svg icon links, changes for searchable effects on cards

css/home.css

@@ -9,6 +9,9 @@ html
 /* NAVIGATION BAR */
 .nav_bar
 {
+	padding-top: 1rem;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	display: flex;
 	height: 30%;
 	width: 100vw;
@@ -21,7 +24,14 @@ html
 	gap: 10px;
 }
 
-.nav_left_item
+.nav_right_item
 {
-	
+	background: none;
+	border: 0px;
+}
+
+.nav_right_item > img
+{
+	min-height: 60px;
+	min-width: 60px;
 }

html/home.html

@@ -19,46 +19,10 @@
 			id="nav_left_holder"
 			class="nav_left_holder"
 		>
-			<button
+			<button	id="button1"class="nav_left_item"<p>About Me</p></button>
-				id="button1"
+			<button	id="button2"class="nav_left_item"><p>App Developement</p></button>
-				class="banner_button"
+			<button	id="button3"class="nav_left_item"><p>App Deployments</p></button>
-				hx-get="PATH TO MORE INFO"
-				hx-target="#core_container"
-				hx-swap="innerHTML"
-			>
-				<p>About Me</p>
-			</button>
 
-			<button
-				id="button2"
-				class="banner_button"
-				hx-get="PATH TO MORE INFO"
-				hx-target="#core_container"
-				hx-swap="innerHTML"
-			>
-				<p>App Developement</p>
-			</button>
-			
-			<button
-				id="button3"
-				class="nav_left_item"
-				hx-get="PATH TO MORE INFO"
-				hx-target="#core_container"
-				hx-swap="innerHTML"
-			>
-				<p>App Deployments</p>
-			</button>
-
-			<button
-				id="button4"
-				class="banner_button"
-				hx-get="PATH TO MORE INFO"
-				hx-target="#core_container"
-				hx-swap="innerHTML"
-			>
-				<p>Thanks To</p>
-			</button>
-			
 			<input 
 				type="search" 
 				class="search_field"
@@ -95,24 +59,12 @@
 				<img src="../img/linkedin.svg" alt="Find me on Linkedin">
 			</button>
 			
-			<button
+			<button id="button3"class="nav_right_item">
-				id="button3"
+				<img src="../img/resume.svg" alt="Download my Resume!">
-				class="nav_right_item"
-				hx-get="PATH TO MORE INFO"
-				hx-target="#core_container"
-				hx-swap="innerHTML"
-			>
-				<p>Resume</p>
 			</button>
 
-			<button
+			<button	id="button4"class="nav_right_item">
-				id="button4"
+				<img src="../img/contact.svg" alt="Let's talk!">
-				class="banner_button"
-				hx-get="PATH TO MORE INFO"
-				hx-target="#core_container"
-				hx-swap="innerHTML"
-			>
-				<p>Contact</p>
 			</button>
 
 		</div>
@@ -122,7 +74,15 @@
 
 	<!--Body Area -->
 	<section 
-		id=#core_container
+		id=#card_container
-	></section>
+	>
+		<template>
+			<div class="card">
+				<div class="card_image"></div>
+				<div class="card_title"></div>
+					<div>
+			</div>
+		</template>
+	</section>
 	
 </body>

img/contact.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.162" height="47.999" viewBox="0 0 47.162 47.999">
+  <g>
+    <path d="M31.846,0A15.332,15.332,0,0,0,16.532,15.314c0,.059.006.117.009.176-.406-.033-.813-.063-1.227-.063A15.331,15.331,0,0,0,0,30.741V47.272a.727.727,0,0,0,.384.641A.711.711,0,0,0,.728,48a.731.731,0,0,0,.4-.121L7.3,43.784A15.309,15.309,0,0,0,30.629,30.741c0-.061-.009-.119-.01-.18.4.039.813.066,1.228.066a15.238,15.238,0,0,0,8.017-2.271l6.168,4.1a.734.734,0,0,0,.4.121.714.714,0,0,0,.344-.086.729.729,0,0,0,.384-.641V15.313A15.335,15.335,0,0,0,31.846,0ZM15.314,44.6A13.8,13.8,0,0,1,7.69,42.31a.73.73,0,0,0-.8,0L1.454,45.917V30.741A13.859,13.859,0,1,1,15.314,44.6ZM45.705,30.49l-5.433-3.6a.72.72,0,0,0-.4-.123.727.727,0,0,0-.4.121,13.79,13.79,0,0,1-7.624,2.291,12.078,12.078,0,0,1-1.311-.08A15.334,15.334,0,0,0,18,15.68c-.007-.121-.019-.242-.019-.365a13.86,13.86,0,0,1,27.719,0V30.49Z" fill="#1a171b"/>
+    <path d="M23.072,30.013H15.313a.728.728,0,1,0,0,1.456h7.759a.728.728,0,0,0,0-1.456Z" fill="#1a171b"/>
+    <path d="M7.556,31.468h3.878a.728.728,0,0,0,0-1.456H7.556a.728.728,0,1,0,0,1.456Z" fill="#1a171b"/>
+    <path d="M23.072,23.226H19.581a.727.727,0,1,0,0,1.454h3.491a.727.727,0,0,0,0-1.454Z" fill="#1a171b"/>
+    <path d="M7.556,24.679H15.7a.727.727,0,0,0,0-1.454H7.556a.727.727,0,1,0,0,1.454Z" fill="#1a171b"/>
+    <path d="M19.192,36.8H7.556a.728.728,0,1,0,0,1.456H19.192a.728.728,0,1,0,0-1.456Z" fill="#1a171b"/>
+    <path d="M33.543,15.314a.729.729,0,0,0-.728-.727H26.027a.727.727,0,1,0,0,1.454h6.788A.727.727,0,0,0,33.543,15.314Z" fill="#1a171b"/>
+    <path d="M39.6,14.587H36.7a.727.727,0,1,0,0,1.454H39.6a.727.727,0,0,0,0-1.454Z" fill="#1a171b"/>
+    <path d="M29.178,8.525A.728.728,0,0,0,28.45,7.8H24.088a.728.728,0,1,0,0,1.456H28.45A.729.729,0,0,0,29.178,8.525Z" fill="#1a171b"/>
+    <path d="M39.6,7.8H32.33a.728.728,0,0,0,0,1.456H39.6a.728.728,0,0,0,0-1.456Z" fill="#1a171b"/>
+    <path d="M39.6,21.376H31.847a.727.727,0,1,0,0,1.454H39.6a.727.727,0,0,0,0-1.454Z" fill="#1a171b"/>
+  </g>
+</svg>

img/resume.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>PROFILE</title><path d="M30.13,51.31h20a1.75,1.75,0,0,0,1.75-1.75V44.44a11.067,11.067,0,0,0-4.4-8.832,9.977,9.977,0,1,0-14.713,0A11.08,11.08,0,0,0,28.38,44.44v5.12A1.75,1.75,0,0,0,30.13,51.31Zm10-28.894a6.477,6.477,0,1,1-6.477,6.477A6.485,6.485,0,0,1,40.126,22.417ZM31.88,44.44a7.576,7.576,0,0,1,3.87-6.594,9.857,9.857,0,0,0,8.754,0A7.56,7.56,0,0,1,48.38,44.44v3.37H31.88Z"/><path d="M112.654,4.75H15.346A1.75,1.75,0,0,0,13.6,6.5v115a1.75,1.75,0,0,0,1.75,1.75h97.308a1.75,1.75,0,0,0,1.75-1.75V6.5A1.75,1.75,0,0,0,112.654,4.75Zm-1.75,115H17.1V8.25H110.9Z"/><path d="M26.346,65.75h75.308a1.75,1.75,0,1,0,0-3.5H26.346a1.75,1.75,0,0,0,0,3.5Z"/><path d="M26.346,80.194h75.308a1.75,1.75,0,0,0,0-3.5H26.346a1.75,1.75,0,0,0,0,3.5Z"/><path d="M26.346,109.083h75.308a1.75,1.75,0,0,0,0-3.5H26.346a1.75,1.75,0,0,0,0,3.5Z"/><path d="M26.346,94.639h75.308a1.75,1.75,0,1,0,0-3.5H26.346a1.75,1.75,0,0,0,0,3.5Z"/><path d="M64,22.417h37.654a1.75,1.75,0,0,0,0-3.5H64a1.75,1.75,0,0,0,0,3.5Z"/><path d="M64,36.861h37.654a1.75,1.75,0,0,0,0-3.5H64a1.75,1.75,0,0,0,0,3.5Z"/><path d="M64,51.306h37.654a1.75,1.75,0,0,0,0-3.5H64a1.75,1.75,0,0,0,0,3.5Z"/></svg>