diff --git a/.gitignore b/.gitignore index 8b13789..dbe9c82 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ - +.vscode/ \ No newline at end of file diff --git a/LICENSE b/LICENSE index f288702..78651f6 100644 --- a/LICENSE +++ b/LICENSE @@ -657,7 +657,7 @@ notice like this when it starts in an interactive mode: This is free software, and you are welcome to redistribute it under certain conditions; type `show c' for details. -The hypothetical commands `show w' and `show c' should show the appropriate +The hypothetical commands `show w' and`show c' should show the appropriate parts of the General Public License. Of course, your program's commands might be different; for a GUI interface, you would use an "about box". diff --git a/README.md b/README.md index 57deb75..9c647f2 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,32 @@
-

Projects

+

Projects

- -License + + License - -People + + People - -Stars + + Stars - -Forks + + Forks - -Watches + + Watches - -Last Updated + + Last Updated -

Showcase All Your Projects πŸ›οΈπŸŽ‡

+

Showcase All Your Projects πŸ›οΈπŸŽ‡

-
- projects screenshot -
-
projects screenshot
-
+
+ projects screenshot +
+
Preview screenshot
+
@@ -39,71 +39,68 @@ Also shows pretty programming icons using `devicons`. ## Inspiration -Needed a way to display all my projects, that should auto update from GitHub +Needed a way to display all my projects, used my [portfolio's project section](https://halip26.github.io/#projects) as inspiration. ## Getting Projects To get projects, follow these steps: ```bash -git clone https://github.com/2kabhishek/projects +git clone https://github.com/Halip26/projects.git cd projects ``` ### Setup Your Own Projects -You can set up projects for yourself by following these steps: +You can easily set up projects to show your own repos. -- Fork the repo: https://github.com/2kabhishek/projects -- Clone it locally / Open it in GitHub Codespaces +- Fork the repo +- Clone it - Open up `script.js` and update the `username` variable to your GitHub username. -- Open up `index.html` and update the `title` tag to make it your own. -- You may also want to update the favicon by updating the `link` tag in `index.html` -- Commit and push your changes -- Go to repo settings on GitHub, under `Pages` enable GitHub Pages. - - Choose 'Deploy from a branch' with the `main` branch and `/` as the root directory. -- Done! +- Open up `index.html` and update the `title` tag to make it your username. +- You may also want to update the favicon too, update the `link` tag in `index.html` +- Push your changes +- Go to repo settings on GitHub and enable GitHub Pages. The site should be live on `https://.github.io/projects` +Here's the projects page for [@sindresorhus](github.com/sindresorhus) + +![sindresorhus's projects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n78j6j4itdbad2cg2h0h.png) + #### Number Of Repos -The number of repos shown changes with the `maxPages` variable, the GitHub API supports 100 repos per page max. +The number of repos is controlled by the `maxPages` variable, the GitHub API supports 100 repos per page max. If you have less than 100 repos, set `maxPages` to 1, if you have 300 then 3. You can also edit the fetch query to reduce the per page repo count. +> There's no pagination, all repos are shown on the same page. -> There's no pagination, all repos show up on the same page. - -### Forked Repos - -To show forked repos set `hideForks = false` in `script.js` - -### Authenticated Requests +#### Authenticated Requests If you are working locally and notice the API is not sending over data, it might be because of rate limit on GitHub API requests. You can either wait for an hour or setup a personal access token on GitHub and pass that into the fetch request in `script.js` -### Themes - -Comes with a dark and light theme by default, depends upon your system and browser settings. +#### Programming Language Icons -Edit the variables under `:root` in `styles.css` to change color scheme. +This project uses [Devicon](https://devicon.dev/) for adding language icons, if the language name and icon are not being +displayed correctly for any of your repos, update `devicons` mapping in `script.js`. -### Programming Language Icons +## Viewing projects -This project uses [Devicon](https://devicon.dev/) for adding language icons, if the language name and icon are not -displayed, for any of your repos, update `devicons` mapping in `script.js`. +Open `index.html` in your favorite browser or visit [Halip26.github.io/projects](https://halip26.github.io/projects). ## How it was built -I built `Projects` using `HTML` `CSS` `JavaScript` and Neovim +Projects was built using `HTML` `CSS` & `JavaScript`. +It was built on Neovim and the python http server. +Uses GitHub API for data and Devicons for programming icons. ## What I learned -- Learned about some quirks of the fetch API, during implementation of `maxPages`. -- Revisited Flex, box-shadow and some other CSS tricks +- Learned about a few quirks of the fetch API, especially implementation of `maxPages`. +- Flex, box-shadow and some other CSS tricks were revisited. ## What's next @@ -115,6 +112,6 @@ Hit the ⭐ button if you found this useful.
-Source | Website +Source | Website
diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..2f7efbe --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-minimal \ No newline at end of file diff --git a/images/favicon.png b/images/favicon.png deleted file mode 100644 index f7048fa..0000000 Binary files a/images/favicon.png and /dev/null differ diff --git a/images/favicon.svg b/images/favicon.svg new file mode 100644 index 0000000..29f1466 --- /dev/null +++ b/images/favicon.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Halip’s + Projects + + + diff --git a/images/screenshot.png b/images/screenshot.png index 3ff72d9..131c62a 100644 Binary files a/images/screenshot.png and b/images/screenshot.png differ diff --git a/index.html b/index.html index 74401a4..01e1ddd 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,55 @@ - + - 2KAbhishek's Projects - + + + + + + + + + + + + + Halip26's Projects + + + + + -

All Of My Projects

- Some useful, some stupid, all fun! + Some useful, some stupid, some flexing, all fun!
@@ -30,10 +62,121 @@

All Of My Projects

/> -

- Made with ❀ by - 2KAbhishek X OSS -

+ +

Made with ❀ by Halip26

+ © Halip26 | All rights + reserved
+ + + + + diff --git a/script.js b/script.js index de6b5d7..0734d3a 100644 --- a/script.js +++ b/script.js @@ -1,190 +1,161 @@ -const username = '2KAbhishek'; +const username = "Halip26"; const maxPages = 3; -const hideForks = true; -const repoList = document.querySelector('.repo-list'); -const reposSection = document.querySelector('.repos'); -const filterInput = document.querySelector('.filter-repos'); +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 your-personal-access-token-here' - // } - // } - ); - const profile = await res.json(); - displayProfile(profile); +const getProfile = async function () { + const res = await fetch( + `https://api.github.com/users/${username}` + // { + // headers: { + // Accept: 'application/vnd.github+json', + // Authorization: 'token your-personal-access-token-here' + // } + // } + ); + const profile = await res.json(); + displayProfile(profile); }; getProfile(); -// display information from github profile -const displayProfile = (profile) => { - const userInfo = document.querySelector('.user-info'); - userInfo.innerHTML = ` +// display infomation from github profile +const displayProfile = function (profile) { + const userInfo = document.querySelector(".user-info"); + userInfo.innerHTML = `
user avatar
-

${profile.name} - ${profile.login}

+

${profile.name}

${profile.bio}

- Followers: ${profile.followers} - Repos: ${profile.public_repos} - Gists: ${profile.public_gists} + Location: ${profile.location}

- Work: ${profile.company} - Location: ${profile.location} + @${profile.login} + Repos: ${profile.public_repos} + Gists: ${profile.public_gists}

`; }; // get list of user's public repos -const getRepos = async () => { - let repos = []; - let res; - for (let i = 1; i <= maxPages; i++) { - res = await fetch( - `https://api.github.com/users/${username}/repos?&sort=pushed&per_page=100&page=${i}` - // { - // headers: { - // Accept: 'application/vnd.github+json', - // Authorization: - // 'token your-personal-access-token-here' - // } - // } - ); - 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); +const getRepos = async function () { + let repos = []; + let res; + for (let i = 1; i <= maxPages; i++) { + res = await fetch( + `https://api.github.com/users/${username}/repos?&sort=pushed&per_page=100&page=${i}` + // { + // headers: { + // Accept: 'application/vnd.github+json', + // Authorization: + // 'token your-personal-access-token-here' + // } + // } + ); + let data = await res.json(); + repos = repos.concat(data); + } + 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 = ` +const displayRepos = function (repos) { + filterInput.classList.remove("hide"); + for (const repo of repos) { + let listItem = document.createElement("li"); + listItem.classList.add("repo"); + listItem.innerHTML = `

${repo.name}

- ${repo.description}

`; - - if (repo.stargazers_count > 0) { - listItem.innerHTML += ` - ⭐ ${repo.stargazers_count}`; - } - - if (repo.language) { - listItem.innerHTML += ` - ${devicons[repo.language]}`; - } - - if (repo.forks_count > 0) { - listItem.innerHTML += ` - ${devicons['Git']} ${repo.forks_count}`; - } - - if (repo.homepage && repo.homepage !== '') { - listItem.innerHTML += `

- Code ${devicons['Github']} - Live ${devicons['Chrome']}
`; - } else { - listItem.innerHTML += `

