From 66df115031c4d75c438b50f75e532bb745ae7dde Mon Sep 17 00:00:00 2001
From: Hamza <hnasheralneam@gmail.com>
Date: Mon, 22 Jul 2024 10:57:30 -0400
Subject: [PATCH 1/2] Working on username search

---
 app.js                                      | 33 ++++++++++-
 public/pages/user-profile.ejs               |  6 --
 public/partials/navbar.ejs                  | 16 +++---
 public/scripts-src/github/getId.ts          | 20 +++----
 public/scripts-src/github/usernameSearch.ts |  2 +-
 public/scripts-src/userSearch.ts            | 62 +++++++++++++++++++++
 public/scripts/github/usernameSearch.js     |  2 +-
 public/scripts/userSearch.js                | 55 ++++++++++++++++++
 public/styles/tailwind.css                  | 10 ++++
 9 files changed, 178 insertions(+), 28 deletions(-)
 create mode 100644 public/scripts-src/userSearch.ts
 create mode 100644 public/scripts/userSearch.js

diff --git a/app.js b/app.js
index 392eeda..9036573 100644
--- a/app.js
+++ b/app.js
@@ -14,12 +14,12 @@ mongoose.connect(
 
 const userSchema = new mongoose.Schema({
    githubId: String,
-   profile: Object /*
+   profile: Object, /*
    {
       description: something // will check if exists, if not use github
    }
    */
-
+   handle: String
 });
 
 const User = mongoose.model("User", userSchema);
@@ -120,7 +120,13 @@ async function githubOAuthLogin(req, res) {
 }
 
 function createGithubOAuthUser(githubId, req, res) {
-   const user = new User({ githubId: githubId });
+   const user = new User({
+      githubId: githubId,
+      handle: req.session.user.login,
+      profile: {
+         description: req.session.user.bio
+      }
+   });
    user.save().then((result) => {
       res.render("pages/welcome", { userData: req.session.user });
    });
@@ -176,7 +182,28 @@ app.post("/edit/description", (req, res) => {
       });
 });
 
+// Search
+app.get("/search/user/:username", (req, res) => {
+   const username = req.params.username;
+   const results = 15;
+   User.find({ handle: { $regex: "^" + username } })
+      .then((users) => {// should only send name and descr
+         res.json({ users: users.slice(0, results) });
+      })
+      .catch((err) => {
+         console.log(err);
+      });
+});
+
 // Connect app
 app.listen(PORT, () => {
    console.log("Server is running on port " + PORT);
 });
+
+
+// add new filed to existing schema members - remember to add to schema as well!
+//    User.updateMany(
+//       { handle: { $exists: false } },
+//       { $set: { handle: "hnasheralneam" } },
+//       { multi: true }
+//    ).then((oth) => { console.log(oth); }).catch((err) => { console.error("err-", err); });
\ No newline at end of file
diff --git a/public/pages/user-profile.ejs b/public/pages/user-profile.ejs
index b717afd..2b669ed 100644
--- a/public/pages/user-profile.ejs
+++ b/public/pages/user-profile.ejs
@@ -16,12 +16,6 @@
    <div class="mb-20">
       <!-- top bar -->
       <div class="flex my-2">
-         <a href="/">
-            <div
-               class="inline-flex justify-center transition-all p-2 mr-2 shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md dark:text-white">
-               <span class="material-symbols-rounded text-public">home</span>
-            </div>
-         </a>
          <!-- User search (will be replaced when accounts are added) -->
          <div
             class="flex w-full justify-center items-center shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
diff --git a/public/partials/navbar.ejs b/public/partials/navbar.ejs
index bf434d8..526d455 100644
--- a/public/partials/navbar.ejs
+++ b/public/partials/navbar.ejs
@@ -13,16 +13,17 @@
 
 
 
-<div class="grid fixed top-0 left-0 right-0 p-2 backdrop-blur-lg bg-zinc-100/85 dark:bg-zinc-800/75" style="grid-template-columns: auto auto auto;">
+<div class="grid fixed top-0 left-0 right-0 p-2 backdrop-blur-lg bg-zinc-100/85 dark:bg-zinc-800/75" style="grid-template-columns: auto auto;">
    <a href="/">
       <h2 class="inline-block font-bold text-xl dark:text-white transition-all p-2 mx-2 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md hover:cursor-pointer"
          style="font-family: 'Inter Tight';" title="home">FetchCV</h2>
    </a>
