This repository has been archived by the owner on Feb 19, 2022. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added emojis 👀🙌👌🔥
- Loading branch information
Showing
9 changed files
with
1,746 additions
and
1,721 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| [] | ||
| [] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.