Rearrange content and remove about page

src/components/Footer.astro

@@ -53,7 +53,6 @@ const today = new Date();
 <style>
     footer {
         padding: 2em 1em 6em 1em;
-        background: linear-gradient(var(--gray-gradient)) no-repeat;
         color: rgb(var(--gray));
         text-align: center;
     }
@@ -68,6 +67,6 @@ const today = new Date();
         color: rgb(var(--gray));
     }
     .social-links a:hover {
-        color: rgb(var(--gray-dark));
+        color: rgb(var(--black));
     }
 </style>

src/components/Header.astro

@@ -8,51 +8,14 @@ import { SITE_TITLE } from "../consts";
     <div class="internal-links">
       <HeaderLink href="/">Home</HeaderLink>
       <HeaderLink href="/blog">Blog</HeaderLink>
-      <HeaderLink href="/about">About</HeaderLink>
     </div>
     <h2><a href="/">{SITE_TITLE}</a></h2>
-    <div class="social-links">
-      <a rel="me" href="https://fosstodon.org/@smrising" target="_blank">
-        <span class="sr-only">Follow me on Mastodon</span>
-        <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-          ><path
-            fill="currentColor"
-            d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
-          ></path></svg
-        >
-      </a>
-      <a href="https://x.com/Kelteani" target="_blank">
-        <span class="sr-only">Follow me on X</span>
-        <svg
-          viewBox="0 0 16 16"
-          aria-hidden="true"
-          width="32"
-          height="32"
-          astro-icon="social/x"
-        >
-          <path
-            fill="currentColor"
-            d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"
-          ></path>
-        </svg>
-      </a>
-      <a href="https://github.com/smjklake" target="_blank">
-        <span class="sr-only">Go to my GitHub repo</span>
-        <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-          ><path
-            fill="currentColor"
-            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-          ></path></svg
-        >
-      </a>
-    </div>
   </nav>
 </header>
 <style>
   header {
     margin: 0;
     padding: 0 1em;
-    background: white;
     box-shadow: 0 2px 8px rgba(var(--black), 5%);
   }
   h2 {

src/layouts/BlogPost.astro

@@ -33,7 +33,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 				max-width: calc(100% - 2em);
 				margin: auto;
 				padding: 1em;
-				color: rgb(var(--gray-dark));
+				color: rgb(var(--gray-light));
 			}
 			.title {
 				margin-bottom: 1em;
@@ -46,7 +46,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 			}
 			.date {
 				margin-bottom: 0.5em;
-				color: rgb(var(--gray));
+				color: rgb(var(--gray-light));
 			}
 			.last-updated-on {
 				font-style: italic;

src/pages/about.astro

@@ -1,23 +0,0 @@
----
-import Layout from "../layouts/BlogPost.astro";
----
-
-<Layout
-    title="About Me"
-    description="Brief description of me"
-    pubDate={new Date("December 19 2023")}
->
-    <img
-        src="/profile-pic.jpg"
-        width={250}
-        style="float:left;padding-right:1em"
-        alt=""
-    />
-    <p>
-        I am a Father, Husband, and Developer in Arizona. I was in the US Air
-        Force for a large portion of my life as a Jet Engine Mechanic and have
-        transitioned into Software Development after separating. I enjoy
-        running, cycling, rock climbing as well as exploring technology. I am a
-        motivated lifelong learner and eager to share what I've learned.
-    </p>
-</Layout>

src/pages/blog/index.astro

@@ -54,16 +54,16 @@ const posts = (await getCollection('blog')).sort(
 			}
 			.title {
 				margin: 0;
-				color: rgb(var(--black));
+				color: white;
 				line-height: 1;
 			}
 			.date {
 				margin: 0;
-				color: rgb(var(--gray));
+				color: rgb(var(--gray-light));
 			}
 			ul li a:hover h4,
 			ul li a:hover .date {
-				color: rgb(var(--accent));
+				color: rgb(var(--gray));
 			}
 			ul a:hover img {
 				box-shadow: var(--box-shadow);

src/pages/index.astro

@@ -14,10 +14,33 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
         <Header title={SITE_TITLE} />
         <main>
             <h1>Hello</h1>
+            <article>
+                <img
+                    src="/profile-pic.jpg"
+                    width="250px"
+                    alt="A man with short, dark, wavy hair and a beard is looking at the camera. He is wearing a gray shirt and standing against a plain background."
+                />
                 <p>
-                My name is Spencer Jones and this is my digital contact card and blog.
+                    My name is Spencer Jones and this is my digital contact card
+                    and blog. I am a Father, Husband, and Developer in Arizona.
+                    I was in the US Air Force for a large portion of my life as
+                    a Jet Engine Mechanic and have transitioned into Software
+                    Development after separating. I enjoy running, cycling, and
+                    rock climbing as well as exploring technology. I am a
+                    motivated lifelong learner and eager to share what I've
+                    learned.
                 </p>
+            </article>
         </main>
         <Footer />
+        <style>
+            article {
+                display: flex;
+            }
+            article > img {
+                align-self: center;
+                padding-right: 1.5em;
+            }
+        </style>
     </body>
 </html>

src/styles/global.css

@@ -11,8 +11,7 @@
 	--gray: 96, 115, 159;
 	--gray-light: 229, 233, 240;
 	--gray-dark: 34, 41, 57;
-	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
+	--box-shadow: 0 2px 6px rgba(var(--gray-dark), 25%), 0 8px 24px rgba(var(--gray-dark), 33%),
-	--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
 		0 16px 32px rgba(var(--gray), 33%);
 }
 @font-face {
@@ -34,11 +33,11 @@ body {
 	margin: 0;
 	padding: 0;
 	text-align: left;
-	background: linear-gradient(var(--gray-gradient)) no-repeat;
+	background: rgb(var(--gray-dark));
 	background-size: 100% 600px;
 	word-wrap: break-word;
 	overflow-wrap: break-word;
-	color: rgb(var(--gray-dark));
+	color: rgb(var(--gray-light));
 	font-size: 20px;
 	line-height: 1.7;
 }
@@ -55,7 +54,7 @@ h4,
 h5,
 h6 {
 	margin: 0 0 0.5rem 0;
-	color: rgb(var(--black));
+	color: white;
 	line-height: 1.2;
 }
 h1 {