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
|
|
@ -1,76 +1,76 @@
|
||||||
# Contributor Covenant Code of Conduct
|
# Contributor Covenant Code of Conduct
|
||||||
|
|
||||||
## Our Pledge
|
## Our Pledge
|
||||||
|
|
||||||
In the interest of fostering an open and welcoming environment, we as
|
In the interest of fostering an open and welcoming environment, we as
|
||||||
contributors and maintainers pledge to making participation in our project and
|
contributors and maintainers pledge to making participation in our project and
|
||||||
our community a harassment-free experience for everyone, regardless of age, body
|
our community a harassment-free experience for everyone, regardless of age, body
|
||||||
size, disability, ethnicity, sex characteristics, gender identity and expression,
|
size, disability, ethnicity, sex characteristics, gender identity and expression,
|
||||||
level of experience, education, socio-economic status, nationality, personal
|
level of experience, education, socio-economic status, nationality, personal
|
||||||
appearance, race, religion, or sexual identity and orientation.
|
appearance, race, religion, or sexual identity and orientation.
|
||||||
|
|
||||||
## Our Standards
|
## Our Standards
|
||||||
|
|
||||||
Examples of behavior that contributes to creating a positive environment
|
Examples of behavior that contributes to creating a positive environment
|
||||||
include:
|
include:
|
||||||
|
|
||||||
* Using welcoming and inclusive language
|
* Using welcoming and inclusive language
|
||||||
* Being respectful of differing viewpoints and experiences
|
* Being respectful of differing viewpoints and experiences
|
||||||
* Gracefully accepting constructive criticism
|
* Gracefully accepting constructive criticism
|
||||||
* Focusing on what is best for the community
|
* Focusing on what is best for the community
|
||||||
* Showing empathy towards other community members
|
* Showing empathy towards other community members
|
||||||
|
|
||||||
Examples of unacceptable behavior by participants include:
|
Examples of unacceptable behavior by participants include:
|
||||||
|
|
||||||
* The use of sexualized language or imagery and unwelcome sexual attention or
|
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||||
advances
|
advances
|
||||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||||
* Public or private harassment
|
* Public or private harassment
|
||||||
* Publishing others' private information, such as a physical or electronic
|
* Publishing others' private information, such as a physical or electronic
|
||||||
address, without explicit permission
|
address, without explicit permission
|
||||||
* Other conduct which could reasonably be considered inappropriate in a
|
* Other conduct which could reasonably be considered inappropriate in a
|
||||||
professional setting
|
professional setting
|
||||||
|
|
||||||
## Our Responsibilities
|
## Our Responsibilities
|
||||||
|
|
||||||
Project maintainers are responsible for clarifying the standards of acceptable
|
Project maintainers are responsible for clarifying the standards of acceptable
|
||||||
behavior and are expected to take appropriate and fair corrective action in
|
behavior and are expected to take appropriate and fair corrective action in
|
||||||
response to any instances of unacceptable behavior.
|
response to any instances of unacceptable behavior.
|
||||||
|
|
||||||
Project maintainers have the right and responsibility to remove, edit, or
|
Project maintainers have the right and responsibility to remove, edit, or
|
||||||
reject comments, commits, code, wiki edits, issues, and other contributions
|
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||||
that are not aligned to this Code of Conduct, or to ban temporarily or
|
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||||
permanently any contributor for other behaviors that they deem inappropriate,
|
permanently any contributor for other behaviors that they deem inappropriate,
|
||||||
threatening, offensive, or harmful.
|
threatening, offensive, or harmful.
|
||||||
|
|
||||||
## Scope
|
## Scope
|
||||||
|
|
||||||
This Code of Conduct applies both within project spaces and in public spaces
|
This Code of Conduct applies both within project spaces and in public spaces
|
||||||
when an individual is representing the project or its community. Examples of
|
when an individual is representing the project or its community. Examples of
|
||||||
representing a project or community include using an official project e-mail
|
representing a project or community include using an official project e-mail
|
||||||
address, posting via an official social media account, or acting as an appointed
|
address, posting via an official social media account, or acting as an appointed
|
||||||
representative at an online or offline event. Representation of a project may be
|
representative at an online or offline event. Representation of a project may be
|
||||||
further defined and clarified by project maintainers.
|
further defined and clarified by project maintainers.
|
||||||
|
|
||||||
## Enforcement
|
## Enforcement
|
||||||
|
|
||||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||||
reported by contacting the project team at imfunny@wybemf.com. All
|
reported by contacting the project team at imfunny@wybemf.com. All
|
||||||
complaints will be reviewed and investigated and will result in a response that
|
complaints will be reviewed and investigated and will result in a response that
|
||||||
is deemed necessary and appropriate to the circumstances. The project team is
|
is deemed necessary and appropriate to the circumstances. The project team is
|
||||||
obligated to maintain confidentiality with regard to the reporter of an incident.
|
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||||
Further details of specific enforcement policies may be posted separately.
|
Further details of specific enforcement policies may be posted separately.
|
||||||
|
|
||||||
Project maintainers who do not follow or enforce the Code of Conduct in good
|
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||||
faith may face temporary or permanent repercussions as determined by other
|
faith may face temporary or permanent repercussions as determined by other
|
||||||
members of the project's leadership.
|
members of the project's leadership.
|
||||||
|
|
||||||
## Attribution
|
## Attribution
|
||||||
|
|
||||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||||
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
||||||
|
|
||||||
[homepage]: https://www.contributor-covenant.org
|
[homepage]: https://www.contributor-covenant.org
|
||||||
|
|
||||||
For answers to common questions about this code of conduct, see
|
For answers to common questions about this code of conduct, see
|
||||||
https://www.contributor-covenant.org/faq
|
https://www.contributor-covenant.org/faq
|
||||||
|
|
|
||||||
251
README.md
251
README.md
|
|
@ -1,128 +1,123 @@
|
||||||
<img src="https://i.imgur.com/eA6clZr.png">
|
<img src="https://i.imgur.com/eA6clZr.png">
|
||||||
|
|
||||||
# Gitfolio [](https://twitter.com/intent/tweet?text=personal%20website%20and%20a%20blog%20for%20every%20github%20user%20&url=https://github.com/imfunniee/gitfolio)    
|
# Gitfolio [](https://twitter.com/intent/tweet?text=personal%20website%20and%20a%20blog%20for%20every%20github%20user%20&url=https://github.com/imfunniee/gitfolio)    
|
||||||
|
|
||||||
### personal website + blog for every github user
|
### personal website + blog for every github user
|
||||||
|
|
||||||
Gitfolio will help you 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 you get started with a portfolio website where you could showcase your work + a blog that will help you spread your ideas into real world.
|
||||||
|
|
||||||
Check out this [live demo](https://imfunniee.github.io/gitfolio/) to see gitfolio in action.
|
Check out this [live demo](https://imfunniee.github.io/gitfolio/) to see gitfolio in action.
|
||||||
|
|
||||||
# Getting Started
|
# Getting Started
|
||||||
|
|
||||||
### Let's Build
|
### Let's Build
|
||||||
|
|
||||||
```sh
|
a. Clone this repo or simply download it.
|
||||||
git clone https://github.com/imfunniee/gitfolio.git # Clone the repo
|
```sh
|
||||||
cd gitfolio # Navigate into the project folder
|
git clone https://github.com/imfunniee/gitfolio.git
|
||||||
npm i # Install the required dependencies
|
```
|
||||||
```
|
|
||||||
|
b. `cd` into the repo you just cloned or downloaded.
|
||||||
Gitfolio is now ready to be used. The command
|
```sh
|
||||||
|
cd gitfolio # Navigate into the project folder
|
||||||
```sh
|
npm i # Install the required dependencies
|
||||||
node build --name [username]
|
```
|
||||||
```
|
|
||||||
|
c. Gitfolio is now ready to be used. The command
|
||||||
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]
|
||||||
```sh
|
```
|
||||||
node build --name [username] --out [directory]
|
Will build your website using your GitHub username and put it in the `dist/` folder.
|
||||||
```
|
|
||||||
|
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
|
🎉 Congrats, you just made yourself a personal website!
|
||||||
open dist/index.html
|
|
||||||
```
|
> if you get stuck somewhere or get an error, please create an issue
|
||||||
|
|
||||||
If you specified a different output directory, replace `dist/` with the directory you used.
|
### Let's Customize
|
||||||
Congrats, you just made yourself a personal website!
|
|
||||||
|
#### Enabling Themes
|
||||||
> if you get stuck somewhere or get an error, please create an issue
|
|
||||||
|
Themes are specified using the `--theme [theme-name]` flag when running the `build` command. The available themes are
|
||||||
### Let's Customize
|
|
||||||
|
* `light`
|
||||||
#### Enabling Themes
|
* `dark`
|
||||||
|
> TODO: Add more themes
|
||||||
Themes are specified using the `--theme [theme-name]` flag when running the `build` command. The available themes are
|
|
||||||
|
For example, the following command will build the website with the dark theme
|
||||||
* `light`
|
```
|
||||||
* `dark`
|
$ node build --name username --theme dark
|
||||||
> TODO: Add more themes
|
```
|
||||||
|
|
||||||
For example, the following command will build the website with the dark theme
|
#### Customize background image
|
||||||
```
|
|
||||||
$ node build --name username --theme dark
|
To customize the background image just provide `--background [url]` argument while building
|
||||||
```
|
|
||||||
|
```
|
||||||
#### Customize background image
|
$ node build --name username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634
|
||||||
|
```
|
||||||
To customize the background image just provide `--background [url]` argument while building
|
|
||||||
|
You could also add in your custom CSS inside `index.css` to give it a more personal feel.
|
||||||
```
|
|
||||||
$ node build --name username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634
|
|
||||||
```
|
### Let's Publish
|
||||||
|
|
||||||
You could also add in your custom CSS inside `index.css` to give it a more personal feel.
|
### 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.
|
||||||
### Let's Publish
|
|
||||||
|
Go To `username.github.io` your site should be up!!
|
||||||
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.
|
|
||||||
|
|
||||||
### Updating
|
### Updating
|
||||||
|
|
||||||
To update your info, simply run
|
To update your info, simply run
|
||||||
|
|
||||||
```
|
```
|
||||||
$ node update
|
$ node update
|
||||||
```
|
```
|
||||||
This will update your info and your repository info.
|
This will update your info and your repository info.
|
||||||
|
|
||||||
To Update background or theme you need to run `build` command again.
|
To Update background or theme you need to run `build` command again.
|
||||||
|
|
||||||
|
|
||||||
### Add a Blog
|
### Add a Blog
|
||||||
|
|
||||||
To add your first blog run this command, make sure the title don't have spaces instead use "-".
|
To add your first blog run this command, make sure the title don't have spaces instead use "-".
|
||||||
|
|
||||||
```
|
```
|
||||||
$ 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](https://imfunniee.github.io/gitfolio/#blog_section). 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](https://imfunniee.github.io/gitfolio/#blog_section). You could customize the JSON object that corresponds your current blog.
|
||||||
|
|
||||||
Blog Demo? [here](https://imfunniee.github.io/gitfolio/blog/my-first-blog/)
|
Blog Demo? [here](https://imfunniee.github.io/gitfolio/blog/my-first-blog/)
|
||||||
|
|
||||||
Default JSON Format
|
Default JSON Format
|
||||||
```
|
```
|
||||||
{
|
{
|
||||||
"url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
|
"url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
|
||||||
"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
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
More Arguments for Blog
|
More Arguments for Blog
|
||||||
|
|
||||||
```
|
```
|
||||||
--subtitle [subtitle] : gives blog a subtitle (Deafult : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
|
--subtitle [subtitle] : gives blog a subtitle (Deafult : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
|
||||||
--pagetitle [pagetitle] : gives blog page a title
|
--pagetitle [pagetitle] : gives blog page a title
|
||||||
--folder [folder] : give folder a title
|
--folder [folder] : give folder a title
|
||||||
```
|
```
|
||||||
|
|
||||||
> (use "-" instead of spaces)
|
> (use "-" instead of spaces)
|
||||||
|
|
||||||
### Enable Blogs
|
|
||||||
|
## License
|
||||||
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-size: cover !important;
|
||||||
background-repeat:no-repeat;
|
background-repeat:no-repeat;
|
||||||
position:fixed;
|
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 {
|
#display {
|
||||||
|
|
@ -67,13 +90,54 @@ body{
|
||||||
padding-left:33vw;
|
padding-left:33vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
#display h1 {
|
#display h1 span {
|
||||||
font-size:50px;
|
font-size:50px;
|
||||||
color:var(--text-color);
|
color:var(--text-color);
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
font-family: 'Questrial', sans-serif;
|
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 {
|
.emoji {
|
||||||
width:18px;
|
width:18px;
|
||||||
height:18px;
|
height:18px;
|
||||||
|
|
@ -249,6 +313,11 @@ body{
|
||||||
font-size:16px;
|
font-size:16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#about span a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
#work {
|
#work {
|
||||||
margin:2vh 0px;
|
margin:2vh 0px;
|
||||||
padding:4vh 0px !important;
|
padding:4vh 0px !important;
|
||||||
|
|
@ -278,6 +347,30 @@ body{
|
||||||
transform:scale(1.03);
|
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 {
|
.section_title {
|
||||||
font-size:24px;
|
font-size:24px;
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
|
|
@ -364,6 +457,27 @@ body{
|
||||||
text-align:center;
|
text-align:center;
|
||||||
position: relative;
|
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 {
|
#display {
|
||||||
width:90vw;
|
width:90vw;
|
||||||
padding:4vh 5vw;
|
padding:4vh 5vw;
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,6 @@
|
||||||
<title></title>
|
<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://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">
|
||||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
|
||||||
<link rel="stylesheet" href="index.css">
|
<link rel="stylesheet" href="index.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -15,6 +14,7 @@
|
||||||
<div id="spinner"></div>
|
<div id="spinner"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="profile">
|
<div id="profile">
|
||||||
|
<nav id="navbar"></nav>
|
||||||
<div id="profile_img"></div>
|
<div id="profile_img"></div>
|
||||||
<div id="username">
|
<div id="username">
|
||||||
<div id="fullname"></div>
|
<div id="fullname"></div>
|
||||||
|
|
@ -24,10 +24,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="display">
|
<div id="display">
|
||||||
<div id="work">
|
<div id="work">
|
||||||
<h1>Work.</h1>
|
<h1>Work</h1>
|
||||||
<div id="projects"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="blog_section" style="display:none;">
|
<div id="blog_section">
|
||||||
<h1>Blog.</h1>
|
<h1>Blog.</h1>
|
||||||
<div id="blogs"></div>
|
<div id="blogs"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -35,6 +34,7 @@
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
document.getElementById("loading").classList.add("animated");
|
document.getElementById("loading").classList.add("animated");
|
||||||
|
|
@ -45,10 +45,13 @@
|
||||||
document.getElementById("loading").style.display = "none";
|
document.getElementById("loading").style.display = "none";
|
||||||
},800);
|
},800);
|
||||||
},1500);
|
},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++){
|
for(var i = 0; i < blog.length; i++){
|
||||||
$("#blogs").append(`
|
$("#blogs").append(`
|
||||||
<a href="/blog/${blog[i].url_title}/" target="_blank">
|
<a href="./blog/${blog[i].url_title}/" target="_blank">
|
||||||
<section>
|
<section>
|
||||||
<img src="${blog[i].top_image}">
|
<img src="${blog[i].top_image}">
|
||||||
<div class="blog_container">
|
<div class="blog_container">
|
||||||
|
|
@ -59,7 +62,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</a>
|
</a>
|
||||||
`)
|
`);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,31 @@
|
||||||
:root {
|
:root {
|
||||||
--bg-color: rgb(10, 10, 10);
|
--bg-color: rgb(10, 10, 10);
|
||||||
--text-color: #fff;
|
--text-color: #fff;
|
||||||
--blog-gray-color: rgb(180, 180, 180);
|
--blog-gray-color: rgb(180, 180, 180);
|
||||||
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.6), rgb(10, 10, 10, 1)), url("{{background}}");
|
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.6), rgb(10, 10, 10, 1)), url("{{background}}");
|
||||||
--background-background: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6)),
|
--background-background: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6)),
|
||||||
url("{{background-image}}") center center fixed;
|
url("{{background-image}}") center center fixed;
|
||||||
--height: 50vh;
|
--height: 50vh;
|
||||||
}
|
}
|
||||||
#display h1 {
|
#display h1 {
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-text-fill-color: #fff;
|
-webkit-text-fill-color: #fff;
|
||||||
}
|
}
|
||||||
#blog-display h1 {
|
#blog-display h1 {
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-text-fill-color: #fff;
|
-webkit-text-fill-color: #fff;
|
||||||
}
|
}
|
||||||
#projects section {
|
#projects section {
|
||||||
background: rgb(20, 20, 20);
|
background: rgb(20, 20, 20);
|
||||||
}
|
}
|
||||||
#blog_section section {
|
#blog_section section {
|
||||||
background: rgb(20, 20, 20);
|
background: rgb(20, 20, 20);
|
||||||
}
|
}
|
||||||
@media (max-width: 800px) {
|
@media (max-width: 800px) {
|
||||||
:root {
|
:root {
|
||||||
--background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgb(10, 10, 10, 0)),
|
--background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgb(10, 10, 10, 0)),
|
||||||
url("{{background-image}}") !important;
|
url("{{background-image}}") !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #fff;
|
--bg-color: #fff;
|
||||||
--text-color: rgb(10, 10, 10);
|
--text-color: rgb(10, 10, 10);
|
||||||
--blog-gray-color: rgb(80, 80, 80);
|
--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("{{background}}");
|
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.4), rgb(10, 10, 10, 0.4)), url("{{background}}");
|
||||||
--background-background: #fff;
|
--background-background: #fff;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
8
blog.js
8
blog.js
|
|
@ -38,11 +38,11 @@ function createBlog(title, subtitle, pagetitle, folder) {
|
||||||
"sub_title": subtitle,
|
"sub_title": subtitle,
|
||||||
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450",
|
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450",
|
||||||
"visible": true }
|
"visible": true }
|
||||||
fs.readFile("./assets/blog/blog.json", function (err , data) {
|
fs.readFile("./dist/blog.json", function (err , data) {
|
||||||
if (err) throw err;
|
if (err) throw err;
|
||||||
var old_blogs = JSON.parse(data);
|
var old_blogs = JSON.parse(data);
|
||||||
old_blogs.push(blog_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;
|
if (err) throw err;
|
||||||
console.log('Blog Created Successfully in "blog" folder.');
|
console.log('Blog Created Successfully in "blog" folder.');
|
||||||
});
|
});
|
||||||
|
|
@ -61,6 +61,10 @@ if (program.title) {
|
||||||
if (!program.folder) {
|
if (!program.folder) {
|
||||||
program.folder = program.title;
|
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);
|
createBlog(program.title, program.subtitle, program.pagetitle, program.folder);
|
||||||
} else {
|
} else {
|
||||||
console.log("Provide a title to create a new blog");
|
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 */
|
/* Specify the options the program uses */
|
||||||
program
|
program
|
||||||
.version('0.1.1')
|
.version('0.1.1')
|
||||||
.option('-n, --name [username]', 'your GitHub username. This will be used to customize your site')
|
.option('-n, --name [username]', 'get username')
|
||||||
.option('-t, --theme [theme]', 'specify a theme to use')
|
.option('-d, --dark', 'enable dark mode')
|
||||||
.option('-b, --background [background]', 'set the background image')
|
.option('-b, --background [background]', 'set background image')
|
||||||
.option('-o, --out [directory]', 'the output directory to put the built site')
|
.option('-f, --fork [order]', 'include forks')
|
||||||
.parse(process.argv);
|
.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 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.
|
* Creates the stylesheet used by the site from a template stylesheet.
|
||||||
|
|
@ -71,7 +73,16 @@ async function populateCSS() {
|
||||||
populateCSS();
|
populateCSS();
|
||||||
|
|
||||||
if (program.name) {
|
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 {
|
} else {
|
||||||
console.error("Error: Please provide a GitHub username.");
|
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>
|
||||||
150
populate.js
150
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
|
//add data to assets/index.html
|
||||||
jsdom.fromFile("./assets/index.html", options).then(function (dom) {
|
jsdom.fromFile("./assets/index.html", options).then(function (dom) {
|
||||||
let window = dom.window, document = window.document;
|
let window = dom.window, document = window.document;
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
console.log("Building HTML/CSS...");
|
console.log("Building HTML/CSS/JS...");
|
||||||
var repos = await got(`https://api.github.com/users/${username}/repos?sort=created`);
|
var repos = await got(`https://api.github.com/users/${username}/repos?per_page=1200`);
|
||||||
repos = JSON.parse(repos.body);
|
repos = JSON.parse(repos.body);
|
||||||
for (var i = 0; i < repos.length; i++) {
|
for(var i = 0;i < repos.length;i++){
|
||||||
if (repos[i].fork == false) {
|
if(repos[i].fork == false){
|
||||||
document.getElementById("projects").innerHTML += `
|
repos[i].description = convertToEmoji(repos[i].description);
|
||||||
<a href="${repos[i].html_url}" target="_blank">
|
savedRepos.push(repos[i]);
|
||||||
<section>
|
} else {
|
||||||
<div class="section_title">${repos[i].name}</div>
|
repos[i].description = convertToEmoji(repos[i].description);
|
||||||
<div class="about_section">
|
savedForks.push(repos[i]);
|
||||||
<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>
|
var user = await got(`https://api.github.com/users/${username}`);
|
||||||
<span><i class="fas fa-star"></i> ${repos[i].stargazers_count}</span>
|
user = JSON.parse(user.body);
|
||||||
<span><i class="fas fa-code-branch"></i> ${repos[i].forks_count}</span>
|
document.title = user.login;
|
||||||
</div>
|
var icon = document.createElement("link");
|
||||||
</section>
|
icon.setAttribute("rel", "icon");
|
||||||
</a>`;
|
icon.setAttribute("href", user.avatar_url);
|
||||||
}
|
icon.setAttribute("type", "image/png");
|
||||||
}
|
document.getElementsByTagName("head")[0].appendChild(icon);
|
||||||
var user = await got(`https://api.github.com/users/${username}`);
|
document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
|
||||||
user = JSON.parse(user.body);
|
document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`;
|
||||||
document.title = user.login;
|
//document.getElementById("github_link").href = `https://github.com/${user.login}`;
|
||||||
var icon = document.createElement("link");
|
document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
|
||||||
icon.setAttribute("rel", "icon");
|
document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
|
||||||
icon.setAttribute("href", user.avatar_url);
|
document.getElementById("about").innerHTML = `
|
||||||
icon.setAttribute("type", "image/png");
|
<span style="display:${user.company == null || !user.company ? 'none' : 'block'};"><i class="fas fa-users"></i> ${user.company}</span>
|
||||||
document.getElementsByTagName("head")[0].appendChild(icon);
|
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> ${user.email}</span>
|
||||||
document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center`
|
<span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> ${user.blog}</span>
|
||||||
document.getElementById("username").innerHTML = `<span style="display:${user.name == null || !user.name ? 'none' : 'block'};">${user.name}</span>@${user.login}`;
|
<span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> ${user.location}</span>
|
||||||
//document.getElementById("github_link").href = `https://github.com/${user.login}`;
|
<span style="display:${user.hireable == false || !user.hireable ? 'none' : 'block'};"><i class="fas fa-user-tie"></i> Available for hire</span>`;
|
||||||
document.getElementById("userbio").innerHTML = convertToEmoji(user.bio);
|
//add data to config.json
|
||||||
document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block';
|
fs.readFile("./dist/config.json", function (err, data) {
|
||||||
document.getElementById("about").innerHTML = `
|
if (err) throw err;
|
||||||
<span style="display:${user.company == null || !user.company ? 'none' : 'block'};"><i class="fas fa-users"></i> ${user.company}</span>
|
data = JSON.parse(data);
|
||||||
<span style="display:${user.email == null || !user.email ? 'none' : 'block'};"><i class="fas fa-envelope"></i> ${user.email}</span>
|
data[0].username = user.login;
|
||||||
<span style="display:${user.blog == null || !user.blog ? 'none' : 'block'};"><i class="fas fa-link"></i> ${user.blog}</span>
|
data[0].name = user.name;
|
||||||
<span style="display:${user.location == null || !user.location ? 'none' : 'block'};"><i class="fas fa-map-marker-alt"></i> ${user.location}</span>
|
data[0].userimg = user.avatar_url;
|
||||||
<span style="display:${user.hireable == false || !user.hireable ? 'none' : 'block'};"><i class="fas fa-user-tie"></i> Available for hire</span>`;
|
fs.writeFile('./dist/config.json', JSON.stringify(data, null, ' '), function (err) {
|
||||||
//add data to config.json
|
|
||||||
fs.readFile("config.json", function (err, data) {
|
|
||||||
if (err) throw 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) {
|
} catch (error) {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
|
|
@ -96,4 +91,47 @@ module.exports.updateHTML = (username) => {
|
||||||
}).catch(function (error) {
|
}).catch(function (error) {
|
||||||
console.log(error);
|
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 fs = require('fs');
|
||||||
const {updateHTML} = require('./populate');
|
const {updateHTML} = require('./populate');
|
||||||
|
|
||||||
fs.readFile("config.json", function (err , data) {
|
fs.readFile("./dist/config.json", function (err , data) {
|
||||||
if (err) throw err;
|
if (err) throw err;
|
||||||
data = JSON.parse(data);
|
data = JSON.parse(data);
|
||||||
var username = data[0].username;
|
var username = data[0].username;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue