Contact page

WebAssembly/Layout/MainLayout.razor

@@ -5,9 +5,13 @@
 <MudDialogProvider/>
 <MudSnackbarProvider/>
 
-
 <div class="page">
     <main>
+        <div class="top-row px-4">
+            <a href="/">Home</a>
+            <a href="/contact">Contact</a>
+        </div>
+
         <article class="content px-4">
             @Body
         </article>

WebAssembly/Layout/MainLayout.razor.css

@@ -25,6 +25,7 @@ main {
     white-space: nowrap;
     margin-left: 1.5rem;
     text-decoration: none;
+    color: black;
 }
 
 .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
@@ -34,6 +35,7 @@ main {
 .top-row ::deep a:first-child {
     overflow: hidden;
     text-overflow: ellipsis;
+    margin-right: auto;
 }
 
 @media (max-width: 640.98px) {

WebAssembly/Pages/Contact.razor

@@ -0,0 +1,108 @@
+@page "/contact"
+
+<PageTitle>Contact</PageTitle>
+
+<div class="contact-container">
+    <h1>Contact</h1>
+    <p class="subtitle">I am open to opportunities</p>
+
+    <div class="contact-card">
+        <h2>Get in touch</h2>
+        <p>
+            I'm currently exploring new opportunities and would love to hear from you.
+            Feel free to reach out via email or connect with me on LinkedIn.
+        </p>
+        <div class="contact-links">
+            <a href="mailto:jonmcc.0723@gmail.com" class="contact-link">
+                <span class="link-icon">&#9993;</span>
+                <span>jonmcc.0723@gmail.com</span>
+            </a>
+            <a href="https://www.linkedin.com/in/jonmcc/" target="_blank" class="contact-link">
+                <span class="link-icon">&#128100;</span>
+                <span>LinkedIn</span>
+            </a>
+            <a href="https://git.jonathanmccaffrey.ca/JonathanMcCaffrey?tab=activity" target="_blank" class="contact-link">
+                <span class="link-icon">&#128187;</span>
+                <span>GitHub</span>
+            </a>
+        </div>
+    </div>
+</div>
+
+<style>
+    .contact-container {
+        padding: 2rem;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+
+    h1 {
+        text-align: center;
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+        color: #333;
+    }
+
+    .subtitle {
+        text-align: center;
+        font-size: 1.2rem;
+        color: #666;
+        margin-bottom: 2rem;
+        font-style: italic;
+    }
+
+    .contact-card {
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 2rem;
+        background-color: #ffffff;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .contact-card h2 {
+        margin-top: 0;
+        color: #333;
+    }
+
+    .contact-card p {
+        color: #555;
+        line-height: 1.6;
+    }
+
+    .contact-links {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-top: 1.5rem;
+    }
+
+    .contact-link {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.75rem 1rem;
+        background-color: #f9f9f9;
+        border-left: 4px solid #4a90e2;
+        text-decoration: none;
+        border-radius: 4px;
+        transition: all 0.2s ease;
+        color: #2c3e50;
+        font-weight: 600;
+    }
+
+    .contact-link:hover {
+        background-color: #f0f0f0;
+        border-left-color: #2563eb;
+        padding-left: 1.25rem;
+    }
+
+    .link-icon {
+        font-size: 1.5rem;
+    }
+
+    @@media (max-width: 768px) {
+        h1 {
+            font-size: 2rem;
+        }
+    }
+</style>

WebAssembly/Pages/Home.razor

@@ -3,7 +3,7 @@
 
 <div class="home-container">
     <h1>Welcome to AOW4 Game Reference</h1>
-    <p class="subtitle">Basic game reference project developed with AI assisted coding and agents.</p>
+    <p class="subtitle">Basic game reference project developed with AI assisted coding and agents. Completely a <b>Work In Progress</b>. No complete features.</p>
 
     <div class="sections-grid">
         @foreach (var section in sections)