Made pages mobile compatible

src/Portfolio.Web/Components/Pages/AboutPage.razor.css

@@ -17,7 +17,7 @@
     margin-top: 30px;
 }
 
-@media screen and (max-width: var(--mobile-width)) {
+@media screen and (max-width: 750px) {
     #about {
         grid-template-columns: unset;
         grid-template-rows: repeat(2, max-content);

src/Portfolio.Web/Components/Pages/Home.razor

@@ -3,6 +3,8 @@
 @using Portfolio.Shared.Services
 @using Portfolio.Web.Components.Components
 
+<PageTitle>Portfolio von Leon Hoppe</PageTitle>
+
 <section id="hero">
     <div class="artwork">
         <div class="circle big-circle"></div>
@@ -77,7 +79,8 @@
             jobs.state++;
         }
         
-        displayElement.innerText = jobs.display;
+        if (displayElement.innerText !== jobs.display)
+            displayElement.innerText = jobs.display;
     }, 50)
 
 </script>

src/Portfolio.Web/Components/Pages/Home.razor.css

@@ -53,7 +53,6 @@
 }
 
 .title {
-    font-size: 35px;
     display: inline;
     margin-right: 10px;
 }
@@ -126,3 +125,23 @@ a:not(#main-action):hover::before {
         opacity: 1;
     }
 }
+
+@media screen and (max-width: 750px) {
+    #hero > h2 {
+        font-size: 2rem;
+        line-height: 2.5rem;
+        margin-top: 10vh;
+    }
+
+    .timeline {
+        flex-direction: column-reverse;
+    }
+
+    .timeline ::deep .timestamp:last-of-type {
+        --show-bar: block;
+    }
+
+    .timeline ::deep .timestamp:first-of-type {
+        --show-bar: none;
+    }
+}