Merge pull request #4 from pepas24/improvement/ui-redesign

Major Redesign the UI

package-lock.json

@@ -0,0 +1,617 @@
+{
+  "name": "github-graphs",
+  "version": "0.0.1",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ=="
+    },
+    "@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+      "requires": {
+        "defer-to-connect": "^1.0.1"
+      }
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "cacheable-request": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
+      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
+      "requires": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^3.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^4.1.0",
+        "responselike": "^1.0.2"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
+          "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "lowercase-keys": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+          "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA=="
+        }
+      }
+    },
+    "clone-response": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "defer-to-connect": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.0.2.tgz",
+      "integrity": "sha512-k09hcQcTDY+cwgiwa6PYKLm3jlagNzQ+RSvhjzESOGOx+MNOuXkxTfEvPrO1IOQ81tArCFYQgi631clB70RpQw=="
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "express-session": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.17.0.tgz",
+      "integrity": "sha512-t4oX2z7uoSqATbMfsxWMbNjAL0T5zpvcJCk3Z9wnPPN7ibddhnmDZXHfEcoBMG2ojKXZoCyPMc5FbtK+G7SoDg==",
+      "requires": {
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~2.0.0",
+        "on-headers": "~1.0.2",
+        "parseurl": "~1.3.3",
+        "safe-buffer": "5.2.0",
+        "uid-safe": "~2.1.5"
+      },
+      "dependencies": {
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        },
+        "safe-buffer": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
+          "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg=="
+        }
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ="
+    },
+    "get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "got": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
+      "requires": {
+        "@sindresorhus/is": "^0.14.0",
+        "@szmarczak/http-timer": "^1.1.2",
+        "cacheable-request": "^6.0.0",
+        "decompress-response": "^3.3.0",
+        "duplexer3": "^0.1.4",
+        "get-stream": "^4.1.0",
+        "lowercase-keys": "^1.0.1",
+        "mimic-response": "^1.0.1",
+        "p-cancelable": "^1.0.0",
+        "to-readable-stream": "^1.0.0",
+        "url-parse-lax": "^3.0.0"
+      }
+    },
+    "http-cache-semantics": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.0.3.tgz",
+      "integrity": "sha512-TcIMG3qeVLgDr1TEd2XvHaTnMPwYQUQMIBLy+5pLSDKYFc7UIqj39w8EGzZkaxoLv/l2K8HaI0t5AVA+YYgUew=="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ipaddr.js": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz",
+      "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA=="
+    },
+    "json-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
+      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
+    },
+    "keyv": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
+      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
+      "requires": {
+        "json-buffer": "3.0.0"
+      }
+    },
+    "lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "memory-cache": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/memory-cache/-/memory-cache-0.2.0.tgz",
+      "integrity": "sha1-eJCwHVLADI68nVM+H46xfjA0hxo="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
+      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA=="
+    },
+    "mime-types": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
+      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
+      "requires": {
+        "mime-db": "1.40.0"
+      }
+    },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "normalize-url": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
+      "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "p-cancelable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw=="
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "prepend-http": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
+    },
+    "proxy-addr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
+      "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.0"
+      }
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "random-bytes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
+      "integrity": "sha1-T2ih3Arli9P7lYSMMDJNt11kNgs="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
+      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
+      "requires": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "to-readable-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
+      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q=="
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "uid-safe": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
+      "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==",
+      "requires": {
+        "random-bytes": "~1.0.0"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "url-parse-lax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+      "requires": {
+        "prepend-http": "^2.0.0"
+      }
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    }
+  }
+}

public/404.html

@@ -7,41 +7,33 @@
     <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-    <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
-        <div id="header-title">
-            <a href="./index.html">
-                <img id="logo" src="./logo.svg" />
-            </a>
-        </div>
-        <div id="navigation">
-            <ul class="nav">
-                <li class="nav-item">
-                    <a href="./FriendsGraph.html">
-                        Generate graphs
-                    </a>
+    <nav class="navbar navbar-dark bg-dark navbar-expand-md">
+        <a class="navbar-brand" href="/"><img src="img/githubgraph-logo.svg" alt=""></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="main-menu" class="collapse navbar-collapse">
+            <ul class="navbar-nav flex-fill justify-content-end">
+                <li class="nav-item active">
+                    <a class="nav-link" href="./GraphGenerator.html">Generate graphs</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="https://github.com/jrtechs/github-graphs">
-                        View on GitHub
-                    </a>
+                    <a class="nav-link" href="https://github.com/jrtechs/github-graphs/">View on GitHub</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="./about.html">
-                        About
-                    </a>
+                    <a class="nav-link" href="./about.html">About</a>
                 </li>
             </ul>
         </div>
-    </div>
+    </nav>
+
     <div class="main">
-        <div id="content" class="error container text-center">
-            <h1 id="error-code">404</h1>
-            <img id="dcimg" src="./img/DolphinCroissant.png" />
-            <p style="padding-top: 25px;">Yeah, that page doesn't exist.</p>
-            <p>Maybe if you weren't so adventurous you'd avoid screens like this :)</p>
+        <div id="content" class="container text-center">
+            <h1 class="display-1 text-white font-weight-bold py-5">404</h1>
+            <img class="mb-4" style="width: 250px;" src="./img/DolphinCroissant.png" />
+            <p class="lead">Yeah, that page doesn't exist.</p>
+            <p class="text-muted">Maybe if you weren't so adventurous you'd avoid screens like this 😉</p>
         </div>
     </div>
 </body>
-</html>
+</html>

public/FriendsGraph.html

@@ -13,6 +13,10 @@
             integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
             crossorigin="anonymous">
     </script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous">
+    </script>
     <script src="js/githubAPI.js"></script>
     <script src="js/friendsGraph.js"></script>
     <script src="js/profileGen.js"></script>
@@ -22,48 +26,64 @@
     <link href="js/vis/vis-network.min.css" rel="stylesheet" type="text/css" />
 
 </head>
-<body>
-    <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
-        <div id="header-title">
-            <a href="./index.html">
-                <img id="logo" src="./logo.svg" />
-            </a>
-        </div>
-        <div id="navigation">
-            <ul class="nav">
+<body class="friends-graph-page">
+    <nav class="navbar navbar-dark bg-dark navbar-expand-md">
+        <a class="navbar-brand" href="/"><img src="img/githubgraph-logo.svg" alt=""></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="main-menu" class="collapse navbar-collapse">
+            <ul class="navbar-nav flex-fill justify-content-end">
                 <li class="nav-item">
-                    <a href="./GraphGenerator.html">
-                        Generate graphs
-                    </a>
+                    <a class="nav-link" href="./GraphGenerator.html">Generate graphs</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="https://github.com/jrtechs/github-graphs">
-                        View on GitHub
-                    </a>
+                    <a class="nav-link" href="https://github.com/jrtechs/github-graphs/">View on GitHub</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="./about.html">
-                        About
-                    </a>
+                    <a class="nav-link" href="./about.html">About</a>
                 </li>
             </ul>
         </div>
-    </div>
-    <div class="main container">
+    </nav>
 
-        <div class="row">
-            <div class="col-md-8 col-12">
-                <h2 id="graphLoading"></h2>
-                <div id="myGraph" class="w-100"></div>
-                <pre id="eventSpan"></pre>
-            </div>
-            <div class="col-md-4 col-12 w-100">
-                <div id="profileGen"></div>
+    <div class="main">
+        <div class="container-fluid container-xl">
+            <div class="row pt-5">
+                <div class="col-lg-3 col-md-4 col-12"></div>
+                <div class="col-lg-9 col-md-8 col-12">
+                    <div class="d-flex align-items-baseline justify-content-between my-4">
+                         <div class="d-flex align-items-center">
+                              <svg class="mr-3" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM18 5.4C20.988 5.4 23.4 7.812 23.4 10.8C23.4 13.788 20.988 16.2 18 16.2C15.012 16.2 12.6 13.788 12.6 10.8C12.6 7.812 15.012 5.4 18 5.4ZM18 30.96C15.8613 30.96 13.7559 30.4308 11.8715 29.4194C9.98707 28.4081 8.3822 26.9462 7.2 25.164C7.254 21.582 14.4 19.62 18 19.62C21.582 19.62 28.746 21.582 28.8 25.164C27.6178 26.9462 26.0129 28.4081 24.1285 29.4194C22.2441 30.4308 20.1387 30.96 18 30.96Z" fill="white"/>
+                              </svg>
+                             <h1 class="text-white font-weight-bold">Interactive friend chart</h1>
+                         </div>
+                         <div>
+                             <a id="TimelineLink" class="text-light" href="#">View repo timeline</a>
+                         </div>
+                    </div>
+                </div>
             </div>
+           <div class="row pb-4">
+               <div class="col-lg-3 col-md-4 col-12">
+                   <div id="profileGen"></div>
+               </div>
+               <div class="col-lg-9 col-md-8 col-12">
+                   <div class="card shadow text-white bg-dark border-white">
+                        <h2 id="graphLoading"></h2>
+                        <div id="myGraph" class="w-100"></div>
+                   </div>
+               </div>
+           </div>
         </div>
+    </div>
+
+</body>
 <script>
+    $(function () {
+      $('[data-toggle="tooltip"]').tooltip();
+    });
 
     function createGraphs(username)
     {
@@ -77,6 +97,8 @@
     {
         createGraphs(findGetParameter("name"))
     }
+
+    $('#TimelineLink').attr("href", "TimeLineGraph.html?name=" + findGetParameter("name"));
 </script>
 
-</html>
+</html>

public/GraphGenerator.html

@@ -8,112 +8,111 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="./style.css" />
-    <link rel="stylesheet" href="./search.css" />
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"
             integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
             crossorigin="anonymous">
     </script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous">
+    </script>
 </head>
 <body>
-    <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
-        <div id="header-title">
-            <a href="./index.html">
-                <img id="logo" src="./logo.svg" />
-            </a>
-        </div>
-        <div id="navigation">
-            <ul class="nav">
-                <li class="nav-item">
-                    <a href="./GraphGenerator.html">
-                        Generate graphs
-                    </a>
+    <nav class="navbar navbar-dark bg-dark navbar-expand-md">
+        <a class="navbar-brand" href="/"><img src="img/githubgraph-logo.svg" alt=""></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="main-menu" class="collapse navbar-collapse">
+            <ul class="navbar-nav flex-fill justify-content-end">
+                <li class="nav-item active">
+                    <a class="nav-link" href="./GraphGenerator.html">Generate graphs</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="https://github.com/jrtechs/github-graphs">
-                        View on GitHub
-                    </a>
+                    <a class="nav-link" href="https://github.com/jrtechs/github-graphs/">View on GitHub</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="./about.html">
-                        About
-                    </a>
+                    <a class="nav-link" href="./about.html">About</a>
                 </li>
             </ul>
         </div>
-    </div>
-    <div class="main container">
-        <div id="user-graphs">
-            <div id="search-bar">
-                <div class="row align-items-center text-center">
-                    <div class="search-title">
-                        <h1 id="search" class="m-title">Search GitHub:</h1>
-                    </div>
-                    <div class="col search-col">
-                        <form class="search-form">
-                            <input class="rounder form-control mr-sm-1" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
-                        </form>
-                    </div>
+    </nav>
+
+    <div class="main">
+        <div class="container">
+            <div class="row ">
+                <div class="col">
+                    <h1 class="text-center text-white font-weight-bold my-4 py-5">
+                        Generate a graph
+                    </h1>
                 </div>
             </div>
-            <div class="card-deck text-center">
-                <div class="card rounder">
-                    <div class="card-header rounder">
-                        <h1 class="m-title">Interactive Friends Chart</h1>
-                    </div>
-                    <div class="card-body">
-                        <p>
-                            Creates an web chart of the selected user and
-                            both their followers and anyone they are following
-                            themselves.
-                        </p>
-                        <button class="btn btn-outline-success rounder" onclick='toFriends()' type='button'>Generate</button>
+            <div class="row align-items-stretch">
+                <div class="col-lg-4 mb-4">
+                    <div class="card h-100 shadow py-3">
+                        <div class="card-body">
+                            <svg class="my-3" width="37" height="38" viewBox="0 0 37 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M18.172 0.946228C8.14108 0.946228 0 9.0873 0 19.1183C0 29.1492 8.14108 37.2903 18.172 37.2903C28.203 37.2903 36.3441 29.1492 36.3441 19.1183C36.3441 9.0873 28.203 0.946228 18.172 0.946228ZM18.172 6.39784C21.1886 6.39784 23.6237 8.83289 23.6237 11.8495C23.6237 14.866 21.1886 17.3011 18.172 17.3011C15.1555 17.3011 12.7204 14.866 12.7204 11.8495C12.7204 8.83289 15.1555 6.39784 18.172 6.39784ZM18.172 32.2021C16.0129 32.2022 13.8874 31.6678 11.985 30.6469C10.0825 29.6259 8.46232 28.15 7.26882 26.3507C7.32333 22.7345 14.5376 20.7538 18.172 20.7538C21.7883 20.7538 29.0208 22.7345 29.0753 26.3507C27.8818 28.15 26.2616 29.6259 24.3591 30.6469C22.4567 31.6678 20.3311 32.2022 18.172 32.2021Z" fill="#1074E7"/>
+                            </svg>
+                            <h2 class="h4 my-4 font-weight-bold">Interactive Friends Chart</h2>
+                            <p class="card-text">Creates a web chart of the selected user and both their followers and anyone they are following themselves.</p>
+                        </div>
+                        <div class="card-footer bg-transparent border-top-0">
+                            <div class="input-group input-group-lg">
+                                <input id="input-friends-graph" type="text" class="form-control" placeholder="Username">
+                                <div class="input-group-append">
+                                    <button class="btn btn-primary" type="button" onclick="toFriends()">
+                                        Generate
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <p></p>
                 </div>
-                <div class="card rounder">
-                    <div class="card-header rounder">
-                        <h1 class="m-title">Repo Timeline</h1>
-                    </div>
-                    <div class="card-body">
-                        <p>
-                            Displays a timeline of every repo belonging
-                            to the selected user in chronological order,
-                            along with information pertaining to each repo.
-                        </p>
-                        <button class="btn btn-outline-success rounder" onclick='toTimeline()' type='button'>Generate</button>
-                    </div>
-                    <p></p>
-                </div>
-            </div>
-        </div>
-        <div id="org-graph" class="mt-3">
-            <div id="search-bar">
-                <div class="row align-items-center text-center">
-                    <div class="search-title">
-                        <h1 id="search" class="m-title">Search GitHub:</h1>
-                    </div>
-                    <div class="col search-col">
-                        <form class="search-form">
-                            <input class="rounder form-control mr-sm-1" id='txtOrgname' type="search" placeholder="Organization Name" aria-label="Search">
-                        </form>
+
+                <div class="col-lg-4 mb-4">
+                    <div class="card h-100 shadow py-3">
+                        <div class="card-body">
+                            <svg class="my-3" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M0 0H3.6V32.4H36V36H0V0ZM9 14.4H27V19.8H9V14.4ZM16.2 23.4H34.2V28.8H16.2V23.4ZM7.2 3.6H36V10.8H32.4V7.2H10.8V10.8H7.2V3.6Z" fill="#1074E7"/>
+                            </svg>
+                            <h2 class="h4 my-4 font-weight-bold">Repo Timeline</h2>
+                            <p class="card-text">Displays a timeline of every repo belonging to the selected user in chronological order, along with information pertaining to each repo.</p>
+                        </div>
+                        <div class="card-footer bg-transparent border-top-0">
+                            <div class="input-group input-group-lg">
+                                <input id="input-timeline-graph" type="text" class="form-control" placeholder="Username">
+                                <div class="input-group-append">
+                                    <button class="btn btn-primary" type="button" onclick="toTimeline()">
+                                        Generate
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="card-deck text-center">
-                <div class="card rounder">
-                    <div class="card-header rounder">
-                        <h1 class="m-title">Interactive Organization Chart</h1>
-                    </div>
-                    <div class="card-body">
-                        <p>
-                            Creates a web chart of the specified organization
-                            and all associated repos.
-                        </p>
-                        <button class="btn btn-outline-success rounder" onclick='toOrgRepos()' type='button'>Generate</button>
+
+                <div class="col-lg-4 mb-4">
+                    <div class="card h-100 shadow py-3">
+                        <div class="card-body">
+                            <svg class="my-3" width="37" height="31" viewBox="0 0 37 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M0 31V11C0 10.5093 0.19491 10.0388 0.541852 9.69185C0.888795 9.34491 1.35935 9.15 1.85 9.15H9.25V2C9.25 0.895432 10.1454 0 11.25 0H25.75C26.8546 0 27.75 0.89543 27.75 2V9.15H35.15C35.6407 9.15 36.1112 9.34491 36.4581 9.69185C36.8051 10.0388 37 10.5093 37 11V31H22.2V21.75H14.8V31H0ZM14.8 3.5V8.8H22.2V3.5H14.8ZM3.7 27.3H11.1V21.75H3.7V27.3ZM3.7 18.05H11.1V12.5H3.7V18.05ZM25.9 27.3H33.3V21.75H25.9V27.3ZM25.9 18.05H33.3V12.5H25.9V18.05ZM14.8 18.05H22.2V12.5H14.8V18.05Z" fill="#1074E7"/>
+                            </svg>
+
+                            <h2 class="h4 my-4 font-weight-bold">Interactive Organization Chart</h2>
+                            <p class="card-text">Creates a web chart of the specified organization and all associated repos.</p>
+                        </div>
+                        <div class="card-footer bg-transparent border-top-0">
+                            <div class="input-group input-group-lg">
+                                <input id="input-organization-graph" type="text" class="form-control" placeholder="Organization">
+                                <div class="input-group-append">
+                                    <button class="btn btn-primary" type="button" onclick="toOrgRepos()">
+                                        Generate
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <p></p>
                 </div>
             </div>
         </div>
@@ -121,64 +120,53 @@
 </body>
 </html>
 <script>
-    $('#txtOrgname').keydown(function(event)
-    {
-        if(event.keyCode == 13)
-        {
-            event.preventDefault();
-            toOrgRepos();
-        }
-    });
+    var inputFriends = $('#input-friends-graph');
+    var inputTimeLine = $('#input-timeline-graph');
+    var inputOrgRepos = $('#input-organization-graph');
 
-    $('#txtUsername').keydown(function(event)
-    {
-        if(event.keyCode == 13)
-        {
-            event.preventDefault();
+    inputFriends.keydown(function(event) {
+        redirectToPage(event, function() {
             toFriends();
-        }
+        });
     });
 
-    function fetchUserInput()
-    {
-        const inputedName = $("#txtUsername").val();
-
-        if(inputedName === "")
-        {
-            alert("Please enter a Github name in the text field.")
-        }
+    inputTimeLine.keydown(function(event) {
+        redirectToPage(event, function() {
+            toTimeline();
+        });
+    });
 
-        return inputedName;
-    }
+    inputOrgRepos.keydown(function(event) {
+        redirectToPage(event, function() {
+            toOrgRepos();
+        });
+    });
 
-    function fetchOrgInput()
-    {
-        const inputedOrg = $("#txtOrgname").val();
-        if(inputedOrg === "")
-        {
-            alert("Please enter a Github organization name in the text field.")
+    function redirectToPage(e, pageFunction) {
+        if (e.keyCode === 13) {
+            event.preventDefault();
+            pageFunction();
         }
-        return inputedOrg;
     }
 
-    function toFriends()
-    {
-        var uname = fetchUserInput();
-        if(uname !== "")
-            window.location.href = "./FriendsGraph.html?name=" + uname;
+    function toFriends() {
+        userName = inputFriends.val();
+        userName
+            ? window.location.href = "./FriendsGraph.html?name=" + userName
+            : alert("Please enter a Github name in the text field.")
     }
 
-    function toTimeline()
-    {
-        var uname = fetchUserInput();
-        if(uname !== "")
-            window.location.href = "./TimeLineGraph.html?name=" + uname;
+    function toTimeline() {
+        userName = inputTimeLine.val();
+        userName
+            ? window.location.href = "./TimeLineGraph.html?name=" + userName
+            : alert("Please enter a Github name in the text field.");
     }
 
     function toOrgRepos() {
-        var uname = fetchOrgInput();
-        if(uname !== "")
-            window.location.href = "./OrgRepoGraph.html?name=" + uname;
+        organizationName = inputOrgRepos.val();
+        organizationName
+            ? window.location.href = "./OrgRepoGraph.html?name=" + organizationName
+            : alert("Please enter a Github organization name in the text field.");
     }
-
-</script>
+</script>

public/OrgRepoGraph.html

@@ -8,11 +8,17 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
     <script
             src="https://code.jquery.com/jquery-3.3.1.min.js"
             integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
             crossorigin="anonymous">
     </script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous">
+    </script>
+
     <script src="js/githubAPI.js"></script>
     <script src="js/friendsGraph.js"></script>
     <script src="js/createOrgRepoGraph.js"></script>
@@ -21,94 +27,97 @@
     <script src="js/createOrgTable.js"></script>
     <script src="js/createOrgInfo.js"></script>
 
-    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
     <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
-
-
-
     <script type="text/javascript" src="js/vis/vis.js"></script>
     <link href="js/vis/vis-network.min.css" rel="stylesheet" type="text/css" />
 
 </head>
 <body>
-    <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
-        <div id="header-title">
-            <a href="./index.html">
-                <img id="logo" src="./logo.svg" />
-            </a>
-        </div>
-        <div id="navigation">
-            <ul class="nav">
+    <nav class="navbar navbar-dark bg-dark navbar-expand-md">
+        <a class="navbar-brand" href="/"><img src="img/githubgraph-logo.svg" alt=""></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="main-menu" class="collapse navbar-collapse">
+            <ul class="navbar-nav flex-fill justify-content-end">
                 <li class="nav-item">
-                    <a href="./GraphGenerator.html">
-                        Generate graphs
-                    </a>
+                    <a class="nav-link" href="./GraphGenerator.html">Generate graphs</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="https://github.com/jrtechs/github-graphs">
-                        View on GitHub
-                    </a>
+                    <a class="nav-link" href="https://github.com/jrtechs/github-graphs/">View on GitHub</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="./about.html">
-                        About
-                    </a>
+                    <a class="nav-link" href="./about.html">About</a>
                 </li>
             </ul>
         </div>
-    </div>
-    <div class="main containerCustom">
+    </nav>
 
-        <div class="row containerCustom">
-            <div class="col-md-2 col-12">
-                <div id="profileGen"></div>
+    <div class="main">
+        <div class="container-fluid container-xl">
+            <div class="row">
+                <div class="col">
+                    <div class="d-flex align-items-baseline justify-content-between my-4">
+                         <div class="d-flex align-items-center">
+                            <svg class="mr-3" width="37" height="31" viewBox="0 0 37 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M0 31V11C0 10.5093 0.19491 10.0388 0.541852 9.69185C0.888795 9.34491 1.35935 9.15 1.85 9.15H9.25V2C9.25 0.895432 10.1454 0 11.25 0H25.75C26.8546 0 27.75 0.89543 27.75 2V9.15H35.15C35.6407 9.15 36.1112 9.34491 36.4581 9.69185C36.8051 10.0388 37 10.5093 37 11V31H22.2V21.75H14.8V31H0ZM14.8 3.5V8.8H22.2V3.5H14.8ZM3.7 27.3H11.1V21.75H3.7V27.3ZM3.7 18.05H11.1V12.5H3.7V18.05ZM25.9 27.3H33.3V21.75H25.9V27.3ZM25.9 18.05H33.3V12.5H25.9V18.05ZM14.8 18.05H22.2V12.5H14.8V18.05Z" fill="white"/>
+                            </svg>
+                            <h1 class="text-white font-weight-bold">Organization chart</h1>
+                         </div>
+                    </div>
+                </div>
             </div>
-            <div class="col-md-6 col-12">
-                <div id="graphLoading"></div>
-                <div id="organizationInfo"></div>
-                <div id="myGraph" class="w-100"></div>
-                <pre id="eventSpan"></pre>
-            </div>
-            <div class="col-md-4 col-12 bg-light">
-                <div class="w-100"></div>
-                <center><h1>Repositories</h1></center>
-                <table class="table table-striped" id="dataTable">
-                    <thead class="thead-dark">
-                    <tr>
-                        <td>Name</td>
-                        <td>Forks</td>
-                        <td>Language</td>
-                    </tr>
-                    </thead>
-                    <tbody id="repositoryTable">
-
-                    </tbody>
-                </table>
-
+            <div class="row">
+                <div class="col-lg-9">
+                    <div class="row pb-4">
+                        <div class="col-12">
+                            <div id="organizationInfo"></div>
+                        </div>
+                    </div>
+                    <div class="row mb-4">
+                        <div class="col-lg-4">
+                            <div class="card">
+                                <div class="card-body" style="font-size: 14px;">
+                                    <h3 class="card-title">Repositories</h3>
+                                    <table class="table table-sm" id="dataTable">
+                                        <thead>
+                                        <tr>
+                                            <th class="border-top-0">Name</th>
+                                            <th class="border-top-0">Forks</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody id="repositoryTable"></tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-8">
+                            <div class="card shadow text-white bg-dark border-white">
+                                <div id="graphLoading"></div>
+                                <div id="myGraph" class="w-100"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-3">
+                    <div id="profileGen"></div>
+                </div>
             </div>
         </div>
-
-        <script>
-        
-            function createGraphs(orgname) {
-                options.width = $("#myGraph").width() + "px";
-                options.height = "700px";
-
-                createOrgRepoGraph(orgname, "myGraph", "graphLoading");
-                createOrgTable(orgname, 'repositoryTable');
-                createOrgInfo(orgname, 'organizationInfo')
-            }
-        
-            if(findGetParameter("name") !== null)
-            {
-                createGraphs(findGetParameter("name"))
-            }
-            
-        </script>
     </div>
-
 </body>
+<script>
+    function createGraphs(orgname) {
+        options.width = $("#myGraph").width() + "px";
+        options.height = "600px";
+
+        createOrgRepoGraph(orgname, "myGraph", "graphLoading");
+        createOrgTable(orgname, 'repositoryTable');
+        createOrgInfo(orgname, 'organizationInfo')
+    }
 
-</html>
+    if (findGetParameter("name") !== null) {
+        createGraphs(findGetParameter("name"))
+    }
+</script>
+</html>

public/TimeLineGraph.html

@@ -13,6 +13,10 @@
             integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
             crossorigin="anonymous">
     </script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous">
+    </script>
     <script src="js/githubAPI.js"></script>
     <script src="js/profileTimeLine.js"></script>
     <script src="js/profileGen.js"></script>
@@ -24,132 +28,127 @@
 
     <style type="text/css">
         .vis-timeline {
-            border: 2px solid blue;
-            /*font-family:  purisa, 'comic sans', cursive;*/
-            font-size: 12pt;
-            background: #E8E8E8;
+            border: none;
+            font-size: 16px;
+            color: var(--white);
+            background-color: var(--dark);
         }
         .vis-item {
-            border-color: #0B002B;
-            background-color: #88BAFF;
-            font-size: 15pt;
-            color: black;
-            box-shadow: 5px 5px 20px rgba(47,27,0, 0.5);
+            font-size: 16px;
+            color: var(--dark);
+            background-color: var(--white);
+            box-sizing: border-box;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 4px 6px rgba(0, 0, 0, 0.06);
+            border-color: transparent;
+        }
+        .vis-item.vis-box {
+            border-radius: 2px;
+            padding: 0;
+            border: none;
+        }
+        .vis-item .vis-item-content {
+            padding: 8px 10px;
+        }
+        .vis-item.vis-box.vis-selected {
+            border: 2px solid var(--primary);
         }
-        .vis-item,
         .vis-item.vis-line {
-            border-width: 3px;
+            border-width: 2px;
+            border-color: var(--primary)
         }
         .vis-item.vis-dot {
-            border-width: 10px;
-            border-radius: 10px;
+            border-color: var(--primary);
         }
         .vis-item.vis-selected {
-            border-color: #2C3E50;
-            background-color: #498FBE;
+            border-color: var(--primary);
+            background-color: var(--white);
+            box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.2), 0px 10px 10px rgba(0, 0, 0, 0.14);
         }
         .vis-time-axis .vis-text {
-            color: #0B002B;
-            padding-top: 10px;
-            padding-left: 10px;
-        }
-        .vis-time-axis .vis-text.vis-major {
-            font-weight: bold;
+            color: var(--white);
+            padding-top: 8px;
+            padding-left: 16px;
         }
         .vis-time-axis .vis-grid.vis-minor {
             border-width: 2px;
-            border-color: #88BAFF;
+            border-color: rgba(255, 255, 255, .29);
         }
-        .vis-labelset .vis-label
-        {
-            color: black;
+        .vis-labelset .vis-label {
+            color: var(--white);
         }
         .vis-time-axis .vis-grid.vis-major {
-            border-width: 2px;
-            border-color: #0B002B;
-        }
-
-        .containerCustom {
-            width: 100%;
-            padding-right: 0px;
-            padding-left: 0px;
-            margin-right: 0px;
-            margin-left: 0px;
+            border-width: 1px;
+            border-color: rgba(255, 255, 255, .5);
         }
     </style>
 </head>
-<body>
-<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
-    <div id="header-title">
-        <a href="./index.html">
-            <img id="logo" class="text-center" src="./logo.svg" />
-        </a>
-    </div>
-    <ul id="navigation" class="nav justify-content-end">
-        <li class="nav-item">
-            <a href="./GraphGenerator.html">
-                Generate graphs
-            </a>
-        </li>
-        <div class="nav-sep"></div>
-        <li class="nav-item">
-            <a href="https://github.com/jrtechs/github-graphs">
-                View on GitHub
-            </a>
-        </li>
-        <div class="nav-sep"></div>
-        <li class="nav-item">
-            <a href="./about.html">
-                About
-            </a>
-        </li>
-    </ul>
-</div>
-<div class="containerCustom">
-
-    <div class="row align-center" id="searchBarTop">
-        <nav class="navbar navbar-light bg-light justify-content-between">
-            <a class="navbar-brand">Create Graph</a>
-            <form class="form-inline">
-                <input class="form-control mr-sm-2" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
-                <button class="btn btn-outline-success my-2 my-sm-0" onclick='fetchUserInput()' type='button'>Look Up</button>
-            </form>
-        </nav>
-    </div>
-
-    <div class="row containerCustom">
-        <div class="col-md-10 col-12">
-            <h2 id="graphLabel"></h2>
-            <div id="myGraph" class="w-100"></div>
-            <pre id="eventSpan"></pre>
-
-            <div id="repositoryInformation" class="w-100"></div>
+<body class="timeline-graph-page">
+    <nav class="navbar navbar-dark bg-dark navbar-expand-md">
+        <a class="navbar-brand" href="/"><img src="img/githubgraph-logo.svg" alt=""></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="main-menu" class="collapse navbar-collapse">
+            <ul class="navbar-nav flex-fill justify-content-end">
+                <li class="nav-item">
+                    <a class="nav-link" href="./GraphGenerator.html">Generate graphs</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://github.com/jrtechs/github-graphs/">View on GitHub</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="./about.html">About</a>
+                </li>
+            </ul>
         </div>
-        <div class="col-md-2 col-12 w-100">
-            <div id="profileGen"></div>
+    </nav>
+
+    <div class="main">
+        <div class="container-fluid container-xl">
+            <div class="row pt-5">
+                <div class="col-lg-3 col-md-4 col-12"></div>
+                <div class="col-lg-9 col-md-8 col-12">
+                    <div class="d-flex align-items-baseline justify-content-between my-4">
+                         <div class="d-flex align-items-center">
+                              <svg class="mr-3" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM18 5.4C20.988 5.4 23.4 7.812 23.4 10.8C23.4 13.788 20.988 16.2 18 16.2C15.012 16.2 12.6 13.788 12.6 10.8C12.6 7.812 15.012 5.4 18 5.4ZM18 30.96C15.8613 30.96 13.7559 30.4308 11.8715 29.4194C9.98707 28.4081 8.3822 26.9462 7.2 25.164C7.254 21.582 14.4 19.62 18 19.62C21.582 19.62 28.746 21.582 28.8 25.164C27.6178 26.9462 26.0129 28.4081 24.1285 29.4194C22.2441 30.4308 20.1387 30.96 18 30.96Z" fill="white"/>
+                              </svg>
+                             <h1 class="text-white font-weight-bold">Repo timeline</h1>
+                         </div>
+                         <div>
+                             <a id="FriendsGraphLink" class="text-light" href="#">View friends graph</a>
+                         </div>
+                    </div>
+                </div>
+            </div>
+           <div class="row pb-4">
+               <div class="col-lg-3 col-md-4 col-12">
+                   <div id="profileGen"></div>
+               </div>
+               <div class="col-lg-9 col-md-8 col-12">
+                    <div class="card shadow mb-5">
+                        <h2 id="graphLoading" class="my-0"></h2>
+                        <div id="myGraph" class="w-100"></div>
+                    </div>
+                    <div id="repositoryInformation" class="w-100"></div>
+               </div>
+           </div>
         </div>
     </div>
+
 </body>
 
 <script>
-
-    function fetchUserInput()
-    {
-        const inputedName = $("#txtUsername").val();
-        createGraphs(inputedName);
-    }
-
-    function createGraphs(username)
-    {
+    function createGraphs(username) {
         createProfileTimeLine(username, "myGraph");
         profileGen(username, "profileGen");
-        $("#searchBarTop").html("");
     }
 
-    if(findGetParameter("name") !== null)
-    {
+    if (findGetParameter("name") !== null) {
         createGraphs(findGetParameter("name"))
     }
+
+    $('#FriendsGraphLink').attr("href", "FriendsGraph.html?name=" + findGetParameter("name"));
 </script>
 
-</html>
+</html>

public/about.css

@@ -1,45 +0,0 @@
-#content {
-    top: 120px;
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 0%);
-}
-
-#content-title {
-    position: relative;
-    top: 20%;
-    height: 80px;
-    background-color: rgb(208, 208, 208);
-    border-radius: 20px 20px 0px 0px
-}
-
-#content-body {
-    position: relative;
-    background-color: rgb(242, 242, 242);
-    border-radius: 0px 0px 20px 20px;
-}
-
-.avatar {
-    border-radius: 10px 10px 10px 10px !important;
-    top: 10px;
-    position: relative;
-    width: 70%;
-}
-
-.links {
-    padding: 10px;
-}
-
-.links a {
-    text-decoration: none;
-}
-
-.link-ico {
-    width: 40px;
-}
-
-@media (max-width: 767px) {
-    #content-title {
-        height: 40px;
-    }
-}

public/about.html

@@ -8,149 +8,119 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="./style.css" />
-    <link rel="stylesheet" href="./about.css" />
+    <script
+            src="https://code.jquery.com/jquery-3.3.1.min.js"
+            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+            crossorigin="anonymous">
+    </script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous">
+    </script>
 </head>
 <body>
-    <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
-        <div id="header-title">
-            <a href="./index.html">
-                <img id="logo" src="./logo.svg" />
-            </a>
-        </div>
-        <div id="navigation">
-            <ul class="nav">
+    <nav class="navbar navbar-dark bg-dark navbar-expand-md">
+        <a class="navbar-brand" href="/"><img src="img/githubgraph-logo.svg" alt=""></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="main-menu" class="collapse navbar-collapse">
+            <ul class="navbar-nav flex-fill justify-content-end">
                 <li class="nav-item">
-                    <a href="./GraphGenerator.html">
-                        Generate graphs
-                    </a>
+                    <a class="nav-link" href="./GraphGenerator.html">Generate graphs</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="https://github.com/jrtechs/github-graphs">
-                        View on GitHub
-                    </a>
+                    <a class="nav-link" href="https://github.com/jrtechs/github-graphs/">View on GitHub</a>
                 </li>
-                <div class="nav-sep"></div>
-                <li class="nav-item">
-                    <a href="./about.html">
-                        About
-                    </a>
+                <li class="nav-item active">
+                    <a class="nav-link" href="./about.html">About</a>
                 </li>
             </ul>
         </div>
-    </div>
-    <div>
-        <div id="content" class="container">
-            <div id="content-title">
-                <h1 class="big-title text-center">What is this?</h1>
-            </div>
-            <div id="content-body" class="container">
-                <p style="padding: 10px;">
-                    This is an interactive website which allows you to make various graphs of information from 
-                    the GitHub network. Currently the site generates three types of graphs-- the most popular and entertaining 
-                    of which is the friends graph. The friends graph helps you visualize clusters of friends/collaborators on GitHub.
-                    This can be used to spot clusters within organizations and schools.
-                </p>
-                <p style="padding: 10px;">
-                    This is an open source project, all the source code can be found on GitHub.
-                    New collaborators are always welcomed; look at our GitHub repository for contributing guidelines.
-                </p>
-            </div>
-            <div id="content-title">
-                <h1 class="big-title text-center">Why did you make this?</h1>
+    </nav>
+
+    <div class="main">
+        <div class="container">
+            <div class="row py-5">
+                <div class="col-md-6 offset-md-3 text-center text-white">
+                    <h1 class="font-weight-bold">What is this?</h1>
+                    <p>This is an interactive website which allows you to make various graphs of information from
+                    the GitHub network. Currently the site generates three types of graphs-- the most popular and entertaining of which is the friends graph. The friends graph helps you visualize clusters of friends/collaborators on GitHub.This can be used to spot clusters within organizations and schools.</p>
+                    <p>This is an open source project, all the source code can be found on GitHub. New collaborators are always welcomed; look at our GitHub repository for contributing guidelines.</p>
+                </div>
             </div>
-            <div id="content-body" class="container">
-                <p style="padding: 10px;">
-                    This project was completed in 24 hours for participation in <a class="plink" href="https://brickhack.io/">BrickHack V</a> at the Rochester Institute of Technology.
-                    We hope that this project will make people more interested in learning about big data analytics.
-                    The visual aspect of this website makes learning about topics such as clustering and graph databases more intuitive.
-                </p>
+            <div class="row py-5">
+                <div class="col-md-6 offset-md-3 text-center">
+                    <h2 class="font-weight-bold">Why did you make this?</h2>
+                    <p>This project was completed in 24 hours for participation in <a class="plink" href="https://brickhack.io/">BrickHack V</a> at the Rochester Institute of Technology. We hope that this project will make people more interested in learning about big data analytics. The visual aspect of this website makes learning about topics such as clustering and graph databases more intuitive.</p>
+                </div>
             </div>
-            <div id="content-title" style="border-radius: 20px;">
-                <h1 class="big-title text-center">Developers</h1>
+        </div>
+
+        <div class="container">
+            <div class="row">
+                <div class="col">
+                    <h2 class="h1 font-weight-bold text-center">Developers</h2>
+                </div>
             </div>
-            <div class="card-deck">
-                <div class="card rounder">
-                    <img class="avatar mx-auto d-block" src="https://avatars0.githubusercontent.com/u/13894625?s=400&v=4" />
-                    <div class="card-header text-center m-title">
-                        Jeff
-                    </div>
-                    <div class="card-body">
-                        <p>
-                            Managed a majority of the work with the backend, pulling data from GitHub and generating the graphs with visJS.
-                        </p>
-                    </div>
-                    <div class="links row text-center">
-                        <div class="col">
-                            <a href="https://github.com/jrtechs">
-                                <img class="link-ico" src="./img/github.png" />
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="https://www.linkedin.com/in/jrtechs/">
-                                <img class="link-ico" src="./img/linkedin.png" />
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="mailto:jeffery@jrtechs.net">
-                                <img class="link-ico" src="./img/email.png" />
-                            </a>
+            <div class="row py-4">
+                <div class="col-md-4">
+                    <div class="card">
+                        <img class="card-img" src="https://avatars0.githubusercontent.com/u/13894625?s=400&v=4" alt="Jeff">
+                        <div class="card-body">
+                            <h3 class="card-title">Jeff</h3>
+                            <p>Managed a majority of the work with the backend, pulling data from GitHub and generating the graphs with visJS.</p>
+                            <div class="d-flex text-decoration-none">
+                                <a class="mr-3" href="https://github.com/jrtechs">
+                                    <img src="img/github-circle.svg" alt="">
+                                </a>
+                                <a class="mr-3" href="https://www.linkedin.com/in/jrtechs/">
+                                    <img src="img/linkedin-box.svg" alt="">
+                                </a>
+                                <a href="mailto:jeffery@jrtechs.net">
+                                    <img src="img/email.svg" alt="">
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="card rounder">
-                    <img class="avatar mx-auto d-block" src="https://avatars0.githubusercontent.com/u/32306409?s=400&v=4" />
-                    <div class="card-header text-center m-title">
-                        Bryce
-                    </div>
-                    <div class="card-body">
-                        <p>
-                            Worked on pulling API data from GitHub to create the mini-profile display and some graph work.
-                        </p>
-                    </div>
-                    <div class="links row text-center">
-                        <div class="col">
-                            <a href="https://github.com/theshmurph">
-                                <img class="link-ico" src="./img/github.png" />
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="https://www.linkedin.com/in/theshmurph">
-                                <img class="link-ico" src="./img/linkedin.png" />
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="mailto:brshmurphy@gmail.com">
-                                <img class="link-ico" src="./img/email.png" />
-                            </a>
+                <div class="col-md-4">
+                    <div class="card">
+                        <img class="card-img" src="https://avatars0.githubusercontent.com/u/32306409?s=400&v=4" alt="Bryce">
+                        <div class="card-body">
+                            <h3 class="card-title">Bryce</h3>
+                            <p>Worked on pulling API data from GitHub to create the mini-profile display and some graph work.</p>
+                            <div class="d-flex text-decoration-none">
+                                <a class="mr-3" href="https://github.com/theshmurph">
+                                    <img src="img/github-circle.svg" alt="">
+                                </a>
+                                <a class="mr-3" href="https://www.linkedin.com/in/theshmurph">
+                                    <img src="img/linkedin-box.svg" alt="">
+                                </a>
+                                <a href="mailto:brshmurphy@gmail.com">
+                                    <img src="img/email.svg" alt="">
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="card rounder">
-                    <img class="avatar mx-auto d-block" src="https://avatars3.githubusercontent.com/u/32624140?s=400&v=4" />
-                    <div class="card-header text-center m-title">
-                        Alex
-                    </div>
-                    <div class="card-body">
-                        <p>
-                            Worked on the front-end design of the website, responsible for a majority of the html and css elements.
-                        </p>
-                    </div>
-                    <div class="links row text-center">
-                        <div class="col">
-                            <a href="https://github.com/CetaceanNation">
-                                <img class="link-ico" src="./img/github.png" />
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="https://www.linkedin.com/in/a-noel/">
-                                <img class="link-ico" src="./img/linkedin.png" />
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="mailto:axn5966@rit.edu">
-                                <img class="link-ico" src="./img/email.png" />
-                            </a>
+                <div class="col-md-4">
+                    <div class="card">
+                        <img class="card-img" src="https://avatars3.githubusercontent.com/u/32624140?s=400&v=4" alt="Alex">
+                        <div class="card-body">
+                            <h3 class="card-title">Alex</h3>
+                            <p>Worked on the front-end design of the website, responsible for a majority of the html and css elements.</p>
+                            <div class="d-flex text-decoration-none">
+                                <a class="mr-3" href="https://github.com/CetaceanNation">
+                                    <img src="img/github-circle.svg" alt="">
+                                </a>
+                                <a class="mr-3" href="https://www.linkedin.com/in/a-noel/">
+                                    <img src="img/linkedin-box.svg" alt="">
+                                </a>
+                                <a href="mailto:axn5966@rit.edu">
+                                    <img src="img/email.svg" alt="">
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -158,4 +128,4 @@
         </div>
     </div>
 </body>
-</html>
+</html>

public/img/email.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" fill="#2b3137" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>

public/img/github-circle.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#2b3137"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg>

public/img/githubgraph-logo.svg

@@ -0,0 +1,15 @@
+<svg width="210" height="40" viewBox="0 0 210 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1759 14.8211H12.2628C12.0587 14.8211 11.8931 14.9867 11.8931 15.191V19.0597C11.8931 19.2639 12.0587 19.4301 12.2628 19.4301H15.3498V24.2367C15.3498 24.2367 14.6565 24.473 12.7404 24.473C10.4796 24.473 7.32144 23.6468 7.32144 16.7021C7.32144 9.75588 10.61 8.84196 13.6974 8.84196C16.3699 8.84196 17.5213 9.31255 18.254 9.53922C18.4841 9.60981 18.697 9.38059 18.697 9.17628L19.5798 5.43824C19.5798 5.34275 19.5475 5.22765 19.4385 5.14941C19.1409 4.93726 17.3258 3.92157 12.7404 3.92157C7.45777 3.92157 2.03918 6.16902 2.03918 16.973C2.03918 27.7773 8.24301 29.3873 13.471 29.3873C17.7995 29.3873 20.4255 27.5375 20.4255 27.5375C20.5338 27.4776 20.5454 27.3264 20.5454 27.257V15.191C20.5454 14.9868 20.38 14.8211 20.1759 14.8211Z" fill="white"/>
+<path d="M60.9559 5.21608C60.9559 5.0102 60.7927 4.84412 60.5886 4.84412H56.1331C55.9296 4.84412 55.7641 5.0102 55.7641 5.21608C55.7641 5.21706 55.7653 13.8264 55.7653 13.8264H48.8204V5.21608C48.8204 5.0102 48.6564 4.84412 48.4527 4.84412H43.9974C43.7947 4.84412 43.6294 5.0102 43.6294 5.21608V28.5304C43.6294 28.7361 43.7947 28.9035 43.9974 28.9035H48.4527C48.6564 28.9035 48.8204 28.7361 48.8204 28.5304V18.5581H55.7653C55.7653 18.5581 55.7531 28.5296 55.7531 28.5304C55.7531 28.7361 55.9184 28.9035 56.1221 28.9035H60.5882C60.7923 28.9035 60.9555 28.7361 60.9559 28.5304V5.21608Z" fill="white"/>
+<path d="M28.5835 8.27549C28.5835 6.67118 27.2972 5.37471 25.7104 5.37471C24.1251 5.37471 22.8378 6.67118 22.8378 8.27549C22.8378 9.87814 24.1251 11.1781 25.7104 11.1781C27.2972 11.1781 28.5835 9.87814 28.5835 8.27549Z" fill="white"/>
+<path d="M28.2649 23.6124C28.2649 23.015 28.2649 12.8504 28.2649 12.8504C28.2649 12.6461 28.1 12.479 27.8962 12.479H23.4549C23.2511 12.479 23.0688 12.6892 23.0688 12.8935C23.0688 12.8935 23.0688 25.8435 23.0688 28.3121C23.0688 28.7653 23.3511 28.9 23.7166 28.9C23.7166 28.9 25.6123 28.9 27.7182 28.9C28.1572 28.9 28.2649 28.6845 28.2649 28.3049C28.2649 27.4784 28.2649 24.2408 28.2649 23.6124Z" fill="white"/>
+<path d="M77.8886 12.5141H73.4672C73.2645 12.5141 73.0994 12.6812 73.0994 12.8869V24.3186C73.0994 24.3186 71.9762 25.1404 70.3819 25.1404C68.7878 25.1404 68.3647 24.4171 68.3647 22.8561C68.3647 21.2932 68.3647 12.8869 68.3647 12.8869C68.3647 12.6812 68.2 12.5141 67.997 12.5141H63.5098C63.3072 12.5141 63.1413 12.6812 63.1413 12.8869C63.1413 12.8869 63.1413 18.9747 63.1413 23.611C63.1413 28.2475 65.7255 29.3817 69.2804 29.3817C72.1966 29.3817 74.548 27.7706 74.548 27.7706C74.548 27.7706 74.66 28.6196 74.7106 28.7204C74.7613 28.8208 74.8933 28.9222 75.0359 28.9222L77.8906 28.9096C78.0931 28.9096 78.259 28.7422 78.259 28.5375L78.2576 12.8869C78.2576 12.6812 78.0923 12.5141 77.8886 12.5141Z" fill="white"/>
+<path d="M88.2288 25.1263C86.6953 25.0796 85.6551 24.3837 85.6551 24.3837V17.0005C85.6551 17.0005 86.6813 16.3716 87.9404 16.2591C89.5325 16.1165 91.0666 16.5974 91.0666 20.3955C91.0666 24.4006 90.3743 25.1909 88.2288 25.1263ZM89.9727 11.9904C87.4615 11.9904 85.7535 13.1107 85.7535 13.1107V5.21608C85.7535 5.0102 85.589 4.84412 85.3858 4.84412H80.9178C80.7147 4.84412 80.5496 5.0102 80.5496 5.21608V28.5304C80.5496 28.7361 80.7147 28.9035 80.9184 28.9035C80.9188 28.9035 84.0174 28.9035 84.0184 28.9035C84.158 28.9035 84.2637 28.8316 84.3417 28.7055C84.4188 28.5802 84.53 27.6306 84.53 27.6306C84.53 27.6306 86.357 29.362 89.8157 29.362C93.8761 29.362 96.2047 27.3023 96.2047 20.116C96.2047 12.9294 92.4857 11.9904 89.9727 11.9904Z" fill="white"/>
+<path d="M41.0702 12.4769H37.728C37.728 12.4769 37.7229 8.06255 37.7229 8.06157C37.7229 7.89451 37.6368 7.81098 37.4437 7.81098H32.8892C32.7121 7.81098 32.617 7.88883 32.617 8.05902V12.6217C32.617 12.6217 30.3347 13.1727 30.1804 13.2172C30.0266 13.2618 29.9135 13.4035 29.9135 13.5726V16.4398C29.9135 16.646 30.0782 16.8123 30.2819 16.8123H32.617C32.617 16.8123 32.617 19.8111 32.617 23.71C32.617 28.8333 36.2108 29.3367 38.6359 29.3367C39.7439 29.3367 41.0694 28.9808 41.2882 28.9C41.4206 28.8513 41.4974 28.7143 41.4974 28.5657L41.5011 25.4115C41.5011 25.2059 41.3274 25.0395 41.1317 25.0395C40.937 25.0395 40.4388 25.1187 39.9259 25.1187C38.2843 25.1187 37.728 24.3553 37.728 23.3673C37.728 22.3801 37.7278 16.8123 37.7278 16.8123H41.0702C41.2739 16.8123 41.4388 16.646 41.4388 16.4398V12.8484C41.4388 12.6426 41.2739 12.4769 41.0702 12.4769Z" fill="white"/>
+<path d="M122.981 17.5094C122.981 19.1742 122.681 20.7279 122.082 22.1706C121.505 23.5912 120.706 24.8231 119.685 25.8663C118.664 26.9095 117.443 27.7307 116.022 28.33C114.624 28.9293 113.115 29.229 111.494 29.229C109.807 29.229 108.22 28.9182 106.733 28.2967C105.246 27.6752 103.959 26.8318 102.871 25.7664C101.783 24.6788 100.918 23.4025 100.274 21.9376C99.6527 20.4504 99.3419 18.8745 99.3419 17.2098C99.3419 15.5451 99.6527 13.9803 100.274 12.5153C100.918 11.0282 101.772 9.75192 102.838 8.68651C103.925 7.5989 105.213 6.74435 106.7 6.12286C108.187 5.50137 109.774 5.19062 111.461 5.19062C113.303 5.19062 115.046 5.54576 116.688 6.25603C118.331 6.96631 119.718 7.95403 120.85 9.21921L118.453 11.5498C117.587 10.551 116.533 9.78521 115.29 9.2525C114.069 8.6976 112.793 8.42015 111.461 8.42015C110.262 8.42015 109.13 8.64211 108.065 9.08603C107.022 9.52996 106.112 10.1514 105.335 10.9505C104.58 11.7274 103.981 12.6596 103.537 13.7472C103.115 14.8126 102.904 15.9668 102.904 17.2098C102.904 18.4528 103.126 19.6181 103.57 20.7057C104.014 21.7711 104.613 22.7033 105.368 23.5024C106.145 24.2792 107.055 24.9007 108.098 25.3669C109.164 25.8108 110.307 26.0327 111.528 26.0327C113.592 26.0327 115.345 25.4112 116.788 24.1683C118.253 22.9031 119.096 21.305 119.318 19.3739H111.561V16.3109H122.981V17.5094Z" fill="white"/>
+<path d="M126.245 28.8627V11.916H129.574V14.0802C130.085 13.2589 130.74 12.6374 131.539 12.2157C132.338 11.7718 133.237 11.5498 134.235 11.5498C134.591 11.5498 134.901 11.572 135.168 11.6164C135.434 11.6608 135.689 11.7274 135.933 11.8162V14.8126C135.623 14.7016 135.301 14.6129 134.968 14.5463C134.635 14.4797 134.302 14.4464 133.969 14.4464C132.992 14.4464 132.116 14.7127 131.339 15.2454C130.584 15.756 129.996 16.5217 129.574 17.5427V28.8627H126.245Z" fill="white"/>
+<path d="M143.245 29.1624C141.403 29.1624 139.905 28.6852 138.75 27.7307C137.596 26.7763 137.019 25.5333 137.019 24.0018C137.019 22.4037 137.63 21.1496 138.85 20.2396C140.071 19.3073 141.747 18.8412 143.878 18.8412C144.699 18.8412 145.498 18.93 146.275 19.1076C147.052 19.2629 147.795 19.4849 148.506 19.7734V17.9756C148.506 16.777 148.15 15.878 147.44 15.2787C146.73 14.6794 145.709 14.3798 144.377 14.3798C143.6 14.3798 142.79 14.5019 141.947 14.746C141.103 14.968 140.16 15.3231 139.117 15.8114L137.885 13.3144C139.15 12.7151 140.349 12.2823 141.481 12.0159C142.613 11.7274 143.733 11.5831 144.843 11.5831C147.041 11.5831 148.739 12.1158 149.937 13.1812C151.158 14.2244 151.768 15.7116 151.768 17.6426V28.8627H148.506V27.3978C147.751 27.9971 146.941 28.441 146.075 28.7296C145.21 29.0181 144.266 29.1624 143.245 29.1624ZM140.215 23.9352C140.215 24.7565 140.559 25.4223 141.248 25.9329C141.958 26.4434 142.879 26.6986 144.011 26.6986C144.899 26.6986 145.72 26.5654 146.475 26.2991C147.229 26.0327 147.906 25.6332 148.506 25.1005V22.1706C147.862 21.8155 147.185 21.5602 146.475 21.4049C145.764 21.2273 144.988 21.1385 144.144 21.1385C142.946 21.1385 141.991 21.3938 141.281 21.9043C140.571 22.4148 140.215 23.0918 140.215 23.9352Z" fill="white"/>
+<path d="M155.605 35.7546V11.916H158.901V13.5474C159.589 12.926 160.377 12.4598 161.265 12.1491C162.153 11.8162 163.096 11.6497 164.095 11.6497C165.293 11.6497 166.414 11.8827 167.458 12.3489C168.501 12.7928 169.4 13.4032 170.154 14.18C170.931 14.9569 171.542 15.878 171.986 16.9434C172.429 18.0089 172.651 19.152 172.651 20.3727C172.651 21.5935 172.429 22.7477 171.986 23.8353C171.542 24.9007 170.931 25.8219 170.154 26.5987C169.4 27.3756 168.49 27.9971 167.424 28.4632C166.359 28.9071 165.227 29.1291 164.028 29.1291C163.096 29.1291 162.186 28.9848 161.298 28.6963C160.432 28.4077 159.644 27.9971 158.934 27.4644V35.7546H155.605ZM163.662 14.5463C162.708 14.5463 161.82 14.7238 160.998 15.079C160.177 15.4341 159.489 15.9335 158.934 16.5772V24.2349C159.467 24.8563 160.144 25.3447 160.965 25.6998C161.809 26.0549 162.708 26.2325 163.662 26.2325C165.282 26.2325 166.636 25.6776 167.724 24.5678C168.834 23.458 169.389 22.0707 169.389 20.406C169.389 18.7413 168.834 17.3541 167.724 16.2443C166.614 15.1123 165.26 14.5463 163.662 14.5463Z" fill="white"/>
+<path d="M175.828 28.8627V5.55686L179.158 4.82439V13.614C179.824 12.9482 180.578 12.4487 181.422 12.1158C182.287 11.7607 183.231 11.5831 184.252 11.5831C186.183 11.5831 187.77 12.2046 189.013 13.4476C190.256 14.6683 190.877 16.2554 190.877 18.2086V28.8627H187.548V18.7746C187.548 17.4429 187.159 16.3996 186.383 15.645C185.628 14.8681 184.618 14.4797 183.353 14.4797C182.465 14.4797 181.655 14.6683 180.922 15.0457C180.212 15.423 179.624 15.9668 179.158 16.6771V28.8627H175.828Z" fill="white"/>
+<path d="M193.121 26.6653L194.919 24.4679C195.806 25.156 196.705 25.6887 197.615 26.066C198.548 26.4212 199.491 26.5987 200.445 26.5987C201.644 26.5987 202.621 26.3657 203.375 25.8996C204.13 25.4334 204.507 24.8231 204.507 24.0684C204.507 23.4691 204.285 22.9919 203.841 22.6367C203.398 22.2816 202.709 22.0374 201.777 21.9043L198.714 21.4714C197.049 21.2273 195.784 20.7168 194.919 19.9399C194.075 19.1409 193.653 18.0865 193.653 16.777C193.653 15.2454 194.264 14.0136 195.485 13.0813C196.705 12.1269 198.304 11.6497 200.279 11.6497C201.522 11.6497 202.698 11.8273 203.808 12.1824C204.94 12.5375 206.039 13.0813 207.104 13.8138L205.406 16.0112C204.474 15.3897 203.564 14.9458 202.676 14.6794C201.811 14.3909 200.934 14.2466 200.046 14.2466C199.025 14.2466 198.204 14.4575 197.582 14.8792C196.961 15.3009 196.65 15.8558 196.65 16.5439C196.65 17.1654 196.861 17.6426 197.283 17.9756C197.726 18.2863 198.448 18.5194 199.447 18.6747L202.51 19.1076C204.174 19.3517 205.44 19.8733 206.305 20.6724C207.193 21.4714 207.637 22.5258 207.637 23.8353C207.637 24.59 207.448 25.3003 207.071 25.9662C206.716 26.6098 206.216 27.1647 205.573 27.6309C204.951 28.097 204.208 28.4743 203.342 28.7629C202.476 29.0292 201.544 29.1624 200.545 29.1624C199.08 29.1624 197.704 28.9515 196.417 28.5298C195.152 28.1081 194.053 27.4866 193.121 26.6653Z" fill="white"/>
+</svg>

public/img/linkedin-box.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#2b3137"><path d="M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z" /></svg>

public/index.html

@@ -17,88 +17,59 @@
             crossorigin="anonymous">
     </script>
 </head>
-<body>
-    <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
-        <div id="header-title">
-            <a href="./index.html">
-                <img id="logo" src="./logo.svg" />
-            </a>
-        </div>
-        <div id="navigation">
-            <ul class="nav">
+<body class="home-page">
+    <nav class="navbar navbar-dark bg-dark navbar-expand-md">
+        <a class="navbar-brand" href="/"><img src="img/githubgraph-logo.svg" alt=""></a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div id="main-menu" class="collapse navbar-collapse">
+            <ul class="navbar-nav flex-fill justify-content-end">
                 <li class="nav-item">
-                    <a href="./GraphGenerator.html">
-                        Generate graphs
-                    </a>
+                    <a class="nav-link" href="./GraphGenerator.html">Generate graphs</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="https://github.com/jrtechs/github-graphs">
-                        View on GitHub
-                    </a>
+                    <a class="nav-link" href="https://github.com/jrtechs/github-graphs/">View on GitHub</a>
                 </li>
-                <div class="nav-sep"></div>
                 <li class="nav-item">
-                    <a href="./about.html">
-                        About
-                    </a>
+                    <a class="nav-link" href="./about.html">About</a>
                 </li>
             </ul>
         </div>
-    </div>
-    <div id="mainCarousel" class="carousel slide" data-ride="carousel">
-        <div class="carousel-inner">
-            <div class="carousel-item active">
-                <div class="image-vert text-center">
-                    <img class="img-fluid carousel-img" src="./img/friends.png" />
-                </div>
-            </div>
-            <div class="carousel-item">
-                <div class="image-vert text-center">
-                    <img class="img-fluid carousel-img" src="./img/repos.png" />
-                </div>
-            </div>
-            <div class="carousel-item">
-                <div class="image-vert text-center">
-                    <img class="img-fluid carousel-img" src="./img/orgs.png" />
-                </div>
-            </div>
-        </div>
-        <a class="carousel-control-prev" href="#mainCarousel" role="button" data-slide="prev" m="1">
-            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-            <span class="sr-only">Previous</span>
-        </a>
-        <a class="carousel-control-next" href="#mainCarousel" role="button" data-slide="next" m="1">
-            <span class="carousel-control-next-icon" aria-hidden="true"></span>
-            <span class="sr-only">Next</span>
-        </a>
-    </div>
-    <div class="main container-fluid" style="top: -50px;">
-        <div class="home-content row align-items-center">
-            <div class="side-txt col">
-                <div class="text-title text-center" style="padding: 10px;">
-                    <h1 class="m-title" style="padding-top: 5px;">What can I do here?</h1>
+    </nav>
+
+    <div class="main text-white">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-6">
+                    <div class="py-5">
+                        <h1 class="mb-3 font-weight-bold">What can I do here?</h1>
+                        <p>
+                            Head over to the 'Generate graphs' page and enter
+                            the username of a GitHub user. You can then select
+                            what kind of graph to generate based on that user.
+                        </p>
+                        <p>
+                            If you'd like to see how everything works, follow
+                            the link to GitHub, where you can view everything
+                            that went into making this functional.
+                        </p>
+                        <p>
+                            If you're interested in knowing more about this
+                            project, additional information can be found on
+                            the About page.
+                        </p>
+                    </div>
+                    <div class="py-5">
+                        <a href="./GraphGenerator.html" class="btn btn-lg btn-primary mr-2">Make a graph</a>
+                        <a href="https://github.com/jrtechs/github-graphs/" target="_blank" class="btn btn-lg btn-secondary">View on Github</a>
+                    </div>
                 </div>
-                <div class="text-content">
-                    <p style="position: relative; padding: 10px;">
-                        Head over to the 'Generate graphs' page and enter
-                        the username of a GitHub user. You can then select
-                        what kind of graph to generate based on that user.
-                    </p>
-                    <p style="position: relative; padding: 10px;">
-                        If you'd like to see how everything works, follow
-                        the link to GitHub, where you can view everything
-                        that went into making this functional.
-                    </p>
-                    <p style="position: relative; padding: 10px;">
-                        If you're interested in knowing more about this
-                        project, additional information can be found on 
-                        the About page.
-                    </p>
+                <div class="col-lg-6">
+                    <img src="img/home-image.png" alt="" class="img-fluid d-lg-none">
                 </div>
             </div>
-            <img class="side-img img-fluid col" style="top: 50px;" src="./img/recording.gif" />
         </div>
     </div>
 </body>
-</html>
+</html>

public/js/createOrgInfo.js

@@ -1,17 +1,23 @@
-function createOrgInfo(orgName, container) {    
+function createOrgInfo(orgName, container) {
     queryAPIByOrg("", orgName, (orgData) => {
-        console.log("called");
-        var html = "<div class=\"card\" style=\"w-100;\"><div class='row m-0'><div class='col-2 col-centered p-auto'>"+
-            "<img src='" + orgData.avatar_url + "' width='100%'/>" +
-        "</div><div class='col-10'>\
-            <div class=\"card-body\"> \
-                <center><b><h3 class=\"card-title\">"+orgData.name+"</h3><b><center> " +
-                (orgData.description != null ? "<div class=\"card-text\"><p>"+orgData.description+"</p></div>" : "") + " \
-            </div> \
-            <ul class=\"list-group list-group-flush\">"+
-                (orgData.location !=null ? "<li class=\"list-group-item\">Location: "+orgData.location+"</li>" : "") + " \
-            </ul> \
-        </div></div></div>";
+        var html = `
+            <div class="card shadow py-4 px-3">
+                <div class="row align-items-center">
+                    <div class="col-md-2 text-center">
+                        <img src="${orgData.avatar_url}" alt="${orgData.name}" class="img-fluid" style="max-width: 100px"/>
+                    </div>
+                    <div class="col-md-10">
+                        <div class="media-body">
+                            <h1 class="h4">${orgData.name}</h1>
+                            <p class="text-muted">${orgData.description}</p>
+                            <ul class="d-flex list-unstyled mb-0">
+                                <li>${orgData.location}</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
 
         $("#" + container).html(html);
 
@@ -19,4 +25,4 @@ function createOrgInfo(orgName, container) {
         alert("Organization Does Not Exist");
         window.location.href = "./GraphGenerator.html";
     });
-}
+}

public/js/createOrgTable.js

@@ -1,10 +1,15 @@
-function generateHtmlRow(repoData)
-{
-    var html = "<tr class=\"table_row\">";
-    html+="<td><a href='" + repoData.url + "'>" + repoData.name +  "</a></td>";
-    html+="<td>" + repoData.forks +  "</td>";
-    html+="<td>" + repoData.language +  "</td>";
-    html +="</tr>";
+function generateHtmlRow(repoData) {
+    var html = `
+        <tr>
+            <td>
+                ${repoData.language === 'null'
+                    ? '<div class="bg-light d-inline-block" style="height: 14px; width: 14px; border-radius: 7px"></div>'
+                    : `<i class="devicon-${repoData.language}-plain colored"></i>`}
+                <a class="text-reset ml-1" href="${repoData.url}">${repoData.name}</a>
+            </td>
+            <td class="text-right">${repoData.forks}</td>
+        </tr>
+    `;
     return html;
 }
 
@@ -43,21 +48,39 @@ function createOrgTable(orgName, tableContainer)
 {
     var html = "";
 
+    fetchAllRepositories(orgName, 1).then(function() {
+        for (var i=0; i < repos.length; i++) {
+            let icon = repos[i].language;
+            icon === null
+                ? icon = 'null'
+                : icon = icon.toLowerCase();
+
+            icon === 'c++'
+                ? icon = 'cplusplus'
+                : null;
+
+            icon === 'c#'
+                ? icon = 'csharp'
+                : null;
+
+
+            repos[i].language = icon;
 
-    fetchAllRepositories(orgName, 1).then(function()
-    {
-        for(var i=0; i < repos.length; i++)
-        {
             html += generateHtmlRow(repos[i]);
         }
 
         $("#" + tableContainer).html(html);
 
         setTimeout(function() {
-            $('#dataTable').DataTable();
+            $('#dataTable').DataTable({
+                pageLength: 15,
+                pagingType: 'simple',
+                bLengthChange : false,
+                "bFilter" : false
+            });
         }, 1500);
     }).catch(function(error)
     {
         //console.log("Unable to create table");
     });
-}
+}

public/js/profileGen.js

@@ -8,60 +8,43 @@ function profileGen(username, container)
             window.location.href = "./GraphGenerator.html";
         }
         parseOrgs(user.login).then( (orgsReturn) => {
-            let html = 
-            "<div class=\"card\" style=\"w-100; background-color:rgb(255,255,255);\"> \
-                <img class=\"card-img-top\" src=\""+user.avatar_url+"\"></img> \
-                <div class=\"row mx-0\" style=\"background-color:rgb(255,255,255);\"> \
-                    <div class=\"col-7 p-0\"> \
-                        <div class=\"card-body\" style=\"background-color:rgb(255,255,255);\">"+
-                            (user.name != null ? "<h5 class=\"card-title\">"+user.name+"</h5>" : "") +" \
-                            <h6 class=\"card-subtitle\">"+user.login+"</h5> \
-                        </div> \
-                    </div> \
-                    <div class=\"col-2 p-0\"> \
-                        <button type=\"button\" class=\"btn btn-link pt-3\"> \
-                            <a href=\""+graphUrl(user.login)+"\"> \
-                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> \
-                                    <path d=\"M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z\"/> \
-                                    <path fill=\"none\" d=\"M0 0h24v24H0z\"/> \
-                                </svg> \
-                            </a> \
-                        </button> \
-                    </div> \
-                    <div class=\"col-2 p-0\"> \
-                        <button type=\"button\" class=\"btn btn-link pt-3\"> \
-                            <a href=\""+timelineUrl(user.login)+"\"> \
-                                <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> \
-                                    <defs> \
-                                        <path id=\"a\" d=\"M0 0h24v24H0z\"/> \
-                                    </defs> \
-                                    <clipPath> \
-                                        <use xlink:href=\"#a\" overflow=\"visible\"/> \
-                                    </clipPath> \
-                                    <defs> \
-                                    <path id=\"b\" d=\"M0 0h24v24H0z\"/></defs><clipPath><use xlink:href=\"#b\" overflow=\"visible\"/> \
-                                    </clipPath> \
-                                    <path d=\"M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z\"/> \
-                                </svg> \
-                            </a> \
-                        </button> \
-                    </div> \
-                </div> \
-                    <div class=\"card-body py-1\" style=\"background-color:rgb(255,255,255);\"> \
-                        <p class=\"card-text\"><a href=\""+user.html_url+"\" class=\"card-link\">"+user.html_url+"</a></p> \ " +
-                        (user.blog != null ? "<p class=\"card-text \"><a href="+user.blog+" class=\"card-link\">"+user.blog+"</a></p>" : "")+" \
-                    </div> \
-                    <ul class=\"list-group list-group-flush\"> \
-                        <li class=\"list-group-item\">Followers: "+user.followers+"</li> \
-                        <li class=\"list-group-item\">Following: "+user.following+"</li> \
-                        <li class=\"list-group-item\">Repositories: "+user.public_repos+"</li>" +
-                        (user.bio != null ? "<li class=\"list-group-item\">Bio: "+user.bio+"</li>" : "")+
-                        (user.location != null ? "<li class=\"list-group-item\">Location: "+user.location+"</li>" : "")+
-                        (user.email != null ? "<li class=\"list-group-item\">Email: "+user.email+"</li>" : "")+
-                        (user.company != null ? "<li class=\"list-group-item\">Company: "+user.company+"</li>" : "")+
-                        (orgsReturn != [] ? "<li class=\"list-group-item\">"+orgsReturn+"</li>" : "")+ " \
-                    </ul> \
-            </div>";
+            let html = `
+                <div class="card shadow-sm" style="font-size: 16px;">
+                    <div class="card-img-top" style="position: relative;">
+                        <img src="${user.avatar_url}" alt="${user.avatar_url}" class="img-fluid"/>
+                        <div class="actions">
+                            <a href="${graphUrl(user.login)}" class="btns" title="View Friends Graph">
+                                <svg viewBox="0 0 24 24">
+                                    <path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
+                                </svg>
+                            </a>
+                            <a href="${timelineUrl(user.login)}" class="btns" title="View Timeline Graph">
+                                <svg viewBox="0 0 24 24">
+                                    <path d="M2,2H4V20H22V22H2V2M7,10H17V13H7V10M11,15H21V18H11V15M6,4H22V8H20V6H8V8H6V4Z" />
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <h5 class="card-title mb-1">${user.name}</h5>
+                        <a href="${user.html_url}" class="card-subtitle text-muted">${user.login}</a>
+                        ${user.bio != null ? `<p class="my-2">${user.bio}</p>` : ""}
+                        <ul class="list-unstyled">
+                            ${user.blog != null ? `<a href="${user.blog}"><li>${user.blog}</li></a>` : ""}
+                            ${user.email != null ? `<li>Email: ${user.email}</li>` : ""}
+                            ${user.location != null ? `<li>Location: ${user.location}</li>` : ""}
+                            ${user.company != null ? `<li>Company: ${user.company}</li>` : ""}
+                        </ul>
+                        <hr />
+                        <ul class="list-unstyled">
+                            <li>Followers: ${user.followers}</li>
+                            <li>Following: ${user.following}</li>
+                            <li>Repositories: ${user.public_repos}</li>
+                        </ul>
+                        ${orgsReturn != [] ? `<hr /> <p>Organizations</p> ${orgsReturn}` : ""}
+                    </div>
+                </div>
+            `;
             $("#"+container).html(html);
         })
     }, () =>
@@ -75,7 +58,7 @@ function parseOrgs(name) {
     return new Promise( (resolve, reject) => {
         let urlpath = `api/users/${name}/orgs`;
         let orgs_final = [];
-    
+
         queryUrl(urlpath, (orgs) => {
             var prom= [];
 
@@ -83,7 +66,7 @@ function parseOrgs(name) {
                 prom.push( new Promise( (res, rej) => {
                         url = orgs[i].url;
                         queryUrl(url, (orgData) => {
-                            orgs_final.push("<a href=\""+orgData.html_url+"\"><img src=\""+orgData.avatar_url+"\" class=\"img-fluid\" style=\"max-width:49%\"></img></a>");
+                            orgs_final.push("<a href=\""+orgData.html_url+"\"><img src=\""+orgData.avatar_url+"\" class=\"img-fluid\" style=\"max-width:35px\"></img></a>");
                             res();
                         }, (error) => {
                             console.log(error);
@@ -108,4 +91,4 @@ function graphUrl(user) {
 
 function timelineUrl(user) {
     return "/TimeLineGraph.html?name="+user;
-}
+}

public/js/profileTimeLine.js

@@ -41,78 +41,32 @@ function timeLineClickEvent(properties)
     {
         var item = repositoryData[properties.item];
 
-        var html = "<div class=\"card\">\n" +
-            "  <div class=\"card-header\">\n" +
-            item.name +
-            "  </div>\n" +
-            "  <div class=\"card-body\">\n";
-
-        html += "<p>" + item.description + "</p>";
-
-        console.log(item.license);
-        if(item.license === null)
-        {
+        if (item.license === null) {
             item.license = new Object();
-            item.license.name = 'none';
+            item.license.name = 'None';
         }
 
-        html += "<div class='row'><div class=\"col-6\">\n" +
-            "        <ul class=\"list-group\">\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Fork Count</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            item.forks +
-            "</div>\n" +
-            "            </li>\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Languages</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            item.language+
-            "</div>\n" +
-            "            </li>\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Liscense</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            item.license.name +
-            "</div></li>";
-            if(item.homepage !== null)
-            {
-                html +=
-                "            <li class=\"row\">\n" +
-                "                <div class=\"col-md-6\"><b>Home Page</b></div>\n" +
-                "                <div class=\"col-md-6\">" +
-                "<a href='" + item.homepage + "'>" +item.homepage + "</a>" +
-                "</div>\n" +
-                "            </li>\n" +
-                "        </ul>\n";
-            }
-
-
-        html += "</div><div class=\"col-6\">\n" +
-            "        <ul class=\"list-group\">\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Repository URL</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            "<a href='" + item.html_url + "'>" +item.html_url + "</a>" +
-            "</div>\n" +
-            "            </li>\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Open Issues</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            item.open_issues_count +
-            "</div>\n" +
-            "            </li>\n" +
-            "            <li class=\"row\">\n" +
-            "                <div class=\"col-md-6\"><b>Watchers</b></div>\n" +
-            "                <div class=\"col-md-6\">" +
-            item.watchers +
-            "</div>\n" +
-            "            </li>\n" +
-            "        </ul>\n" +
-            "    </div></div>";
-
-        html +="  </div>\n" +
-            "</div>";
+        var html = `
+            <div class="card shadow" style="font-size: 16px">
+                <div class="card-body">
+                    <h5 class="card-title">${item.name}</h5>
+                    <p class="card-subtitle text-muted">${item.description ? item.description : 'No description'}</p>
+                    <div class="row py-3">
+                        <div class="col-12 col-md-8">
+                            ${item.homepage ? `<p class="mb-0">Homepage: <a href="${item.license.name}">${item.license.name}</a></p>` : ''}
+                            <p class="mb-0">Repository URL: <a href="${item.html_url}">${item.html_url}</a></p>
+                            <p class="mb-0">Languages: ${item.language}</p>
+                            <p class="mb-0">License: ${item.license.name}</p>
+                        </div>
+                        <div class="col-12 col-md-4">
+                            <p class="mb-0">Fork Count: ${item.forks}</p>
+                            <p class="mb-0">Open Issues: ${item.open_issues_count}</p>
+                            <p class="mb-0">Watchers: ${item.watchers}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
 
         $("#repositoryInformation").html(html);
     }
@@ -154,4 +108,4 @@ function createProfileTimeLine(username, containerName)
         timeline.setItems(items);
         timeline.on('click', timeLineClickEvent);
     });
-}
+}

public/search.css

@@ -1,46 +0,0 @@
-#search-bar {
-    position: relative;
-    left: 50%;
-    transform: translate(-50%, 0%);
-    padding: 10px;
-    height: 60px;
-    width: 100%;
-    background-color: rgb(208, 208, 208);
-    border-radius: 20px;
-}
-
-#search {
-    padding-left: 20px;
-}
-
-.search-title {
-    position: relative;
-    padding-top: 5px;
-    width: 30%;
-}
-
-.search-col {
-    position: relative;
-    display: block;
-}
-
-.search-form {
-    position: relative;
-    left: 0px;
-    width: 100%;
-}
-
-@media (max-width: 767px) {
-    #search-bar {
-        height: 75px;
-        width: 70%;
-    }
-
-    .search-title {
-        width: 25%;
-    }
-    
-    .m-title {
-        font-size: 100%;
-    }
-}

public/style.css

@@ -1,263 +1,116 @@
-@font-face {
-    font-family: Comfortaa;
-    src: url(./fonts/Comfortaa-Regular.ttf);
-    font-weight: normal;
+:root {
+    --primary:rgba(16,116,231,1);
+    --secondary:rgba(46,188,79,1);
+    --dark:rgba(36,41,46,1);
+    --dark-2:rgba(43,49,55,1);
+    --white:rgba(255,255,255,1);
 }
 
-@font-face {
-    font-family: Comfortaa;
-    src: url(./fonts/Comfortaa-Light.ttf);
-    font-weight: lighter;
-}
-
-@font-face {
-    font-family: Comfortaa;
-    src: url(./fonts/Comfortaa-Bold.ttf);
-    font-weight: bold;
-}
-
-#header-bar {
-    height: 10%;
-    width: 100%;
-    background-color: rgb(208, 208, 208);
-}
-
-#header-title {
-    font-size: 25px;
-}
-
-#logo {
-    height: 60px;
-}
-
-#error-code {
-    font-family: Comfortaa;
-    font-size: 200px;
-    color: rgb(208, 208, 208);
-}
-
-#navigation {
-    position: absolute;
-    right: 20px;
-}
-
-#dcimg {
-    width: 300px;
-}
-
-#mainCarousel {
-    height: 500px;
-    background-color: #232323;
-}
-
-.carousel-item {
-    height: 500px;
-    overflow: hidden;
-    vertical-align: middle;
-}
-
-.carousel-img {
-    width: 100%;
-    min-height: 300px;
-    display: inline-block;
-    top: 0%;
-    left: 0%;
-    position: absolute;
-}
-
-.img-vert {
-    display: inline-block;
-    height: 100%;
-}
-
-.error {
-    color: rgb(208, 208, 208);
-}
-
-.big-title {
-    font-family: Comfortaa;
-    font-weight: bold;
-    font-size: 60px;
-}
-
-.l-title {
-    font-family: Comfortaa;
-    font-weight: normal;
-    font-size: 40px;
-}
-
-.m-title {
-    font-family: Comfortaa;
-    font-weight: normal;
-    font-size: 150%;
-}
-
-.nav-sep {
-    position: relative;
-    left: 10px;
-    top: 6px;
-    padding-left: 20px;
-    border-left: 2px solid #232323;
-    height: 30px;
+body {
+    font-size: 18px;
+    color: var(--dark-2);
 }
 
-.nav-item {
-    padding: 5px;
-    font-size: 20px;
-}
 
-.nav-item a {
-    color: #232323;
-    text-decoration: none;
-}
+/* Bootstrap overides
+----------------------------------------------- */
 
-.nav-item a:hover {
-    color: rgb(250, 152, 33);
-    text-decoration: none;
+.bg-dark {
+    background-color: var(--dark) !important;
 }
 
-.home-content {
-    padding: 20px;
-    width: 100%;
-    max-height: 40px;
+.bg-dark-2 {
+    background-color: var(--dark-2);
 }
 
-.side-img {
-    display: block;
-    position: relative;
-    width: 50%;
-    height: 100%;
-    max-height: 400px;
-    max-width: 400px;
+.btn-primary {
+    background-color: var(--primary);
+    border-color: var(--primary);
 }
 
-.side-txt {
-    display: block;
-    position: relative;
-    width: 50%;
+.btn-secondary {
+    background-color: var(--dark-2);
+    border-color: var(--dark-2);
 }
 
-.text-title {
-    background-color: rgb(208, 208, 208);
-    border-radius: 20px 20px 0px 0px;
+.navbar-dark .navbar-nav .nav-item.active .nav-link {
+    font-weight: 600;
 }
 
-.text-content {
-    background-color: rgb(242, 242, 242);
-    border-radius: 0px 0px 20px 20px;
+.container-xl {
+    max-width: 1280px;
+    margin: auto;
 }
 
-.card-deck {
-    position: relative;
-    padding-top: 20px;
-}
 
-.card {
-    background-color: rgb(208, 208, 208);
+.main {
+    background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark-2) 420px, var(--white) 420px);
 }
 
-.card-header {
-    background-color: rgb(208, 208, 208);
+@media screen and (min-width: 768px) {
+    .main {
+        background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark-2) 360px, var(--white) 360px);
+    }
 }
 
-.card-body {
-    background-color: rgb(242, 242, 242);
-}
+@media screen and (min-width: 992px) {
+    .main {
+        background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark-2) 420px, var(--white) 420px);
+    }
 
-.rounder {
-    border-radius: 20px !important;
+    .home-page .main::before {
+        display: block;
+        content: '';
+        position: absolute;
+        right: 0;
+        height: 90vh;
+        width: 50vw;
+        background-image: url(./img/home-image.png);
+        background-repeat: no-repeat;
+    }
 }
 
-.main {
-    position: relative;
-    top: 10px;
+@media screen and (min-width: 768px) {
+    .friends-graph-page #profileGen,
+    .timeline-graph-page #profileGen {
+        margin-top: -84px
+    }
 }
 
-.footer {
-    background-color: rgb(208, 208, 208);
+.card .actions {
     position: absolute;
-    height: 70px;
-    width: 100%;
-    bottom: 0px;
+    right: 16px;
+    bottom: 16px;
 }
 
-.footer-text {
-    position: relative;
-    top: 15px;
-    left: 70px;
+.card .actions .btns {
+    display: inline-block;
+    padding: 8px;
+    margin-left: 8px;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.1);
+    background-color: white;
+    transition: box-shadow .3s ease-out;
 }
 
-.plink {
-    color: rgb(250, 152, 33);
+.card .actions .btns:hover {
+    box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.06);
 }
 
-body {
-    background-color: #232323;
+.card .actions .btns svg {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    height: 24px;
+    width: 24px;
+    fill: var(--dark-2);
+    opacity: 0.64;
+    transition: opacity .3s ease-out;
 }
 
-@media (max-width: 767px) {
-    .big-title {
-        font-size: 30px;
-    }
-
-    .side-img {
-        display: none;
-    }
-
-    .side-txt {
-        position: absolute;
-        top: 10px;
-        left: 50%;
-        transform: translate(-50%, 0%);
-        width: 100%;
-    }
-
-    #navigation {
-        position: absolute;
-        top: 50px;
-        left: 50%;
-        transform: translate(-50%, 0%);
-        width: 400px
-    }
-
-    .nav-item {
-        font-size: 19px;
-    }
-
-    #header-bar {
-        height: 100px;
-    }
-
-    #header-title {
-        left: 0px;
-        width: 20%;
-    }
-
-    #logo {
-        position: absolute;
-        left: 50%;
-        transform: translate(-50%, 0%);
-        height: 60px;
-    }
-
-    .card {
-        align-self: center;
-        width: 80%;
-    }
-
-    .carousel-img {
-        width: 100%;
-        min-height: 200px;
-        display: inline-block;
-        top: 10px;
-        position: relative;
-    }
+.card .actions .btns:hover svg {
+    fill: var(--primary);
+    opacity: 1;
 }
-
-.containerCustom {
-    width: 100%;
-    padding-right: 0px;
-    padding-left: 0px;
-    margin-right: 0px;
-    margin-left: 0px;
-}