feat: finish initial design

internal/assets/css/style.css

@@ -74,7 +74,7 @@ body {
 body {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 2rem;
   padding: 1rem;
 }
 
@@ -85,6 +85,20 @@ body {
   align-items: center;
 }
 
+.image-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.bio {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  text-align: center;
+  max-width: 40rem;
+}
+
 .links-container {
   flex: 1;
 }
@@ -93,10 +107,12 @@ body {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  width: 100%;
+  max-width: 40rem;
 }
 
 .profile-picture {
-  width: 100px;
+  width: 250px;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   box-shadow: 8px -4px 14px 4px rgba(0,0,0,0.36), -4px 8px 14px 4px rgba(0,0,0,0.36);
@@ -104,10 +120,13 @@ body {
 
 .link {
   display: flex;
-  padding: 0.25rem 1rem;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 1.5rem;
   border-radius: 0.5rem;
   color: var(--bg-color);
   background-color: var(--text-color);
+  font-size: 1.125rem;
 }
 
 @media (hover: hover) {

internal/assets/templates/index.gohtml

@@ -15,24 +15,36 @@
   <div class="image-container">
     <img class="profile-picture" src="https://github.com/StevanFreeborn.png"
       alt="A man with short brown hair, a grey hoodie, and a white t-shirt smiles at the camera. He has a white earbud in his left ear. The background is a blurred office setting with warm lighting visible through glass partitions." />
-    <div>
+    <div class="bio">
       <h1>Stevan Freeborn</h1>
-      <p>Stuff about me...</p>
+      <p>I'm a 32-year old dad of 2 who enjoys drinking coffee, lifting weights, and solving problems with code.</p>
     </div>
   </div>
   <nav class="links-container">
     <ul>
       <li>
-        <a class="link" href="https://youtube.stevanfreeborn.com">YouTube</a>
+        <a class="link" href="https://youtube.stevanfreeborn.com">
+          <i class="fa-brands fa-square-youtube fa-lg"></i>
+          <span>YouTube</span>
+        </a>
       </li>
       <li>
-        <a class="link" href="https://github.stevanfreeborn.com">GitHub</a>
+        <a class="link" href="https://github.stevanfreeborn.com">
+          <i class="fa-brands fa-square-github fa-lg"></i>
+          <span>GitHub</span>
+        </a>
       </li>
       <li>
-        <a class="link" href="https://blog.stevanfreeborn.com">Blog</a>
+        <a class="link" href="https://blog.stevanfreeborn.com">
+          <i class="fa-solid fa-square-rss fa-lg"></i>
+          <span>Blog</span>
+        </a>
       </li>
       <li>
-        <a class="link" href="https://linkedin.stevanfreeborn.com">LinkedIn</a>
+        <a class="link" href="https://linkedin.stevanfreeborn.com">
+          <i class="fa-brands fa-square-linkedin fa-lg"></i>
+          <span>LinkedIn</span>
+        </a>
       </li>
     </ul>
   </nav>