first draft

index.css

@@ -102,6 +102,12 @@ a {
 
 .topics {
   font-size: 3em;
+  flex: 1;
+  justify-content: space-between;
+}
+
+.post {
+  font-size: 2em;
 }
 
 .software a:hover {
@@ -113,14 +119,10 @@ a {
 .trading a:hover {
   color: #d50032;
 }
-.interview-problems a:hover {
+.algorithms a:hover {
   color: #6a0dad;
 }
 
-.logo {
-  height: 40px;
-}
-
 .topic a {
   position: relative;
   display: inline-block;

index.html

@@ -32,10 +32,11 @@
         <li class="topic trading">
           <a href="/trading" onclick="typechars(event)">Trading</a>
         </li>
-        <li class="topic interview-problems">
+        <li class="topic algorithms">
           <a href="/algorithms" onclick="typechars(event)">Algorithms</a>
         </li>
       </ul>
+      <div class="posts" id="posts"></div>
     </main>
     <footer>
       <div class="footer-links">

scripts/index.js

@@ -1,20 +1,39 @@
-function typechars(e, url = "wip.html") {
+const postMapping = new Map([
+  ["Software", ["Post 1", "Post 2", "Post 3"]],
+  ["Economics", ["Economy 1", "Economy 2"]],
+  ["Trading", ["Trade Secrets", "Market Trends"]],
+  ["Algorithms", ["Algorithm Challenges", "Data Structures 101"]],
+]);
+
+// TODO: ensure handling multiple clicks
+function renderPosts(topic) {
+  const posts = document.getElementById("posts");
+  posts.innerHTML = "";
+
+  postMapping.get(topic).forEach((postName) => {
+    const post = document.createElement("div");
+    post.classList.add("post");
+    post.textContent = postName;
+    posts.appendChild(post);
+  });
+}
+
+function typechars(e) {
   e.preventDefault();
 
-  const text = ` ${e.target.textContent.toLowerCase()}/`;
+  const topic = e.target.textContent;
+  const terminalText = ` ${topic.toLowerCase()}/`;
   const terminalPrompt = document.querySelector(".prompt");
+  terminalPrompt.innerHTML = "barrett@ruth:~$ ";
 
   let i = 0;
 
   function typechar() {
-    if (i < text.length) {
+    if (i < terminalText.length) {
-      terminalPrompt.innerHTML += text.charAt(i);
+      terminalPrompt.innerHTML += terminalText.charAt(i++);
-      i++;
+      setTimeout(typechar, 1000 / terminalText.length);
-      setTimeout(typechar, 1000 / text.length);
     } else {
-      setTimeout(() => {
+      renderPosts(topic);
-        window.location.href = url;
-      }, 500);
     }
   }
 
@@ -22,6 +41,5 @@ function typechars(e, url = "wip.html") {
 }
 
 window.addEventListener("beforeunload", () => {
-  const terminalPrompt = document.querySelector(".prompt");
+  document.querySelector(".prompt").innerHTML = "barrett@ruth:~$ ";
-  terminalPrompt.innerHTML = "barrett@ruth:~$ ";
 });