fix: responsive, skills and optimise UX
This commit is contained in:
rahuldkjain
+11
-1
@@ -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`,
|
||||
],
|
||||
}
|
||||
|
||||
Generated
+234
-14
@@ -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",
|
||||
|
||||
+8
-5
@@ -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 <rahuldkjain@gmail.com>",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="footer">
|
||||
Developed with ❤️ by <a href="https://rahuldkjain.github.io" style={{textDecoration: 'none'}}>Rahul</a>
|
||||
Developed with <span role="img" aria-label="love">❤️</span> by <a href="https://rahuldkjain.github.io" style={{textDecoration: 'none'}}>Rahul</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
+16
-10
@@ -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 (
|
||||
<div className="header">
|
||||
<h1 className="heading">
|
||||
<Link to="/" style={{textDecoration: 'none', color: '#0a0a23'}}>
|
||||
<img src={logo} onClick={() => window.location.reload(false)}
|
||||
className="logo" alt="github profile markdown generator logo" />
|
||||
<div onClick={() => window.location.reload(false)}>
|
||||
{props.heading}
|
||||
</Link>
|
||||
</div>
|
||||
</h1>
|
||||
<GitHubButton id="star-github" href="https://github.com/rahuldkjain/github-profile-readme-generator"
|
||||
data-icon="octicon-star" aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub">
|
||||
Star this repo</GitHubButton>
|
||||
<GitHubButton id="fork-github" href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
|
||||
data-icon="octicon-repo-forked"
|
||||
aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub">Fork on Github</GitHubButton>
|
||||
<div className="github">
|
||||
<a href="https://github.com/rahuldkjain/github-profile-readme-generator"
|
||||
aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub" target="blank">
|
||||
<div className="github-button"> <StarIcon size={16} /> Star this repo </div>
|
||||
</a>
|
||||
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
|
||||
aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub" target="blank">
|
||||
<div className="github-button"><RepoForkedIcon size={16} /> Fork on Github </div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import gsap from 'gsap';
|
||||
const animationLoader = () => { }
|
||||
const Loader = () => {
|
||||
let arrow = useRef([]);
|
||||
useEffect(() => {
|
||||
|
||||
+103
-92
@@ -1,101 +1,112 @@
|
||||
import React from 'react';
|
||||
import { baseURL, icons, skills } from '../constants/skills';
|
||||
|
||||
const Title = (props) => {
|
||||
if (props.prefix && props.title) {
|
||||
return (
|
||||
<>
|
||||
{`<h1 align="center">${props.prefix + ' ' + props.title}</h1>`}
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const SubTitle = (props) => {
|
||||
if (props.subtitle) {
|
||||
return (
|
||||
<>
|
||||
{`<h3 align="center">${props.subtitle}</h3>`}
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const DisplayWork = (props) => {
|
||||
if (props.prefix && props.project) {
|
||||
if (props.link) {
|
||||
return (<>{`- ${props.prefix} [${props.project}](${props.link})`}<br /><br /></>);
|
||||
} else {
|
||||
return (<>{`- ${props.prefix} **${props.project}**`}<br /><br /></>);
|
||||
}
|
||||
}
|
||||
if (props.prefix && props.link) {
|
||||
return (<>{`- ${props.prefix} [${props.link}](${props.link})`}<br /><br /></>);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const DisplaySocial = (props) => {
|
||||
if (props.username) {
|
||||
return (<>{`<a href=${props.base}/${props.username} target="blank"><img align="center" src=${props.icon} alt="${props.username}" height="20" width="20" /></a>`}<br /></>);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const VisitorsBadge = (props) => {
|
||||
let link = "https://visitor-badge.glitch.me/badge?page_id=" + props.github + '.' + props.github
|
||||
if (props.show) {
|
||||
return (<>{`<p align="left"> <img src=${link} alt=${props.github}/> </p>`}<br /><br /></>);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const GithubStats = (props) => {
|
||||
let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
|
||||
if (props.show) {
|
||||
return (<>{`<p align="center"> <img src=${link} alt=${props.github} /> </p>`}<br /><br /></>);
|
||||
}
|
||||
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 (
|
||||
<>
|
||||
{`<h1 align="center">${props.prefix + ' ' + props.title}</h1>`}
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const SubTitle = (props) => {
|
||||
if (props.subtitle) {
|
||||
return (
|
||||
<>
|
||||
{`<h3 align="center">${props.subtitle}</h3>`}
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const DisplayWork = (props) => {
|
||||
if (props.prefix && props.project) {
|
||||
if (props.link) {
|
||||
return (<>{`- ${props.prefix} [${props.project}](${props.link})`}<br /><br /></>);
|
||||
} else {
|
||||
return (<>{`- ${props.prefix} **${props.project}**`}<br /><br /></>);
|
||||
}
|
||||
}
|
||||
if (props.prefix && props.link) {
|
||||
return (<>{`- ${props.prefix} [${props.link}](${props.link})`}<br /><br /></>);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const DisplaySocial = (props) => {
|
||||
if (props.username) {
|
||||
return (<>{`<a href=${props.base}/${props.username} target="blank"><img align="center" src=${props.icon} alt="${props.username}" height="20" width="20" /></a>`}<br /></>);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const VisitorsBadge = (props) => {
|
||||
let link = "https://komarev.com/ghpvc/?username=" + props.github
|
||||
if (props.show) {
|
||||
return (<>{`<p align="left"> <img src=${link} alt=${props.github}/> </p>`}<br /><br /></>);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const GithubStats = (props) => {
|
||||
let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
|
||||
if (props.show) {
|
||||
return (<>{`<p align="center"> <img src=${link} alt=${props.github} /> </p>`}<br /><br /></>);
|
||||
}
|
||||
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(`<img src=${baseURL + icons[skill]} alt=${skill} width="20" height="20"/>`);
|
||||
}
|
||||
});
|
||||
return listChosenSkills.length > 0 ? `<p align="left">${listChosenSkills.join(' ')}</p>` : '';
|
||||
}
|
||||
return (
|
||||
<div id="markdown-content">
|
||||
<Title prefix={props.prefix.title} title={props.data.title} />
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
@@ -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 };
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
+102
-27
@@ -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;
|
||||
}
|
||||
}
|
||||
+47
-22
@@ -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 />
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user