mirror of
https://github.com/dilllxd/gitfolio.git
synced 2024-08-14 22:28:09 +00:00
v0.1.1
added emojis 👀🙌👌🔥
This commit is contained in:
imfunny
GitHub
parent
61387b9cf7
commit
98e2524e1e
9 changed files with 1746 additions and 1721 deletions
210
README.md
210
README.md
|
|
@ -1,105 +1,105 @@
|
|||
<img src="https://i.imgur.com/eA6clZr.png">
|
||||
|
||||
# Gitfolio [](https://twitter.com/intent/tweet?text=about.me%20and%20medium%20but%20for%20every%20github%20user&url=https://github.com/imfunniee/gitfolio)   
|
||||
|
||||
### 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.
|
||||
|
||||
# Getting Started
|
||||
|
||||
### Fork this repository
|
||||
|
||||
Get yourself a copy of this repository by forking it as `username.github.io` so you could customize it.
|
||||
|
||||
### Let's build
|
||||
|
||||
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
|
||||
|
||||
```
|
||||
$ npm i
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
```
|
||||
$ node build --name username
|
||||
```
|
||||
This will create `index.css` and `index.html` files in your working directory.
|
||||
|
||||
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.
|
||||
|
||||
> if you get stuck somewhere or get an error, please create an issue
|
||||
|
||||
### Let's customize
|
||||
|
||||
#### Enabling Dark theme
|
||||
|
||||
To enable dark theme just provide `--dark` as an argument while building
|
||||
|
||||
```
|
||||
$ node build --name username --dark
|
||||
```
|
||||
|
||||
#### Customize background image
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
You could also add in your custom CSS inside `index.css` to give it a more personal feel.
|
||||
|
||||
|
||||
### Let's Publish
|
||||
|
||||
You can host your website using github pages and use a custom domain aswell or simply use `username.github.io`.
|
||||
|
||||
|
||||
### Updating
|
||||
|
||||
To update your info, follow the same steps shown in `Let's build` part
|
||||
|
||||
|
||||
### Add a Blog
|
||||
|
||||
To add your first blog run this command, make sure the title don't have spaces.
|
||||
|
||||
```
|
||||
$ 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 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
|
||||
```
|
||||
{
|
||||
"url_title": "my-first-blog", // the title you provide while creating a new 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
|
||||
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
|
||||
"visible": true // don't worry about this
|
||||
}
|
||||
```
|
||||
Card view of blog
|
||||
|
||||
<img src="https://i.imgur.com/ys9AMwt.png" width="50%">
|
||||
|
||||
### 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.
|
||||
|
||||
After enabling blogs you need to run the `build` command to update your personal website.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
<img src="https://i.imgur.com/eA6clZr.png">
|
||||
|
||||
# Gitfolio [](https://twitter.com/intent/tweet?text=about.me%20and%20medium%20but%20for%20every%20github%20user&url=https://github.com/imfunniee/gitfolio)   
|
||||
|
||||
### 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.
|
||||
|
||||
# Getting Started
|
||||
|
||||
### Fork this repository
|
||||
|
||||
Get yourself a copy of this repository by forking it as `username.github.io` so you could customize it.
|
||||
|
||||
### Let's build
|
||||
|
||||
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
|
||||
|
||||
```
|
||||
$ npm i
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
```
|
||||
$ node build --name username
|
||||
```
|
||||
This will create `index.css` and `index.html` files in your working directory.
|
||||
|
||||
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.
|
||||
|
||||
> if you get stuck somewhere or get an error, please create an issue
|
||||
|
||||
### Let's customize
|
||||
|
||||
#### Enabling Dark theme
|
||||
|
||||
To enable dark theme just provide `--dark` as an argument while building
|
||||
|
||||
```
|
||||
$ node build --name username --dark
|
||||
```
|
||||
|
||||
#### Customize background image
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
You could also add in your custom CSS inside `index.css` to give it a more personal feel.
|
||||
|
||||
|
||||
### Let's Publish
|
||||
|
||||
You can host your website using github pages and use a custom domain aswell or simply use `username.github.io`.
|
||||
|
||||
|
||||
### Updating
|
||||
|
||||
To update your info, follow the same steps shown in `Let's build` part
|
||||
|
||||
|
||||
### Add a Blog
|
||||
|
||||
To add your first blog run this command, make sure the title don't have spaces.
|
||||
|
||||
```
|
||||
$ 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 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
|
||||
```
|
||||
{
|
||||
"url_title": "my-first-blog", // the title you provide while creating a new 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
|
||||
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
|
||||
"visible": true // don't worry about this
|
||||
}
|
||||
```
|
||||
Card view of blog
|
||||
|
||||
<img src="https://i.imgur.com/ys9AMwt.png" width="50%">
|
||||
|
||||
### 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.
|
||||
|
||||
After enabling blogs you need to run the `build` command to update your personal website.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
|
|
|
|||
|
|
@ -1,54 +1,54 @@
|
|||
<!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>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://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<div id="spinner"></div>
|
||||
</div>
|
||||
<a href="/" class="go_back"><i class="fas fa-arrow-left"></i></a>
|
||||
<div id="background"></div>
|
||||
<table id="profile_blog">
|
||||
<tbody><tr>
|
||||
<td style="width:8vw;"><div id="profile_img_blog"></div></td>
|
||||
<td style="width:52vw;">
|
||||
<div id="username_blog"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
<div id="blog-display">
|
||||
<h1 id="blog_title">Lorem ipsum dolor</h1>
|
||||
<h2 id="blog_sub_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
|
||||
<div id="blog">
|
||||
<img src="https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450">
|
||||
<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>
|
||||
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>
|
||||
<img src="https://images.unsplash.com/photo-1556814278-8906c7d3a05f?w=1050">
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer_blog">
|
||||
<a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
|
||||
</div>
|
||||
<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);
|
||||
</script>
|
||||
|
||||
<!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>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://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<div id="spinner"></div>
|
||||
</div>
|
||||
<a href="/" class="go_back"><i class="fas fa-arrow-left"></i></a>
|
||||
<div id="background"></div>
|
||||
<table id="profile_blog">
|
||||
<tbody><tr>
|
||||
<td style="width:8vw;"><div id="profile_img_blog"></div></td>
|
||||
<td style="width:52vw;">
|
||||
<div id="username_blog"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
<div id="blog-display">
|
||||
<h1 id="blog_title">Lorem ipsum dolor</h1>
|
||||
<h2 id="blog_sub_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
|
||||
<div id="blog">
|
||||
<img src="https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450">
|
||||
<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>
|
||||
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>
|
||||
<img src="https://images.unsplash.com/photo-1556814278-8906c7d3a05f?w=1050">
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer_blog">
|
||||
<a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
|
||||
</div>
|
||||
<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);
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -74,6 +74,10 @@ body{
|
|||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width:18px;
|
||||
height:18px;
|
||||
}
|
||||
|
||||
#profile_img_blog {
|
||||
border-radius:50%;
|
||||
|
|
|
|||
2
blog.js
2
blog.js
|
|
@ -6,7 +6,7 @@ options = {
|
|||
};
|
||||
|
||||
program
|
||||
.version('0.1.0')
|
||||
.version('0.1.1')
|
||||
.option('-t, --title [title]', 'give blog a title')
|
||||
.parse(process.argv);
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
[]
|
||||
[]
|
||||
|
|
|
|||
21
build.js
21
build.js
|
|
@ -1,13 +1,14 @@
|
|||
const program = require('commander');
|
||||
const fs = require('fs');
|
||||
const got = require('got');
|
||||
const emoji = require('github-emoji');
|
||||
const jsdom = require('jsdom').JSDOM,
|
||||
options = {
|
||||
resources: "usable"
|
||||
};
|
||||
|
||||
program
|
||||
.version('0.1.0')
|
||||
.version('0.1.1')
|
||||
.option('-n, --name [username]', 'get username')
|
||||
.option('-d, --dark', 'enable dark mode')
|
||||
.option('-b, --background [background]', 'set background image')
|
||||
|
|
@ -46,6 +47,20 @@ if (program.background) {
|
|||
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){
|
||||
//add data to assets/index.html
|
||||
jsdom.fromFile("./assets/index.html", options).then(function (dom) {
|
||||
|
|
@ -62,7 +77,7 @@ jsdom.fromFile("./assets/index.html", options).then(function (dom) {
|
|||
<section>
|
||||
<div class="section_title">${repos[i].name}</div>
|
||||
<div class="about_section">
|
||||
${repos[i].description}
|
||||
${convertToEmoji(repos[i].description)}
|
||||
</div>
|
||||
<div class="bottom_section">
|
||||
<span><i class="fas fa-code"></i> ${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("username").innerHTML = `<span>${user.name}</span><br>@${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("about").innerHTML = `
|
||||
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> ${user.email}</span>
|
||||
|
|
|
|||
1741
package-lock.json
generated
1741
package-lock.json
generated
File diff suppressed because it is too large
Load diff
33
package.json
33
package.json
|
|
@ -1,16 +1,17 @@
|
|||
{
|
||||
"name": "gitfolio",
|
||||
"version": "1.0.0",
|
||||
"description": "portfolio website for showcasing your work",
|
||||
"main": "build.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "imfunny",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"commander": "^2.20.0",
|
||||
"got": "^9.6.0",
|
||||
"jsdom": "^15.0.0"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "gitfolio",
|
||||
"version": "0.1.1",
|
||||
"description": "portfolio website for showcasing your work",
|
||||
"main": "build.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "imfunny",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"commander": "^2.20.0",
|
||||
"github-emoji": "^1.1.0",
|
||||
"got": "^9.6.0",
|
||||
"jsdom": "^15.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue