mirror of
https://github.com/dilllxd/gitfolio.git
synced 2024-08-14 22:28:09 +00:00
added commits by @DonIsaac & @Chargnn
* Created site files are now placed in an output directory `dist` * Added a ton of comments in build.js * Made functions in build.js use bluebird promises * Themes are now in the assets/templates folder instead as magic strings in the source code * Any number of custom themes (not just light and dark) can be used by creating a [theme].css file and putting it in assets/themes * CSS themes are rendered with Handlebars * CSS themes now rely on Handlebars for specifying the background * Restored config.json to template file * Changes to the blogging * Moved blog templates and config files to assets/blog * Created blog pages now go to dist/blog/ * Updated blogTemplate * Updated the README to reflect the changes made by this pull request * Added link to demo site in README * Added sorting and ordering
This commit is contained in:
imfunny
GitHub
parent
e3efba34c1
commit
14fdafebe4
14 changed files with 1402 additions and 319 deletions
35
README.md
35
README.md
|
|
@ -12,32 +12,27 @@ Check out this [live demo](https://imfunniee.github.io/gitfolio/) to see gitfoli
|
|||
|
||||
### Let's Build
|
||||
|
||||
a. Clone this repo or simply download it.
|
||||
```sh
|
||||
git clone https://github.com/imfunniee/gitfolio.git
|
||||
```
|
||||
|
||||
b. `cd` into the repo you just cloned or downloaded.
|
||||
```sh
|
||||
git clone https://github.com/imfunniee/gitfolio.git # Clone the repo
|
||||
cd gitfolio # Navigate into the project folder
|
||||
npm i # Install the required dependencies
|
||||
```
|
||||
|
||||
Gitfolio is now ready to be used. The command
|
||||
c. Gitfolio is now ready to be used. The command
|
||||
|
||||
```sh
|
||||
node build --name [username]
|
||||
```
|
||||
|
||||
Will build your website using your GitHub username and put it in the `dist/` folder.
|
||||
If you want to use a different folder, you can specify it by setting the `--out` flag.
|
||||
|
||||
```sh
|
||||
node build --name [username] --out [directory]
|
||||
```
|
||||
d. To run your website navigate to `./dist/index.html` in your browser. [you won't see blogs until you are on localhost]
|
||||
|
||||
To open your site, run
|
||||
```sh
|
||||
open dist/index.html
|
||||
```
|
||||
|
||||
If you specified a different output directory, replace `dist/` with the directory you used.
|
||||
Congrats, you just made yourself a personal website!
|
||||
🎉 Congrats, you just made yourself a personal website!
|
||||
|
||||
> if you get stuck somewhere or get an error, please create an issue
|
||||
|
||||
|
|
@ -69,7 +64,12 @@ You could also add in your custom CSS inside `index.css` to give it a more perso
|
|||
|
||||
### Let's Publish
|
||||
|
||||
Push the files to github. You can host your website using github pages by naming your repo ``username.github.io``. You can also your custom domain.
|
||||
### Let's Publish
|
||||
|
||||
Head over to GitHub and create a new repository named `username.github.io`, where username is your username. Push the files inside`/dist` folder to repo you just created.
|
||||
|
||||
Go To `username.github.io` your site should be up!!
|
||||
|
||||
|
||||
### Updating
|
||||
|
||||
|
|
@ -118,11 +118,6 @@ More Arguments for Blog
|
|||
|
||||
> (use "-" instead of spaces)
|
||||
|
||||
### Enable Blogs
|
||||
|
||||
Blog are disabled by default. To enable them head over to `assets/index.html` and find `<div id="blog_section" style="display:none;">`. Remove the style attribute to show your blogs on your personal website.
|
||||
|
||||
If you have run build command before adding a blog you need have to remove the style attribute from `index.html` file aswell.
|
||||
|
||||
## License
|
||||
|
||||
|
|
|
|||
118
assets/index.css
118
assets/index.css
|
|
@ -56,7 +56,30 @@ body{
|
|||
background-size: cover !important;
|
||||
background-repeat:no-repeat;
|
||||
position:fixed;
|
||||
color:#fff !important;
|
||||
color:#fff !important;
|
||||
}
|
||||
|
||||
#profile #navbar nav {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e7e7e7;
|
||||
background-color: rgba(32, 32, 32, 0.2);
|
||||
}
|
||||
|
||||
#profile #navbar a {
|
||||
float: left;
|
||||
text-align: left;
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#profile #navbar a:hover:not(.active) {
|
||||
background-color: rgba(32, 32, 32, 0.3);
|
||||
}
|
||||
|
||||
#display {
|
||||
|
|
@ -67,13 +90,54 @@ body{
|
|||
padding-left:33vw;
|
||||
}
|
||||
|
||||
#display h1 {
|
||||
#display h1 span {
|
||||
font-size:50px;
|
||||
color:var(--text-color);
|
||||
font-weight:bold;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
#display select {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
color: #444;
|
||||
line-height: 1.3;
|
||||
padding: .6em 1.4em .5em .8em;
|
||||
max-width: 80%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 1px solid #aaa;
|
||||
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
|
||||
border-radius: .5em;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
|
||||
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-position: right .7em top 50%, 0 0;
|
||||
background-size: .65em auto, 100%;
|
||||
}
|
||||
#display select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
#display select:hover {
|
||||
border-color: #888;
|
||||
}
|
||||
#display select:focus {
|
||||
border-color: #aaa;
|
||||
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
|
||||
box-shadow: 0 0 0 3px -moz-mac-focusring;
|
||||
color: #222;
|
||||
outline: none;
|
||||
}
|
||||
#display select option {
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width:18px;
|
||||
height:18px;
|
||||
|
|
@ -249,6 +313,11 @@ body{
|
|||
font-size:16px;
|
||||
}
|
||||
|
||||
#about span a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#work {
|
||||
margin:2vh 0px;
|
||||
padding:4vh 0px !important;
|
||||
|
|
@ -278,6 +347,30 @@ body{
|
|||
transform:scale(1.03);
|
||||
}
|
||||
|
||||
#forks {
|
||||
columns:2;
|
||||
}
|
||||
|
||||
#forks section {
|
||||
width:85%;
|
||||
padding:2.5vh 5%;
|
||||
display:inline-block;
|
||||
border-radius:5px;
|
||||
color:var(--text-color);
|
||||
border:1px solid rgb(0, 0, 0, 0.08);
|
||||
box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
|
||||
transition:0.4s ease-in-out;
|
||||
margin:2vh 0px;
|
||||
transform:scale(1);
|
||||
}
|
||||
|
||||
#forks section:hover {
|
||||
cursor: pointer;
|
||||
border:1px solid rgb(0, 0, 0, 0);
|
||||
box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
|
||||
transform:scale(1.03);
|
||||
}
|
||||
|
||||
.section_title {
|
||||
font-size:24px;
|
||||
font-weight:bold;
|
||||
|
|
@ -364,6 +457,27 @@ body{
|
|||
text-align:center;
|
||||
position: relative;
|
||||
}
|
||||
#profile #navbar nav {
|
||||
padding:4vh 5vw;
|
||||
text-align:center;
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e7e7e7;
|
||||
background-color: rgba(32, 32, 32, 0.5);
|
||||
position: relative;
|
||||
}
|
||||
#profile #navbar a {
|
||||
float: none !important;
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
margin:0px auto !important;
|
||||
}
|
||||
#profile #navbar a:hover:not(.active) {
|
||||
background-color: rgba(32, 32, 32, 0.3);
|
||||
}
|
||||
#display {
|
||||
width:90vw;
|
||||
padding:4vh 5vw;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<title></title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -15,6 +14,7 @@
|
|||
<div id="spinner"></div>
|
||||
</div>
|
||||
<div id="profile">
|
||||
<nav id="navbar"></nav>
|
||||
<div id="profile_img"></div>
|
||||
<div id="username">
|
||||
<div id="fullname"></div>
|
||||
|
|
@ -24,10 +24,9 @@
|
|||
</div>
|
||||
<div id="display">
|
||||
<div id="work">
|
||||
<h1>Work.</h1>
|
||||
<div id="projects"></div>
|
||||
<h1>Work</h1>
|
||||
</div>
|
||||
<div id="blog_section" style="display:none;">
|
||||
<div id="blog_section">
|
||||
<h1>Blog.</h1>
|
||||
<div id="blogs"></div>
|
||||
</div>
|
||||
|
|
@ -35,6 +34,7 @@
|
|||
<a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
setTimeout(function(){
|
||||
document.getElementById("loading").classList.add("animated");
|
||||
|
|
@ -45,10 +45,13 @@
|
|||
document.getElementById("loading").style.display = "none";
|
||||
},800);
|
||||
},1500);
|
||||
$.getJSON("./blog/blog.json", function(blog){
|
||||
$.getJSON("blog.json", function(blog){
|
||||
if(blog.length == 0){
|
||||
return document.getElementById("blog_section").style.display = "none";
|
||||
}
|
||||
for(var i = 0; i < blog.length; i++){
|
||||
$("#blogs").append(`
|
||||
<a href="/blog/${blog[i].url_title}/" target="_blank">
|
||||
<a href="./blog/${blog[i].url_title}/" target="_blank">
|
||||
<section>
|
||||
<img src="${blog[i].top_image}">
|
||||
<div class="blog_container">
|
||||
|
|
@ -59,7 +62,7 @@
|
|||
</div>
|
||||
</section>
|
||||
</a>
|
||||
`)
|
||||
`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
8
blog.js
8
blog.js
|
|
@ -38,11 +38,11 @@ function createBlog(title, subtitle, pagetitle, folder) {
|
|||
"sub_title": subtitle,
|
||||
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450",
|
||||
"visible": true }
|
||||
fs.readFile("./assets/blog/blog.json", function (err , data) {
|
||||
fs.readFile("./dist/blog.json", function (err , data) {
|
||||
if (err) throw err;
|
||||
var old_blogs = JSON.parse(data);
|
||||
old_blogs.push(blog_data);
|
||||
fs.writeFile('./assets/blog/blog.json', JSON.stringify(old_blogs, null, ' '), function(err){
|
||||
fs.writeFile('./dist/blog.json', JSON.stringify(old_blogs, null, ' '), function(err){
|
||||
if (err) throw err;
|
||||
console.log('Blog Created Successfully in "blog" folder.');
|
||||
});
|
||||
|
|
@ -61,6 +61,10 @@ if (program.title) {
|
|||
if (!program.folder) {
|
||||
program.folder = program.title;
|
||||
}
|
||||
/* Check if build has been executed before blog this will prevent it from giving "link : index.css" error */
|
||||
if (!fs.existsSync(`./dist/index.html`)){
|
||||
return console.log("You need to run build command before using blog one");
|
||||
}
|
||||
createBlog(program.title, program.subtitle, program.pagetitle, program.folder);
|
||||
} else {
|
||||
console.log("Provide a title to create a new blog");
|
||||
|
|
|
|||
29
build.js
29
build.js
|
|
@ -13,16 +13,18 @@ const { updateHTML } = require('./populate');
|
|||
|
||||
/* Specify the options the program uses */
|
||||
program
|
||||
.version('0.1.1')
|
||||
.option('-n, --name [username]', 'your GitHub username. This will be used to customize your site')
|
||||
.option('-t, --theme [theme]', 'specify a theme to use')
|
||||
.option('-b, --background [background]', 'set the background image')
|
||||
.option('-o, --out [directory]', 'the output directory to put the built site')
|
||||
.parse(process.argv);
|
||||
.version('0.1.1')
|
||||
.option('-n, --name [username]', 'get username')
|
||||
.option('-d, --dark', 'enable dark mode')
|
||||
.option('-b, --background [background]', 'set background image')
|
||||
.option('-f, --fork [order]', 'include forks')
|
||||
.option('-s, --sort [sort]', 'set default sort for repository')
|
||||
.option('-o, --order [order]', 'set default order on sort')
|
||||
.parse(process.argv);
|
||||
|
||||
const config = 'config.json';
|
||||
const config = './dist/config.json';
|
||||
const assetDir = path.resolve('./assets/');
|
||||
const outDir = path.resolve(program.out || './dist/');
|
||||
const outDir = path.resolve('./dist/');
|
||||
|
||||
/**
|
||||
* Creates the stylesheet used by the site from a template stylesheet.
|
||||
|
|
@ -71,7 +73,16 @@ async function populateCSS() {
|
|||
populateCSS();
|
||||
|
||||
if (program.name) {
|
||||
updateHTML(('%s', program.name));
|
||||
let sort = program.sort ? program.sort: 'created_at';
|
||||
let order = -1;
|
||||
|
||||
if(program.order){
|
||||
if(program.order === 'asc')
|
||||
order = 1;
|
||||
else if(program.order === 'desc')
|
||||
order = -1;
|
||||
}
|
||||
updateHTML(('%s', program.name), sort, order);
|
||||
} else {
|
||||
console.error("Error: Please provide a GitHub username.");
|
||||
}
|
||||
1
dist/blog.json
vendored
Normal file
1
dist/blog.json
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
[]
|
||||
8
dist/config.json
vendored
Normal file
8
dist/config.json
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
[
|
||||
{
|
||||
"username": "imfunniee",
|
||||
"name": "imfunny",
|
||||
"userimg": "https://avatars3.githubusercontent.com/u/36105478?v=4",
|
||||
"theme": "light.css"
|
||||
}
|
||||
]
|
||||
549
dist/index.css
vendored
Normal file
549
dist/index.css
vendored
Normal file
|
|
@ -0,0 +1,549 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Poppins');
|
||||
@import url('https://fonts.googleapis.com/css?family=Questrial');
|
||||
|
||||
body{
|
||||
margin:0%;
|
||||
padding:0%;
|
||||
width:100vw;
|
||||
background:var(--bg-color);
|
||||
color:var(--text-color);
|
||||
max-width:100vw;
|
||||
overflow-x:hidden;
|
||||
align-items:center;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
#loading {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background: var(--bg-color);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
top:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
}
|
||||
|
||||
#spinner {
|
||||
animation: rotate 0.5s infinite linear;
|
||||
width:50px;
|
||||
height:50px;
|
||||
border:2px solid var(--bg-color);
|
||||
border-bottom:2px solid var(--text-color);
|
||||
border-radius:50%;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {transform: rotate(0deg);}
|
||||
100% {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#profile {
|
||||
width:24vw;
|
||||
padding:4vh 3vw;
|
||||
height:92vh;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
text-align:left;
|
||||
background:var(--background-image) center center;
|
||||
background-size: cover !important;
|
||||
background-repeat:no-repeat;
|
||||
position:fixed;
|
||||
color:#fff !important;
|
||||
}
|
||||
|
||||
#profile #navbar nav {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e7e7e7;
|
||||
background-color: rgba(32, 32, 32, 0.2);
|
||||
}
|
||||
|
||||
#profile #navbar a {
|
||||
float: left;
|
||||
text-align: left;
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#profile #navbar a:hover:not(.active) {
|
||||
background-color: rgba(32, 32, 32, 0.3);
|
||||
}
|
||||
|
||||
#display {
|
||||
width:64vw;
|
||||
padding:4vh 3vw;
|
||||
height:92vh;
|
||||
display:inline-block;
|
||||
padding-left:33vw;
|
||||
}
|
||||
|
||||
#display h1 span {
|
||||
font-size:50px;
|
||||
color:var(--text-color);
|
||||
font-weight:bold;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
#display select {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
color: #444;
|
||||
line-height: 1.3;
|
||||
padding: .6em 1.4em .5em .8em;
|
||||
max-width: 80%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 1px solid #aaa;
|
||||
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
|
||||
border-radius: .5em;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
|
||||
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-position: right .7em top 50%, 0 0;
|
||||
background-size: .65em auto, 100%;
|
||||
}
|
||||
#display select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
#display select:hover {
|
||||
border-color: #888;
|
||||
}
|
||||
#display select:focus {
|
||||
border-color: #aaa;
|
||||
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
|
||||
box-shadow: 0 0 0 3px -moz-mac-focusring;
|
||||
color: #222;
|
||||
outline: none;
|
||||
}
|
||||
#display select option {
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width:18px;
|
||||
height:18px;
|
||||
}
|
||||
|
||||
#profile_img_blog {
|
||||
border-radius:50%;
|
||||
width:90px;
|
||||
height:90px;
|
||||
background-size:cover !important;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#username_blog {
|
||||
font-size:18px;
|
||||
color:var(--text-color);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#username_blog span {
|
||||
font-size:24px;
|
||||
font-family: 'Questrial', sans-serif !important;
|
||||
}
|
||||
|
||||
#username_blog b {
|
||||
font-size:12px;
|
||||
font-family:'Poppins', sans-serif;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#blog-display {
|
||||
width:60vw;
|
||||
margin:0px 20vw;
|
||||
text-align:left;
|
||||
margin-top:3vh;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
#profile_blog {
|
||||
width:60vw;
|
||||
margin:0px 20vw;
|
||||
margin-top:10vh;
|
||||
text-align:left;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
#background {
|
||||
width:100vw;
|
||||
height:55vh;
|
||||
background:var(--background-background);
|
||||
background-size:cover !important;
|
||||
background-repeat:no-repeat;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
margin-top:-10vh;
|
||||
}
|
||||
|
||||
#blog-display h1 {
|
||||
font-size:50px;
|
||||
color:var(--text-color);
|
||||
font-weight:bold;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
#blog-display h2 {
|
||||
color:var(--blog-gray-color);
|
||||
}
|
||||
|
||||
#blog-display {
|
||||
padding:1vh 0px;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
#blog p {
|
||||
font-size:17px;
|
||||
line-height:25px;
|
||||
word-spacing:1.2px;
|
||||
margin:5vh 0px;
|
||||
}
|
||||
|
||||
#blog p span {
|
||||
padding:2px 4px;
|
||||
background:var(--text-color);
|
||||
color:var(--bg-color) !important;
|
||||
}
|
||||
|
||||
#blog img {
|
||||
width:100%;
|
||||
margin:2vh 0px;
|
||||
border-radius:5px;
|
||||
border:1px solid rgb(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
#header {
|
||||
width:63vw;
|
||||
text-align:right;
|
||||
padding:3vh 0px;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
#header a {
|
||||
color:var(--text-color);
|
||||
text-decoration:none;
|
||||
margin-left:4vw;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#footer_blog {
|
||||
width:90vw;
|
||||
padding:8vh 5vw;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#footer_blog a {
|
||||
color:var(--text-color) !important;
|
||||
text-decoration:none;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#footer {
|
||||
width:100%;
|
||||
padding:8vh 0px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color:var(--text-color) !important;
|
||||
text-decoration:none;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#profile_img {
|
||||
width:180px;
|
||||
height:180px;
|
||||
border-radius:5px;
|
||||
background-size:cover !important;
|
||||
}
|
||||
|
||||
#profile div {
|
||||
font-weight:bold;
|
||||
margin:1.5vh 0px;
|
||||
}
|
||||
|
||||
#username {
|
||||
font-size:18px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#username span {
|
||||
font-size:24px;
|
||||
}
|
||||
|
||||
#userbio {
|
||||
font-size:26px;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#about {
|
||||
font-size:18px;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
#about span {
|
||||
margin:1vh 0px;
|
||||
display:block;
|
||||
}
|
||||
|
||||
#about span i {
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
#about span a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#work {
|
||||
margin:2vh 0px;
|
||||
padding:4vh 0px !important;
|
||||
}
|
||||
|
||||
#projects {
|
||||
columns:2;
|
||||
}
|
||||
|
||||
#projects section {
|
||||
width:85%;
|
||||
padding:2.5vh 5%;
|
||||
display:inline-block;
|
||||
border-radius:5px;
|
||||
color:var(--text-color);
|
||||
border:1px solid rgb(0, 0, 0, 0.08);
|
||||
box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
|
||||
transition:0.4s ease-in-out;
|
||||
margin:2vh 0px;
|
||||
transform:scale(1);
|
||||
}
|
||||
|
||||
#projects section:hover {
|
||||
cursor: pointer;
|
||||
border:1px solid rgb(0, 0, 0, 0);
|
||||
box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
|
||||
transform:scale(1.03);
|
||||
}
|
||||
|
||||
#forks {
|
||||
columns:2;
|
||||
}
|
||||
|
||||
#forks section {
|
||||
width:85%;
|
||||
padding:2.5vh 5%;
|
||||
display:inline-block;
|
||||
border-radius:5px;
|
||||
color:var(--text-color);
|
||||
border:1px solid rgb(0, 0, 0, 0.08);
|
||||
box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
|
||||
transition:0.4s ease-in-out;
|
||||
margin:2vh 0px;
|
||||
transform:scale(1);
|
||||
}
|
||||
|
||||
#forks section:hover {
|
||||
cursor: pointer;
|
||||
border:1px solid rgb(0, 0, 0, 0);
|
||||
box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
|
||||
transform:scale(1.03);
|
||||
}
|
||||
|
||||
.section_title {
|
||||
font-size:24px;
|
||||
font-weight:bold;
|
||||
margin:1vh 0px;
|
||||
}
|
||||
|
||||
.about_section {
|
||||
font-size:18px;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
margin:2vh 0px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.bottom_section {
|
||||
margin:1vh 0px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.bottom_section span {
|
||||
margin-right:20px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.bottom_section span i {
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
#blog_section {
|
||||
margin:2vh 0px;
|
||||
padding:2vh 0px !important;
|
||||
}
|
||||
|
||||
#blogs {
|
||||
columns:2;
|
||||
}
|
||||
|
||||
#blogs section {
|
||||
width:85%;
|
||||
display:inline-block;
|
||||
border-radius:5px;
|
||||
color:var(--text-color);
|
||||
border:1px solid rgb(0, 0, 0, 0.04);
|
||||
box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
|
||||
transition:0.4s ease-in-out;
|
||||
transform:scale(1);
|
||||
padding:0px;
|
||||
margin:2vh 0px;
|
||||
}
|
||||
|
||||
#blogs section img {
|
||||
width:100%;
|
||||
border-radius:5px 5px 0px 0px;
|
||||
}
|
||||
|
||||
.blog_container {
|
||||
padding:2.5vh 5%;
|
||||
}
|
||||
|
||||
#blogs section:hover {
|
||||
cursor: pointer;
|
||||
border:1px solid rgb(0, 0, 0, 0);
|
||||
box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
|
||||
transform:scale(1.03);
|
||||
}
|
||||
|
||||
.go_back {
|
||||
position: absolute;
|
||||
color:var(--text-color);
|
||||
font-size:26px;
|
||||
margin-left:5vw;
|
||||
margin-top:4vh;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color:var(--bg-color);
|
||||
background:var(--text-color);
|
||||
}
|
||||
|
||||
@media (max-width: 800px){
|
||||
#profile {
|
||||
width:90vw;
|
||||
padding:4vh 5vw;
|
||||
height:60vh;
|
||||
text-align:center;
|
||||
position: relative;
|
||||
}
|
||||
#profile #navbar nav {
|
||||
padding:4vh 5vw;
|
||||
text-align:center;
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e7e7e7;
|
||||
background-color: rgba(32, 32, 32, 0.5);
|
||||
position: relative;
|
||||
}
|
||||
#profile #navbar a {
|
||||
float: none !important;
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
margin:0px auto !important;
|
||||
}
|
||||
#profile #navbar a:hover:not(.active) {
|
||||
background-color: rgba(32, 32, 32, 0.3);
|
||||
}
|
||||
#display {
|
||||
width:90vw;
|
||||
padding:4vh 5vw;
|
||||
height:auto;
|
||||
display:inline-block;
|
||||
padding-left:5vw;
|
||||
}
|
||||
#profile_img {
|
||||
width:120px;
|
||||
height:120px;
|
||||
margin:0px auto !important;
|
||||
}
|
||||
#work {
|
||||
margin:0px;
|
||||
}
|
||||
#projects {
|
||||
columns:1;
|
||||
}
|
||||
#projects section {
|
||||
width:88%;
|
||||
}
|
||||
#blogs {
|
||||
columns:1;
|
||||
}
|
||||
#blogs section {
|
||||
width:98%;
|
||||
}
|
||||
#blog_section {
|
||||
margin:0px;
|
||||
}
|
||||
#blog-display {
|
||||
width:90vw;
|
||||
margin:0px 5vw;
|
||||
text-align:left;
|
||||
margin-top:0vh;
|
||||
z-index:1;
|
||||
}
|
||||
#profile_blog {
|
||||
width:90vw;
|
||||
margin:0px 5vw;
|
||||
margin-top:10vh;
|
||||
text-align:left;
|
||||
z-index:1;
|
||||
}
|
||||
.go_back {
|
||||
position: relative;
|
||||
color:var(--text-color);
|
||||
font-size:26px;
|
||||
margin-left:5vw;
|
||||
top:5vh;
|
||||
}
|
||||
#blog img {
|
||||
margin:1vh 0px !important;
|
||||
}
|
||||
#blog p {
|
||||
margin:2vh 0px;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {width:5px;height:5px;}
|
||||
::-webkit-scrollbar-track {background:var(--bg-color);}
|
||||
::-webkit-scrollbar-thumb {background:var(--text-color);}:root {
|
||||
--bg-color: #fff;
|
||||
--text-color: rgb(10, 10, 10);
|
||||
--blog-gray-color: rgb(80, 80, 80);
|
||||
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.4), rgb(10, 10, 10, 0.4)), url("https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450");
|
||||
--background-background: #fff;
|
||||
}
|
||||
360
dist/index.html
vendored
Normal file
360
dist/index.html
vendored
Normal file
|
|
@ -0,0 +1,360 @@
|
|||
<!DOCTYPE html><html lang="en"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>imfunniee</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="icon" href="https://avatars3.githubusercontent.com/u/36105478?v=4" type="image/png"></head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<div id="spinner"></div>
|
||||
</div>
|
||||
<div id="profile">
|
||||
<nav id="navbar">
|
||||
<a href="#projects">Projects</a>
|
||||
<a href="#forks">Forks</a></nav>
|
||||
<div id="profile_img" style="background: url(https://avatars3.githubusercontent.com/u/36105478?v=4) center;"></div>
|
||||
<div id="username"><span style="display:block;">imfunny</span>@imfunniee</div>
|
||||
<div id="userbio" style="display: block;">Frontend Developer | UI/UX designer</div>
|
||||
<div id="about">
|
||||
<span style="display:none;"><i class="fas fa-users"></i> null</span>
|
||||
<span style="display:none;"><i class="fas fa-envelope"></i> null</span>
|
||||
<span style="display:block;"><i class="fas fa-link"></i> https://imfunniee.github.io/</span>
|
||||
<span style="display:block;"><i class="fas fa-map-marker-alt"></i> Mars</span>
|
||||
<span style="display:block;"><i class="fas fa-user-tie"></i> Available for hire</span></div>
|
||||
</div>
|
||||
<div id="display">
|
||||
<div id="work">
|
||||
<h1>Projects</h1>
|
||||
<div>
|
||||
<span>Filter by:
|
||||
<select onchange="onFilterChange('repos');" id="repos_filter" autocomplete="off">
|
||||
<option value="" selected="">---</option>
|
||||
<option value="date">Date</option>
|
||||
<option value="name">Name</option>
|
||||
<option value="stared">Stared</option>
|
||||
<option value="forked">Forked</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
<div id="projects">
|
||||
<a href="https://github.com/imfunniee/chat-on-github" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">chat-on-github</div>
|
||||
<div class="about_section">
|
||||
<span style="display:none;">undefined</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:none;"><i class="fas fa-code"></i> null</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 2</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/gitfolio" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">gitfolio</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;"><img src="https://github.githubassets.com/images/icons/emoji/octocat.png?v8" class="emoji"> personal website + blog for every github user</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> JavaScript</span>
|
||||
<span><i class="fas fa-star"></i> 871</span>
|
||||
<span><i class="fas fa-code-branch"></i> 69</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/gitark" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">gitark</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;"><img src="https://github.githubassets.com/images/icons/emoji/octocat.png?v8" class="emoji"> Dark theme for Github</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> CSS</span>
|
||||
<span><i class="fas fa-star"></i> 111</span>
|
||||
<span><i class="fas fa-code-branch"></i> 11</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/polymerBot" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">polymerBot</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">🤖 A Discord bot for Moderation and stuff </span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> JavaScript</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 1</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/secret-img" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">secret-img</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">encrypt/decrypt images 🤫 </span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> JavaScript</span>
|
||||
<span><i class="fas fa-star"></i> 2</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/yt-upload" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">yt-upload</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">basically youtube in your terminal</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> JavaScript</span>
|
||||
<span><i class="fas fa-star"></i> 1</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/youtube-discord-rpc" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">youtube-discord-rpc</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">🎵 Discord Rich Presence for Youtube </span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> JavaScript</span>
|
||||
<span><i class="fas fa-star"></i> 2</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/pymine" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">pymine</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">python learns to play minecraft (TOTALLY not copying https://github.com/Sentdex/pygta5 😂)</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> Python</span>
|
||||
<span><i class="fas fa-star"></i> 2</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/NoOS" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">NoOS</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">🚀 A OS launcher that runs on your current OS</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> JavaScript</span>
|
||||
<span><i class="fas fa-star"></i> 4</span>
|
||||
<span><i class="fas fa-code-branch"></i> 1</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/zucc" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">zucc</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">browser voice-controlled personal assistant</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> JavaScript</span>
|
||||
<span><i class="fas fa-star"></i> 1</span>
|
||||
<span><i class="fas fa-code-branch"></i> 1</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/todo" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">todo</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">a todo app ;)</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> CSS</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 1</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/meteo" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">meteo</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">⛈ a simple weather app</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> HTML</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/Pluto" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">Pluto</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">a peer to peer video and text chat</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> HTML</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/imfunniee.github.io" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">imfunniee.github.io</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">👨💻 personal portfolio website and projects</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> HTML</span>
|
||||
<span><i class="fas fa-star"></i> 4</span>
|
||||
<span><i class="fas fa-code-branch"></i> 1</span>
|
||||
</div>
|
||||
</section>
|
||||
</a></div>
|
||||
<hr>
|
||||
<h1>Forks</h1>
|
||||
<div>
|
||||
<span>Filter by:
|
||||
<select onchange="onFilterChange('forks');" id="forks_filter" autocomplete="off">
|
||||
<option value="" selected="">---</option>
|
||||
<option value="date">Date</option>
|
||||
<option value="name">Name</option>
|
||||
<option value="stared">Stared</option>
|
||||
<option value="forked">Forked</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
<div id="forks">
|
||||
<a href="https://github.com/imfunniee/opensource.guide" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">opensource.guide</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">Community guides for open source creators</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> JavaScript</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/node-github-emoji" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">node-github-emoji</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">Node.js library for GitHub Emoji <img src="https://github.githubassets.com/images/icons/emoji/octocat.png?v8" class="emoji"> typed with TypeScript</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> TypeScript</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/awesome-css-frameworks" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">awesome-css-frameworks</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">List of awesome CSS frameworks</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> CSS</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/discord-vscode" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">discord-vscode</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">🖋️ Update your discord status with the newly added rich presence</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> TypeScript</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/adobe-rpc" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">adobe-rpc</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">A universal Discord Rich Presence for almost all of Adobe's apps.</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> Python</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
<a href="https://github.com/imfunniee/8D-Audio" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">8D-Audio</div>
|
||||
<div class="about_section">
|
||||
<span style="display:block;">Some dsp to make songs "8D"</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:inline-block;"><i class="fas fa-code"></i> Python</span>
|
||||
<span><i class="fas fa-star"></i> 0</span>
|
||||
<span><i class="fas fa-code-branch"></i> 0</span>
|
||||
</div>
|
||||
</section>
|
||||
</a></div>
|
||||
</div>
|
||||
<div id="blog_section">
|
||||
<h1>Blog.</h1>
|
||||
<div id="blogs"></div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||
<script src="index.js"></script>
|
||||
<script type="text/javascript">
|
||||
setTimeout(function(){
|
||||
document.getElementById("loading").classList.add("animated");
|
||||
document.getElementById("loading").classList.add("fadeOut");
|
||||
setTimeout(function(){
|
||||
document.getElementById("loading").classList.remove("animated");
|
||||
document.getElementById("loading").classList.remove("fadeOut");
|
||||
document.getElementById("loading").style.display = "none";
|
||||
},800);
|
||||
},1500);
|
||||
$.getJSON("blog.json", function(blog){
|
||||
if(blog.length == 0){
|
||||
return document.getElementById("blog_section").style.display = "none";
|
||||
}
|
||||
for(var i = 0; i < blog.length; i++){
|
||||
$("#blogs").append(`
|
||||
<a href="./blog/${blog[i].url_title}/" target="_blank">
|
||||
<section>
|
||||
<img src="${blog[i].top_image}">
|
||||
<div class="blog_container">
|
||||
<div class="section_title">${blog[i].title}</div>
|
||||
<div class="about_section">
|
||||
${blog[i].sub_title}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
148
populate.js
148
populate.js
|
|
@ -27,68 +27,63 @@ function convertToEmoji(text) {
|
|||
}
|
||||
}
|
||||
|
||||
module.exports.updateHTML = (username) => {
|
||||
let savedRepos = [];
|
||||
let savedForks = [];
|
||||
|
||||
module.exports.updateHTML = (username, sort, order) => {
|
||||
//add data to assets/index.html
|
||||
jsdom.fromFile("./assets/index.html", options).then(function (dom) {
|
||||
let window = dom.window, document = window.document;
|
||||
(async () => {
|
||||
try {
|
||||
console.log("Building HTML/CSS...");
|
||||
var repos = await got(`https://api.github.com/users/${username}/repos?sort=created`);
|
||||
repos = JSON.parse(repos.body);
|
||||
for (var i = 0; i < repos.length; i++) {
|
||||
if (repos[i].fork == false) {
|
||||
document.getElementById("projects").innerHTML += `
|
||||
<a href="${repos[i].html_url}" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">${repos[i].name}</div>
|
||||
<div class="about_section">
|
||||
<span style="display:${repos[i].description == undefined ? 'none' : 'block'};">${convertToEmoji(repos[i].description)}</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:${repos[i].language == null ? 'none' : 'inline-block'};"><i class="fas fa-code"></i> ${repos[i].language}</span>
|
||||
<span><i class="fas fa-star"></i> ${repos[i].stargazers_count}</span>
|
||||
<span><i class="fas fa-code-branch"></i> ${repos[i].forks_count}</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>`;
|
||||
}
|
||||
}
|
||||
var user = await got(`https://api.github.com/users/${username}`);
|
||||
user = JSON.parse(user.body);
|
||||
document.title = user.login;
|
||||
var icon = document.createElement("link");
|
||||
icon.setAttribute("rel", "icon");
|
||||
icon.setAttribute("href", user.avatar_url);
|
||||
icon.setAttribute("type", "image/png");
|
||||
document.getElementsByTagName("head")[0].appendChild(icon);
|
||||
document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
|
||||
document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`;
|
||||
//document.getElementById("github_link").href = `https://github.com/${user.login}`;
|
||||
document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
|
||||
document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
|
||||
document.getElementById("about").innerHTML = `
|
||||
<span style="display:${user.company == null || !user.company ? 'none' : 'block'};"><i class="fas fa-users"></i> ${user.company}</span>
|
||||
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> ${user.email}</span>
|
||||
<span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> ${user.blog}</span>
|
||||
<span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> ${user.location}</span>
|
||||
<span style="display:${user.hireable == false || !user.hireable ? 'none' : 'block'};"><i class="fas fa-user-tie"></i> Available for hire</span>`;
|
||||
//add data to config.json
|
||||
fs.readFile("config.json", function (err, data) {
|
||||
console.log("Building HTML/CSS/JS...");
|
||||
var repos = await got(`https://api.github.com/users/${username}/repos?per_page=1200`);
|
||||
repos = JSON.parse(repos.body);
|
||||
for(var i = 0;i < repos.length;i++){
|
||||
if(repos[i].fork == false){
|
||||
repos[i].description = convertToEmoji(repos[i].description);
|
||||
savedRepos.push(repos[i]);
|
||||
} else {
|
||||
repos[i].description = convertToEmoji(repos[i].description);
|
||||
savedForks.push(repos[i]);
|
||||
}
|
||||
}
|
||||
|
||||
var user = await got(`https://api.github.com/users/${username}`);
|
||||
user = JSON.parse(user.body);
|
||||
document.title = user.login;
|
||||
var icon = document.createElement("link");
|
||||
icon.setAttribute("rel", "icon");
|
||||
icon.setAttribute("href", user.avatar_url);
|
||||
icon.setAttribute("type", "image/png");
|
||||
document.getElementsByTagName("head")[0].appendChild(icon);
|
||||
document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
|
||||
document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`;
|
||||
//document.getElementById("github_link").href = `https://github.com/${user.login}`;
|
||||
document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
|
||||
document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
|
||||
document.getElementById("about").innerHTML = `
|
||||
<span style="display:${user.company == null || !user.company ? 'none' : 'block'};"><i class="fas fa-users"></i> ${user.company}</span>
|
||||
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> ${user.email}</span>
|
||||
<span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> ${user.blog}</span>
|
||||
<span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> ${user.location}</span>
|
||||
<span style="display:${user.hireable == false || !user.hireable ? 'none' : 'block'};"><i class="fas fa-user-tie"></i> Available for hire</span>`;
|
||||
//add data to config.json
|
||||
fs.readFile("./dist/config.json", function (err, data) {
|
||||
if (err) throw err;
|
||||
data = JSON.parse(data);
|
||||
data[0].username = user.login;
|
||||
data[0].name = user.name;
|
||||
data[0].userimg = user.avatar_url;
|
||||
fs.writeFile('./dist/config.json', JSON.stringify(data, null, ' '), function (err) {
|
||||
if (err) throw err;
|
||||
data = JSON.parse(data);
|
||||
data[0].username = user.login;
|
||||
data[0].name = user.name;
|
||||
data[0].userimg = user.avatar_url;
|
||||
fs.writeFile('config.json', JSON.stringify(data, null, ' '), function (err) {
|
||||
if (err) throw err;
|
||||
});
|
||||
});
|
||||
fs.writeFile('dist/index.html', '<!DOCTYPE html>' + window.document.documentElement.outerHTML, function (error) {
|
||||
if (error) throw error;
|
||||
console.log("Build Complete");
|
||||
process.exit(0)
|
||||
});
|
||||
});
|
||||
fs.writeFile('dist/index.html', '<!DOCTYPE html>' + window.document.documentElement.outerHTML, function (error) {
|
||||
if (error) throw error;
|
||||
console.log("Build Complete");
|
||||
process.exit(0)
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
|
@ -97,3 +92,46 @@ module.exports.updateHTML = (username) => {
|
|||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
function populateHTML(type, sort, order, document){
|
||||
let data = require('./dist/' + type + '.json');
|
||||
let result = [];
|
||||
result = data.sort(GetSortOrder(sort, order));
|
||||
if(result.length){
|
||||
for(var i = 0;i < result.length;i++){
|
||||
document.getElementById(type === 'repos' ? 'projects' : 'forks').innerHTML += `
|
||||
<a href="${result[i].html_url}" target="_blank">
|
||||
<section>
|
||||
<div class="section_title">${result[i].name}</div>
|
||||
<div class="about_section">
|
||||
<span style="display:${result[i].description == undefined ? 'none' : 'block'};">${result[i].description}</span>
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span style="display:${result[i].language == null ? 'none' : 'inline-block'};"><i class="fas fa-code"></i> ${result[i].language}</span>
|
||||
<span><i class="fas fa-star"></i> ${result[i].stargazers_count}</span>
|
||||
<span><i class="fas fa-code-branch"></i> ${result[i].forks_count}</span>
|
||||
</div>
|
||||
</section>
|
||||
</a>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function GetSortOrder(prop, order) {
|
||||
return function(a, b) {
|
||||
if(typeof(a[prop]) === 'string'){
|
||||
if (a[prop].toLowerCase() > b[prop].toLowerCase()) {
|
||||
return 1 * order;
|
||||
} else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {
|
||||
return -1 * order;
|
||||
}
|
||||
} else {
|
||||
if (a[prop] > b[prop]) {
|
||||
return 1 * order;
|
||||
} else if (a[prop] < b[prop]) {
|
||||
return -1 * order;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
const fs = require('fs');
|
||||
const {updateHTML} = require('./populate');
|
||||
|
||||
fs.readFile("config.json", function (err , data) {
|
||||
fs.readFile("./dist/config.json", function (err , data) {
|
||||
if (err) throw err;
|
||||
data = JSON.parse(data);
|
||||
var username = data[0].username;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue