feat: wip on links

2025-11-20 05:03:51 -06:00
parent 0f366e1ff8
commit 43c30ce7a7
3 changed files with 98 additions and 11 deletions
@@ -50,7 +50,16 @@ table {

 /* Site Styles */

+/* Background: #2C2C2C (slate gray) */
+/* Primary Text: #E4E4E4 (light gray) */
+/* Accent 1: #A8DADC (light cyan) */
+/* Accent 2: #FFC1CC (soft pink) */
+/* Button/CTA: #B39CD0 (lavender) */
+
 :root {
+  --bg-color: #181818;
+  --text-color: #E4E4E4;
+
  font-family: 'CaskaydiaCove NFM', monospace;
  font-size: 16px;
 }
@@ -58,10 +67,55 @@ table {
 html,
 body {
  height: 100%;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.image-container,
+.links-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.links-container {
+  flex: 1;
+}
+
+.links-container ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.profile-picture {
+  width: 100px;
+  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);
+}
+
+.link {
+  display: flex;
+  padding: 0.25rem 1rem;
+  border-radius: 0.5rem;
+  color: var(--bg-color);
+  background-color: var(--text-color);
+}
+
+@media (hover: hover) {
+  .link:hover {
+    transform: scale(1.02);
+  }
 }




-
-
@@ -1,12 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Stevan's Links</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
+    integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="css/style.css" rel="stylesheet">
 </head>
+
 <body>
-    <h1 class="red">Stevan's Links</h1> 
+  <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>
+      <h1>Stevan Freeborn</h1>
+      <p>Stuff about me...</p>
+    </div>
+  </div>
+  <nav class="links-container">
+    <ul>
+      <li>
+        <a class="link" href="https://youtube.stevanfreeborn.com">YouTube</a>
+      </li>
+      <li>
+        <a class="link" href="https://github.stevanfreeborn.com">GitHub</a>
+      </li>
+      <li>
+        <a class="link" href="https://blog.stevanfreeborn.com">Blog</a>
+      </li>
+      <li>
+        <a class="link" href="https://linkedin.stevanfreeborn.com">LinkedIn</a>
+      </li>
+    </ul>
+  </nav>
+
 </body>
+
 </html>
@@ -9,6 +9,9 @@ import (
 )

 func Index(w http.ResponseWriter, r *http.Request) {
+	// Links coming in external JSON data
+	// { link: "link", text: "text", "icon": "icon" }
+
 	t, err := template.ParseFS(assets.Templates, "templates/index.gohtml")

 	if err != nil {