- View Project ${devicons['Github']}
`; - } - - repoList.append(listItem); - } + ${repo.description}

+ ${devicons[repo.language]}
+
+ View Project`; + repoList.append(listItem); + } }; // dynamic search -filterInput.addEventListener('input', (e) => { - const search = e.target.value; - const repos = document.querySelectorAll('.repo'); - const searchLowerText = search.toLowerCase(); +filterInput.addEventListener("input", function (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 (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: '', - Github: '', - Chrome: '', - Assembly: ' Assembly', - 'C#': ' C#', - 'C++': ' C++', - C: ' C', - Clojure: ' C', - CoffeeScript: - ' CoffeeScript', - Crystal: ' Crystal', - CSS: ' CSS', - Dart: ' Dart', - Dockerfile: ' Docker', - Elixir: ' Elixir', - Elm: ' Elm', - Erlang: ' Erlang', - 'F#': ' F#', - Go: ' Go', - Groovy: ' Groovy', - HTML: ' HTML', - Haskell: ' Haskell', - Java: ' Java', - JavaScript: ' JavaScript', - Julia: ' Julia', - 'Jupyter Notebook': ' Jupyter', - Kotlin: ' Kotlin', - Latex: ' Latex', - Lua: ' Lua', - Matlab: ' Matlab', - Nim: ' Nim', - Nix: ' Nix', - ObjectiveC: ' ObjectiveC', - OCaml: ' OCaml', - Perl: ' Perl', - PHP: ' PHP', - PLSQL: ' PLSQL', - Processing: - ' Processing', - Python: ' Python', - R: ' R', - Ruby: ' Ruby', - Rust: ' Rust', - Sass: ' Sass', - Scala: ' Scala', - Shell: ' Shell', - Solidity: ' Solidity', - Stylus: ' Stylus', - Svelte: ' Svelte', - Swift: ' Swift', - Terraform: ' Terraform', - TypeScript: ' TypeScript', - 'Vim Script': ' Vim Script', - Vue: ' Vue' + Assembly: ' Assembly', + "C#": ' C#', + "C++": ' C++', + C: ' C', + Clojure: ' C', + CoffeeScript: + ' CoffeeScript', + Crystal: ' Crystal', + CSS: ' CSS', + Dart: ' Dart', + Dockerfile: ' Docker', + Elixir: ' Elixir', + Elm: ' Elm', + Erlang: ' Erlang', + "F#": ' F#', + Go: ' Go', + Groovy: ' Groovy', + HTML: ' HTML', + Haskell: ' Haskell', + Java: ' Java', + JavaScript: ' JavaScript', + Julia: ' Julia', + "Jupyter Notebook": ' Jupyter', + Kotlin: + ' Kotlin', + Latex: ' Latex', + Lua: ' Lua', + Matlab: ' Matlab', + Nim: ' Nim', + Nix: ' Nix', + ObjectiveC: ' ObjectiveC', + OCaml: ' OCaml', + Perl: ' Perl', + PHP: ' PHP', + PLSQL: ' PLSQL', + Processing: + ' Processing', + Python: + ' Python', + R: ' R', + Ruby: ' Ruby', + Rust: ' Rust', + Sass: ' Sass', + Scala: ' Scala', + Shell: + ' Shell', + Solidity: ' Solidity', + Stylus: ' Stylus', + Svelte: ' Svelte', + Swift: ' Swift', + Terraform: ' Terraform', + TypeScript: ' TypeScript', + "Vim Script": ' Vim Script', + Vue: ' Vue', + null: ' Markdown', }; + +// Get the current year +const currentYear = new Date().getFullYear(); +// Set the current year to the span with id "currentYear" +document.getElementById("currentYear").textContent = currentYear; diff --git a/style.css b/style.css index bdfc73e..96a0ef3 100644 --- a/style.css +++ b/style.css @@ -1,238 +1,314 @@ @media (prefers-color-scheme: light) { - :root { - --text: #151515; - --accent: #1688f0; - --bg-main: #fff; - --bg-repo: #f0f0f0; - --bg-user: #f5f5f5; - } + :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; - } + :root { + --text: #e5e5e5; + --accent: #1688f0; + --bg-main: #000; + --bg-repo: #0f0f1a; + --bg-user: #0a0a0f; + } } * { - box-sizing: border-box; + box-sizing: border-box; } body { - display: flex; - align-items: center; - justify-content: center; - margin: 0; - font-family: 'Open Sans', sans-serif; - background-color: var(--bg-main); - color: var(--text); - font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + font-family: "Open Sans", sans-serif; + background-color: var(--bg-main); + color: var(--text); + font-size: 16px; } .container { - display: flex; - justify-content: center; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - width: 90%; - max-width: 1280px; + display: flex; + justify-content: center; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + width: 90%; + max-width: 1280px; } .hide { - /* '!important' is to make sure that when we add the class using JS, it takes precendence */ - display: none !important; + /* '!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; + color: var(--accent); + margin-bottom: 4px; } small { - width: 100%; - text-align: center; - display: block; - margin-bottom: 20px; + width: 100%; + text-align: center; + display: block; + margin-bottom: 20px; +} + +h4 { + width: 100%; + text-align: center; + display: block; + margin-top: 5px; } h2 { - width: 100%; - color: var(--text); - margin: 0; + 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; + border: 2px solid var(--accent); + box-shadow: 0 0px 6px var(--accent), 0 0px 6px var(--accent); + max-width: 100%; + height: auto; } a { - color: var(--accent); - text-decoration: none; + color: var(--accent); + text-decoration: none; +} + +h4 a { + color: var(--accent); + transition: 0.2s ease; +} + +h4 a:hover { + color: var(--text); } -a:hover { - color: var(--text); +nav { + float: left; + clear: both; +} + +nav ul { + list-style: none; + margin: 0; + padding: 0%; +} + +nav ul a:hover { + color: white; + transition: 0.2s ease; +} + +nav ul li { + float: left; + margin: 5px; + font-size: 26px; } .github-img { - width: 45px; - margin-right: 8px; + width: 45px; + margin-right: 8px; } ul { - list-style: none; - padding: 0; + list-style: none; + padding: 0; } .user-info { - display: flex; - flex-wrap: wrap; - justify-content: center; - background-color: var(--bg-user); - color: var(--text); - font-size: 16px; - padding: 1em; - border-top-left-radius: 20px; - border-top-right-radius: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; + background-color: var(--bg-user); + color: var(--text); + font-size: 18px; + padding: 2em; + border-top-left-radius: 20px; + border-top-right-radius: 20px; } .user-info figure { - width: 90%; - max-width: 200px; + width: 90%; + max-width: 200px; } .user-info img { - border-radius: 100%; + border-radius: 100%; } .user-info div { - display: flex; - text-align: center; - flex-wrap: wrap; - align-items: center; - width: 100%; - padding-left: 5%; + 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; + width: 100%; + margin: 0; + padding: 0; + border-bottom: 1px solid var(--text); + padding-bottom: 18px; } .filter-repos, input { - background: var(--bg-user); - width: 50%; - border-radius: 20px; - min-width: 300px; - margin-top: 1em; - padding: 1em; - margin-bottom: 1em; - border: 2px solid var(--accent); - color: var(--text); - text-align: center; + background: var(--bg-user); + width: 50%; + border-radius: 20px; + min-width: 300px; + margin-top: 1em; + padding: 1em; + margin-bottom: 1em; + border: 2px solid var(--accent); + color: var(--text); + text-align: center; } .repos { - display: flex; - flex-wrap: wrap; - justify-content: center; - background-color: var(--bg-repo); - margin-top: 0; - padding: 2em; - border-bottom-left-radius: 20px; - border-bottom-right-radius: 20px; - margin-bottom: 4em; + display: flex; + flex-wrap: wrap; + justify-content: center; + background-color: var(--bg-repo); + margin-top: 0; + padding: 2em; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + margin-bottom: 4em; } h3 { - margin: 4px; - width: 100%; - text-align: center; - color: var(--accent); + 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; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; } .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-color: var(--bg-user); + width: 100%; + min-height: 180px; + border-radius: 10px; + margin: 1em 0; + border: 1px solid var(--accent); + padding: 1em; + text-align: center; + background-color: var(--bg-user); + transition: 0.2s ease; } .repo-list li:hover { - background-color: var(--bg-main); - box-shadow: - 0 3px 6px var(--accent), - 0 3px 6px var(--accent); + background-color: var(--bg-main); + box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); } -.link-btn { - padding: 10px 20px; - background: var(--bg-main); - border-radius: 30px; - border: 2px solid var(--accent); - color: var(--text); +.repo-list li a { + padding: 10px 20px; + background: var(--bg-main); + border-radius: 30px; + border: 2px solid var(--accent); + color: var(--text); + transition: 0.2s ease; } -.link-btn:hover { - background: var(--accent); - border: 2px solid var(--text); - transform: scale(1.1); +.repo-list li a:hover { + background: var(--accent); + border: 2px solid var(--text); + transform: scale(1.1); } .repo-list p { - padding: 0em 0.5em; - margin: 0.5em 0; + padding: 0em 0.5em; + margin: 0.5em 0; } -@media (min-width: 700px) { - .user-info div { - width: 45%; - text-align: left; - } +@media (min-width: 390px) { + .user-info div { + width: 45%; + text-align: left; + } - .repo-list { - justify-content: space-between; - } + .repo-list { + justify-content: space-between; + } - .repo-list li { - width: 48%; - } + .repo-list li { + width: 48%; + height: 16rem; + } } @media (max-width: 700px) { - .user-info div p { - margin: 10px; - } + body { + font-size: 14px; + } + + .container { + width: 100%; + padding: 0 1em; + } + + .user-info { + flex-direction: column; + align-items: center; + padding: 1em; + } + + .user-info div { + width: 100%; + text-align: center; + padding-left: 0; + } + + .user-info div p { + margin: 10px 0; + padding-bottom: 10px; + } + + .filter-repos, + input { + width: 80%; + min-width: unset; + } + + .repos { + padding: 1em; + } + + .repo-list li { + width: 100%; + margin-left: 10%; + margin-right: 10%; + } + + .repo-list { + justify-content: center; + } } @media (min-width: 1200px) { - .repo-list li { - width: 32%; - } + .repo-list li { + width: 30%; + } }