Added rough starter styling

src/frontend/components/icons.tsx

@@ -0,0 +1,60 @@
+export function GithubIcon(props: any) {
+    return (
+      <svg
+        {...props}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+        <path d="M9 18c-4.51 2-5-2-7-2" />
+      </svg>
+    )
+  }
+
+export function LinkedinIcon(props: any) {
+    return (
+      <svg
+        {...props}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+        <rect width="4" height="12" x="2" y="9" />
+        <circle cx="4" cy="4" r="2" />
+      </svg>
+    )
+  }
+
+export function XIcon(props: any) {
+    return (
+      <svg
+        {...props}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 1200 1227"
+        preserveAspectRatio="none"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="black" />
+      </svg>
+    )
+  }

src/frontend/pages/home.tsx

@@ -1,25 +1,32 @@
+import { GithubIcon, LinkedinIcon, XIcon } from "../components/icons"
+
 export function Home(){
     return (
         <div>
-            <article>
+            <article class="post-spotlight">
                 <h2>Most Recent Blog Post Title</h2>
                 <div>Posted on January 1, 2024</div>
                 <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
                 <a href="/post/3">Continue Reading...</a>
             </article>
+            <hr />
             <aside>
-                <div>
+                <div class="about">
                     <h3>About Me</h3>
                     <p>I'm a software engineer</p>
-                
-                    <h3>Connect with me</h3>
                     <ul>
-                        <li>Twitter</li>
+                        <li>
-                        <li>GitHub</li>
+                            <a href=""><XIcon /></a>
-                        <li>LinkedIn</li>
+                        </li>
+                        <li>
+                            <a href=""><GithubIcon /></a>
+                        </li>
+                        <li>
+                            <a href=""><LinkedinIcon /></a>
+                        </li>
                     </ul>
                 </div>
-                <div>
+                <div class="content-categories">
                     <h3>Categories</h3>
                     <ul>
                         <li>Web Development</li>

src/frontend/public/styles.css

@@ -1,5 +1,7 @@
 body, a {
     margin: 0px;
+    text-decoration: none;
+    color: black;
 }
 
 header {
@@ -7,7 +9,8 @@ header {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    margin: 15px;
+    background-color: #f2f2f2;
+    padding: 15px;
     height: 50px;
 }
 
@@ -31,7 +34,64 @@ nav a {
     font-size: 20px;
 }
 
-header hr {
+hr {
     margin: 0px;
     opacity: 75%;
-}
+}
+
+.post-spotlight {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 30px;
+    padding: 4em;
+}
+
+article {
+    font-family: 'Arial Narrow Bold', sans-serif;
+}
+
+article > h2 {
+    font-size: 3em;
+    font-weight: bold;
+    margin: 15px;
+}
+
+article > div {
+    color: gray;
+}
+
+article > a {
+    text-decoration: none;
+    border: 1px solid black;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    color: black;
+    text-align: end;
+
+}
+
+aside {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    margin: 15px;
+}
+
+aside h3 {
+    font-size: 2em;
+    font-weight: bold;
+}
+
+aside ul {
+    list-style-type: none;
+    padding: 0px;
+}
+
+.about ul {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}