From 7858d75f284c8035e2123535e8b7cbc547036266 Mon Sep 17 00:00:00 2001
From: rooyca <rooyca@gmail.com>
Date: Thu, 6 Jun 2024 03:17:40 -0500
Subject: [PATCH] update(feat): profile page with md

---
 README.md                  |   4 +
 app/data/rooyca.md         |  30 ++++
 app/main.py                |   2 +-
 app/parse.py               |  47 ++++++
 app/routes.py              |  31 +++-
 app/static/css/main.css    | 304 +++++++++++++++++++++++++++++++++----
 app/templates/v2_user.html | 188 +++++++++++++++++++++++
 data/data.json             |   0
 tests/test_main.py         |   2 +-
 9 files changed, 574 insertions(+), 34 deletions(-)
 create mode 100644 app/data/rooyca.md
 create mode 100644 app/parse.py
 create mode 100644 app/templates/v2_user.html
 delete mode 100644 data/data.json

diff --git a/README.md b/README.md
index 917c956..7499fc6 100644
--- a/README.md
+++ b/README.md
@@ -74,6 +74,10 @@ fly deploy
 - [GitHub API](https://docs.github.com/en/rest)
 - [Font Awesome](https://fontawesome.com/)
 
+## 📝 TODO
+
+- [ ] Add nix support
+
 ## 📄 License
 
 [MIT](LICENSE)
\ No newline at end of file
diff --git a/app/data/rooyca.md b/app/data/rooyca.md
new file mode 100644
index 0000000..8013157
--- /dev/null
+++ b/app/data/rooyca.md
@@ -0,0 +1,30 @@
+<!-- Last updated: 2024-06-06 -->
+
+<!-- Profile Picture -->
+- profile-picture: https://avatars.githubusercontent.com/u/42101257?v=4
+
+<!-- Name -->
+# rooyca
+
+<!-- Short Bio -->
+| Pronouns: he/him
+| Occupation: Studend
+| Location: Colombia
+
+--- Bio ---
+<!-- MAX 300 characters -->
+
+Crazy? I Was Crazy Once. They Locked Me In A Room. A Rubber Room. A Rubber Room With Rats. And Rats Make Me Crazy.
+
+--- Profile Items ---
+<!-- Available profile items: Twitter, Facebook, Instagram, Unsplash, Dribbble, YouTube, Dev.to, Linkedin, Github, Buy Me a Coffee -->
+
+- [Twitter](https://twitter.com/rooycaa)
+- [Dev.to](https://dev.to/rooyca)
+- [Linkedin](https://linkedin.com/rooyca)
+- [Github](https://github.com/rooyca)
+- [Buy Me a Coffee](https://buymeacoffee.com/rooyca)
+
+
+<!-- Don't change anything after this line -->
+--- END ---
\ No newline at end of file
diff --git a/app/main.py b/app/main.py
index a92db2a..8e95f6e 100644
--- a/app/main.py
+++ b/app/main.py
@@ -64,4 +64,4 @@ async def add_process_time_header(request: Request, call_next):
 if __name__ == "__main__":
     import uvicorn
 
-    uvicorn.run(app, host="127.0.0.1", port=8000)
+    uvicorn.run(app, host="0.0.0.0", port=8000)
diff --git a/app/parse.py b/app/parse.py
new file mode 100644
index 0000000..63d4e21
--- /dev/null
+++ b/app/parse.py
@@ -0,0 +1,47 @@
+
+def parse_markdown(data: str):
+    """
+    Parse markdown data and return a dictionary
+    """
+    data = data.split("\n")
+    user_data_final = {}
+    for line in data:
+        if line.startswith("<!--"):
+            continue
+        if line.startswith("#"):
+            key = line.replace("#", "").strip().lower()
+            user_data_final["username"] = key
+        if line.startswith("- profile-picture:"):
+            user_data_final["profile_picture"] = line.replace("- profile-picture:", "").strip()
+        if line.startswith("|"):
+            key, value = line.replace("|", "").split(":")
+            user_data_final[key.strip()] = value.strip()
+        if line == "--- Bio ---":
+            user_data_final["bio"] = ""
+            for line in data[data.index("--- Bio ---") + 1:]:
+                if line.startswith("<!--"):
+                    continue
+                if line.startswith("--- "):
+                    break
+                user_data_final["bio"] += line
+                # check if bio is larger than 300 characters
+                if len(user_data_final["bio"]) > 300:
+                    user_data_final["bio"] = user_data_final["bio"][:300] + "..."
+                    break
+        if line == "--- Profile Items ---":
+            user_data_final["profile_items"] = []
+            for line in data[data.index("--- Profile Items ---") + 1:]:
+                if line.startswith("--- "):
+                    break
+                if line == "":
+                    continue
+                if line.startswith("<!--"):
+                    continue
+                line_parsed = line.split("](")
+                desc = line_parsed[0].replace("- [", "").replace("* [", "").strip()
+                url = line_parsed[1].replace(")", "").strip()
+                user_data_final["profile_items"].append({"desc": desc, "url": url})
+        if line == data[-1]:
+            break
+
+    return user_data_final
\ No newline at end of file
diff --git a/app/routes.py b/app/routes.py
index 11cdc0c..53ce2b6 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -2,9 +2,10 @@
 from fastapi.responses import RedirectResponse
 from fastapi.templating import Jinja2Templates
 
-import requests, json
+import requests, json, os
 
 from app.config import Settings
+from app.parse import parse_markdown
 
 settings = Settings()
 templates = Jinja2Templates(directory=settings.TEMPLATE_DIR)
@@ -21,6 +22,34 @@ def index(request: Request):
 
     return templates.TemplateResponse("main.html", {"request": request, "page_title": "GHTree | Search"})
 
+@router.get("/v2/{username}")
+def get_user_markdown(request: Request, username: str):
+    # check if a file with username exists in data folder
+    try:
+        print(username)
+        with open(f"app/data/{username}.md", "r") as f:
+            data = f.read()
+    except FileNotFoundError:
+        return templates.TemplateResponse("404.html", {
+            "request": request,
+            "page_title": "GHTree | Not Found",
+            "status_code": 404,
+            "text": "NOPE",
+            })
+    parsed_data = parse_markdown(data)
+
+    return templates.TemplateResponse("v2_user.html", {
+        "request": request,
+        "profile_picture": parsed_data.get("profile_picture"),
+        "username": parsed_data.get("username"),
+        "pronouns": parsed_data.get("Pronouns"),
+        "occupation": parsed_data.get("Occupation"),
+        "location": parsed_data.get("Location"),
+        "bio": parsed_data.get("bio"),
+        "profile_items": parsed_data.get("profile_items"),
+        "page_title": f"GHTree | {parsed_data.get('username')}",
+        })
+
 @router.get("/{username}")
 def index(request: Request, username: str):
     url = f"https://api.github.com/users/{username}"
diff --git a/app/static/css/main.css b/app/static/css/main.css
index 7ebda41..2be3cf8 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -121,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -131,8 +137,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -201,6 +211,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -224,9 +236,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -482,6 +494,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -532,6 +548,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 .fixed {
@@ -550,10 +570,18 @@ video {
   left: 50%;
 }
 
+.right-0 {
+  right: 0px;
+}
+
 .right-1 {
   right: 0.25rem;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .top-1 {
   top: 0.25rem;
 }
@@ -563,11 +591,29 @@ video {
   margin-right: 0.5rem;
 }
 
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
+.my-32 {
+  margin-top: 8rem;
+  margin-bottom: 8rem;
+}
+
+.-mt-16 {
+  margin-top: -4rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -580,10 +626,6 @@ video {
   display: flex;
 }
 
-.grid {
-  display: grid;
-}
-
 .hidden {
   display: none;
 }
@@ -592,18 +634,46 @@ video {
   height: 2.5rem;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
 .h-28 {
   height: 7rem;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
 .h-8 {
   height: 2rem;
 }
 
+.h-auto {
+  height: auto;
+}
+
 .h-full {
   height: 100%;
 }
 
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-48 {
+  width: 12rem;
+}
+
 .w-60 {
   width: 15rem;
 }
@@ -621,6 +691,10 @@ video {
   width: 100%;
 }
 
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -638,6 +712,10 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-end {
   align-items: flex-end;
 }
@@ -688,6 +766,14 @@ video {
   border-radius: 9999px;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-none {
+  border-radius: 0px;
+}
+
 .border {
   border-width: 1px;
 }
@@ -709,6 +795,11 @@ video {
   border-color: rgb(17 24 39 / var(--tw-border-opacity));
 }
 
+.border-green-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+}
+
 .border-b-slate-900 {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(15 23 42 / var(--tw-border-opacity));
@@ -729,6 +820,11 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
 .bg-slate-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
@@ -744,6 +840,11 @@ video {
   background-color: rgb(51 65 85 / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .bg-zinc-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(161 161 170 / var(--tw-bg-opacity));
@@ -753,10 +854,18 @@ video {
   background-size: cover;
 }
 
+.bg-center {
+  background-position: center;
+}
+
 .bg-no-repeat {
   background-repeat: no-repeat;
 }
 
+.fill-current {
+  fill: currentColor;
+}
+
 .fill-slate-700 {
   fill: #334155;
 }
@@ -765,6 +874,10 @@ video {
   stroke: #f8fafc;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -794,6 +907,10 @@ video {
   padding-bottom: 0.75rem;
 }
 
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -806,6 +923,10 @@ video {
   padding-right: 2.5rem;
 }
 
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .pt-10 {
   padding-top: 2.5rem;
 }
@@ -814,6 +935,18 @@ video {
   padding-top: 0.5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -832,11 +965,26 @@ video {
   line-height: 1;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -858,6 +1006,16 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
@@ -868,6 +1026,11 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
 .text-purple-500 {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity));
@@ -888,30 +1051,24 @@ video {
   color: rgb(212 212 216 / var(--tw-text-opacity));
 }
 
-.outline {
-  outline-style: solid;
+.opacity-25 {
+  opacity: 0.25;
 }
 
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+.opacity-75 {
+  opacity: 0.75;
 }
 
-.grayscale {
-  --tw-grayscale: grayscale(100%);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .transition-all {
@@ -948,6 +1105,11 @@ video {
   stroke: #06b6d4;
 }
 
+.hover\:text-green-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
 .hover\:text-slate-300:hover {
   --tw-text-opacity: 1;
   color: rgb(203 213 225 / var(--tw-text-opacity));
@@ -968,8 +1130,88 @@ video {
   color: rgb(203 213 225 / var(--tw-text-opacity));
 }
 
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+@media (min-width: 768px) {
+  .md\:p-12 {
+    padding: 3rem;
+  }
+}
+
 @media (min-width: 1024px) {
+  .lg\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
+  .lg\:my-0 {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:h-screen {
+    height: 100vh;
+  }
+
+  .lg\:w-2\/5 {
+    width: 40%;
+  }
+
+  .lg\:w-3\/5 {
+    width: 60%;
+  }
+
   .lg\:w-80 {
     width: 20rem;
   }
+
+  .lg\:w-full {
+    width: 100%;
+  }
+
+  .lg\:justify-start {
+    justify-content: flex-start;
+  }
+
+  .lg\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .lg\:rounded-l-lg {
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .lg\:rounded-r-none {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
+  .lg\:pb-0 {
+    padding-bottom: 0px;
+  }
+
+  .lg\:pt-0 {
+    padding-top: 0px;
+  }
+
+  .lg\:text-left {
+    text-align: left;
+  }
+
+  .lg\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }
\ No newline at end of file
diff --git a/app/templates/v2_user.html b/app/templates/v2_user.html
new file mode 100644
index 0000000..08206b0
--- /dev/null
+++ b/app/templates/v2_user.html
@@ -0,0 +1,188 @@
+{% extends "/shared/_base.html" %}
+
+{% block content %}
+
+<body class="font-sans antialiased text-gray-100 leading-normal tracking-wider bg-cover">
+    <div class="max-w-4xl flex items-center h-auto lg:h-screen flex-wrap mx-auto my-32 lg:my-0">
+
+        <!--Main Col-->
+        <div id="profile"
+            class="w-full lg:w-3/5 rounded-lg lg:rounded-l-lg lg:rounded-r-none shadow-2xl bg-gray-900 opacity-75 mx-6 lg:mx-0">
+
+
+            <div class="p-4 md:p-12 text-center lg:text-left">
+                <!-- Image for mobile view-->
+                <div class="block lg:hidden rounded-full shadow-xl mx-auto -mt-16 h-48 w-48 bg-cover bg-center"
+                    style="background-image: url('{{ profile_picture }}')"></div>
+
+                <p class="text-3xl font-bold pt-8 lg:pt-0">{{ username }} <span class="text-gray-500 text-sm">{{ pronouns }}</span></p>
+                <div class="mx-auto lg:mx-0 w-4/5 pt-3 border-b-2 border-green-500 opacity-25"></div>
+                <p class="pt-4 text-base font-bold flex items-center justify-center lg:justify-start">
+                    <svg class="h-4 fill-current text-green-700 pr-4" xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20">
+                        <path
+                            d="M9 12H1v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-8v2H9v-2zm0-1H0V5c0-1.1.9-2 2-2h4V2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1h4a2 2 0 0 1 2 2v6h-9V9H9v2zm3-8V2H8v1h4z" />
+                    </svg> {{ occupation }}
+                </p>
+                <p class="pt-2 text-gray-600 text-xs lg:text-sm flex items-center justify-center lg:justify-start">
+                    <svg class="h-4 fill-current text-green-700 pr-4" xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20">
+                        <path
+                            d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm7.75-8a8.01 8.01 0 0 0 0-4h-3.82a28.81 28.81 0 0 1 0 4h3.82zm-.82 2h-3.22a14.44 14.44 0 0 1-.95 3.51A8.03 8.03 0 0 0 16.93 14zm-8.85-2h3.84a24.61 24.61 0 0 0 0-4H8.08a24.61 24.61 0 0 0 0 4zm.25 2c.41 2.4 1.13 4 1.67 4s1.26-1.6 1.67-4H8.33zm-6.08-2h3.82a28.81 28.81 0 0 1 0-4H2.25a8.01 8.01 0 0 0 0 4zm.82 2a8.03 8.03 0 0 0 4.17 3.51c-.42-.96-.74-2.16-.95-3.51H3.07zm13.86-8a8.03 8.03 0 0 0-4.17-3.51c.42.96.74 2.16.95 3.51h3.22zm-8.6 0h3.34c-.41-2.4-1.13-4-1.67-4S8.74 3.6 8.33 6zM3.07 6h3.22c.2-1.35.53-2.55.95-3.51A8.03 8.03 0 0 0 3.07 6z" />
+                    </svg> {{ location }}
+                </p>
+                <p class="pt-3 text-sm">{{ bio }}</p>           
+
+                <div class="mt-6 pb-16 lg:pb-0 w-4/5 lg:w-full mx-auto flex flex-wrap items-center">
+                	{% for item in profile_items %}
+                	{% if item.desc == "Facebook" %}
+                    <a class="link px-3" href="{{ item.url }}" target="_blank" data-tippy-content="{{ item.url }}">
+                        <svg class="h-6 fill-current text-gray-600 hover:text-green-700" role="img" viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <title>Facebook</title>
+                            <path
+                                d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0" />
+                        </svg>
+                    </a>
+                    {% elif item.desc == "Twitter" %}
+                    <a class="link px-3" href="{{ item.url }}" target="_blank" data-tippy-content="{{ item.url }}">
+                        <svg class="h-6 fill-current text-gray-600 hover:text-green-700" role="img" viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <title>Twitter</title>
+                            <path
+                                d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" />
+                        </svg>
+                    </a>
+                    {% elif item.desc == "Github" %}
+                    <a class="link px-3" href="{{ item.url }}" target="_blank" data-tippy-content="{{ item.url }}">
+                        <svg class="h-6 fill-current text-gray-600 hover:text-green-700" role="img" viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <title>Github</title>
+                            <path
+                                d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                        </svg>
+                    </a>
+                    {% elif item.desc == "Unsplash" %}
+                    <a class="link px-3" href="{{ item.url }}" target="_blank" data-tippy-content="{{ item.url }}">
+                        <svg class="h-6 fill-current text-gray-600 hover:text-green-700" role="img" viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <title>Unsplash</title>
+                            <path d="M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z" />
+                        </svg>
+                    </a>
+                    {% elif item.desc == "Dribbble" %}
+                    <a class="link px-3" href="{{ item.url }}" target="_blank" data-tippy-content="@dribble_handle">
+                        <svg class="h-6 fill-current text-gray-600 hover:text-green-700" role="img" viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <title>Dribbble</title>
+                            <path
+                                d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z" />
+                        </svg>
+                    </a>
+                    {% elif item.desc == "Instagram" %}
+                    <a class="link px-3" href="{{ item.url }}" target="_blank" data-tippy-content="{{ item.url }}">
+                        <svg class="h-6 fill-current text-gray-600 hover:text-green-700" role="img" viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <title>Instagram</title>
+                            <path
+                                d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
+                        </svg>
+                    </a>
+                    {% elif item.desc == "YouTube" %}
+                    <a class="link px-3" href="{{ item.url }}" target="_blank" data-tippy-content="{{ item.url }}">
+                        <svg class="h-6 fill-current text-gray-600 hover:text-green-700" role="img"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                            <title>YouTube</title>
+                            <path
+                                d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z" />
+                        </svg>
+                    </a>
+                    {% elif item.desc == "Buy Me a Coffee" %}
+                    <a class="link px-3" href="{{ item.url }}" target="_blank" data-tippy-content="{{ item.url }}">
+                    	<svg class="h-6 fill-current text-gray-600 hover:text-green-700" role="img"
+                    		xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+                    	<title>Buy Me a Coffee</title>
+                    	<path 
+                    		d="M96 64c0-17.7 14.3-32 32-32H448h64c70.7 0 128 57.3 128 128s-57.3 128-128 128H480c0 53-43 96-96 96H192c-53 0-96-43-96-96V64zM480 224h32c35.3 0 64-28.7 64-64s-28.7-64-64-64H480V224zM32 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/>
+                    	</svg>
+					</a>
+					{% elif item.desc == "Linkedin" %}
+					<a class="link px-3" href="{{ item.url }}" target="_blank" data-tippy-content="{{ item.url }}">
+						<svg class="h-6 fill-current text-gray-600 hover:text-green-700" role="img" 
+							xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+							<title>LinkedIn</title>
+							<path 
+								d="M416 0H31.9C14.3 0 0 14.3 0 31.9v448.2C0 497.7 14.3 512 31.9 512H416c17.6 0 31.9-14.3 31.9-31.9V31.9C448 14.3 433.7 0 416 0zM135.6 416H69V202.5h66.6V416zM102.3 174.6h.5c-21.9 0-35.9-15.1-35.9-34c0-19.4 14.1-34.6 36.1-34.6 22 0 35.9 15.2 35.4 34.6 0 18.9-14.4 34-35.6 34zM416 416h-66.6V297.3c0-34.1-12.2-57.3-42.8-57.3-23 0-36.7 15.6-42.8 30.7-2.2 5.4-2.8 12.9-2.8 20.4V416h-66.6c.9-96 0-202.5 0-202.5h66.6v28.7c8.8-13.6 24.6-33 60.1-33 44 0 77.3 28.9 77.3 91.2V416z"/>
+						</svg>
+					</a>
+					{% elif item.desc == "Dev.to" %}
+					<a class="link px-3" href="{{ item.url }}" target="_blank" data-tippy-content="{{ item.url }}">
+						<svg class="h-6 fill-current text-gray-600 hover:text-green-700" role="img"  
+							 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+							<title>Dev.to</title>
+							<path d="M120.1 208.3c-3.9-2.9-7.8-4.4-11.7-4.4H91v104.5h17.5c3.9 0 7.8-1.5 11.7-4.4 3.9-2.9 5.8-7.3 5.8-13.1v-69.7c0-5.8-2-10.2-5.8-13.1zM404.1 32H43.9C19.7 32 .1 51.6 0 75.8v360.4C.1 460.4 19.7 480 43.9 480h360.2c24.2 0 43.8-19.6 43.9-43.8V75.8c-.1-24.2-19.7-43.8-43.9-43.8zM154.2 291.2c0 18.8-11.6 47.3-48.4 47.3h-46.4V173h47.4c35.4 0 47.4 28.5 47.4 47.3l0 70.9zm100.7-88.7H201.6v38.4h32.6v29.6H201.6v38.4h53.3v29.6h-62.2c-11.2 .3-20.4-8.5-20.7-19.7V193.7c-.3-11.2 8.6-20.4 19.7-20.7h63.2l0 29.5zm103.6 115.3c-13.2 30.8-36.9 24.6-47.4 0l-38.5-144.8h32.6l29.7 113.7 29.6-113.7h32.6l-38.5 144.8z"/>
+						</svg>
+					</a>
+                    {% endif %}
+					{% endfor %}
+                </div>
+
+                <!-- Use https://simpleicons.org/ to find the svg for your preferred product -->
+
+            </div>
+
+        </div>
+
+        <!--Img Col-->
+        <div class="w-full lg:w-2/5">
+            <!-- Big profile image for side bar (desktop) -->
+            <img src="{{ profile_picture }}" class="rounded-none lg:rounded-lg shadow-2xl hidden lg:block">
+            <!-- Image from: http://unsplash.com/photos/MP0IUfwrn0A -->
+
+        </div>
+
+
+        <!-- Pin to top right corner -->
+        <div class="absolute top-0 right-0 h-12 w-18 p-4">
+            <button class="js-change-theme focus:outline-none">🌙</button>
+        </div>
+
+    </div>
+</body>
+
+    <script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
+    <script src="https://unpkg.com/tippy.js@4"></script>
+    <script>
+        //Init tooltips
+		tippy('.link',{
+		  placement: 'bottom'
+		})
+
+		//Toggle mode
+		const toggle = document.querySelector('.js-change-theme');
+		const body = document.querySelector('body');
+		const profile = document.getElementById('profile');
+		
+		
+		toggle.addEventListener('click', () => {
+
+		  if (body.classList.contains('text-gray-900')) {
+			toggle.innerHTML = "🌙";
+			body.classList.remove('text-gray-900');
+			body.classList.add('text-gray-100');
+			profile.classList.remove('bg-white');
+			profile.classList.add('bg-gray-900');
+		  } else
+		  {
+			toggle.innerHTML = "☀️";
+			body.classList.remove('text-gray-100');
+			body.classList.add('text-gray-900');
+			profile.classList.remove('bg-gray-900');			
+			profile.classList.add('bg-white');
+			
+		  }
+		});
+		
+    </script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/data/data.json b/data/data.json
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/test_main.py b/tests/test_main.py
index e6d914c..27a4f90 100644
--- a/tests/test_main.py
+++ b/tests/test_main.py
@@ -2,4 +2,4 @@
 def test_read_main(client):
     response = client.get("/")
     assert response.status_code == 200
-    assert "<h1>Hello World!</h1>" in response.text
+    #assert "<h1>Hello World!</h1>" in response.text