-   <div class="inline-flex w-full justify-center items-center shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
-      <input class="w-full px-6 py-2 text-base bg-transparent" type="text" id="username"
-         placeholder="Enter a GitHub username">
-      <span tabindex="0" class="material-symbols-rounded text-public mr-2" onclick="newUsername()">person_search</span>
-   </div>
+   <!-- <div class="inline-flex w-full justify-center items-center shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
+      <input class="w-full px-6 py-2 text-base bg-transparent" type="text" id="user-name"
+         placeholder="Enter a username">
+      <span tabindex="0" class="material-symbols-rounded text-public mr-2" onclick="getUpdatedSearchResults(this.parent.firstChild.value)">person_search</span>
+      <div class="search-results"></div>
+   </div> -->
    <a href="/profile">
       <div class="float-right inline-flex justify-center p-2 my-0.5 mx-2 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md">
          <span class="material-symbols-rounded text-public mr-2" title="my profile">account_circle</span>
@@ -31,4 +32,5 @@
    </a>
 </div>
 
-<script src="scripts/github/usernameSearch.js"></script>
\ No newline at end of file
+<!-- <script src="scripts/github/usernameSearch.js"></script> -->
+<!-- <script src="scripts/userSearch.js"></script> -->
\ No newline at end of file
diff --git a/public/scripts-src/github/getId.ts b/public/scripts-src/github/getId.ts
index 123398d..52ab578 100644
--- a/public/scripts-src/github/getId.ts
+++ b/public/scripts-src/github/getId.ts
@@ -1,11 +1,11 @@
 async function getId() {
-    try {
-       const response = await fetch(`https://api.github.com/users/${username}`, header);
-       if (response.ok) {
-          return (await response.json()).id;
-       }
-    }
-    catch (error) {
-       console.error("Failed to fetch github id. Error - ", error);
-    }
- }
\ No newline at end of file
+   try {
+      const response = await fetch(`https://api.github.com/users/${username}`, header);
+      if (response.ok) {
+         return (await response.json()).id;
+      }
+   }
+   catch (error) {
+      console.error("Failed to fetch github id. Error - ", error);
+   }
+}
\ No newline at end of file
diff --git a/public/scripts-src/github/usernameSearch.ts b/public/scripts-src/github/usernameSearch.ts
index d046098..9d2394a 100644
--- a/public/scripts-src/github/usernameSearch.ts
+++ b/public/scripts-src/github/usernameSearch.ts
@@ -16,7 +16,7 @@ function newUsername() {
 
 const usernameInput = document.getElementById("username");
 if (usernameInput) {
-   usernameInput.addEventListener("keydown", function (event) {
+   usernameInput.addEventListener("keydown", (event) => {
       if (event.key == "Enter") {
          newUsername();
       }
diff --git a/public/scripts-src/userSearch.ts b/public/scripts-src/userSearch.ts
new file mode 100644
index 0000000..fec63ee
--- /dev/null
+++ b/public/scripts-src/userSearch.ts
@@ -0,0 +1,62 @@
+// @ts-nocheck
+
+//===============================================
+// Username search
+//===============================================
+
+let usernameElement = document.getElementById("user-name") as HTMLInputElement;
+
+const usernameInput = document.getElementById("user-name");
+if (usernameInput) {
+   usernameInput.addEventListener("keyup", (event) => {
+      if (usernameElement.value.length > 0) {
+         getUpdatedSearchResults(usernameElement.value);
+      }
+      else {
+         showUpdatedSearchResults([]);
+      }
+   });
+}
+
+async function getUpdatedSearchResults(search) {
+   try {
+      const response = await fetch(`/search/user/${search.replace("/", "slash")}`);
+      if (response.ok) {
+         let data = await response.json();
+         showUpdatedSearchResults(data.users);
+      }
+   }
+   catch (error) {
+      console.error("Error fetching users - ", error); // should show to user
+   }
+}
+
+let searchResultsElement = document.querySelector(".search-results");
+
+function showUpdatedSearchResults(users) {
+   searchResultsElement.innerHTML = "";
+   for (let i = 0; i < users.length; i++) {
+      let user = users[i];
+      console.log(user);
+      let userElement = document.createElement("div");
+      createSearchResultElement(userElement, user.handle, user.profile.description);
+      searchResultsElement.append(userElement);
+   }
+   // Should only show if github username does exist
+   if (usernameElement.value.length > 0) {
+      let userElement = document.createElement("div");
+      createSearchResultElement(userElement, "github/" + usernameElement.value, "No results? Try with their GitHub username");
+      searchResultsElement.append(userElement);
+   }
+}
+
+function createSearchResultElement(element, name, description) {
+   element.innerHTML = `
+      <div class="bg-red-500">
+         <a href="/user/${name}">
+            <p>${name}</p>
+            <p>${description}</p>
+         </a>
+      </div>
+   `;
+}
\ No newline at end of file
diff --git a/public/scripts/github/usernameSearch.js b/public/scripts/github/usernameSearch.js
index fd249a3..88b0a00 100644
--- a/public/scripts/github/usernameSearch.js
+++ b/public/scripts/github/usernameSearch.js
@@ -13,7 +13,7 @@ function newUsername() {
 }
 const usernameInput = document.getElementById("username");
 if (usernameInput) {
-    usernameInput.addEventListener("keydown", function (event) {
+    usernameInput.addEventListener("keydown", (event) => {
         if (event.key == "Enter") {
             newUsername();
         }
diff --git a/public/scripts/userSearch.js b/public/scripts/userSearch.js
new file mode 100644
index 0000000..4e53533
--- /dev/null
+++ b/public/scripts/userSearch.js
@@ -0,0 +1,55 @@
+// @ts-nocheck
+//===============================================
+// Username search
+//===============================================
+let usernameElement = document.getElementById("user-name");
+const usernameInput = document.getElementById("user-name");
+if (usernameInput) {
+    usernameInput.addEventListener("keyup", (event) => {
+        if (usernameElement.value.length > 0) {
+            getUpdatedSearchResults(usernameElement.value);
+        }
+        else {
+            showUpdatedSearchResults([]);
+        }
+    });
+}
+async function getUpdatedSearchResults(search) {
+    try {
+        const response = await fetch(`/search/user/${search.replace("/", "slash")}`);
+        if (response.ok) {
+            let data = await response.json();
+            showUpdatedSearchResults(data.users);
+        }
+    }
+    catch (error) {
+        console.error("Error fetching users - ", error); // should show to user
+    }
+}
+let searchResultsElement = document.querySelector(".search-results");
+function showUpdatedSearchResults(users) {
+    searchResultsElement.innerHTML = "";
+    for (let i = 0; i < users.length; i++) {
+        let user = users[i];
+        console.log(user);
+        let userElement = document.createElement("div");
+        createSearchResultElement(userElement, user.handle, user.profile.description);
+        searchResultsElement.append(userElement);
+    }
+    // Should only show if github username does exist
+    if (usernameElement.value.length > 0) {
+        let userElement = document.createElement("div");
+        createSearchResultElement(userElement, "github/" + usernameElement.value, "No results? Try with their GitHub username");
+        searchResultsElement.append(userElement);
+    }
+}
+function createSearchResultElement(element, name, description) {
+    element.innerHTML = `
+      <div class="bg-red-500">
+         <a href="/user/${name}">
+            <p>${name}</p>
+            <p>${description}</p>
+         </a>
+      </div>
+   `;
+}
diff --git a/public/styles/tailwind.css b/public/styles/tailwind.css
index a71cd29..63f4a18 100644
--- a/public/styles/tailwind.css
+++ b/public/styles/tailwind.css
@@ -907,6 +907,16 @@ video {
   background-color: rgb(244 244 245 / 0.85);
 }
 
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-none {
   background-image: none;
 }

From 6d0a981bfdf9b5bbe4eba83746db5d9d111b996a Mon Sep 17 00:00:00 2001
From: Hamza <hnasheralneam@gmail.com>
Date: Mon, 22 Jul 2024 11:41:09 -0400
Subject: [PATCH 2/2] User search in global nav

---
 app.js                                      |   4 -
 public/home.ejs                             |   9 +-
 public/pages/gh-username-search.ejs         |  29 ---
 public/pages/github-profile.ejs             |  16 --
 public/pages/user-profile.ejs               |  15 --
 public/partials/navbar.ejs                  |  11 +-
 public/scripts-src/github/usernameSearch.ts |  24 ---
 public/scripts-src/userProfile.ts           |  27 ---
 public/scripts-src/userSearch.ts            |  26 ++-
 public/scripts/github/usernameSearch.js     |  21 --
 public/scripts/userProfile.js               |  22 ---
 public/scripts/userSearch.js                |  22 ++-
 public/styles/tailwind.css                  | 205 ++++----------------
 tailwind.config.js                          |   2 +-
 14 files changed, 87 insertions(+), 346 deletions(-)
 delete mode 100644 public/pages/gh-username-search.ejs
 delete mode 100644 public/scripts-src/github/usernameSearch.ts
 delete mode 100644 public/scripts-src/userProfile.ts
 delete mode 100644 public/scripts/github/usernameSearch.js
 delete mode 100644 public/scripts/userProfile.js

diff --git a/app.js b/app.js
index 9036573..153bbc7 100644
--- a/app.js
+++ b/app.js
@@ -47,10 +47,6 @@ app.get("/", (req, res) => {
    res.render("home");
 });
 
-app.get("/gh-username-search", (req, res) => {
-   res.render("pages/gh-username-search");
-});
-
 app.get("/profile", (req, res) => {
    if (!req.session.user) {
       return res.render("pages/login", { client_id: process.env.GITHUB_CLIENT_ID });
diff --git a/public/home.ejs b/public/home.ejs
index 76c7303..32dd0fb 100644
--- a/public/home.ejs
+++ b/public/home.ejs
@@ -34,20 +34,13 @@
                   FetchCV, you can show off all your projects and
                   achievements in one place!
                </p>
+               <p>Pro tip: you can search people by GitHub username, even if they don't have an account!</p>
             </div>
          </div>
          <br />
          <!-- Get started -->
          <div class="block text-center">
             <h2 class="text-2xl p-4 font-semibold text-zinc-900 dark:text-zinc-200">Get started!</h2>
-            <!-- GitHub username profile -->
-            <a href="/gh-username-search">
-               <div
-                  class="inline-flex justify-center transition-all p-2 mx-1 shadow-lg bg-zinc-200 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md dark:text-white">
-                  <span class="material-symbols-rounded text-public mr-2">search</span>
-                  <p>GitHub username search</p>
-               </div>
-            </a>
             <!-- Profile Link -->
             <a href="/profile">
                <div
diff --git a/public/pages/gh-username-search.ejs b/public/pages/gh-username-search.ejs
deleted file mode 100644
index 3454559..0000000
--- a/public/pages/gh-username-search.ejs
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-   <meta charset="UTF-8">
-   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <link rel="stylesheet" type="text/css" href="styles/tailwind.css">
-   <link rel="icon" type="images/svg" href="images/logo.svg">
-
-   <title>GitHub Username Search | FetchCV</title>
-</head>
-<%- include("../partials/navbar.ejs") %>
-<body class="h-[100vh] px-8 flex justify-center items-center bg-zinc-50 dark:bg-zinc-900 dark:text-white">
-   <div class="mb-20">
-      <!-- top bar -->
-      <div class="flex my-2">
-         <!-- User search -->
-         <div
-            class="flex w-full justify-center items-center shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
-            <input class="px-6 py-2 text-base bg-transparent md:w-[400px] sm:w-[80vw]" type="text" id="username"
-               placeholder="Enter a GitHub username">
-            <span tabindex="0" class="material-symbols-rounded text-public mr-2"
-               onclick="newUsername()">person_search</span>
-         </div>
-      </div>
-   </div>
-</body>
-<script src="scripts/github/usernameSearch.js"></script>
-</html>
diff --git a/public/pages/github-profile.ejs b/public/pages/github-profile.ejs
index 704fb9b..2948a40 100644
--- a/public/pages/github-profile.ejs
+++ b/public/pages/github-profile.ejs
@@ -14,21 +14,10 @@
 <%- include("../partials/navbar.ejs") %>
 <body class="px-8 flex justify-center bg-zinc-50 dark:bg-zinc-900 dark:text-white">
    <div class="mb-20">
-      <!-- top bar -->
-      <div class="flex my-2">
-         <!-- User search -->
-         <div
-            class="flex w-full justify-center items-center shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
-            <input class="px-6 py-2 text-base bg-transparent w-[100%]" type="text" id="username"
-               placeholder="Enter a GitHub username">
-            <span tabindex="0" class="material-symbols-rounded text-public mr-2"
-               onclick="newUsername()">person_search</span>
-         </div>
          <script>
             let usernameJSON = `<%- JSON.stringify(username) %>`;
             let username = JSON.parse(usernameJSON);
          </script>
-      </div>
       <!-- Error box - hidden by default -->
       <div
          class="error-box shadow-2xl py-4 px-8 my-2 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md hidden bg-blue-800 bg-red-800 bg-green-800">
@@ -37,10 +26,6 @@
       </div>
 
 
-      <!-- this should be working -->
-      <div id="root"></div>
-
-
       <!-- Profile Card -->
       <div
          class="shadow-2xl py-4 px-8 my-2 bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md hidden user-info">
@@ -91,7 +76,6 @@
 <script src="/scripts/displayErrors.js"></script>
 <script src="/scripts/github/main.js"></script>
 <script src="/scripts/github/getToken.js"></script>
-<script src="/scripts/userProfile.js"></script>
 <script src="/scripts/github/fetchData.js"></script>
 <script src="/scripts/github/displayData.js"></script>
 </html>
diff --git a/public/pages/user-profile.ejs b/public/pages/user-profile.ejs
index 2b669ed..fb5574a 100644
--- a/public/pages/user-profile.ejs
+++ b/public/pages/user-profile.ejs
@@ -14,21 +14,10 @@
 <%- include("../partials/navbar.ejs") %>
 <body class="px-8 flex justify-center bg-zinc-50 dark:bg-zinc-900 dark:text-white">
    <div class="mb-20">
-      <!-- top bar -->
-      <div class="flex my-2">
-         <!-- User search (will be replaced when accounts are added) -->
-         <div
-            class="flex w-full justify-center items-center shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
-            <input class="px-6 py-2 text-base bg-transparent w-[100%]" type="text" id="username"
-               placeholder="Enter a GitHub username">
-            <span tabindex="0" class="material-symbols-rounded text-public mr-2"
-               onclick="newUsername()">person_search</span>
-         </div>
          <script>
             let usernameJSON = `<%- JSON.stringify(username) %>`;
             let username = JSON.parse(usernameJSON);
          </script>
-      </div>
       <!-- Error box - hidden by default -->
       <div
          class="error-box shadow-2xl py-4 px-8 my-2 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md hidden bg-blue-800 bg-red-800 bg-green-800">
@@ -37,9 +26,6 @@
       </div>
 
 
-      <!-- this should be working -->
-      <div id="root"></div>
-
 
       <!-- Profile Card -->
       <div
@@ -105,7 +91,6 @@
 <script src="/scripts/github/fetchData.js"></script>
 <script src="/scripts/fetchData.js"></script>
 <script src="/scripts/github/displayData.js"></script>
-<script src="/scripts/userProfile.js"></script>
 <script src="/scripts/showEditProfile.js"></script>
 
 </html>
\ No newline at end of file
diff --git a/public/partials/navbar.ejs b/public/partials/navbar.ejs
index 526d455..9ecd77a 100644
--- a/public/partials/navbar.ejs
+++ b/public/partials/navbar.ejs
@@ -13,17 +13,17 @@
 
 
 
-<div class="grid fixed top-0 left-0 right-0 p-2 backdrop-blur-lg bg-zinc-100/85 dark:bg-zinc-800/75" style="grid-template-columns: auto auto;">
+<div class="grid fixed top-0 left-0 right-0 p-2 backdrop-blur-lg bg-zinc-100/85 dark:bg-zinc-800/75" style="grid-template-columns: auto auto auto;">
    <a href="/">
       <h2 class="inline-block font-bold text-xl dark:text-white transition-all p-2 mx-2 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md hover:cursor-pointer"
          style="font-family: 'Inter Tight';" title="home">FetchCV</h2>
    </a>
-   <!-- <div class="inline-flex w-full justify-center items-center shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
+   <div class="relative inline-flex w-full justify-center items-center shadow-lg bg-zinc-100 dark:bg-zinc-800 border-[1px] border-zinc-300 dark:border-zinc-700 border-t-zinc-100 dark:border-t-zinc-600 rounded-md">
       <input class="w-full px-6 py-2 text-base bg-transparent" type="text" id="user-name"
          placeholder="Enter a username">
       <span tabindex="0" class="material-symbols-rounded text-public mr-2" onclick="getUpdatedSearchResults(this.parent.firstChild.value)">person_search</span>
-      <div class="search-results"></div>
-   </div> -->
+      <div class="search-results hidden absolute top-[4rem] left-0 right-0 px-4 py-2 backdrop-blur-lg bg-zinc-100 dark:bg-zinc-800 rounded-lg border-2 border-zinc-200 dark:border-zinc-700" style="box-shadow: 0 .5rem 1rem #22222260;"></div>
+   </div>
    <a href="/profile">
       <div class="float-right inline-flex justify-center p-2 my-0.5 mx-2 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md">
          <span class="material-symbols-rounded text-public mr-2" title="my profile">account_circle</span>
@@ -32,5 +32,4 @@
    </a>
 </div>
 
-<!-- <script src="scripts/github/usernameSearch.js"></script> -->
-<!-- <script src="scripts/userSearch.js"></script> -->
\ No newline at end of file
+<script src="/scripts/userSearch.js"></script>
\ No newline at end of file
diff --git a/public/scripts-src/github/usernameSearch.ts b/public/scripts-src/github/usernameSearch.ts
deleted file mode 100644
index 9d2394a..0000000
--- a/public/scripts-src/github/usernameSearch.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// @ts-nocheck
-
-//===============================================
-// Username search
-//===============================================
-
-function newUsername() {
-   let usernameElement = document.getElementById("username") as HTMLInputElement;
-   if (usernameElement) {
-      // @ts-ignore
-      username = usernameElement.value;
-      // @ts-ignore
-      window.location.href = window.location.origin + "/user/github/" + username;
-   }
-}
-
-const usernameInput = document.getElementById("username");
-if (usernameInput) {
-   usernameInput.addEventListener("keydown", (event) => {
-      if (event.key == "Enter") {
-         newUsername();
-      }
-   });
-}
diff --git a/public/scripts-src/userProfile.ts b/public/scripts-src/userProfile.ts
deleted file mode 100644
index 8b3f630..0000000
--- a/public/scripts-src/userProfile.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// @ts-nocheck
-
-//===============================================
-// Setting username
-//===============================================
-
-function newUsername() {
-   hideError();
-   let usernameElement = document.getElementById("username") as HTMLInputElement;
-   if (usernameElement) {
-      // @ts-ignore
-      username = usernameElement.value;
-      // @ts-ignore
-      window.location.href = window.location.origin + "/user/github/" + username;
-   }
-}
-
-const usernameInput = document.getElementById("username");
-if (usernameInput) {
-   usernameInput.addEventListener("keydown", function (event) {
-      if (event.key == "Enter") {
-         newUsername();
-      }
-   });
-}
-
-
diff --git a/public/scripts-src/userSearch.ts b/public/scripts-src/userSearch.ts
index fec63ee..7abfcb2 100644
--- a/public/scripts-src/userSearch.ts
+++ b/public/scripts-src/userSearch.ts
@@ -10,9 +10,11 @@ const usernameInput = document.getElementById("user-name");
 if (usernameInput) {
    usernameInput.addEventListener("keyup", (event) => {
       if (usernameElement.value.length > 0) {
+         showElement(searchResultsElement);
          getUpdatedSearchResults(usernameElement.value);
       }
       else {
+         hideElement(searchResultsElement);
          showUpdatedSearchResults([]);
       }
    });
@@ -37,9 +39,11 @@ function showUpdatedSearchResults(users) {
    searchResultsElement.innerHTML = "";
    for (let i = 0; i < users.length; i++) {
       let user = users[i];
-      console.log(user);
       let userElement = document.createElement("div");
       createSearchResultElement(userElement, user.handle, user.profile.description);
+      let divider = document.createElement("hr");
+      divider.classList.add("dark:border-zinc-700");
+      userElement.append(divider);
       searchResultsElement.append(userElement);
    }
    // Should only show if github username does exist
@@ -52,11 +56,23 @@ function showUpdatedSearchResults(users) {
 
 function createSearchResultElement(element, name, description) {
    element.innerHTML = `
-      <div class="bg-red-500">
+      <div class="bg-white dark:bg-zinc-900 rounded-lg my-2 px-4 py-2">
          <a href="/user/${name}">
-            <p>${name}</p>
-            <p>${description}</p>
+            <p class="text-lg">${name}</p>
+            <p class="font-light">${description}</p>
          </a>
       </div>
    `;
-}
\ No newline at end of file
+}
+
+function showElement(element) {
+   if (element.classList.contains("hidden")) {
+      element.classList.remove("hidden");
+   }
+}
+
+function hideElement(element) {
+   if (!element.classList.contains("hidden")) {
+      element.classList.add("hidden");
+   }
+}
diff --git a/public/scripts/github/usernameSearch.js b/public/scripts/github/usernameSearch.js
deleted file mode 100644
index 88b0a00..0000000
--- a/public/scripts/github/usernameSearch.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// @ts-nocheck
-//===============================================
-// Username search
-//===============================================
-function newUsername() {
-    let usernameElement = document.getElementById("username");
-    if (usernameElement) {
-        // @ts-ignore
-        username = usernameElement.value;
-        // @ts-ignore
-        window.location.href = window.location.origin + "/user/github/" + username;
-    }
-}
-const usernameInput = document.getElementById("username");
-if (usernameInput) {
-    usernameInput.addEventListener("keydown", (event) => {
-        if (event.key == "Enter") {
-            newUsername();
-        }
-    });
-}
diff --git a/public/scripts/userProfile.js b/public/scripts/userProfile.js
deleted file mode 100644
index 95d2e0c..0000000
--- a/public/scripts/userProfile.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// @ts-nocheck
-//===============================================
-// Setting username
-//===============================================
-function newUsername() {
-    hideError();
-    let usernameElement = document.getElementById("username");
-    if (usernameElement) {
-        // @ts-ignore
-        username = usernameElement.value;
-        // @ts-ignore
-        window.location.href = window.location.origin + "/user/github/" + username;
-    }
-}
-const usernameInput = document.getElementById("username");
-if (usernameInput) {
-    usernameInput.addEventListener("keydown", function (event) {
-        if (event.key == "Enter") {
-            newUsername();
-        }
-    });
-}
diff --git a/public/scripts/userSearch.js b/public/scripts/userSearch.js
index 4e53533..84755f8 100644
--- a/public/scripts/userSearch.js
+++ b/public/scripts/userSearch.js
@@ -7,9 +7,11 @@ const usernameInput = document.getElementById("user-name");
 if (usernameInput) {
     usernameInput.addEventListener("keyup", (event) => {
         if (usernameElement.value.length > 0) {
+            showElement(searchResultsElement);
             getUpdatedSearchResults(usernameElement.value);
         }
         else {
+            hideElement(searchResultsElement);
             showUpdatedSearchResults([]);
         }
     });
@@ -31,9 +33,11 @@ function showUpdatedSearchResults(users) {
     searchResultsElement.innerHTML = "";
     for (let i = 0; i < users.length; i++) {
         let user = users[i];
-        console.log(user);
         let userElement = document.createElement("div");
         createSearchResultElement(userElement, user.handle, user.profile.description);
+        let divider = document.createElement("hr");
+        divider.classList.add("dark:border-zinc-700");
+        userElement.append(divider);
         searchResultsElement.append(userElement);
     }
     // Should only show if github username does exist
@@ -45,11 +49,21 @@ function showUpdatedSearchResults(users) {
 }
 function createSearchResultElement(element, name, description) {
     element.innerHTML = `
-      <div class="bg-red-500">
+      <div class="bg-white dark:bg-zinc-900 rounded-lg my-2 px-4 py-2">
          <a href="/user/${name}">
-            <p>${name}</p>
-            <p>${description}</p>
+            <p class="text-lg">${name}</p>
+            <p class="font-light">${description}</p>
          </a>
       </div>
    `;
 }
+function showElement(element) {
+    if (element.classList.contains("hidden")) {
+        element.classList.remove("hidden");
+    }
+}
+function hideElement(element) {
+    if (!element.classList.contains("hidden")) {
+        element.classList.add("hidden");
+    }
+}
diff --git a/public/styles/tailwind.css b/public/styles/tailwind.css
index 63f4a18..852ba7d 100644
--- a/public/styles/tailwind.css
+++ b/public/styles/tailwind.css
@@ -562,8 +562,8 @@ video {
   position: absolute;
 }
 
-.sticky {
-  position: sticky;
+.relative {
+  position: relative;
 }
 
 .-left-40 {
@@ -574,24 +574,20 @@ video {
   bottom: 0px;
 }
 
-.left-2 {
-  left: 0.5rem;
+.left-0 {
+  left: 0px;
 }
 
-.top-2 {
-  top: 0.5rem;
+.right-0 {
+  right: 0px;
 }
 
 .top-0 {
   top: 0px;
 }
 
-.left-0 {
-  left: 0px;
-}
-
-.right-0 {
-  right: 0px;
+.top-\[4rem\] {
+  top: 4rem;
 }
 
 .-z-10 {
@@ -614,40 +610,31 @@ video {
   margin: 1.5rem;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
 
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 .my-0\.5 {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .mb-20 {
   margin-bottom: 5rem;
 }
@@ -660,14 +647,6 @@ video {
   margin-right: 0.5rem;
 }
 
-.-mt-2 {
-  margin-top: -0.5rem;
-}
-
-.-mt-6 {
-  margin-top: -1.5rem;
-}
-
 .block {
   display: block;
 }
@@ -700,14 +679,6 @@ video {
   height: 100%;
 }
 
-.h-\[200vh\] {
-  height: 200vh;
-}
-
-.w-\[100\%\] {
-  width: 100%;
-}
-
 .w-\[140\%\] {
   width: 140%;
 }
@@ -732,14 +703,6 @@ video {
   max-width: 45vw;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .items-center {
   align-items: center;
 }
@@ -785,6 +748,11 @@ video {
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
+.border-zinc-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(228 228 231 / var(--tw-border-opacity));
+}
+
 .border-zinc-300 {
   --tw-border-opacity: 1;
   border-color: rgb(212 212 216 / var(--tw-border-opacity));
@@ -854,6 +822,10 @@ video {
   background-color: rgb(244 244 245 / var(--tw-bg-opacity));
 }
 
+.bg-zinc-100\/85 {
+  background-color: rgb(244 244 245 / 0.85);
+}
+
 .bg-zinc-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(228 228 231 / var(--tw-bg-opacity));
@@ -874,49 +846,6 @@ video {
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
 
-.bg-zinc-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(113 113 122 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-200\/50 {
-  background-color: rgb(228 228 231 / 0.5);
-}
-
-.bg-zinc-100\/50 {
-  background-color: rgb(244 244 245 / 0.5);
-}
-
-.bg-zinc-100\/25 {
-  background-color: rgb(244 244 245 / 0.25);
-}
-
-.bg-zinc-100\/75 {
-  background-color: rgb(244 244 245 / 0.75);
-}
-
-.bg-zinc-100\/100 {
-  background-color: rgb(244 244 245 / 1);
-}
-
-.bg-zinc-100\/95 {
-  background-color: rgb(244 244 245 / 0.95);
-}
-
-.bg-zinc-100\/85 {
-  background-color: rgb(244 244 245 / 0.85);
-}
-
-.bg-red-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
-}
-
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
 .bg-none {
   background-image: none;
 }
@@ -987,10 +916,6 @@ video {
   vertical-align: top;
 }
 
-.align-middle {
-  vertical-align: middle;
-}
-
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -1046,14 +971,6 @@ video {
   font-weight: 600;
 }
 
-.leading-3 {
-  line-height: .75rem;
-}
-
-.leading-none {
-  line-height: 1;
-}
-
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1120,30 +1037,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.backdrop-blur {
-  --tw-backdrop-blur: blur(8px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
 .backdrop-blur-lg {
   --tw-backdrop-blur: blur(16px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
-.backdrop-blur-xl {
-  --tw-backdrop-blur: blur(24px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-blur-2xl {
-  --tw-backdrop-blur: blur(40px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1159,11 +1058,6 @@ video {
   background-color: rgb(228 228 231 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-zinc-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(212 212 216 / var(--tw-bg-opacity));
-}
-
 .focus\:border-b-2:focus {
   border-bottom-width: 2px;
 }
@@ -1174,22 +1068,12 @@ video {
 }
 
 @media (min-width: 640px) {
-  .sm\:w-\[80vw\] {
-    width: 80vw;
-  }
-
   .sm\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
   }
 }
 
-@media (min-width: 768px) {
-  .md\:w-\[400px\] {
-    width: 400px;
-  }
-}
-
 @media (min-width: 1024px) {
   .lg\:px-\[20vw\] {
     padding-left: 20vw;
@@ -1203,11 +1087,21 @@ video {
     border-color: rgb(63 63 70 / var(--tw-border-opacity));
   }
 
+  .dark\:border-gray-700 {
+    --tw-border-opacity: 1;
+    border-color: rgb(55 65 81 / var(--tw-border-opacity));
+  }
+
   .dark\:border-t-zinc-600 {
     --tw-border-opacity: 1;
     border-top-color: rgb(82 82 91 / var(--tw-border-opacity));
   }
 
+  .dark\:bg-black {
+    --tw-bg-opacity: 1;
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-zinc-600 {
     --tw-bg-opacity: 1;
     background-color: rgb(82 82 91 / var(--tw-bg-opacity));
@@ -1223,27 +1117,15 @@ video {
     background-color: rgb(39 39 42 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-zinc-800\/75 {
+    background-color: rgb(39 39 42 / 0.75);
+  }
+
   .dark\:bg-zinc-900 {
     --tw-bg-opacity: 1;
     background-color: rgb(24 24 27 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-zinc-900\/50 {
-    background-color: rgb(24 24 27 / 0.5);
-  }
-
-  .dark\:bg-zinc-900\/75 {
-    background-color: rgb(24 24 27 / 0.75);
-  }
-
-  .dark\:bg-zinc-900\/85 {
-    background-color: rgb(24 24 27 / 0.85);
-  }
-
-  .dark\:bg-zinc-800\/75 {
-    background-color: rgb(39 39 42 / 0.75);
-  }
-
   .dark\:text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1268,9 +1150,4 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(63 63 70 / var(--tw-bg-opacity));
   }
-
-  .dark\:hover\:bg-zinc-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(39 39 42 / var(--tw-bg-opacity));
-  }
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 6c962fc..591372e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import("tailwindcss").Config} */
 module.exports = {
-   content: ["./public/**/*.{html,ejs,js}"],
+   content: ["./public/**/*.{html,ejs,js,ts}"],
    theme: {
       extend: {
          colors: {