feat: aot + lighter text

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Victor Frye
+Copyright (c) 2024 Victor Frye
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/Client/Client.csproj

@@ -4,6 +4,8 @@
     <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
+
+    <RunAOTCompilation>true</RunAOTCompilation>
 
     <Title>VictorFrye.com</Title>
     <Description>🎨 My personal about me website</Description>

src/Client/Components/Content/About.razor

@@ -1,6 +1,6 @@
 <section id="about">
-    <div class="d-flex flex-wrap text-muted">
-        <h5 class="text-light pt-3 pb-2">_About</h5>
+    <div class="d-flex flex-wrap">
+        <h5 class="text-primary pt-3 pb-2">_About</h5>
 
         <p>
             Hello from Grand Rapids! <strong>I'm Victor, a software engineer powered by coffee</strong>.

src/Client/Components/Content/Banner.razor

@@ -1,13 +1,13 @@
 <section id="banner" class="d-flex align-items-center">
     <div class="d-flex">
-        <img src="/images/profile.png" alt="a profile picture of Victor Frye" class="bg-gradient-circle" width="64px" height="64px">
+        <img src="/images/profile.png" alt="a profile picture of Victor Frye" class="pfp-bg" width="64px" height="64px">
     </div>
     <div class="d-flex flex-column p-3">
         <div class="d-flex align-items-center">
-            <h4 class="text-light"><strong>[Victor Frye]</strong></h4>
+            <h4 class="text-primary"><strong>[Victor Frye]</strong></h4>
         </div>
         <div class="d-flex align-items-center py-1">
-            <span class="text-muted">
+            <span>
                 Your friendly neighborhood technologist
             </span>
         </div>

src/Client/Components/Content/Connect.razor

@@ -1,6 +1,6 @@
 <section id="connect">
     <div class="d-flex flex-column flex-wrap">
-        <h5 class="text-light pt-3 pb-2">_Connect</h5>
+        <h5 class="text-primary pt-3 pb-2">_Connect</h5>
 
         <div class="d-flex flex-row">
             <a href="https://threads.net/@@thevictorfryeadventure" target="_blank" class="btn-link">

src/Client/Components/Layout/MainLayout.razor

@@ -2,14 +2,14 @@
 
 <div class="d-flex flex-column min-vh-100">
 
-    <div class="d-flex flex-column mb-auto frame">
-        <div class="d-flex flex-column framed">
+    <div class="d-flex flex-column mb-auto frame-bg">
+        <div class="d-flex flex-column framed-bg text-light">
             <main class="">
                 @Body
             </main>
 
-            <footer class="d-flex justify-content-end mt-auto text-light p-3">
-                ©2023 Victor Frye
+            <footer class="d-flex justify-content-end mt-auto p-3">
+                ©2024 Victor Frye
             </footer>
         </div>
     </div>

src/Client/wwwroot/styles/app.css

@@ -2,110 +2,99 @@ html,
 body {
     background: #1d1d20;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    color: #b8bec3;
 }
 
 :root {
-    /* --accent-primary: #3a0647;
-    --accent-secondary: #052767; */
-    --accent-primary: #fafafa;
-    --accent-secondary: silver;
-
-    --accent-tertiary: #36454f;
-    --accent-dark: black;
-
-    --accent-gradient: linear-gradient(0deg, var(--accent-primary) 0%, var(--accent-dark) 70%);
-    --accent-gradient-inverse: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-tertiary) 70%);
-    --accent-gradient-top-left: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-tertiary) 50%, var(--accent-primary) 100%);
-    --accent-gradient-bottom-right: linear-gradient(135deg, var(--accent-tertiary) 0%, var(--accent-primary) 50%, var(--accent-tertiary) 100%);
+    --primary: #c0c0c0;
+    --secondary: #f8f8ff;
+    --tertiary: #36454f;
+    --bg: #1d1d20;
 
+    --gradient: linear-gradient(0deg, var(--secondary) 0%, black 70%);
+    --gradient-tl: linear-gradient(135deg, var(--secondary) 0%, black 50%, var(--secondary) 100%);
+    --gradient-br: linear-gradient(135deg, black 0%, var(--secondary) 50%, black 100%);
 }
 
-.bi {
-    display: inline-block;
-    /* position: relative; */
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
+.text-primary {
+    color: var(--primary) !important;
 }
 
-.frame {
-    background: #1d1d20;
+.frame-bg {
+    background: var(--bg);
     position: absolute;
     z-index: 1;
     margin: 30px;
 }
 
-.frame ::before {
+.frame-bg ::before {
     content: " ";
     width: 180px;
     height: 180px;
-    background: var(--accent-gradient-top-left);
+    background: var(--gradient-tl);
     z-index: -1;
     border-top-left-radius: 2.5rem;
     position: absolute;
     top: -2px;
     left: -2px;
 }
 
-.frame ::after {
+.frame-bg ::after {
     content: " ";
     width: 180px;
     height: 180px;
-    background: var(--accent-gradient-bottom-right);
+    background: var(--gradient-br);
     z-index: -1;
     border-bottom-right-radius: 2.5rem;
     position: absolute;
     bottom: -2px;
     right: -2px;
 }
 
-.framed {
+.framed-bg {
     min-height: calc(100vh - 60px);
-    background: #1d1d20;
+    background: var(--bg);
     border-radius: 2.4rem;
     padding: 30px 45px;
 }
 
-.bg-gradient-circle {
+.pfp-bg {
     width: 72px;
     height: 72px;
     padding: 3px 3px;
     border-radius: 50%;
-    background: var(--accent-gradient) !important;
+    background: var(--gradient) !important;
 }
 
 .social-icon {
     height: 24px;
     width: 24px;
 }
 
+
 a,
 .btn-link {
-    color: var(--accent-secondary);
-    text-decoration: none;
-    border-bottom: 1px dotted var(--accent-secondary);
+    color: var(--primary);
+    text-decoration: none !important;
+    border-bottom: 1px dotted var(--primary);
 }
 
 .btn-link {
-    fill: var(--accent-secondary);
+    fill: var(--primary);
     border-bottom: none;
 }
 
 .btn-primary {
-    color: white;
-    background-color: var(--accent-secondary);
-    border-color: var(--accent-secondary);
+    color: var(--secondary);
+    background-color: var(--primary);
+    border-color: var(--primary);
 }
 
 .btn:focus,
 .btn:active:focus,
 .btn-link.nav-link:focus,
 .form-control:focus,
 .form-check-input:focus {
-    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--tertiary);
 }
 
 .content {