diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index ea317e7..8b36e4e 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,76 +1,76 @@ -# Contributor Covenant Code of Conduct - -## Our Pledge - -In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to making participation in our project and -our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, sex characteristics, gender identity and expression, -level of experience, education, socio-economic status, nationality, personal -appearance, race, religion, or sexual identity and orientation. - -## Our Standards - -Examples of behavior that contributes to creating a positive environment -include: - -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members - -Examples of unacceptable behavior by participants include: - -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting - -## Our Responsibilities - -Project maintainers are responsible for clarifying the standards of acceptable -behavior and are expected to take appropriate and fair corrective action in -response to any instances of unacceptable behavior. - -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. - -## Scope - -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 -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 -representative at an online or offline event. Representation of a project may be -further defined and clarified by project maintainers. - -## Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at imfunny@wybemf.com. All -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 -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. - -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 -members of the project's leadership. - -## Attribution - -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 - -[homepage]: https://www.contributor-covenant.org - -For answers to common questions about this code of conduct, see -https://www.contributor-covenant.org/faq +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or + advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +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 +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 +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at imfunny@wybemf.com. All +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 +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +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 +members of the project's leadership. + +## Attribution + +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 + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see +https://www.contributor-covenant.org/faq diff --git a/README.md b/README.md index a3ea1d4..c05395f 100644 --- a/README.md +++ b/README.md @@ -1,128 +1,123 @@ - - -# Gitfolio [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=personal%20website%20and%20a%20blog%20for%20every%20github%20user%20&url=https://github.com/imfunniee/gitfolio) ![GitHub release](https://img.shields.io/github/release/imfunniee/gitfolio.svg) ![GitHub top language](https://img.shields.io/github/languages/top/imfunniee/gitfolio.svg) ![GitHub last commit](https://img.shields.io/github/last-commit/imfunniee/gitfolio.svg) ![GitHub](https://img.shields.io/github/license/imfunniee/gitfolio.svg) - -### 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. - -Check out this [live demo](https://imfunniee.github.io/gitfolio/) to see gitfolio in action. - -# Getting Started - -### Let's Build - -```sh -git clone https://github.com/imfunniee/gitfolio.git # Clone the repo -cd gitfolio # Navigate into the project folder -npm i # Install the required dependencies -``` - -Gitfolio is now ready to be used. The command - -```sh -node build --name [username] -``` - -Will build your website using your GitHub username and put it in the `dist/` folder. -If you want to use a different folder, you can specify it by setting the `--out` flag. - -```sh -node build --name [username] --out [directory] -``` - -To open your site, run -```sh -open dist/index.html -``` - -If you specified a different output directory, replace `dist/` with the directory you used. -Congrats, you just made yourself a personal website! - -> if you get stuck somewhere or get an error, please create an issue - -### Let's Customize - -#### Enabling Themes - -Themes are specified using the `--theme [theme-name]` flag when running the `build` command. The available themes are - -* `light` -* `dark` -> TODO: Add more themes - -For example, the following command will build the website with the dark theme -``` -$ node build --name username --theme 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 - -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 - -To update your info, simply run - -``` -$ node update -``` -This will update your info and your repository info. - -To Update background or theme you need to run `build` command again. - - -### Add a Blog - -To add your first blog run this command, make sure the title don't have spaces instead use "-". - -``` -$ 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](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/) - -Default JSON Format -``` -{ - "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 - "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 -} -``` - -More Arguments for Blog - -``` ---subtitle [subtitle] : gives blog a subtitle (Deafult : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.') ---pagetitle [pagetitle] : gives blog page a title ---folder [folder] : give folder a title -``` - -> (use "-" instead of spaces) - -### Enable Blogs - -Blog are disabled by default. To enable them head over to `assets/index.html` and find `
+
@@ -24,10 +24,9 @@
-

Work.

-
+

Work

