dylan/gitfolio
1
0
Fork 0
mirror of https://github.com/dilllxd/gitfolio.git synced 2024-08-14 22:28:09 +00:00
Code Issues Projects Releases Wiki Activity

v0.1.1

Browse source 
added emojis 👀🙌👌🔥
This commit is contained in:
imfunny 2019-05-09 21:49:54 +05:30 • committed by GitHub
parent 61387b9cf7
commit 98e2524e1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 1746 additions and 1721 deletions
Download patch file Download diff file Expand all files Collapse all files

1348
LICENSE
View file

File diff suppressed because it is too large Load diff

210
README.md
View file

@ -1,105 +1,105 @@
<img src="https://i.imgur.com/eA6clZr.png"> <img src="https://i.imgur.com/eA6clZr.png">
# Gitfolio [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=about.me%20and%20medium%20but%20for%20every%20github%20user&url=https://github.com/imfunniee/gitfolio) ![GitHub top language](https://img.shields.io/github/languages/top/imfunniee/gitfolio.svg) ![GitHub last commit](https://img.shields.io/github/last-commit/imfunniee/gitfolio.svg) ![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg) # Gitfolio [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=about.me%20and%20medium%20but%20for%20every%20github%20user&url=https://github.com/imfunniee/gitfolio) ![GitHub top language](https://img.shields.io/github/languages/top/imfunniee/gitfolio.svg) ![GitHub last commit](https://img.shields.io/github/last-commit/imfunniee/gitfolio.svg) ![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg)
### about.me + medium but for every github user ### about.me + medium but for every github user
Gitfolio will help get started with a portfolio website where you could showcase your work + a blog that will help you spread your ideas into real world. Gitfolio will help get started with a portfolio website where you could showcase your work + a blog that will help you spread your ideas into real world.
# Getting Started # Getting Started
### Fork this repository ### Fork this repository
Get yourself a copy of this repository by forking it as `username.github.io` so you could customize it. Get yourself a copy of this repository by forking it as `username.github.io` so you could customize it.
### Let's build ### Let's build
a. Clone the repository you just forked using ``git clone`` or just simply download it. a. Clone the repository you just forked using ``git clone`` or just simply download it.
b. Now ``cd`` into the repository you just cloned and run the below command b. Now ``cd`` into the repository you just cloned and run the below command
``` ```
$ npm i $ npm i
``` ```
This will install all the dependencies you will need to build your website. This will install all the dependencies you will need to build your website.
c. After its done installing the dependencies run this command where `username` is your username on github c. After its done installing the dependencies run this command where `username` is your username on github
``` ```
$ node build --name username $ node build --name username
``` ```
This will create `index.css` and `index.html` files in your working directory. This will create `index.css` and `index.html` files in your working directory.
d. Congrats, you just made yourself a personal website. d. Congrats, you just made yourself a personal website.
e. To run your website open `index.html` or simply type `index.html` and hit enter in your terminal. e. To run your website open `index.html` or simply type `index.html` and hit enter in your terminal.
> if you get stuck somewhere or get an error, please create an issue > if you get stuck somewhere or get an error, please create an issue
### Let's customize ### Let's customize
#### Enabling Dark theme #### Enabling Dark theme
To enable dark theme just provide `--dark` as an argument while building To enable dark theme just provide `--dark` as an argument while building
``` ```
$ node build --name username --dark $ node build --name username --dark
``` ```
#### Customize background image #### Customize background image
To customize the background image just provide `--background [url]` argument while building To customize the background image just provide `--background [url]` argument while building
``` ```
$ node build --name username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634 $ node build --name username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634
``` ```
You could also add in your custom CSS inside `index.css` to give it a more personal feel. You could also add in your custom CSS inside `index.css` to give it a more personal feel.
### Let's Publish ### Let's Publish
You can host your website using github pages and use a custom domain aswell or simply use `username.github.io`. You can host your website using github pages and use a custom domain aswell or simply use `username.github.io`.
### Updating ### Updating
To update your info, follow the same steps shown in `Let's build` part To update your info, follow the same steps shown in `Let's build` part
### Add a Blog ### Add a Blog
To add your first blog run this command, make sure the title don't have spaces. To add your first blog run this command, make sure the title don't have spaces.
``` ```
$ node blog --title my-first-blog $ node blog --title my-first-blog
``` ```
This will create a `my-first-blog` folder inside `blog`. Inside `my-first-blog` you will find an `index.html` file which contains all the necessary elements for writing a blog. Customize the content of the file to write your first blog. This will create a `my-first-blog` folder inside `blog`. Inside `my-first-blog` you will find an `index.html` file which contains all the necessary elements for writing a blog. Customize the content of the file to write your first blog.
This also adds content to `blog.json` file. This file helps in showcasing your blogs on your personal website as cards. You could customize the JSON object that corresponds your current blog. This also adds content to `blog.json` file. This file helps in showcasing your blogs on your personal website as cards. You could customize the JSON object that corresponds your current blog.
Default JSON Format Default JSON Format
``` ```
{ {
"url_title": "my-first-blog", // the title you provide while creating a new blog "url_title": "my-first-blog", // the title you provide while creating a new blog
"title": "Lorem ipsum dolor sit amet", // main title of blog "title": "Lorem ipsum dolor sit amet", // main title of blog
"sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // sub-title of blog "sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // sub-title of blog
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog "top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
"visible": true // don't worry about this "visible": true // don't worry about this
} }
``` ```
Card view of blog Card view of blog
<img src="https://i.imgur.com/ys9AMwt.png" width="50%"> <img src="https://i.imgur.com/ys9AMwt.png" width="50%">
### Enable Blogs ### 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. 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.
After enabling blogs you need to run the `build` command to update your personal website. After enabling blogs you need to run the `build` command to update your personal website.
## License ## License
![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg) ![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg)

106
assets/blog_template.html
View file

@ -1,54 +1,54 @@
<!DOCTYPE html><html lang="en"><head> <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lorem ipsum dolor</title> <title>Lorem ipsum dolor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> <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="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head> </head>
<body> <body>
<div id="loading"> <div id="loading">
<div id="spinner"></div> <div id="spinner"></div>
</div> </div>
<a href="/" class="go_back"><i class="fas fa-arrow-left"></i></a> <a href="/" class="go_back"><i class="fas fa-arrow-left"></i></a>
<div id="background"></div> <div id="background"></div>
<table id="profile_blog"> <table id="profile_blog">
<tbody><tr> <tbody><tr>
<td style="width:8vw;"><div id="profile_img_blog"></div></td> <td style="width:8vw;"><div id="profile_img_blog"></div></td>
<td style="width:52vw;"> <td style="width:52vw;">
<div id="username_blog"></div> <div id="username_blog"></div>
</td> </td>
</tr> </tr>
</tbody></table> </tbody></table>
<div id="blog-display"> <div id="blog-display">
<h1 id="blog_title">Lorem ipsum dolor</h1> <h1 id="blog_title">Lorem ipsum dolor</h1>
<h2 id="blog_sub_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> <h2 id="blog_sub_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<div id="blog"> <div id="blog">
<img src="https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450"> <img src="https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450">
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat pretium sem, ac maximus dui sodales a. Nunc aliquet hendrerit turpis ac egestas. Phasellus volutpat tristique maximus. <b>Pellentesque feugiat eget nisi et dignissim.</b> Nam nibh erat, sollicitudin non facilisis nec, scelerisque nec ipsum. Sed accumsan velit condimentum, pharetra felis vitae, commodo tellus. <u><i>Mauris consequat luctus orci.</i></u></p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat pretium sem, ac maximus dui sodales a. Nunc aliquet hendrerit turpis ac egestas. Phasellus volutpat tristique maximus. <b>Pellentesque feugiat eget nisi et dignissim.</b> Nam nibh erat, sollicitudin non facilisis nec, scelerisque nec ipsum. Sed accumsan velit condimentum, pharetra felis vitae, commodo tellus. <u><i>Mauris consequat luctus orci.</i></u></p>
<p> <p>
Vivamus pharetra lobortis dui non tincidunt. Mauris vitae nisi vestibulum, mollis magna a, maximus mi. Suspendisse dictum eget augue quis sodales. Quisque rutrum ligula nec dapibus tincidunt. <span>Proin hendrerit massa a tellus vestibulum, a hendrerit ipsum iaculis. Suspendisse potenti.</span> Praesent eget erat blandit, finibus sapien vitae, ullamcorper erat. Integer blandit, felis at ullamcorper maximus, odio lectus pretium mauris, vel consequat lectus quam eu risus. Pellentesque gravida nec diam eget vehicula. Vivamus pharetra lobortis dui non tincidunt. Mauris vitae nisi vestibulum, mollis magna a, maximus mi. Suspendisse dictum eget augue quis sodales. Quisque rutrum ligula nec dapibus tincidunt. <span>Proin hendrerit massa a tellus vestibulum, a hendrerit ipsum iaculis. Suspendisse potenti.</span> Praesent eget erat blandit, finibus sapien vitae, ullamcorper erat. Integer blandit, felis at ullamcorper maximus, odio lectus pretium mauris, vel consequat lectus quam eu risus. Pellentesque gravida nec diam eget vehicula.
</p> </p>
<img src="https://images.unsplash.com/photo-1556814278-8906c7d3a05f?w=1050"> <img src="https://images.unsplash.com/photo-1556814278-8906c7d3a05f?w=1050">
<p> <p>
Donec hendrerit turpis non libero eleifend dignissim. Mauris non tempor metus, et tristique massa. Integer consequat justo quam, vitae aliquam arcu vestibulum at. Donec porttitor quam in tempus convallis. Praesent feugiat eget eros vitae accumsan. Duis ultricies odio quis nisl volutpat, consectetur imperdiet sem laoreet. Quisque maximus semper ligula at tincidunt. Pellentesque accumsan varius vehicula. Donec hendrerit turpis non libero eleifend dignissim. Mauris non tempor metus, et tristique massa. Integer consequat justo quam, vitae aliquam arcu vestibulum at. Donec porttitor quam in tempus convallis. Praesent feugiat eget eros vitae accumsan. Duis ultricies odio quis nisl volutpat, consectetur imperdiet sem laoreet. Quisque maximus semper ligula at tincidunt. Pellentesque accumsan varius vehicula.
</p> </p>
</div> </div>
</div> </div>
<div id="footer_blog"> <div id="footer_blog">
<a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a> <a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
setTimeout(function(){ setTimeout(function(){
document.getElementById("loading").classList.add("animated"); document.getElementById("loading").classList.add("animated");
document.getElementById("loading").classList.add("fadeOut"); document.getElementById("loading").classList.add("fadeOut");
setTimeout(function(){ setTimeout(function(){
document.getElementById("loading").classList.remove("animated"); document.getElementById("loading").classList.remove("animated");
document.getElementById("loading").classList.remove("fadeOut"); document.getElementById("loading").classList.remove("fadeOut");
document.getElementById("loading").style.display = "none"; document.getElementById("loading").style.display = "none";
},800); },800);
},1500); },1500);
</script> </script>
</body></html> </body></html>

4
assets/index.css
View file

@ -74,6 +74,10 @@ body{
font-family: 'Questrial', sans-serif; font-family: 'Questrial', sans-serif;
} }
.emoji {
width:18px;
height:18px;
}
#profile_img_blog { #profile_img_blog {
border-radius:50%; border-radius:50%;

2
blog.js
View file

@ -6,7 +6,7 @@ options = {
}; };
program program
.version('0.1.0') .version('0.1.1')
.option('-t, --title [title]', 'give blog a title') .option('-t, --title [title]', 'give blog a title')
.parse(process.argv); .parse(process.argv);

2
blog/blog.json
View file

@ -1 +1 @@
[] []

21
build.js
View file

@ -1,13 +1,14 @@
const program = require('commander'); const program = require('commander');
const fs = require('fs'); const fs = require('fs');
const got = require('got'); const got = require('got');
const emoji = require('github-emoji');
const jsdom = require('jsdom').JSDOM, const jsdom = require('jsdom').JSDOM,
options = { options = {
resources: "usable" resources: "usable"
}; };
program program
.version('0.1.0') .version('0.1.1')
.option('-n, --name [username]', 'get username') .option('-n, --name [username]', 'get username')
.option('-d, --dark', 'enable dark mode') .option('-d, --dark', 'enable dark mode')
.option('-b, --background [background]', 'set background image') .option('-b, --background [background]', 'set background image')
@ -46,6 +47,20 @@ if (program.background) {
populateCSS(); populateCSS();
} }
function convertToEmoji(text){
if (text == null) return;
text = text.toString();
if(text.match(/\:(.*)\:/) != null){
var str = text.match(/\:(.*)\:/)[1];
var output = emoji.of(str);
var emojiImage = output.url.replace("assets-cdn.github", "github.githubassets");
text = text.replace(/\:(.*)\:/, `<img src="${emojiImage}" class="emoji">`);
return text;
}else{
return text;
}
}
function populateHTML(username){ function populateHTML(username){
//add data to assets/index.html //add data to assets/index.html
jsdom.fromFile("./assets/index.html", options).then(function (dom) { jsdom.fromFile("./assets/index.html", options).then(function (dom) {
@ -62,7 +77,7 @@ jsdom.fromFile("./assets/index.html", options).then(function (dom) {
<section> <section>
<div class="section_title">${repos[i].name}</div> <div class="section_title">${repos[i].name}</div>
<div class="about_section"> <div class="about_section">
${repos[i].description} ${convertToEmoji(repos[i].description)}
</div> </div>
<div class="bottom_section"> <div class="bottom_section">
<span><i class="fas fa-code"></i>&nbsp; ${repos[i].language}</span> <span><i class="fas fa-code"></i>&nbsp; ${repos[i].language}</span>
@ -84,7 +99,7 @@ jsdom.fromFile("./assets/index.html", options).then(function (dom) {
document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center` document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
document.getElementById("username").innerHTML = `<span>${user.name}</span><br>@${user.login}`; document.getElementById("username").innerHTML = `<span>${user.name}</span><br>@${user.login}`;
//document.getElementById("github_link").href = `https://github.com/${user.login}`; //document.getElementById("github_link").href = `https://github.com/${user.login}`;
document.getElementById("userbio").innerHTML = user.bio; document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block'; document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
document.getElementById("about").innerHTML = ` document.getElementById("about").innerHTML = `
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> &nbsp; ${user.email}</span> <span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> &nbsp; ${user.email}</span>

1741
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

33
package.json
View file

@ -1,16 +1,17 @@
{ {
"name": "gitfolio", "name": "gitfolio",
"version": "1.0.0", "version": "0.1.1",
"description": "portfolio website for showcasing your work", "description": "portfolio website for showcasing your work",
"main": "build.js", "main": "build.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"author": "imfunny", "author": "imfunny",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"commander": "^2.20.0", "commander": "^2.20.0",
"got": "^9.6.0", "github-emoji": "^1.1.0",
"jsdom": "^15.0.0" "got": "^9.6.0",
} "jsdom": "^15.0.0"
} }
}