diff --git a/gatsby-config.js b/gatsby-config.js index 54ac4ce..859ee0a 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,4 +1,5 @@ module.exports = { + pathPrefix: `/gh-profile-readme-generator`, siteMetadata: { title: `Github Profile Readme Generator`, description: `Prettify your github profile using this amazing readme generator.`, @@ -27,8 +28,17 @@ module.exports = { icon: `src/images/mdg.png`, // This path is relative to the root of the site. }, }, + { + resolve: `gatsby-plugin-google-analytics`, + options: { + trackingId: "UA-168596085-3", + // this option places the tracking script into the head of the DOM + head: true, + // other options + }, + }, + ], // this (optional) plugin enables Progressive Web App + Offline functionality // To learn more, visit: https://gatsby.dev/offline // `gatsby-plugin-offline`, - ], } diff --git a/package-lock.json b/package-lock.json index eb5a084..c017ed9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "github-profile-reamde-generator", + "name": "gh-profile-reamde-generator", "version": "0.1.0", "lockfileVersion": 1, "requires": true, @@ -1937,6 +1937,11 @@ "schema-utils": "^2.6.5" } }, + "@primer/octicons-react": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-10.0.0.tgz", + "integrity": "sha512-I+m7Srg/Ivo5VuXoKwKCJ6YJya+lr6EVzp/WGnDlwBSpy0m4WfYAmZigt3A0i4JMqgLRFDlK+8AgqT66E9bOOw==" + }, "@reach/router": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz", @@ -6049,6 +6054,12 @@ } } }, + "email-addresses": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", + "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==", + "dev": true + }, "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -7355,6 +7366,35 @@ "trim-repeated": "^1.0.0" } }, + "filenamify-url": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz", + "integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=", + "dev": true, + "requires": { + "filenamify": "^1.0.0", + "humanize-url": "^1.0.0" + }, + "dependencies": { + "filename-reserved-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz", + "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=", + "dev": true + }, + "filenamify": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz", + "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=", + "dev": true, + "requires": { + "filename-reserved-regex": "^1.0.0", + "strip-outer": "^1.0.0", + "trim-repeated": "^1.0.0" + } + } + } + }, "filesize": { "version": "3.5.11", "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.5.11.tgz", @@ -7927,6 +7967,15 @@ "micromatch": "^3.1.10" } }, + "gatsby-plugin-google-analytics": { + "version": "2.3.11", + "resolved": "https://registry.npmjs.org/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-2.3.11.tgz", + "integrity": "sha512-4ktlF13r/o2cFf6EBcwlKwl0lNedVUjGpk8MJFZM6h54QIflwBxDXVS5ku8YrZ/2VfhY+7+pVS5U0yluYj8iYg==", + "requires": { + "@babel/runtime": "^7.10.3", + "minimatch": "3.0.4" + } + }, "gatsby-plugin-manifest": { "version": "2.4.14", "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.14.tgz", @@ -8458,6 +8507,129 @@ "assert-plus": "^1.0.0" } }, + "gh-pages": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.1.0.tgz", + "integrity": "sha512-3b1rly9kuf3/dXsT8+ZxP0UhNLOo1CItj+3e31yUVcaph/yDsJ9RzD7JOw5o5zpBTJVQLlJAASNkUfepi9fe2w==", + "dev": true, + "requires": { + "async": "^2.6.1", + "commander": "^2.18.0", + "email-addresses": "^3.0.1", + "filenamify-url": "^1.0.0", + "find-cache-dir": "^3.3.1", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + }, + "dependencies": { + "array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", + "dev": true, + "requires": { + "array-uniq": "^1.0.1" + } + }, + "async": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", + "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "dev": true, + "requires": { + "lodash": "^4.17.14" + } + }, + "find-cache-dir": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", + "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==", + "dev": true, + "requires": { + "commondir": "^1.0.1", + "make-dir": "^3.0.2", + "pkg-dir": "^4.1.0" + } + }, + "find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dev": true, + "requires": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + } + }, + "globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", + "dev": true, + "requires": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + } + }, + "locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dev": true, + "requires": { + "p-locate": "^4.1.0" + } + }, + "make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "dev": true, + "requires": { + "semver": "^6.0.0" + } + }, + "p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dev": true, + "requires": { + "p-limit": "^2.2.0" + } + }, + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true + }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + }, + "pkg-dir": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", + "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", + "dev": true, + "requires": { + "find-up": "^4.0.0" + } + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, "git-up": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/git-up/-/git-up-4.0.1.tgz", @@ -8467,11 +8639,6 @@ "parse-url": "^5.0.0" } }, - "github-buttons": { - "version": "2.11.2", - "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.11.2.tgz", - "integrity": "sha512-G7DJwV6+7OJKCzZUGWpgobkL8X+CODwpP0CUdzZpoq2eih8muWOeFMXfe+gGIktcjUyaXFGgDLRe5yXo+njvVg==" - }, "github-from-package": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz", @@ -9247,6 +9414,61 @@ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz", "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==" }, + "humanize-url": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz", + "integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=", + "dev": true, + "requires": { + "normalize-url": "^1.0.0", + "strip-url-auth": "^1.0.0" + }, + "dependencies": { + "is-plain-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", + "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=", + "dev": true + }, + "normalize-url": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz", + "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=", + "dev": true, + "requires": { + "object-assign": "^4.0.1", + "prepend-http": "^1.0.0", + "query-string": "^4.1.0", + "sort-keys": "^1.0.0" + } + }, + "prepend-http": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", + "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=", + "dev": true + }, + "query-string": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", + "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=", + "dev": true, + "requires": { + "object-assign": "^4.1.0", + "strict-uri-encode": "^1.0.0" + } + }, + "sort-keys": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", + "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=", + "dev": true, + "requires": { + "is-plain-obj": "^1.0.0" + } + } + } + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -14193,14 +14415,6 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz", "integrity": "sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw==" }, - "react-github-btn": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/react-github-btn/-/react-github-btn-1.2.0.tgz", - "integrity": "sha512-/b2TGTeek5Ky+KtuP5BxOaXgb1FGhbwgZNI6rkwkGk7+xtCtsNMkdchOcCnC3qU1JGTWPKzYZWpPBIouVhXAoQ==", - "requires": { - "github-buttons": "^2.8.0" - } - }, "react-helmet": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", @@ -16254,6 +16468,12 @@ "escape-string-regexp": "^1.0.2" } }, + "strip-url-auth": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz", + "integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=", + "dev": true + }, "style-loader": { "version": "0.23.1", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz", diff --git a/package.json b/package.json index 3020830..9bfc45a 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,14 @@ { - "name": "github-profile-reamde-generator", + "name": "gh-profile-reamde-generator", "private": true, "description": "A simple react app to generate beautiful github profile readme in md(markdown)", "version": "0.1.0", "author": "Rahul Jain ", "dependencies": { + "@primer/octicons-react": "^10.0.0", "gatsby": "^2.23.12", "gatsby-image": "^2.4.9", + "gatsby-plugin-google-analytics": "^2.3.11", "gatsby-plugin-manifest": "^2.4.14", "gatsby-plugin-offline": "^3.2.13", "gatsby-plugin-react-helmet": "^3.3.6", @@ -17,10 +19,10 @@ "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", - "react-github-btn": "^1.2.0", "react-helmet": "^6.1.0" }, "devDependencies": { + "gh-pages": "^3.1.0", "prettier": "2.0.5" }, "keywords": [ @@ -34,13 +36,14 @@ "start": "npm run develop", "serve": "gatsby serve", "clean": "gatsby clean", - "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" + "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1", + "deploy": "gatsby build --prefix-paths && gh-pages -d public -b master" }, "repository": { "type": "git", - "url": "https://github.com/gatsbyjs/gatsby-starter-default" + "url": "https://github.com/rahuldkjain/gh-profile-readme-generator" }, "bugs": { - "url": "https://github.com/gatsbyjs/gatsby/issues" + "url": "https://github.com/rahuldkjain/gh-profile-readme-generator/issues" } } diff --git a/src/components/footer.js b/src/components/footer.js index 080c73c..2afb5e3 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -2,7 +2,7 @@ import React from 'react'; const Footer = () => { return (
- Developed with ❤️ by Rahul + Developed with ❤️ by Rahul
) } diff --git a/src/components/header.js b/src/components/header.js index a472cc6..918094a 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -1,21 +1,27 @@ -import { Link } from "gatsby" import React from "react" -import GitHubButton from 'react-github-btn' +import {StarIcon, RepoForkedIcon} from '@primer/octicons-react' +import logo from '../images/mdg.png' const Header = (props) => { return (

- + window.location.reload(false)} + className="logo" alt="github profile markdown generator logo" /> +
window.location.reload(false)}> {props.heading} - +

- - Star this repo - Fork on Github +
+ +
Star this repo
+ + +
Fork on Github
+ +
) } diff --git a/src/components/loader.js b/src/components/loader.js index 0396dd2..1bb5914 100644 --- a/src/components/loader.js +++ b/src/components/loader.js @@ -1,6 +1,5 @@ import React, { useRef, useEffect } from 'react'; import gsap from 'gsap'; -const animationLoader = () => { } const Loader = () => { let arrow = useRef([]); useEffect(() => { diff --git a/src/components/markdown.js b/src/components/markdown.js index 6b264cc..939b52e 100644 --- a/src/components/markdown.js +++ b/src/components/markdown.js @@ -1,101 +1,112 @@ import React from 'react'; +import { baseURL, icons, skills } from '../constants/skills'; -const Title = (props) => { - if (props.prefix && props.title) { - return ( - <> - {`

${props.prefix + ' ' + props.title}

`} -
- - ); - } - return ''; -} -const SubTitle = (props) => { - if (props.subtitle) { - return ( - <> - {`

${props.subtitle}

`} -
- - ); - } - return ''; -} -const DisplayWork = (props) => { - if (props.prefix && props.project) { - if (props.link) { - return (<>{`- ${props.prefix} [${props.project}](${props.link})`}

); - } else { - return (<>{`- ${props.prefix} **${props.project}**`}

); - } - } - if (props.prefix && props.link) { - return (<>{`- ${props.prefix} [${props.link}](${props.link})`}

); - } - return ''; -} -const DisplaySocial = (props) => { - if (props.username) { - return (<>{`${props.username}`}
); - } - return ''; -} -const VisitorsBadge = (props) => { - let link = "https://visitor-badge.glitch.me/badge?page_id=" + props.github + '.' + props.github - if (props.show) { - return (<>{`

${props.github}/

`}

); - } - return ''; -} -const GithubStats = (props) => { - let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true" - if (props.show) { - return (<>{`

${props.github}

`}

); - } - return ''; -} -const isSocial = (social) => { - return (social.dev || social.twitter || social.codepen || social.codesandbox || social.stackoverflow - || social.linkedin || social.kaggle || social.instagram || social.fb); -} const Markdown = (props) => { + const Title = (props) => { + if (props.prefix && props.title) { + return ( + <> + {`

${props.prefix + ' ' + props.title}

`} +
+ + ); + } + return ''; + } + const SubTitle = (props) => { + if (props.subtitle) { + return ( + <> + {`

${props.subtitle}

`} +
+ + ); + } + return ''; + } + const DisplayWork = (props) => { + if (props.prefix && props.project) { + if (props.link) { + return (<>{`- ${props.prefix} [${props.project}](${props.link})`}

); + } else { + return (<>{`- ${props.prefix} **${props.project}**`}

); + } + } + if (props.prefix && props.link) { + return (<>{`- ${props.prefix} [${props.link}](${props.link})`}

); + } + return ''; + } + const DisplaySocial = (props) => { + if (props.username) { + return (<>{`${props.username}`}
); + } + return ''; + } + const VisitorsBadge = (props) => { + let link = "https://komarev.com/ghpvc/?username=" + props.github + if (props.show) { + return (<>{`

${props.github}/

`}

); + } + return ''; + } + const GithubStats = (props) => { + let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true" + if (props.show) { + return (<>{`

${props.github}

`}

); + } + return ''; + } + const isSocial = (social) => { + return (social.dev || social.twitter || social.codepen || social.codesandbox || social.stackoverflow + || social.linkedin || social.kaggle || social.instagram || social.fb); + } + const DisplaySkills = (props) => { + const listChosenSkills = []; + skills.forEach(skill => { + if (props.skills[skill]) { + listChosenSkills.push(`${skill}`); + } + }); + return listChosenSkills.length > 0 ? `

${listChosenSkills.join(' ')}

` : ''; + } return (
- - <SubTitle subtitle={props.data.subtitle} /> - <VisitorsBadge show={props.data.visitorsBadge} github={props.social.github} /> + <><Title prefix={props.prefix.title} title={props.data.title} /></> + <><SubTitle subtitle={props.data.subtitle} /></> + <><VisitorsBadge show={props.data.visitorsBadge} github={props.social.github} /></> - <DisplayWork prefix={props.prefix.currentWork} project={props.data.currentWork} link={props.link.currentWork} /> - <DisplayWork prefix={props.prefix.collaborateOn} project={props.data.collaborateOn} link={props.link.collaborateOn} /> - <DisplayWork prefix={props.prefix.helpWith} project={props.data.helpWith} link={props.link.helpWith} /> - <DisplayWork prefix={props.prefix.portfolio} project={props.data.portfolio} /> - <DisplayWork prefix={props.prefix.blog} project={props.data.blog} /> - <DisplayWork prefix={props.prefix.ama} project={props.data.ama} /> - <DisplayWork prefix={props.prefix.contact} project={props.data.contact} /> - <DisplayWork prefix={props.prefix.funFact} project={props.data.funFact} /> - { isSocial(props.social) ? `<p align="center">` : ''} <br /> - <DisplaySocial base='https://codepen.io' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg' - username={props.social.codepen} /> - <DisplaySocial base='https://dev.to' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg' - username={props.social.dev} /> - <DisplaySocial base='https://twitter.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg' - username={props.social.twitter} /> - <DisplaySocial base='https://linkedin.com/in' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg' - username={props.social.linkedin} /> - <DisplaySocial base='https://stackoverflow.com' - icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg' username={props.social.stackoverflow} /> - <DisplaySocial base='https://codesandbox.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg' - username={props.social.codesandbox} /> - <DisplaySocial base='https://kaggle.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg' - username={props.social.kaggle} /> - <DisplaySocial base='https://fb.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg' - username={props.social.fb} /> - <DisplaySocial base='https://instagram.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg' - username={props.social.instagram} /> - { isSocial(props.social) ? `</p>` : ''} - <br /><br /> - <GithubStats show={props.data.githubStats} github={props.social.github} /> + <><DisplayWork prefix={props.prefix.currentWork} project={props.data.currentWork} link={props.link.currentWork} /></> + <><DisplayWork prefix={props.prefix.collaborateOn} project={props.data.collaborateOn} link={props.link.collaborateOn} /></> + <><DisplayWork prefix={props.prefix.helpWith} project={props.data.helpWith} link={props.link.helpWith} /></> + <><DisplayWork prefix={props.prefix.portfolio} project={props.data.portfolio} /></> + <><DisplayWork prefix={props.prefix.blog} project={props.data.blog} /></> + <><DisplayWork prefix={props.prefix.ama} project={props.data.ama} /></> + <><DisplayWork prefix={props.prefix.contact} project={props.data.contact} /></> + <><DisplayWork prefix={props.prefix.funFact} project={props.data.funFact} /></> + + <><DisplaySkills skills={props.skills} /></> + <><GithubStats show={props.data.githubStats} github={props.social.github} /></> + {isSocial(props.social) ? `<p align="center">` : ''} <br /> + <><DisplaySocial base='https://codepen.io' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg' + username={props.social.codepen} /></> + <><DisplaySocial base='https://dev.to' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg' + username={props.social.dev} /></> + <><DisplaySocial base='https://twitter.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg' + username={props.social.twitter} /></> + <><DisplaySocial base='https://linkedin.com/in' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg' + username={props.social.linkedin} /></> + <><DisplaySocial base='https://stackoverflow.com' + icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg' username={props.social.stackoverflow} /></> + <><DisplaySocial base='https://codesandbox.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg' + username={props.social.codesandbox} /></> + <><DisplaySocial base='https://kaggle.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg' + username={props.social.kaggle} /></> + <><DisplaySocial base='https://fb.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg' + username={props.social.fb} /></> + <><DisplaySocial base='https://instagram.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg' + username={props.social.instagram} /></> + {isSocial(props.social) ? `</p>` : ''} </div> ); }; diff --git a/src/components/markdownPreview.css b/src/components/markdownPreview.css deleted file mode 100644 index a8a06ce..0000000 --- a/src/components/markdownPreview.css +++ /dev/null @@ -1,48 +0,0 @@ -:root { - --grey-05: #f5f6f7; - --grey-10: #dfdfe2; - --grey-15: #d0d0d5; - --grey-75: #3b3b4f; - --grey-80: #2a2a40; - --grey-85: #1b1b32; - --grey-90: #0a0a23; - --purple: #dbb8ff; - --yellow: #f1be32; - --blue: #99c9ff; - --light-green: #acd157; - --dark-purple: #5a01a7; - --dark-yellow: #4d3800; - --dark-blue: #002ead; - --dark-green: #00471b; -} -.title { - text-align: center; -} -.subtitle { - text-align: center; -} -.link { - text-decoration: none; - color: var(--dark-blue); -} -.social-icon { - margin: 1% -} -.badge { - text-align: left; -} -.card { - text-align: center; -} -.social { - width: 100%; - display: flex; - justify-content: center; - align-items: center; -} -.icon { - width: 20px; - height: 20px; - margin: 1%; - cursor: pointer; -} \ No newline at end of file diff --git a/src/components/markdownPreview.js b/src/components/markdownPreview.js index 807a67d..4b126bc 100644 --- a/src/components/markdownPreview.js +++ b/src/components/markdownPreview.js @@ -1,103 +1,113 @@ import React from 'react'; - -const TitlePreview = (props) => { - if (props.prefix && props.title) { - return ( - <h1 className="title">{props.prefix + ' ' + props.title}</h1> - ) - } - return null; -} -const SubTitlePreview = (props) => { - if(props.subtitle) { - return ( - <h3 className="subtitle">{props.subtitle}</h3> - ) - } - return null; -} -const DisplayWork = (props) => { - if(props.prefix && props.project){ - if(props.link) { - return ( - <div> - {props.prefix + ' '}<a href={props.link} className="link" target="blank">{props.project}</a> - </div> - ); - } else { - return (<div>{props.prefix +' '}<b>{props.project}</b></div>); - } - } - if (props.prefix && props.link) { - return ( - <div> - {props.prefix + ' '}<a href={props.link} className="link" target="blank">{props.link}</a> - </div> - ); - } - return null; -} -const WorkPreview = (props) => { - const prefix = props.work.prefix - const data = props.work.data - const link = props.work.link - return ( - <> - <DisplayWork prefix={prefix.currentWork} project={data.currentWork} link={link.currentWork}/> - <DisplayWork prefix={prefix.helpWith} project={data.helpWith} link={link.helpWith}/> - <DisplayWork prefix={prefix.collaborateOn} project={data.collaborateOn} - link={link.collaborateOn}/> - <DisplayWork prefix={prefix.ama} project={data.ama}/> - <DisplayWork prefix={prefix.portfolio} link={link.portfolio}/> - <DisplayWork prefix={prefix.blog} link={link.blog}/> - <DisplayWork prefix={prefix.contact} project={data.contact}/> - <DisplayWork prefix={prefix.funFact} project={data.funFact}/> - </> - ) -} -const DisplaySocial = (props) => { - if(props.username) { - return (<a className="link social-icon" href={props.base + '/' +props.username} target="blank"><img className="icon" src={props.icon} alt="props.username" /></a>) - } - return null; -} -const SocialPreview = (props) => { - return ( - <div className="social"> - <DisplaySocial base="https://codepen.io" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg" username={props.social.codepen} /> - <DisplaySocial base="https://dev.to" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg" username={props.social.dev} /> - <DisplaySocial base="https://twitter.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" username={props.social.twitter} /> - <DisplaySocial base="https://linkedin.com/in" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" username={props.social.linkedin} /> - <DisplaySocial base="https://stackoverflow.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg" username={props.social.stackoverflow} /> - <DisplaySocial base="https://codesandbox.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg" username={props.social.codesandbox} /> - <DisplaySocial base="https://kaggle.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg" username={props.social.kaggle} /> - <DisplaySocial base="https://fb.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg" username={props.social.fb} /> - <DisplaySocial base="https://instagram.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" username={props.social.instagram} /> - </div> - ) -} -const VisitorsBadgePreview = (props) => { - let link = "https://visitor-badge.glitch.me/badge?page_id="+props.github+'.'+props.github - if (props.show) { - return (<div className="badge"> <img className="badgeImage" src={link} alt={props.github}/> </div>) - } - return null; -} -const GithubStatsPreview = (props) => { - let link = "https://github-readme-stats.vercel.app/api?username="+props.github+"&show_icons=true" - if (props.show) { - return (<div className="card"> <img className="cardImage" src={link} alt={props.github}/> </div>) - } - return null; -} +import { baseURL, icons, skills } from '../constants/skills'; const MarkdownPreview = (props) => { + const TitlePreview = (props) => { + if (props.prefix && props.title) { + return ( + <h1 className="title">{props.prefix + ' ' + props.title}</h1> + ) + } + return null; + } + const SubTitlePreview = (props) => { + if (props.subtitle) { + return ( + <h3 className="subtitle">{props.subtitle}</h3> + ) + } + return null; + } + const DisplayWork = (props) => { + if (props.prefix && props.project) { + if (props.link) { + return ( + <div> + {props.prefix + ' '}<a href={props.link} className="link" target="blank">{props.project}</a> + </div> + ); + } else { + return (<div>{props.prefix + ' '}<b>{props.project}</b></div>); + } + } + if (props.prefix && props.link) { + return ( + <div> + {props.prefix + ' '}<a href={props.link} className="link" target="blank">{props.link}</a> + </div> + ); + } + return null; + } + const WorkPreview = (props) => { + const prefix = props.work.prefix + const data = props.work.data + const link = props.work.link + return ( + <> + <DisplayWork prefix={prefix.currentWork} project={data.currentWork} link={link.currentWork} /> + <DisplayWork prefix={prefix.helpWith} project={data.helpWith} link={link.helpWith} /> + <DisplayWork prefix={prefix.collaborateOn} project={data.collaborateOn} + link={link.collaborateOn} /> + <DisplayWork prefix={prefix.ama} project={data.ama} /> + <DisplayWork prefix={prefix.portfolio} link={link.portfolio} /> + <DisplayWork prefix={prefix.blog} link={link.blog} /> + <DisplayWork prefix={prefix.contact} project={data.contact} /> + <DisplayWork prefix={prefix.funFact} project={data.funFact} /> + </> + ) + } + const DisplaySocial = (props) => { + if (props.username) { + return (<a className="link social-icon" href={props.base + '/' + props.username} target="blank"><img className="icon" src={props.icon} alt="props.username" /></a>) + } + return null; + } + const SocialPreview = (props) => { + return ( + <div className="social"> + <DisplaySocial base="https://codepen.io" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg" username={props.social.codepen} /> + <DisplaySocial base="https://dev.to" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg" username={props.social.dev} /> + <DisplaySocial base="https://twitter.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" username={props.social.twitter} /> + <DisplaySocial base="https://linkedin.com/in" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" username={props.social.linkedin} /> + <DisplaySocial base="https://stackoverflow.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg" username={props.social.stackoverflow} /> + <DisplaySocial base="https://codesandbox.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg" username={props.social.codesandbox} /> + <DisplaySocial base="https://kaggle.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg" username={props.social.kaggle} /> + <DisplaySocial base="https://fb.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg" username={props.social.fb} /> + <DisplaySocial base="https://instagram.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" username={props.social.instagram} /> + </div> + ) + } + const VisitorsBadgePreview = (props) => { + let link = "https://komarev.com/ghpvc/?username=" + props.github + if (props.show) { + return (<div className="badge"> <img className="badgeImage" src={link} alt={props.github} /> </div>) + } + return null; + } + const GithubStatsPreview = (props) => { + let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true" + if (props.show) { + return (<div className="card"> <img className="cardImage" src={link} alt={props.github} /> </div>) + } + return null; + } + const SkillsPreview = (props) => { + var listSkills = [] + skills.forEach((skill) => { + if(props.skills[skill]) { + listSkills.push(<img className="skill-preview-icon" src={baseURL + icons[skill]} alt={skill} />) + } + }); + return listSkills.length > 0 ? <div className='skills-preview'>{listSkills}</div> : '' + } return ( <div id="markdown-preview"> <TitlePreview prefix={props.prefix.title} title={props.data.title} /> <SubTitlePreview subtitle={props.data.subtitle} /> - <VisitorsBadgePreview show={props.data.visitorsBadge} github={props.social.github}/> - <WorkPreview work={props}/> + <VisitorsBadgePreview show={props.data.visitorsBadge} github={props.social.github} /> + <WorkPreview work={props} /> + <SkillsPreview skills={props.skills} /> <GithubStatsPreview show={props.data.githubStats} github={props.social.github} /> <SocialPreview social={props.social} /> </div> diff --git a/src/components/skills.js b/src/components/skills.js new file mode 100644 index 0000000..82a93e4 --- /dev/null +++ b/src/components/skills.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { icons, baseURL, skills } from '../constants/skills'; +const Skills = (props) => { + const listSkills = skills.map((skill) => { + return ( + <div className="checkbox skill" key={skill}> + <input type="checkbox" checked={props.skills[skill]} + onChange={event => props.handleSkillsChange(skill)} /> + <span className="checkboxLabel"> + <img className="skill-icon" src={baseURL + icons[skill]} + alt={skill} /> + </span> + </div> + ); + }); + return ( + <div> + <h3>Skills</h3> + <div className="skills"> + {listSkills} + </div> + </div> + ); +} +export default Skills; \ No newline at end of file diff --git a/src/constants/skills.js b/src/constants/skills.js new file mode 100644 index 0000000..60b1f35 --- /dev/null +++ b/src/constants/skills.js @@ -0,0 +1,62 @@ +const baseURL = 'https://konpa.github.io/devicon/devicon.git/icons/'; +const skills = ['vuejs', 'react', 'angularjs', 'amazonwebservices', 'android', 'backbonejs', + 'bootstrap', 'c', 'coffeescript', + 'cplusplus', 'css3', 'csharp', 'd3js', 'django', 'docker', 'dotnet', 'electron', 'go', + 'gulp', 'html5', 'java', 'javascript', 'typescript', 'laravel', 'mongodb', 'mysql', 'php', 'postgresql', + 'rails', 'redis', 'redhat', 'ruby', 'rust', + 'sass', 'scala', 'nodejs', 'python', 'swift', 'oracle', 'nginx']; +const icons = { + vuejs: 'vuejs/vuejs-original-wordmark.svg', + react: 'react/react-original-wordmark.svg', + angularjs: 'angularjs/angularjs-original.svg', + amazonwebservices: 'amazonwebservices/amazonwebservices-original-wordmark.svg', + android: 'android/android-original-wordmark.svg', + backbonejs: 'backbonejs/backbonejs-original-wordmark.svg', + bootstrap: 'bootstrap/bootstrap-plain.svg', + c: 'c/c-original.svg', + coffeescript: 'coffeescript/coffeescript-original-wordmark.svg', + cplusplus: 'cplusplus/cplusplus-original.svg', + css3: 'css3/css3-original-wordmark.svg', + csharp: 'csharp/csharp-original.svg', + d3js: 'd3js/d3js-original.svg', + django: 'django/django-original.svg', + docker: 'docker/docker-original-wordmark.svg', + dotnet: 'dot-net/dot-net-original-wordmark.svg', + electron: 'electron/electron-original.svg', + express: 'express/express-original-wordmark.svg', + git: 'git/git-original-wordmark.svg', + go: 'go/go-original.svg', + gulp: 'gulp/gulp-plain.svg', + html5: 'html5/html5-original-wordmark.svg', + illustrator: 'illustrator/illustrator-plain.svg', + java: 'java/java-original-wordmark.svg', + javascript: 'javascript/javascript-original.svg', + laravel: 'laravel/laravel-plain-wordmark.svg', + meteor: 'meteor/meteor-original-wordmark.svg', + mongodb: 'mongodb/mongodb-original-wordmark.svg', + mysql: 'mysql/mysql-original-wordmark.svg', + nginx: 'nginx/nginx-original.svg', + nodejs: 'nodejs/nodejs-original-wordmark.svg', + oracle: 'oracle/oracle-original.svg', + photoshop: 'photoshop/photoshop-plain.svg', + php: 'php/php-original.svg', + postgresql: 'postgresql/postgresql-original-wordmark.svg', + python: 'python/python-original-wordmark.svg', + rails: 'rails/rails-original-wordmark.svg', + redis: 'redis/redis-original-wordmark.svg', + redhat: 'redhat/redhat-original-wordmark.svg', + ruby: 'ruby/ruby-original-wordmark.svg', + rust: 'rust/rust-plain.svg', + sass: 'sass/sass-original.svg', + scala: 'scala/scala-original-wordmark.svg', + sketch: 'sketch/sketch-original-wordmark.svg', + swift: 'swift/swift-original-wordmark.svg', + typescript: 'typescript/typescript-original.svg' +} + +const initialSkillState = {} +skills.forEach(skill => { + initialSkillState[skill] = false +}); + +export { initialSkillState, baseURL, icons, skills }; \ No newline at end of file diff --git a/src/images/gh-profile-readme-generator.gif b/src/images/gh-profile-readme-generator.gif new file mode 100644 index 0000000..c968ed3 Binary files /dev/null and b/src/images/gh-profile-readme-generator.gif differ diff --git a/src/pages/index.css b/src/pages/index.css index 9b92677..88a5366 100644 --- a/src/pages/index.css +++ b/src/pages/index.css @@ -38,6 +38,7 @@ input:focus { -moz-box-shadow: 0 1px 1px var(--grey-90) !important; box-shadow: 0 1px 1px var(--grey-90) !important; cursor: pointer; + border-radius: 0px !important; } .icon { width: 25px; @@ -126,35 +127,40 @@ input:focus { width: 100%; display: flex; justify-content: center; - margin: 2%; } .markdown-box { - width: 80%; + width: 100%; font-size: 12px; color: var(--grey-85); border: 2px solid var(--grey-75); - -webkit-box-shadow: 0px 0px 5px 5px rgba(208,208,213,0.75); - -moz-box-shadow: 0px 0px 5px 5px rgba(208,208,213,0.75); - box-shadow: 0px 0px 5px 5px rgba(208,208,213,0.75); + -webkit-box-shadow: 3px 5px 5px 5px rgba(208,208,213,0.75); + -moz-box-shadow: 3px 5px 5px 5px rgba(208,208,213,0.75); + box-shadow: 3px 5px 5px 5px rgba(208,208,213,0.75); padding: 1% 2% 0.5% 2%; + margin-top:0.5%; } .copy-button { - border: 2px solid var(--grey-15); - padding: 1%; + background: var(--grey-05); + border: 2px solid var(--grey-75); text-align: center; cursor: pointer; - justify-self: flex-end; + width: 50%; + justify-self: center; + padding: 2% 0%; } -.markdown-util { - display: flex; - justify-content: flex-end; +.utils { + display: grid; + grid-template-columns: repeat(3, 1fr); + margin-top: 4%; } .preview-button { - justify-self: flex-end; - border: 2px solid var(--grey-15); - padding: 1%; + background: var(--grey-05); + border: 2px solid var(--grey-75); text-align: center; cursor: pointer; + width: 50%; + justify-self: end; + padding: 2% 0%; } .loader { height: 100vh; @@ -166,11 +172,13 @@ input:focus { } .back-button { - color: var(--grey-75); - width: 14%; - font-size: 20px; - margin-left: 10%; + background: var(--grey-05); + border: 2px solid var(--grey-75); + text-align: center; cursor: pointer; + width: 50%; + justify-self: start; + padding: 2% 0%; } .title { text-align: center; @@ -198,8 +206,8 @@ input:focus { align-items: center; } .icon { - width: 20px; - height: 20px; + width: 25px; + height: 25px; margin: 1%; cursor: pointer; } @@ -212,13 +220,55 @@ input:focus { .heading { color: var(--dark-blue); font-family: 'Lato', sans-serif; + cursor: pointer; } .footer { - margin: 2% 0%; + margin: 5% 0% 2% 0%; width: 100%; text-align: center; } - +a { + text-decoration: none; + cursor: pointer; +} +.github { + display: inline-flex; +} +.github-button { + font-size: 12px; + padding: 3%; + background: var(--grey-05); + border: 2px solid var(--grey-85); + color: var(--grey-90); + margin: 1%; + width: 150px; +} +.logo { + width: 40px; + height: 40px; +} +.skills { + margin: 1%; + width: 100%; + display: grid; + grid-template-columns: repeat(4, 1fr); +} +.skill { + display: flex; + justify-content: flex-start; + align-self: center; + padding-left: 10%; +} +.skill-icon { + margin-left: 12%; + width: 40px; + height: 40px; +} +.skill-preview-icon { + width: 40px; + height: 40px; + margin: 1%; +} @media only screen and (max-width: 1199px) { h1, h2, h3, h4 { margin: 2% 0% !important; @@ -236,10 +286,6 @@ input:focus { .button { width: 60%; } - .back-button { - width: 35%; - font-size: 14px; - } .cardImage { width: 200px; height: 100px; @@ -248,9 +294,38 @@ input:focus { height: 15px; } .heading { - font-size: 14px; + font-size: 18px; } .footer { font-size: 12px; } + .github-button { + font-size: 10px !important; + padding: 2% 1% !important; + width: 120px; + } + .logo { + width: 20px; + height: 20px; + } + .skills { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + .skill-icon { + margin-left: 12%; + width: 25px; + height: 25px; + } + .skill-preview-icon { + width: 20px; + height: 20px; + margin: 1%; + } + .hide-on-mobile { + display: none; + } + #markdown-content { + word-break: break-all; + } } \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 5b8e67b..97b61ee 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,4 +1,4 @@ -import React, { useRef, useState } from "react" +import React, { useState } from "react" import MarkdownPreview from "../components/markdownPreview"; import Markdown from '../components/markdown'; import Header from '../components/header'; @@ -7,10 +7,14 @@ import Subtitle from '../components/subtitle'; import Work from '../components/work'; import Social from '../components/social'; import Addons from '../components/addons'; +import Skills from '../components/skills'; +import { initialSkillState } from '../constants/skills'; import gsap from 'gsap'; import Loader from '../components/loader'; import Footer from '../components/footer'; import './index.css' +import { ArrowLeftIcon, CopyIcon, EyeIcon } from '@primer/octicons-react'; +import SEO from '../components/seo'; const IndexPage = () => { const [prefix, setPrefix] = useState({ @@ -57,9 +61,15 @@ const IndexPage = () => { instagram: '', twitter: '', }); + const [skills, setSkills] = useState(initialSkillState) const [generatePreview, setGeneratePreview] = useState(false); const [generateMarkdown, setGenerateMarkdown] = useState(false); const [displayLoader, setDisplayLoader] = useState(false); + const handleSkillsChange = (field) => { + let change = { ...skills } + change[field] = !change[field]; + setSkills(change); + } const handlePrefixChange = (field, e) => { let change = { ...prefix } change[field] = e.target.value; @@ -77,7 +87,7 @@ const IndexPage = () => { } const handleSocialChange = (field, e) => { let change = { ...social } - change[field] = e.target.value; + change[field] = e.target.value.toLowerCase(); setSocial(change); } const handleCheckChange = (field) => { @@ -119,14 +129,22 @@ const IndexPage = () => { setGenerateMarkdown(!generateMarkdown); setGeneratePreview(!generatePreview); if (!generatePreview) { - gsap.set('#copy-markdown', { + gsap.set('.copy-button', { visibility: 'hidden' }); document.getElementById('preview-markdown').innerHTML = 'markdown' } else { - gsap.set('#copy-markdown', { + gsap.set('.copy-button', { visibility: 'visible' }); + gsap.set('#copy-markdown', { + innerHTML: 'copy-markdown', + color: '#0a0a23', + }); + gsap.to('.copy-button', { + border: '2px solid #3b3b4f', + duration: 1 + }); document.getElementById('preview-markdown').innerHTML = 'preview' } } @@ -141,6 +159,10 @@ const IndexPage = () => { innerHTML: 'copied', color: '#00471b', }); + gsap.to('.copy-button', { + border: '2px solid #00471b', + duration: 1 + }); } const handleBackToEdit = () => { setGeneratePreview(false); @@ -149,46 +171,49 @@ const IndexPage = () => { display: '' }); gsap.to('.generate', { - scale: 1, + scale: 1, }); } return ( <> - {/* <SEO title="Home" /> */} + <SEO title="Github Profile Readme Generator" description="Github Profile Readme Generator" /> <Header heading="Github Profile Readme Generator" /> <div className="form"> <Title data={data} prefix={prefix} handleDataChange={handleDataChange} handlePrefixChange={handlePrefixChange} /> <Subtitle data={data} handleDataChange={handleDataChange} /> <Work prefix={prefix} data={data} link={link} handlePrefixChange={handlePrefixChange} handleLinkChange={handleLinkChange} handleDataChange={handleDataChange} /> + <Skills skills={skills} handleSkillsChange={handleSkillsChange} /> <Social social={social} handleSocialChange={handleSocialChange} /> <Addons data={data} handleCheckChange={handleCheckChange} /> - <div className="section"> {(data.visitorsBadge || data.githubStats) && !social.github ? <div className="warning">* Please add github username to use these add-ons</div> : ''} </div> <div className="submit"> - <div className="button generate" onClick={handleGenerate}>Generate README</div> + <div className="button generate" tabIndex="0" role="button" onClick={handleGenerate}>Generate README</div> </div> </div> {displayLoader ? <Loader /> : ''} - {/* <div className="section preview"></div> */} {(generateMarkdown || generatePreview) ? - <div className="section"> - <div className="back-button" onClick={handleBackToEdit}>← back to edit</div> - </div> - : '' } - {(generateMarkdown || generatePreview) ? - <div className="markdown"> - <div className="markdown-box"> - <div className="markdown-util"> - <div className="copy-button" id="copy-markdown" onClick={handleCopyToClipboard}>copy</div> - <div className="preview-button" id="preview-markdown" onClick={handleGeneratePreview}>preview</div> + <> + <div className="utils"> + <div className="back-button" tabIndex="0" role="button" onClick={handleBackToEdit}> + <ArrowLeftIcon size={16} /> <span className="hide-on-mobile"> back to edit</span> + </div> + <div className="copy-button" tabIndex="0" role="button" onClick={handleCopyToClipboard}> + <CopyIcon size={24} /> <span className="hide-on-mobile" id="copy-markdown"> copy-markdown </span> + </div> + <div className="preview-button" tabIndex="0" role="button" onClick={handleGeneratePreview}> + <EyeIcon size={16} /> <span className="hide-on-mobile" id="preview-markdown"> preview</span> </div> - {generatePreview ? <MarkdownPreview prefix={prefix} data={data} link={link} social={social} /> : ''} - {generateMarkdown ? <Markdown prefix={prefix} data={data} link={link} social={social} /> : ''} </div> - </div> + <div className="markdown"> + <div className="markdown-box"> + {generatePreview ? <MarkdownPreview prefix={prefix} data={data} link={link} social={social} skills={skills} /> : ''} + {generateMarkdown ? <Markdown prefix={prefix} data={data} link={link} social={social} skills={skills} /> : ''} + </div> + </div> + </> : ''} <Footer /> </>