Code cleanup and About page update

MyWebsite/MyWebsite/wwwroot/Gallery.json

@@ -1,9 +1,9 @@
 [
   {
-    "FileName": "FirstAvatar.png",
-    "Title": "First avatar I ever made",
+    "FileName": "cvbg.png",
+    "Title": "About me background image",
     "CreationDate": "2016-07-31T00:00:00",
-    "Description": ""
+    "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra velit tellus, in lacinia elit venenatis sed. Nullam eget enim condimentum, aliquet orci eget, pretium risus. Ut convallis auctor magna non pharetra. Sed et lacus metus. Ut lobortis et velit id tempor. Fusce suscipit at justo in volutpat. Donec facilisis sollicitudin ligula, vitae volutpat ligula rhoncus sit amet. In viverra elit sodales bibendum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
   },
   {
     "FileName": "VectorAvatar.svg",

MyWebsite/MyWebsite/wwwroot/css/AboutMe.css

@@ -0,0 +1,46 @@
+article {
+    margin: 0px;
+}
+
+.block {
+    position: relative;
+}
+.block .content {
+    position: absolute;
+}
+.block .background {
+    width: 100%;
+}
+
+/*.goto {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #1e1e1e;
+    border-radius: 5px;
+    padding: 5px;
+    color: white;
+}*/
+
+
+.intro {
+    color: white;
+    background-color: #00a7dc;
+    font-size: 36px;
+    text-shadow: 2px 2px 1px black;
+}
+.intro .content {
+    bottom: 50px;
+    left: 50px;
+    max-width: 65%;
+}
+
+.sut {
+    color: white;
+    background-color: #ff8000;
+    font-size: 24px;
+    text-shadow: 2px 2px 1px black;
+}
+.sut .content {
+    margin: 50px 50px;
+}

MyWebsite/MyWebsite/wwwroot/css/Gallery.css

@@ -0,0 +1,23 @@
+.gallery img {
+    object-fit: cover;
+    max-height: 200px;
+    max-width: 100%;
+    margin: 2px;
+    transition: .25s;
+}
+.gallery img:hover {
+    filter: brightness(125%);
+    transform: scale(1.25);
+}
+
+.image-overview-block img {
+    max-height: 50vh;
+    max-width: 100%;
+    float: left;
+}
+.image-overview-block div {
+    display: inline-block;
+}
+.image-overview-block h1 {
+    margin-bottom: 0px;
+}

MyWebsite/MyWebsite/wwwroot/css/Style.css

@@ -16,20 +16,16 @@
     src: url("/fonts/segoeUI.eot?#iefix") format("embedded-opentype"), url("/fonts/segoeUI.otf") format("opentype"), url("/fonts/segoeUI.svg") format("svg"), url("/fonts/segoeUI.ttf") format("truetype"), url("/fonts/segoeUI.woff") format("woff"), url("/fonts/segoeUI.woff2") format("woff2");
 }
 
-body {
-    margin: 0px;
-    font-family: Consolas, 'Segoe MDL2 Assets';
-}
-
+/*Header styles*/
 .navbar {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    grid-column-gap: 10px;
+    grid-template-rows: auto auto;
     background-color: #343434;
     position: sticky;
     z-index: 10;
-    top: 0%;
-    right: 0%;
-    left: 0%;
     padding: 10px;
-    min-height: 35px;
     font-size: 26px;
 }
 
@@ -37,44 +33,57 @@ body {
     text-decoration: none;
     color: white;
 }
-.navbar a:hover {
-    color: gray;
-}
-
-footer a {
-    text-decoration: none;
-    color: black;
-}
-footer a:hover {
-    color: orangered;
-}
-
-.main-menu {
-    display: inline;
-    list-style: none;
+.navbar a:hover { 
+    color: gray; 
 }
 
+.main-menu { margin: 0px; }
 .main-menu li {
     display: inline-block;
     font-size: 20px;
     margin-right: 20px;
 }
 
-.sideheader {
-    float: right;
+#compact-menu {
+    grid-row: 2/2;
+    list-style: none;
+}
+#compact-menu li {
+    font-size: 20px;
+    margin-top: 10px;
 }
 
+/*Footer styles*/
 footer {
-    padding: 0px 10px;
+    padding: 10px;
     display: grid;
     align-items: center;
     grid-template-columns: 1fr auto auto auto;
     grid-column-gap: 10px;
 }
-footer svg { width: 1.4em; }
+footer a {
+    text-decoration: none;
+    color: black;
+}
+footer a:hover { 
+    color: orangered;
+}
 
+/*Body styles*/
+body {
+    margin: 0px;
+    font-family: Consolas, 'Segoe MDL2 Assets';
+}
 main {
-    min-height: calc(100vh - 130px);
+    min-height: calc(100vh - 115px);    /*Page height minus footer requred space*/
+}
+
+header a {
+    text-decoration: none;
+    color: black;
+}
+header a:hover {
+    text-decoration: underline;
 }
 
 article, header {
@@ -85,43 +94,6 @@ article a:visited, article a:link {
     color: blue;
 }
 
-header a {
-    text-decoration: none;
-    color: black;
-}
-header a:hover {
-    color: black;
-    text-decoration: underline;
-}
-
-.image-overview-block img {
-    max-height: 50vh;
-    float: left;
-    display: inline;
-}
-.image-overview-block div {
-    margin: 10px;
-    display: inline-block;
-}
-.image-overview-block div h1 {
-    margin-bottom: 0px;
-}
-.image-overview-block .date {
-    margin: 0px;
-}
-
-.gallery img {
-    transition: .25s;
-    object-fit: cover;
-    max-width: 300px;
-    height: 200px;
-    margin: 2px;
-}
-.gallery img:hover {
-    filter: brightness(125%);
-    transform: scale(1.25);
-}
-
 .comment, .comment:visited {
     color: #57a64a;
 }

MyWebsite/MyWebsite/wwwroot/js/site.js

@@ -1,11 +1,21 @@
-function ToggleImageSize()
+function ToggleMenu()
+{
+    var menu = document.getElementById("compact-menu");
+
+    if (menu.style.display == "none")
+        menu.style.display = "initial";
+    else
+        menu.style.display = "none";
+}
+
+function ToggleImageSize()
 {
     var image = document.getElementById("image");
 
     if (image.style.maxHeight == "none")
     {
         image.style.maxHeight = "50vh";
-        image.style.maxWidth = "initial";
+        image.style.maxWidth = "100%";
     }
     else
     {