-
+ diff --git a/assets/themes/dark.css b/assets/themes/dark.css index a325938..3d49ecf 100644 --- a/assets/themes/dark.css +++ b/assets/themes/dark.css @@ -1,31 +1,31 @@ -:root { - --bg-color: rgb(10, 10, 10); - --text-color: #fff; - --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-background: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6)), - url("{{background-image}}") center center fixed; - --height: 50vh; -} -#display h1 { - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: #fff; -} -#blog-display h1 { - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: #fff; -} -#projects section { - background: rgb(20, 20, 20); -} -#blog_section section { - background: rgb(20, 20, 20); -} -@media (max-width: 800px) { - :root { - --background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgb(10, 10, 10, 0)), - url("{{background-image}}") !important; - } -} +:root { + --bg-color: rgb(10, 10, 10); + --text-color: #fff; + --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-background: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.6)), + url("{{background-image}}") center center fixed; + --height: 50vh; +} +#display h1 { + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: #fff; +} +#blog-display h1 { + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: #fff; +} +#projects section { + background: rgb(20, 20, 20); +} +#blog_section section { + background: rgb(20, 20, 20); +} +@media (max-width: 800px) { + :root { + --background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgb(10, 10, 10, 0)), + url("{{background-image}}") !important; + } +} diff --git a/assets/themes/light.css b/assets/themes/light.css index f7f7eb5..330240a 100644 --- a/assets/themes/light.css +++ b/assets/themes/light.css @@ -1,7 +1,7 @@ -: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("{{background}}"); - --background-background: #fff; -} +: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("{{background}}"); + --background-background: #fff; +} diff --git a/blog.js b/blog.js index 77afaa1..e79cedd 100644 --- a/blog.js +++ b/blog.js @@ -38,11 +38,11 @@ function createBlog(title, subtitle, pagetitle, folder) { "sub_title": subtitle, "top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", "visible": true } - fs.readFile("./assets/blog/blog.json", function (err , data) { + fs.readFile("./dist/blog.json", function (err , data) { if (err) throw err; var old_blogs = JSON.parse(data); old_blogs.push(blog_data); - fs.writeFile('./assets/blog/blog.json', JSON.stringify(old_blogs, null, ' '), function(err){ + fs.writeFile('./dist/blog.json', JSON.stringify(old_blogs, null, ' '), function(err){ if (err) throw err; console.log('Blog Created Successfully in "blog" folder.'); }); @@ -61,6 +61,10 @@ if (program.title) { if (!program.folder) { program.folder = program.title; } + /* Check if build has been executed before blog this will prevent it from giving "link : index.css" error */ + if (!fs.existsSync(`./dist/index.html`)){ + return console.log("You need to run build command before using blog one"); + } createBlog(program.title, program.subtitle, program.pagetitle, program.folder); } else { console.log("Provide a title to create a new blog"); diff --git a/build.js b/build.js index 2fc19f7..4e1135d 100644 --- a/build.js +++ b/build.js @@ -13,16 +13,18 @@ const { updateHTML } = require('./populate'); /* Specify the options the program uses */ program - .version('0.1.1') - .option('-n, --name [username]', 'your GitHub username. This will be used to customize your site') - .option('-t, --theme [theme]', 'specify a theme to use') - .option('-b, --background [background]', 'set the background image') - .option('-o, --out [directory]', 'the output directory to put the built site') - .parse(process.argv); + .version('0.1.1') + .option('-n, --name [username]', 'get username') + .option('-d, --dark', 'enable dark mode') + .option('-b, --background [background]', 'set background image') + .option('-f, --fork [order]', 'include forks') + .option('-s, --sort [sort]', 'set default sort for repository') + .option('-o, --order [order]', 'set default order on sort') + .parse(process.argv); -const config = 'config.json'; +const config = './dist/config.json'; const assetDir = path.resolve('./assets/'); -const outDir = path.resolve(program.out || './dist/'); +const outDir = path.resolve('./dist/'); /** * Creates the stylesheet used by the site from a template stylesheet. @@ -71,7 +73,16 @@ async function populateCSS() { populateCSS(); if (program.name) { - updateHTML(('%s', program.name)); + let sort = program.sort ? program.sort: 'created_at'; + let order = -1; + + if(program.order){ + if(program.order === 'asc') + order = 1; + else if(program.order === 'desc') + order = -1; + } + updateHTML(('%s', program.name), sort, order); } else { console.error("Error: Please provide a GitHub username."); } \ No newline at end of file diff --git a/dist/blog.json b/dist/blog.json new file mode 100644 index 0000000..0637a08 --- /dev/null +++ b/dist/blog.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/dist/config.json b/dist/config.json new file mode 100644 index 0000000..181787d --- /dev/null +++ b/dist/config.json @@ -0,0 +1,8 @@ +[ + { + "username": "imfunniee", + "name": "imfunny", + "userimg": "https://avatars3.githubusercontent.com/u/36105478?v=4", + "theme": "light.css" + } +] \ No newline at end of file diff --git a/dist/index.css b/dist/index.css new file mode 100644 index 0000000..fbe53ba --- /dev/null +++ b/dist/index.css @@ -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; +} diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..2c20f0e --- /dev/null +++ b/dist/index.html @@ -0,0 +1,360 @@ + + + + + imfunniee + + + + + +
+
+
+
+ +
+
imfunny@imfunniee
+
Frontend Developer | UI/UX designer
+
+   null +   null +   https://imfunniee.github.io/ +    Mars +    Available for hire
+
+
+
+

Projects

+
+ Filter by: + + +
+ +
+

Forks

+
+ Filter by: + + +
+ +
+
+

Blog.

+
+
+ +
+ + + + + \ No newline at end of file diff --git a/populate.js b/populate.js index 266248c..7c77ce2 100644 --- a/populate.js +++ b/populate.js @@ -27,68 +27,63 @@ function convertToEmoji(text) { } } -module.exports.updateHTML = (username) => { +let savedRepos = []; +let savedForks = []; + +module.exports.updateHTML = (username, sort, order) => { //add data to assets/index.html jsdom.fromFile("./assets/index.html", options).then(function (dom) { let window = dom.window, document = window.document; (async () => { try { - console.log("Building HTML/CSS..."); - var repos = await got(`https://api.github.com/users/${username}/repos?sort=created`); - repos = JSON.parse(repos.body); - for (var i = 0; i < repos.length; i++) { - if (repos[i].fork == false) { - document.getElementById("projects").innerHTML += ` - -
-
${repos[i].name}
-
- ${convertToEmoji(repos[i].description)} -
-
-   ${repos[i].language} -   ${repos[i].stargazers_count} -   ${repos[i].forks_count} -
-
- `; - } - } - var user = await got(`https://api.github.com/users/${username}`); - user = JSON.parse(user.body); - document.title = user.login; - var icon = document.createElement("link"); - icon.setAttribute("rel", "icon"); - icon.setAttribute("href", user.avatar_url); - icon.setAttribute("type", "image/png"); - document.getElementsByTagName("head")[0].appendChild(icon); - document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center` - document.getElementById("username").innerHTML = `${user.name}@${user.login}`; - //document.getElementById("github_link").href = `https://github.com/${user.login}`; - document.getElementById("userbio").innerHTML = convertToEmoji(user.bio); - document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block'; - document.getElementById("about").innerHTML = ` -   ${user.company} -   ${user.email} -   ${user.blog} -    ${user.location} -    Available for hire`; - //add data to config.json - fs.readFile("config.json", function (err, data) { + console.log("Building HTML/CSS/JS..."); + var repos = await got(`https://api.github.com/users/${username}/repos?per_page=1200`); + repos = JSON.parse(repos.body); + for(var i = 0;i < repos.length;i++){ + if(repos[i].fork == false){ + repos[i].description = convertToEmoji(repos[i].description); + savedRepos.push(repos[i]); + } else { + repos[i].description = convertToEmoji(repos[i].description); + savedForks.push(repos[i]); + } + } + + var user = await got(`https://api.github.com/users/${username}`); + user = JSON.parse(user.body); + document.title = user.login; + var icon = document.createElement("link"); + icon.setAttribute("rel", "icon"); + icon.setAttribute("href", user.avatar_url); + icon.setAttribute("type", "image/png"); + document.getElementsByTagName("head")[0].appendChild(icon); + document.getElementById("profile_img").style.background = `url('${user.avatar_url}') center center` + document.getElementById("username").innerHTML = `${user.name}@${user.login}`; + //document.getElementById("github_link").href = `https://github.com/${user.login}`; + document.getElementById("userbio").innerHTML = convertToEmoji(user.bio); + document.getElementById("userbio").style.display = user.bio == null || !user.bio ? 'none' : 'block'; + document.getElementById("about").innerHTML = ` +   ${user.company} +   ${user.email} +   ${user.blog} +    ${user.location} +    Available for hire`; + //add data to config.json + fs.readFile("./dist/config.json", function (err, data) { + if (err) throw err; + data = JSON.parse(data); + data[0].username = user.login; + data[0].name = user.name; + data[0].userimg = user.avatar_url; + fs.writeFile('./dist/config.json', JSON.stringify(data, null, ' '), function (err) { if (err) throw err; - data = JSON.parse(data); - data[0].username = user.login; - data[0].name = user.name; - data[0].userimg = user.avatar_url; - fs.writeFile('config.json', JSON.stringify(data, null, ' '), function (err) { - if (err) throw err; - }); - }); - fs.writeFile('dist/index.html', '' + window.document.documentElement.outerHTML, function (error) { - if (error) throw error; - console.log("Build Complete"); - process.exit(0) }); + }); + fs.writeFile('dist/index.html', '' + window.document.documentElement.outerHTML, function (error) { + if (error) throw error; + console.log("Build Complete"); + process.exit(0) + }); } catch (error) { console.log(error); } @@ -96,4 +91,47 @@ module.exports.updateHTML = (username) => { }).catch(function (error) { console.log(error); }); -} \ No newline at end of file +} + +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 += ` + +
+
${result[i].name}
+
+ ${result[i].description} +
+
+   ${result[i].language} +   ${result[i].stargazers_count} +   ${result[i].forks_count} +
+
+ `; + } + } +} + +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; + } +} \ No newline at end of file diff --git a/update.js b/update.js index d4f0f00..90b330b 100644 --- a/update.js +++ b/update.js @@ -1,7 +1,7 @@ const fs = require('fs'); const {updateHTML} = require('./populate'); -fs.readFile("config.json", function (err , data) { +fs.readFile("./dist/config.json", function (err , data) { if (err) throw err; data = JSON.parse(data); var username = data[0].username;