more mobile optimization, fix navbar

src/app/page-header/default-page-header/default-page-header.component.css

@@ -0,0 +1,3 @@
+.default-header {
+    background-image: url('assets/img/dark-fog-forest-haze-with-avatar.jpg'); 
+}

src/app/page-header/default-page-header/default-page-header.component.html

@@ -1,6 +1,5 @@
 <div
-  class="page-header section-dark"
-  style="background-image: url('assets/img/dark-fog-forest-haze-with-avatar.jpg');"
+  class="page-header section-dark default-header"
 >
   <div class="filter"></div>
   <div class="slide-in-right">

src/app/pages/resume/resume.component.html

@@ -5,18 +5,23 @@
       <div class="container">
         <div class="owner">
           <div class="avatar">
-            <a
-              href="/assets/pdf/ZIERMACH.pdf"
-              class="btn btn-primary"
-              download="ZIERMACH.pdf"
-            >
-              Download PDF
-            </a>
+            <img
+              src="/assets/img/avatar/profilbild.jpg"
+              alt="Circle Image"
+              class="img-fluid img-responsive"
+            />
           </div>
           <div class="name">
             <h4 class="title">Christian Ziermann</h4>
             <h6 class="description">Web Developer</h6>
           </div>
+          <a
+            href="/assets/pdf/ZIERMACH.pdf"
+            class="btn btn-primary"
+            download="ZIERMACH.pdf"
+          >
+            Download PDF
+          </a>
         </div>
         <div class="row">
           <div class="col-md-6">

src/app/shared/navbar/navbar.component.html

@@ -15,13 +15,9 @@
         aria-label="Toggle navigation"
         (click)="sidebarToggle()"
       >
-        <span class="navbar-toggler-bar" [routerLink]="['/resume']"
-          >Resume</span
-        >
-        <span class="navbar-toggler-bar" [routerLink]="['/games']">Games</span>
-        <span class="navbar-toggler-bar" [routerLink]="['/projects']"
-          >Projects</span
-        >
+        <span class="navbar-toggler-bar"></span>
+        <span class="navbar-toggler-bar"></span>
+        <span class="navbar-toggler-bar"></span>
       </button>
     </div>
     <div class="navbar-collapse" id="navbarToggler">

src/assets/sass/paper-kit/_responsive.scss

@@ -1,8 +1,8 @@
 /*          Changes for small display      */
 
 @media (max-width: 767px){
-    .navbar-toggler-bar {
-        display: none !important;
+    .default-header {
+        background-image: url('assets/img/dark-fog-forest-haze.jpg') !important;
     }
     .navbar-transparent{
         // padding-top: 15px;
@@ -389,11 +389,12 @@
         right: 0;
         z-index: 1032;
         visibility: visible;
-        background-color: #999;
+        color: white;
+        background-color: $light-gray;
         overflow-y: visible;
         border-top: none;
         text-align: left;
-        border-left: 1px solid #ccc5b9;
+        border-left: 1px solid $default-gray;
         padding-right: 0px;
         padding-left: 40px;
         padding-top: 15px;
@@ -431,7 +432,8 @@
             height: 100%;
             width: 100%;
             position: absolute;
-            background-color: $bg-nude;
+            color: white;
+            background-color: $light-gray;
             background-image: linear-gradient(
                 to bottom,
                 rgba(0, 0, 0, 0) 0%,