Fixed error with page load; sneaky \

Completed navbar, with fixed hyperlink colors, on-hover anim, and custom font

PortfolioPage/Pages/Index.razor

@@ -5,9 +5,9 @@
 <div class="page-layout">
 
     <div class="blurb">
-        <h1 style="color: #3d8361;">Hello, World!</h1>
-        <h5>Welcome to my corner of the Internet! </h5>
-        <h5>My name is Kira Jiroux. I am a graduate of OSU - Oregon State University - with a Bachelor of Science in Computer Science, with an emphasis on VR/AR and Computer Graphics.</h5>
+        <h1 class="title">Hello, World!</h1>
+        <h5 class="subtitle">Welcome to my corner of the Internet! </h5>
+        <h5 class="text">My name is Kira Jiroux. I am a graduate of OSU - Oregon State University - with a Bachelor of Science in Computer Science, with an emphasis on VR/AR and Computer Graphics.</h5>
     </div>
 
 </div>

PortfolioPage/Pages/Index.razor.css

@@ -1,4 +1,12 @@
-body {
+/* 
+    New Pallete
+    #ffd4d4 - pinkish
+    #ffffe8 - pale yellow
+    #cde990 - light green
+    #aacb73 - green
+*/
+
+body {
 }
 
 .page-layout {
@@ -12,8 +20,20 @@
 
 .blurb {
     width: 60%;
-    background-color: #eef2e6;
+    background-color: #cde990;
     padding: 15px;
     border-radius: 25px;
     border: 2px solid #3b5249;
-}
+}
+
+.title {
+    color: #aacb73;
+}
+
+.subtitle {
+    font-weight: 100;
+}
+
+.text {
+    color: white;
+}

PortfolioPage/Shared/MainLayout.razor.css

@@ -1,19 +1,3 @@
-.page {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-/*
-    #eef2e6     --- Lightest
-    #d6cd14
-    #a4b494
-    #519872
-    #3d8361
-    #1c6758
-    #3b5249
-    #382933     --- Darkest
-*/
-
 /* 
     New Pallete
     #ffd4d4 - pinkish
@@ -21,9 +5,15 @@
     #cde990 - light green
     #aacb73 - green
 */
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+
 main {
     flex: 1;
-    /*background-image: linear-gradient(#382933, #3b5249, #1c6758, #3d8361, #519872, #a4b494,#eef2e6);*/
     background-color: #ffffe8;
 }
 

PortfolioPage/Shared/NavMenu_v2.razor

@@ -1,14 +1,14 @@
-
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Megrim">
 <nav class="navbar">
 
     <div class="navbar-header">
-        <a class="navbar-brand m-3 override-brand" href="\">Kira Jiroux</a>
+        <a class="navbar-brand m-3 override-brand" href="">Kira Jiroux</a>
     </div>
 
     <div class="" id="navbarSupportedContent">
         <ul class="navbar-nav navbar-right inline">
             <li class="nav-item px-4 inline">
-                <NavLink class="nav-item nav-link override-nav-link" href="" Match="NavLinkMatch.All"\>
+                <NavLink class="nav-link override-nav-link" href="" Match="NavLinkMatch.All">
                     <span aria-hidden="true"></span> Home
                 </NavLink>
             </li>
@@ -24,12 +24,12 @@
                 </div>
             </li>
             <li class="nav-item px-4 inline">
-                <NavLink class="nav-link override-nav-link" href="\resume" Match="NavLinkMatch.All">
+                <NavLink class="nav-link override-nav-link" href="resume" Match="NavLinkMatch.All">
                     <span aria-hidden="true"></span> Resume
                 </NavLink>
             </li>
             <li class="nav-item px-4 inline">
-                <NavLink class="nav-link override-nav-link" href="\contact" Match="NavLinkMatch.All">
+                <NavLink class="nav-link override-nav-link" href="contact" Match="NavLinkMatch.All">
                     <span aria-hidden="true"></span> Contact Me
                 </NavLink>
             </li>
@@ -37,8 +37,4 @@
         </ul>
     </div>
 
-</nav>
-
-
-
-
+</nav>

PortfolioPage/Shared/NavMenu_v2.razor.css

@@ -4,46 +4,34 @@
 
 }
 
-.brand-name {
-    color: red;
-    padding: 0;
-    margin: 0;
-}
-
 .inline {
     display: inline-block;
-}
-
-
-a.nav-link:link {
-    color: white;
-    text-decoration: none;
-}
-
-a.nav-link:visited {
-    color: white;
-    text-decoration: none;
-}
-
-NavLink.nav-link:hover {
-    color: #fb3f00;
-    text-decoration: none;
-    font-size: 18px;
-}
-
-a.nav-link:active {
-    color: #fb3f00;
-    text-decoration: none;
+    padding-right: 0px;
 }
 
 a.override-brand {
     color: white;
-    font-size: 36px;
+    font-size: 3em;
+    font-family: "Megrim", sans-serif;
 }
 
-.nav-items {
+
+.nav-item ::deep a {
     color: white;
+    font-size: 1em;
     text-decoration: none;
-    background-color: white;
+    margin-left: 10px;
+    margin-bottom: 10px;
+    width: 110px;
+    text-align: center;
+    border-radius: 30px;
 }
 
+.nav-item ::deep a:hover {
+    background-color: #aacb73;
+    color: #ffd4d4;
+    font-size: 1.2em;
+    border-radius: 30px;
+}
+
+

PortfolioPage/Shared/PhotoBanner.razor.css

@@ -20,7 +20,4 @@
     transform: translate(-50%, -50%);
     font-size: 100px;
     color: white;
-}
-
-
-
+}