Add About page

src/components/Header.astro

@@ -21,11 +21,9 @@ import { Icon } from 'astro-icon/components'
     <li class="menu-item has-dropdown">
       <button aria-haspopup="true" aria-expanded="false">Extras</button>
       <ul class="dropdown-menu">
-        <!-- Add back once the about page is complete.
         <li class="submenu-item">
           <a href="/about/">About</a>
         </li>
-        -->
         <li class="menu-item">
           <a href="https://blog.alexsguardian.net" title="external link" rel="external noopener noreferrer">Alex's Blog</a>
         </li>

src/pages/about.astro

@@ -0,0 +1,41 @@
+---
+import DefaultLayout from '../layouts/DefaultLayout.astro'
+import { Card } from 'accessible-astro-components'
+import ContentMedia from '../components/ContentMedia.astro'
+---
+
+<DefaultLayout>
+    <div class="container">
+        <div id="center">
+            <h1>About</h1>
+            <p>
+                Alex's Guardian was started in 2015 by Alexander Henderson with the goal to make Infromation Technology (IT) work easier and transparent. IT work should never be complicated, or hidden behind bogus fees, for end users & businesses. You want someone to put YOU before profit.
+            </p>
+        </div>
+        <div>
+            <ContentMedia imgSrc="/about/map.webp" alt="Map picture of Lancaster County, PA">
+                <h2>Manheim, PA</h2>
+                <p class="text-normal">
+                    Alex's Guardian is currently based, and primarily focused, in Manheim (Lancaster County, PA). Though, we have worked with clients out of the county/state. So do not let our primary focus discourage you from contacting us!
+                </p>
+            </ContentMedia>
+            <div id="blog-card">
+                <Card
+                url='https://blog.alexsguardian.net'
+                img="/about/alex-blog-card.webp"
+                title="Alex's Blog"
+                footer=""
+                >
+                    Follow Alex and his adventures in his homelab.
+            </Card> 
+            </div>
+
+        </div>
+    </div>
+
+<style is:global>
+    #blog-card >div {
+        margin: auto;
+    }
+</style>
+</DefaultLayout>