init ghrepos and more images, thanks to @2kabhishek

6 files changed, 538 insertions, 19 deletions

diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
new file mode 100644
index 00000000..fb038036
--- /dev/null
+++ b/src/css/ghrepo.css
@@ -0,0 +1,296 @@
+@media (prefers-color-scheme: light) {
+    :root {
+        --text: #151515;
+        --accent: #1688f0;
+        --bg-main: #fff;
+        --bg-repo: #f0f0f0;
+        --bg-user: #f5f5f5;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text: #e5e5e5;
+        --accent: #1688f0;
+        --bg-main: #000;
+        --bg-repo: #0f0f1a;
+        --bg-user: #0a0a0f;
+    }
+}
+
+* {
+    box-sizing: border-box;
+    /* background-image: url(/images/backgroundNightCity.jpg); */
+    background: transparent;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    margin-top: (3em);
+    font-family: 'Open Sans', sans-serif;
+    background-image: url(/images/heigh-grass.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    font-size: 16px;
+}
+
+main {
+  margin-top: 3em
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 90%;
+    max-width: 1280px;
+    background: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.container small, h1 {
+  background: transparent;
+}
+
+.hide {
+    /* '!important' is to make sure that when we add the class using JS, it takes precendence */
+    display: none !important;
+}
+
+h1 {
+    color: var(--accent);
+    margin-bottom: 4px;
+}
+
+small {
+    width: 100%;
+    text-align: center;
+    display: block;
+    margin-bottom: 20px;
+}
+
+h2 {
+    width: 100%;
+    text-align: center;
+    color: var(--text);
+    margin: 0;
+}
+
+img {
+    border: 2px solid var(--accent);
+    box-shadow: 0 0px 6px var(--accent), 0 0px 6px var(--accent);
+    max-width: 100%;
+    height: auto;
+}
+
+a {
+    background: transparent;
+    color: var(--accent);
+    text-decoration: none;
+}
+
+a:hover {
+    /* color: var(--text); */
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.github-img {
+    width: 45px;
+    margin-right: 8px;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+.user-info {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    /* background-image: url(/images/backgroundNightCity.jpg); */
+    background: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: var(--text);
+    font-size: 18px;
+    padding: 2em;
+    border-radius: 16px;
+}
+
+.user-info figure {
+    width: 90%;
+    max-width: 250px;
+    background: transparent;
+}
+
+.user-info img {
+    border-radius: 100%;
+}
+
+.user-info div {
+    display: flex;
+    text-align: center;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    padding-left: 5%;
+}
+
+.user-info div p {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid var(--text);
+    padding-bottom: 18px;
+    background: transparent;
+}
+
+.filter-repos,
+input {
+    background: rgba(10, 10, 15, 0.3);
+    width: 50%;
+    border-radius: 20px;
+    min-width: 300px;
+    margin-top: 1em;
+    padding: 1em;
+    margin-bottom: 1em;
+    border: 2px solid var(--accent);
+    text-align: center;
+}
+
+.filter-repos:hover {
+  background: rgba(10, 10, 15, 0.5);
+}
+
+.repos {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    background: rgba(128, 128, 128, 0.2);
+    margin-top: 0;
+    padding: 2em;
+    /* border-bottom-left-radius: 20px; */
+    /* border-bottom-right-radius: 20px; */
+    border-radius: 16px;
+    margin-bottom: 4em;
+}
+
+h3 {
+    margin: 4px;
+    width: 100%;
+    text-align: center;
+    color: var(--accent);
+}
+
+.repo-list {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    background: transparent;
+    /* background: rgba(128, 128, 128, 0.2); */
+
+}
+
+.repo-list li {
+    width: 100%;
+    min-height: 180px;
+    border-radius: 10px;
+    margin: 1em 0;
+    border: 1px solid var(--accent);
+    padding: 1em;
+    text-align: center;
+    background: transparent;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    /* background: rgba(128, 128, 128, 0.3); */
+}
+
+.repo-list h3, span{
+  background: transparent;
+}
+
+.repo-list li:hover {
+    box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent);
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.link-btn {
+    padding: 10px 20px;
+    /* background: var(--bg-main); */
+    /* background: rgba(0, 0, 0, 0.5); */
+    background: rgba(128, 128, 128, 0.1);
+    border-radius: 30px;
+    border: 2px solid var(--accent);
+    color: var(--text);
+}
+
+.link-btn:hover {
+    background: rgba(22, 136, 240, 0.5);
+    border: 2px solid var(--text);
+    transform: scale(1.1);
+}
+
+.repo-list p {
+    padding: 0em 0.5em;
+    margin: 0.5em 0;
+    background: transparent;
+}
+
+.user-info {
+  background: transparent;
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+
+}
+
+@media (min-width: 700px) {
+    .user-info div {
+        width: 45%;
+        text-align: left;
+        /* background: rgba(10, 10, 15, 0.1); */
+        background: transparent;
+    }
+
+    .repo-list {
+        justify-content: space-between;
+    }
+
+    .repo-list li {
+        width: 48%;
+    }
+}
+
+.repo {
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+
+}
+
+.user-info * {
+  background: transparent;
+}
+
+@media (max-width: 700px) {
+    .user-info div p {
+        margin: 10px;
+        
+    }
+}
+
+@media (min-width: 1200px) {
+    .repo-list li {
+        width: 30%;
+    }
+}
diff --git a/src/css/index.css b/src/css/index.css
index ea48c8ff..29262abf 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -33,8 +33,8 @@
     height: 100%;
     border: 1px solid rgba(255,255,255, .5);
     border-radius: 0.7em;
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
     box-shadow: 0 0 10mm rgba(0,0,0,.7);
     display: flex;
     justify-content: center;
@@ -50,7 +50,7 @@
 
 .window .placeholder .text .title {
     font-family: smooth;
-    font-size: 15vw;
+    font-size: 12.5vw;
 }
 
 .window .placeholder .text .br {
@@ -59,17 +59,3 @@
     width: 0;
     margin-bottom: 5vh;
 }
-
-
-/* programs =============================================== */
-
-.programs {
-    text-align: center;
-    background-color: #F4E8C1;
-    color: #331E38;
-}
-
-.programs .programsList {
-    padding: 10vw;
-    line-height: 40px;
-}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index 3966446b..410e9646 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -43,7 +43,7 @@ header {
     height: 3em;
     justify-content: space-between;
     align-items:center;
-    background: color(0, 0, 0, .1);
+    /* background: color(0, 0, 0, .1); */
     z-index: 1000;
     background-color: #331E38;
 }
@@ -82,6 +82,9 @@ header {
     transform: scaleX(1);
 }
 
+.navBar a:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
 
 .navBar a.active::after {
     content: '';
@@ -106,4 +109,4 @@ header {
 
 section {
     position: relative;
-}
\ No newline at end of file
+}
diff --git a/src/html/headers.html b/src/html/headers.html
new file mode 100644
index 00000000..b212099b
--- /dev/null
+++ b/src/html/headers.html
@@ -0,0 +1,13 @@
+<!-- header -->
+<header id="navBarHeader">
+    <nav class="navBar">
+        <div class="left">
+            <a id="btnHome" href="/">Home<span></span></span></a>
+        </div>
+        <div class="right">
+            <a href="/pages/repo/github/repos.html" id="btnGhRepo">Github Repos</a>
+            <a href="/pages/info/about.html" id="btnAbout">About</a>
+            <a href="/pages/info/contact.html" id="btnContact">Contact</a>
+        </div>
+    </nav> 
+</header>
diff --git a/src/js/getrepo.js b/src/js/getrepo.js
new file mode 100644
index 00000000..4c92b9c3
--- /dev/null
+++ b/src/js/getrepo.js
@@ -0,0 +1,193 @@
+const username = 'littleblack111';
+const clientId = '8aa6ec904eca5e0bc1e3'
+const clientSecret = 'b9ac8092b0b95f86871f5d1da81f666146d71200';
+const hideForks = true;
+const repoList = document.querySelector('.repo-list');
+const reposSection = document.querySelector('.repos');
+const filterInput = document.querySelector('.filter-repos');
+
+// get information from github profile
+const getProfile = async () => {
+    const res = await fetch(
+        `https://api.github.com/users/${username}`,
+        {
+            headers: {
+                Accept: 'application/vnd.github+json',
+                Authorization: //'token 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'
+                  `Basic ${btoa(`${clientId}:${clientSecret}`)}`
+            }
+        }
+    );
+    const profile = await res.json();
+    displayProfile(profile);
+};
+getProfile();
+
+// display infomation from github profile
+const displayProfile = (profile) => {
+    const userInfo = document.querySelector('.user-info');
+    userInfo.innerHTML = `
+        <figure>
+            <img alt="user avatar" src=${profile.avatar_url} />
+        </figure>
+        <div>
+            <h2><a href=${profile.blog}><strong>${profile.name}</strong></a></h2>
+            <p>${profile.bio}</p>
+            <p>
+              <strong>Mail:</strong> ${profile.email}
+            </p>
+            <p>
+                <strong>Location:</strong> ${profile.location}
+            </p>
+            <p>
+                <strong>@${profile.login} </strong>
+                Repos: ${profile.public_repos}
+                Gists: ${profile.public_gists}
+            </p>
+        </div>
+    `;
+};
+
+// get list of user's public repos
+const getRepos = async () => {
+    let repos = [];
+    let res;
+    res = await fetch(
+        `https://api.github.com/users/${username}/repos?&sort=pushed`,
+        {
+            headers: {
+                Accept: 'application/vnd.github+json',
+                Authorization:
+                  `Basic ${btoa(`${clientId}:${clientSecret}`)}`
+                    // 'token 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'
+            }
+        }
+    );
+    let data = await res.json();
+    repos = repos.concat(data);
+    repos.sort((a, b) => b.forks_count - a.forks_count);
+    repos.sort((a, b) => b.stargazers_count - a.stargazers_count);
+    displayRepos(repos);
+};
+getRepos();
+
+// display list of all user's public repos
+const displayRepos = (repos) => {
+    const userHome = `https://github.com/${username}`
+    filterInput.classList.remove('hide');
+    for (const repo of repos) {
+        if (repo.fork && hideForks) {
+            continue;
+        }
+
+        const langUrl = `${userHome}?tab=repositories&q=&language=${repo.language}`
+        const starsUrl = `${userHome}/${repo.name}/stargazers`
+        const forksUrl = `${userHome}/${repo.name}/network/members`
+
+        let listItem = document.createElement('li');
+        listItem.classList.add('repo');
+        listItem.innerHTML = `
+            <h3>${repo.name}</h3>
+            <span>${repo.description ? `<span>${repo.description}</span>` : ''}<br/><br/>`
+
+        if (repo.stargazers_count > 0) {
+            listItem.innerHTML += `<a href="${starsUrl}">
+            <span>⭐ ${repo.stargazers_count}</span></a>`
+        }
+
+        if (repo.language) {
+            listItem.innerHTML += `<a href="${langUrl}">
+            <span>${devicons[repo.language]}</span></a>`
+        }
+
+        if (repo.forks_count > 0) {
+            listItem.innerHTML += `<a href="${starsUrl}">
+            <span>${devicons["Git"]} ${repo.forks_count}</span></a>`
+        }
+
+        if (repo.homepage && repo.homepage !== "") {
+            listItem.innerHTML += `<br /> <br />
+            <a class="link-btn" href=${repo.html_url}>Code ${devicons["Github"]}</a>
+            <a class="link-btn" href=${repo.homepage}>Live ${devicons["Chrome"]}</a> <br />`;
+        } else {
+            listItem.innerHTML += `<br /> <br />
+            <a class="link-btn" href=${repo.html_url}>View Project ${devicons["Github"]}</a><br />`;
+        }
+
+        repoList.append(listItem);
+    }
+};
+
+// dynamic search
+filterInput.addEventListener('input', (e) => {
+    const search = e.target.value;
+    const repos = document.querySelectorAll('.repo');
+    const searchLowerText = search.toLowerCase();
+
+    for (const repo of repos) {
+        const lowerText = repo.innerText.toLowerCase();
+        if (lowerText.includes(searchLowerText)) {
+            repo.classList.remove('hide');
+        } else {
+            repo.classList.add('hide');
+        }
+    }
+});
+
+// for programming language icons
+const devicons = {
+    Git: '<i class="devicon-git-plain" style="color: #555"></i>',
+    Github: '<i class="devicon-github-plain" style="color: #1688f0"></i>',
+    Chrome: '<i class="devicon-chrome-plain" style="color: #1688f0"></i>',
+    Assembly: '<i class="devicon-labview-plain colored"></i> Assembly',
+    'C#': '<i class="devicon-csharp-plain colored"></i> C#',
+    'C++': '<i class="devicon-cplusplus-plain colored"></i> C++',
+    C: '<i class="devicon-c-plain colored"></i> C',
+    Clojure: '<i class="devicon-clojure-plain colored"></i> C',
+    CoffeeScript:
+        '<i class="devicon-coffeescript-plain colored"></i> CoffeeScript',
+    Crystal: '<i class="devicon-crystal-plain colored"></i> Crystal',
+    CSS: '<i class="devicon-css3-plain colored"></i> CSS',
+    Dart: '<i class="devicon-dart-plain colored"></i> Dart',
+    Dockerfile: '<i class="devicon-docker-plain colored"></i> Docker',
+    Elixir: '<i class="devicon-elixir-plain colored"></i> Elixir',
+    Elm: '<i class="devicon-elm-plain colored"></i> Elm',
+    Erlang: '<i class="devicon-erlang-plain colored"></i> Erlang',
+    'F#': '<i class="devicon-fsharp-plain colored"></i> F#',
+    Go: '<i class="devicon-go-plain colored"></i> Go',
+    Groovy: '<i class="devicon-groovy-plain colored"></i> Groovy',
+    HTML: '<i class="devicon-html5-plain colored"></i> HTML',
+    Haskell: '<i class="devicon-haskell-plain colored"></i> Haskell',
+    Java: '<i class="devicon-java-plain colored" style="color: #ffca2c"></i> Java',
+    JavaScript: '<i class="devicon-javascript-plain colored"></i> JavaScript',
+    Julia: '<i class="devicon-julia-plain colored"></i> Julia',
+    'Jupyter Notebook': '<i class="devicon-jupyter-plain colored"></i> Jupyter',
+    Kotlin: '<i class="devicon-kotlin-plain colored" style="color: #796bdc"></i> Kotlin',
+    Latex: '<i class="devicon-latex-plain colored"></i> Latex',
+    Lua: '<i class="devicon-lua-plain-wordmark colored" style="color: #0000d0"></i> Lua',
+    Matlab: '<i class="devicon-matlab-plain colored"></i> Matlab',
+    Nim: '<i class="devicon-nixos-plain colored" style="color: #FFC200"></i> Nim',
+    Nix: '<i class="devicon-nixos-plain colored"></i> Nix',
+    ObjectiveC: '<i class="devicon-objectivec-plain colored"></i> ObjectiveC',
+    OCaml: '<i class="devicon-ocaml-plain colored"></i> OCaml',
+    Perl: '<i class="devicon-perl-plain colored"></i> Perl',
+    PHP: '<i class="devicon-php-plain colored"></i> PHP',
+    PLSQL: '<i class="devicon-sqlite-plain colored"></i> PLSQL',
+    Processing:
+        '<i class="devicon-processing-plain colored" style="color: #0096D8"></i> Processing',
+    Python: '<i class="devicon-python-plain colored" style="color: #3472a6"></i> Python',
+    R: '<i class="devicon-r-plain colored"></i> R',
+    Ruby: '<i class="devicon-ruby-plain colored"></i> Ruby',
+    Rust: '<i class="devicon-rust-plain colored" style="color: #DEA584"></i> Rust',
+    Sass: '<i class="devicon-sass-original colored"></i> Sass',
+    Scala: '<i class="devicon-scala-plain colored"></i> Scala',
+    Shell: '<i class="devicon-bash-plain colored" style="color: #89E051"></i> Shell',
+    Solidity: '<i class="devicon-solidity-plain colored"></i> Solidity',
+    Stylus: '<i class="devicon-stylus-plain colored"></i> Stylus',
+    Svelte: '<i class="devicon-svelte-plain colored"></i> Svelte',
+    Swift: '<i class="devicon-swift-plain colored"></i> Swift',
+    Terraform: '<i class="devicon-terraform-plain colored"></i> Terraform',
+    TypeScript: '<i class="devicon-typescript-plain colored"></i> TypeScript',
+    'Vim Script': '<i class="devicon-vim-plain colored"></i> Vim Script',
+    Vue: '<i class="devicon-vuejs-plain colored"></i> Vue',
+};
diff --git a/src/js/includehtml.js b/src/js/includehtml.js
new file mode 100644
index 00000000..7b00285f
--- /dev/null
+++ b/src/js/includehtml.js
@@ -0,0 +1,28 @@
+function includeHTML() {
+  var z, i, elmnt, file, xhttp;
+  /*loop through a collection of all HTML elements:*/
+  z = document.getElementsByTagName("*");
+  for (i = 0; i < z.length; i++) {
+    elmnt = z[i];
+    /*search for elements with a certain atrribute:*/
+    file = elmnt.getAttribute("include-html");
+    if (file) {
+      /*make an HTTP request using the attribute value as the file name:*/
+      xhttp = new XMLHttpRequest();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState == 4) {
+          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
+          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
+          /*remove the attribute, and call this function once more:*/
+          elmnt.removeAttribute("include-html");
+          includeHTML();
+        }
+      }      
+      xhttp.open("GET", file, true);
+      xhttp.send();
+      /*exit the function:*/
+      return;
+    }
+  }
+};
+