project files
This commit is contained in:
rahuldkjain
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
const Addons = (props) => {
|
||||
return (
|
||||
<div className="section">
|
||||
<h3>Add-ons</h3>
|
||||
<div className="checkbox">
|
||||
<input type="checkbox" checked={props.data.visitorsBadge}
|
||||
onChange={event => props.handleCheckChange('visitorsBadge')}/>
|
||||
<span className="checkboxLabel"> display visitors count badge</span>
|
||||
</div>
|
||||
<div className="checkbox">
|
||||
<input type="checkbox" checked={props.data.githubStats}
|
||||
onChange={event => props.handleCheckChange('githubStats')} />
|
||||
<span className="checkboxLabel"> display github profile stats card</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Addons;
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="footer">
|
||||
Developed with ❤️ by <a href="https://rahuldkjain.github.io" style={{textDecoration: 'none'}}>Rahul</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Footer;
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Link } from "gatsby"
|
||||
import React from "react"
|
||||
import GitHubButton from 'react-github-btn'
|
||||
|
||||
const Header = (props) => {
|
||||
return (
|
||||
<div className="header">
|
||||
<h1 className="heading">
|
||||
<Link to="/" style={{textDecoration: 'none', color: '#0a0a23'}}>
|
||||
{props.heading}
|
||||
</Link>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@@ -0,0 +1,41 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import gsap from 'gsap';
|
||||
const animationLoader = () => { }
|
||||
const Loader = () => {
|
||||
let arrow = useRef([]);
|
||||
useEffect(() => {
|
||||
var tl = new gsap.timeline({repeat: -1});
|
||||
tl.fromTo(arrow.current, {
|
||||
y: 0,
|
||||
color: '#3b3b4f',
|
||||
}, {
|
||||
y: -50,
|
||||
color: '#d0d0d5',
|
||||
stagger: 0.1,
|
||||
duration: 0.5,
|
||||
ease: 'Linear.easeNone'
|
||||
});
|
||||
tl.add('cp')
|
||||
tl.fromTo(arrow.current, {
|
||||
y: -50,
|
||||
color: '#d0d0d5',
|
||||
}, {
|
||||
y: 0,
|
||||
color: '#3b3b4f',
|
||||
stagger: 0.1,
|
||||
duration: 0.5,
|
||||
ease: 'Linear.easeNone'
|
||||
}, 'cp-=0.3');
|
||||
});
|
||||
return (
|
||||
<div className="loader">
|
||||
<span ref={el => (arrow.current[0] = el)}>↓</span>
|
||||
<span ref={el => (arrow.current[1] = el)}>↓</span>
|
||||
<span ref={el => (arrow.current[2] = el)}>↓</span>
|
||||
<span ref={el => (arrow.current[3] = el)}>↓</span>
|
||||
<span ref={el => (arrow.current[4] = el)}>↓</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Loader;
|
||||
@@ -0,0 +1,103 @@
|
||||
import React from 'react';
|
||||
|
||||
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) => {
|
||||
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} />
|
||||
|
||||
<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} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Markdown;
|
||||
@@ -0,0 +1,48 @@
|
||||
: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;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
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;
|
||||
}
|
||||
|
||||
const MarkdownPreview = (props) => {
|
||||
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}/>
|
||||
<GithubStatsPreview show={props.data.githubStats} github={props.social.github} />
|
||||
<SocialPreview social={props.social} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarkdownPreview;
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* SEO component that queries for data with
|
||||
* Gatsby's useStaticQuery React hook
|
||||
*
|
||||
* See: https://www.gatsbyjs.org/docs/use-static-query/
|
||||
*/
|
||||
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { Helmet } from "react-helmet"
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
|
||||
function SEO({ description, lang, meta, title }) {
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
author
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
)
|
||||
|
||||
const metaDescription = description || site.siteMetadata.description
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
htmlAttributes={{
|
||||
lang,
|
||||
}}
|
||||
title={title}
|
||||
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
||||
meta={[
|
||||
{
|
||||
name: `description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
property: `og:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:type`,
|
||||
content: `website`,
|
||||
},
|
||||
{
|
||||
name: `twitter:card`,
|
||||
content: `summary`,
|
||||
},
|
||||
{
|
||||
name: `twitter:creator`,
|
||||
content: site.siteMetadata.author,
|
||||
},
|
||||
{
|
||||
name: `twitter:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
name: `twitter:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
].concat(meta)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
SEO.defaultProps = {
|
||||
lang: `en`,
|
||||
meta: [],
|
||||
description: ``,
|
||||
}
|
||||
|
||||
SEO.propTypes = {
|
||||
description: PropTypes.string,
|
||||
lang: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
export default SEO
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
|
||||
const Social = (props) => {
|
||||
return (
|
||||
<div className="section">
|
||||
<h3>Social</h3>
|
||||
<div className="container">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
|
||||
className="icon" alt="github" />
|
||||
<input id="github" placeholder="github username" className="inputField lg"
|
||||
value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
|
||||
</div>
|
||||
<div className="container">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
|
||||
className="icon" alt="twitter" />
|
||||
<input id="twitter" placeholder="twitter username" className="inputField lg"
|
||||
value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
|
||||
</div>
|
||||
<div className="container">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
|
||||
className="icon" alt="dev.to" />
|
||||
<input id="dev" placeholder="dev.to username" className="inputField lg"
|
||||
value={props.social.dev} onChange={event => props.handleSocialChange('dev', event)} />
|
||||
</div>
|
||||
<div className="container">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
|
||||
className="icon" alt="codepen" />
|
||||
<input id="codepen" placeholder="codepen username" className="inputField lg"
|
||||
value={props.social.codepen} onChange={event => props.handleSocialChange('codepen', event)} />
|
||||
</div>
|
||||
<div className="container">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
|
||||
className="icon" alt="codesandbox" />
|
||||
<input id="codesandbox" placeholder="codesandbox username" className="inputField lg"
|
||||
value={props.social.codesandbox} onChange={event => props.handleSocialChange('codesandbox', event)} />
|
||||
</div>
|
||||
<div className="container">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
|
||||
className="icon" alt="stackoverflow" />
|
||||
<input id="stackoverflow" placeholder="stackoverflow username" className="inputField lg"
|
||||
value={props.social.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', event)} />
|
||||
</div>
|
||||
<div className="container">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
|
||||
className="icon" alt="linkedin" />
|
||||
<input id="linkedin" placeholder="linkedin username" className="inputField lg"
|
||||
value={props.social.linkedin} onChange={event => props.handleSocialChange('linkedin', event)} />
|
||||
</div>
|
||||
<div className="container">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
|
||||
className="icon" alt="kaggle" />
|
||||
<input id="kaggle" placeholder="kaggle username" className="inputField lg"
|
||||
value={props.social.kaggle} onChange={event => props.handleSocialChange('kaggle', event)} />
|
||||
</div>
|
||||
<div className="container">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
|
||||
className="icon" alt="facebook" />
|
||||
<input id="fb" placeholder="facebook username" className="inputField lg"
|
||||
value={props.social.fb} onChange={event => props.handleSocialChange('fb', event)} />
|
||||
</div>
|
||||
<div className="container">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
|
||||
className="icon" alt="instagram" />
|
||||
<input id="instagram" placeholder="instagram username" className="inputField lg"
|
||||
value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Social;
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
const Subtitle = (props) => {
|
||||
return (
|
||||
<div className="section">
|
||||
<h3>Subtitle</h3>
|
||||
<input id="subtitle" className="inputField lg prefix" value={props.data.subtitle}
|
||||
onChange={event => props.handleDataChange('subtitle', event)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Subtitle;
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
const Title = (props) => {
|
||||
return (
|
||||
<div className="section">
|
||||
<h3>Title</h3>
|
||||
<input id="title-prefix" className="inputField sm prefix" value={props.prefix.title}
|
||||
onChange={event => props.handlePrefixChange('title', event)} />
|
||||
<input id="title-name" placeholder="name" className="inputField md" value={props.data.title}
|
||||
onChange={event => props.handleDataChange('title', event)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Title;
|
||||
@@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
|
||||
const Work = (props) => {
|
||||
return (
|
||||
<div className="section">
|
||||
<h3>Work</h3>
|
||||
<div className="row">
|
||||
<input id="currentWork-prefix" className="inputField md prefix" value={props.prefix.currentWork}
|
||||
onChange={event => props.handlePrefixChange('currentWork', event)} />
|
||||
<input id="currentWork" placeholder="project name" className="inputField sm" value={props.data.currentWork}
|
||||
onChange={event => props.handleDataChange('currentWork', event)} />
|
||||
<input id="currentWork-link" placeholder="project link" className="inputField md link"
|
||||
value={props.link.currentWork} onChange={event => props.handleLinkChange('currentWork', event)} />
|
||||
</div>
|
||||
<div className="row">
|
||||
<input id="collaborateOn-prefix" className="inputField md prefix" value={props.prefix.collaborateOn}
|
||||
onChange={event => props.handlePrefixChange('collaborateOn', event)} />
|
||||
<input id="collaborateOn" placeholder="project name" className="inputField sm"
|
||||
value={props.data.collaborateOn} onChange={event => props.handleDataChange('collaborateOn', event)} />
|
||||
<input id="collaborateOn-link" placeholder="project link" className="inputField md link"
|
||||
value={props.link.collaborateOn} onChange={event => props.handleLinkChange('collaborateOn', event)} />
|
||||
</div>
|
||||
<div className="row">
|
||||
<input id="helpWith-prefix" className="inputField md prefix" value={props.prefix.helpWith}
|
||||
onChange={event => props.handlePrefixChange('helpWith', event)} />
|
||||
<input id="helpWith" placeholder="project name" className="inputField sm"
|
||||
value={props.data.helpWith} onChange={event => props.handleDataChange('helpWith', event)} />
|
||||
<input id="helpWith-link" placeholder="project link" className="inputField md link"
|
||||
value={props.link.helpWith} onChange={event => props.handleLinkChange('helpWith', event)} />
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<input id="currentLearn-prefix" className="inputField md prefix" value={props.prefix.currentLearn}
|
||||
onChange={event => props.handlePrefixChange('currentLearn', event)} />
|
||||
<input id="currentLearn" placeholder="Frameworks, courses etc." className="inputField md"
|
||||
value={props.data.currentLearn} onChange={event => props.handleDataChange('currentLearn', event)} />
|
||||
</div>
|
||||
<div className="row">
|
||||
<input id="ama-prefix" className="inputField md prefix" value={props.prefix.ama}
|
||||
onChange={event => props.handlePrefixChange('ama', event)} />
|
||||
<input id="ama" placeholder="react, vue and gsap" className="inputField md"
|
||||
value={props.data.ama} onChange={event => props.handleDataChange('ama', event)} />
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<input id="contact-prefix" className="inputField md prefix" value={props.prefix.contact}
|
||||
onChange={event => props.handlePrefixChange('contact', event)} />
|
||||
<input id="contact" placeholder="example@gmail.com" className="inputField md"
|
||||
value={props.data.contact} onChange={event => props.handleDataChange('contact', event)} />
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<input id="portfolio-prefix" className="inputField md prefix" value={props.prefix.portfolio}
|
||||
onChange={event => props.handlePrefixChange('portfolio', event)} />
|
||||
<input id="portfolio" placeholder="portfolio link" className="inputField md"
|
||||
value={props.link.portfolio} onChange={event => props.handleLinkChange('portfolio', event)} />
|
||||
</div>
|
||||
<div className="row">
|
||||
<input id="blog-prefix" className="inputField md prefix" value={props.prefix.blog}
|
||||
onChange={event => props.handlePrefixChange('blog', event)} />
|
||||
<input id="blog" placeholder="blog link" className="inputField md"
|
||||
value={props.link.blog} onChange={event => props.handleLinkChange('blog', event)} />
|
||||
</div>
|
||||
<div className="row">
|
||||
<input id="funFact-prefix" className="inputField md prefix" value={props.prefix.funFact}
|
||||
onChange={event => props.handlePrefixChange('funFact', event)} />
|
||||
<input id="funFact" placeholder="Chai over Coffee" className="inputField md"
|
||||
value={props.data.funFact} onChange={event => props.handleDataChange('funFact', event)} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Work;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -0,0 +1,12 @@
|
||||
import React from "react"
|
||||
import SEO from "../components/seo"
|
||||
|
||||
const NotFoundPage = () => (
|
||||
<div>
|
||||
<SEO title="404: Not found" />
|
||||
<h1>NOT FOUND</h1>
|
||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default NotFoundPage
|
||||
@@ -0,0 +1,256 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
|
||||
: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;
|
||||
--red: #e71837;
|
||||
--light-green: #acd157;
|
||||
--dark-purple: #5a01a7;
|
||||
--dark-yellow: #4d3800;
|
||||
--dark-blue: #002ead;
|
||||
--dark-green: #00471b;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 1%;
|
||||
padding: 1%;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: var(--grey-90);
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0 !important;
|
||||
font-family: 'Lato', sans-serif;
|
||||
padding-left: 2%;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
[type=checkbox] {
|
||||
-webkit-box-shadow: 0 1px 1px var(--grey-90) !important;
|
||||
-moz-box-shadow: 0 1px 1px var(--grey-90) !important;
|
||||
box-shadow: 0 1px 1px var(--grey-90) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
.section {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin: 2% 0%;
|
||||
}
|
||||
|
||||
.inputField {
|
||||
border: 0px solid;
|
||||
border-bottom: 1px solid grey;
|
||||
margin: 2%;
|
||||
padding: 1% 2% 1% 1%;
|
||||
font-size: 18px;
|
||||
height: 25px;
|
||||
}
|
||||
.row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* justify-content: flex-start; */
|
||||
}
|
||||
.inputField:focus {
|
||||
border-bottom: 1px solid var(--dark-blue);
|
||||
color: var(--grey-90);
|
||||
}
|
||||
.sm {
|
||||
width: 15%;
|
||||
}
|
||||
.md {
|
||||
width: 35%;
|
||||
}
|
||||
.lg {
|
||||
width: 50%;
|
||||
}
|
||||
.prefix {
|
||||
color: var(--grey-80);
|
||||
}
|
||||
.button {
|
||||
padding: 1% 0%;
|
||||
background: var(--grey-05);
|
||||
border: 2px solid var(--grey-85);
|
||||
color: var(--grey-90);
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.container {
|
||||
width: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-left: 2%;
|
||||
margin: 1% 0%;
|
||||
}
|
||||
.checkboxLabel {
|
||||
font-weight: 500;
|
||||
}
|
||||
.submit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.warning {
|
||||
color: var(--red);
|
||||
background: var(--grey-05);
|
||||
margin-left: 2%;
|
||||
padding: 1%;
|
||||
}
|
||||
.preview {
|
||||
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);
|
||||
padding: 0% 2%;
|
||||
}
|
||||
.markdown {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 2%;
|
||||
}
|
||||
.markdown-box {
|
||||
width: 80%;
|
||||
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);
|
||||
padding: 1% 2% 0.5% 2%;
|
||||
}
|
||||
.copy-button {
|
||||
border: 2px solid var(--grey-15);
|
||||
padding: 1%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.markdown-util {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.preview-button {
|
||||
justify-self: flex-end;
|
||||
border: 2px solid var(--grey-15);
|
||||
padding: 1%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.loader {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
color: var(--grey-75);
|
||||
width: 14%;
|
||||
font-size: 20px;
|
||||
margin-left: 10%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
.heading {
|
||||
color: var(--dark-blue);
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
.footer {
|
||||
margin: 2% 0%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
h1, h2, h3, h4 {
|
||||
margin: 2% 0% !important;
|
||||
}
|
||||
.inputField {
|
||||
font-size: 10px;
|
||||
}
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
font-size: 12px;
|
||||
}
|
||||
.button {
|
||||
width: 60%;
|
||||
}
|
||||
.back-button {
|
||||
width: 35%;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cardImage {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
.badgeImage {
|
||||
height: 15px;
|
||||
}
|
||||
.heading {
|
||||
font-size: 14px;
|
||||
}
|
||||
.footer {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
import React, { useRef, useState } from "react"
|
||||
import MarkdownPreview from "../components/markdownPreview";
|
||||
import Markdown from '../components/markdown';
|
||||
import Header from '../components/header';
|
||||
import Title from '../components/title';
|
||||
import Subtitle from '../components/subtitle';
|
||||
import Work from '../components/work';
|
||||
import Social from '../components/social';
|
||||
import Addons from '../components/addons';
|
||||
import gsap from 'gsap';
|
||||
import Loader from '../components/loader';
|
||||
import Footer from '../components/footer';
|
||||
import './index.css'
|
||||
|
||||
const IndexPage = () => {
|
||||
const [prefix, setPrefix] = useState({
|
||||
title: "Hi 👋, I'm",
|
||||
currentWork: '🔭 I’m currently working on',
|
||||
currentLearn: '🌱 I’m currently learning',
|
||||
collaborateOn: '👯 I’m looking to collaborate on',
|
||||
helpWith: '🤔 I’m looking for help with',
|
||||
ama: '💬 Ask me about',
|
||||
contact: '📫 How to reach me',
|
||||
funFact: '⚡ Fun fact',
|
||||
portfolio: '👨💻 All of my projects are available at',
|
||||
blog: '📝 I regulary write articles on',
|
||||
});
|
||||
const [data, setData] = useState({
|
||||
title: '',
|
||||
subtitle: 'A passionate frontend developer from India',
|
||||
currentWork: '',
|
||||
currentLearn: '',
|
||||
collaborateOn: '',
|
||||
helpWith: '',
|
||||
ama: '',
|
||||
contact: '',
|
||||
funFact: '',
|
||||
visitorsBadge: false,
|
||||
githubStats: false,
|
||||
});
|
||||
const [link, setLink] = useState({
|
||||
currentWork: '',
|
||||
collaborateOn: '',
|
||||
helpWith: '',
|
||||
portfolio: '',
|
||||
blog: '',
|
||||
});
|
||||
const [social, setSocial] = useState({
|
||||
github: '',
|
||||
dev: '',
|
||||
linkedin: '',
|
||||
codepen: '',
|
||||
stackoverflow: '',
|
||||
kaggle: '',
|
||||
codesandbox: '',
|
||||
fb: '',
|
||||
instagram: '',
|
||||
twitter: '',
|
||||
});
|
||||
const [generatePreview, setGeneratePreview] = useState(false);
|
||||
const [generateMarkdown, setGenerateMarkdown] = useState(false);
|
||||
const [displayLoader, setDisplayLoader] = useState(false);
|
||||
const handlePrefixChange = (field, e) => {
|
||||
let change = { ...prefix }
|
||||
change[field] = e.target.value;
|
||||
setPrefix(change);
|
||||
}
|
||||
const handleDataChange = (field, e) => {
|
||||
let change = { ...data }
|
||||
change[field] = e.target.value;
|
||||
setData(change);
|
||||
}
|
||||
const handleLinkChange = (field, e) => {
|
||||
let change = { ...link }
|
||||
change[field] = e.target.value;
|
||||
setLink(change);
|
||||
}
|
||||
const handleSocialChange = (field, e) => {
|
||||
let change = { ...social }
|
||||
change[field] = e.target.value;
|
||||
setSocial(change);
|
||||
}
|
||||
const handleCheckChange = (field) => {
|
||||
let change = { ...data }
|
||||
change[field] = !change[field];
|
||||
setData(change);
|
||||
}
|
||||
const generate = () => {
|
||||
var tl = new gsap.timeline();
|
||||
tl.to('.generate', {
|
||||
scale: 0,
|
||||
duration: 0.5,
|
||||
ease: 'Linear.easeNone',
|
||||
});
|
||||
tl.set('.form', { display: 'none' });
|
||||
setDisplayLoader(true);
|
||||
setTimeout(() => {
|
||||
setDisplayLoader(false);
|
||||
setGenerateMarkdown(!generateMarkdown);
|
||||
gsap.fromTo('.markdown-box', {
|
||||
scale: 0.2,
|
||||
}, {
|
||||
scale: 1,
|
||||
duration: 0.5,
|
||||
ease: 'Linear.easeNone',
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
const handleGenerate = () => {
|
||||
if (data.visitorsBadge || data.githubStats) {
|
||||
if (social.github) {
|
||||
generate();
|
||||
}
|
||||
} else {
|
||||
generate();
|
||||
}
|
||||
}
|
||||
const handleGeneratePreview = () => {
|
||||
setGenerateMarkdown(!generateMarkdown);
|
||||
setGeneratePreview(!generatePreview);
|
||||
if (!generatePreview) {
|
||||
gsap.set('#copy-markdown', {
|
||||
visibility: 'hidden'
|
||||
});
|
||||
document.getElementById('preview-markdown').innerHTML = 'markdown'
|
||||
} else {
|
||||
gsap.set('#copy-markdown', {
|
||||
visibility: 'visible'
|
||||
});
|
||||
document.getElementById('preview-markdown').innerHTML = 'preview'
|
||||
}
|
||||
}
|
||||
const handleCopyToClipboard = () => {
|
||||
var range = document.createRange();
|
||||
range.selectNode(document.getElementById("markdown-content"));
|
||||
window.getSelection().removeAllRanges(); // clear current selection
|
||||
window.getSelection().addRange(range); // to select text
|
||||
document.execCommand("copy");
|
||||
window.getSelection().removeAllRanges();
|
||||
gsap.set('#copy-markdown', {
|
||||
innerHTML: 'copied',
|
||||
color: '#00471b',
|
||||
});
|
||||
}
|
||||
const handleBackToEdit = () => {
|
||||
setGeneratePreview(false);
|
||||
setGenerateMarkdown(false);
|
||||
gsap.set('.form', {
|
||||
display: ''
|
||||
});
|
||||
gsap.to('.generate', {
|
||||
scale: 1,
|
||||
});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{/* <SEO title="Home" /> */}
|
||||
<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} />
|
||||
<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>
|
||||
</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>
|
||||
{generatePreview ? <MarkdownPreview prefix={prefix} data={data} link={link} social={social} /> : ''}
|
||||
{generateMarkdown ? <Markdown prefix={prefix} data={data} link={link} social={social} /> : ''}
|
||||
</div>
|
||||
</div>
|
||||
: ''}
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default IndexPage
|
||||
@@ -0,0 +1,32 @@
|
||||
// If you don't want to use TypeScript you can delete this file!
|
||||
import React from "react"
|
||||
import { PageProps, Link, graphql } from "gatsby"
|
||||
import SEO from "../components/seo"
|
||||
|
||||
type DataProps = {
|
||||
site: {
|
||||
buildTime: string
|
||||
}
|
||||
}
|
||||
|
||||
const UsingTypescript: React.FC<PageProps<DataProps>> = ({ data, path }) => (
|
||||
<div>
|
||||
<SEO title="Using TypeScript" />
|
||||
<h1>Gatsby supports TypeScript by default!</h1>
|
||||
<p>This means that you can create and write <em>.ts/.tsx</em> files for your pages, components etc. Please note that the <em>gatsby-*.js</em> files (like gatsby-node.js) currently don't support TypeScript yet.</p>
|
||||
<p>For type checking you'll want to install <em>typescript</em> via npm and run <em>tsc --init</em> to create a <em>.tsconfig</em> file.</p>
|
||||
<p>You're currently on the page "{path}" which was built on {data.site.buildTime}.</p>
|
||||
<p>To learn more, head over to our <a href="https://www.gatsbyjs.org/docs/typescript/">documentation about TypeScript</a>.</p>
|
||||
<Link to="/">Go back to the homepage</Link>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default UsingTypescript
|
||||
|
||||
export const query = graphql`
|
||||
{
|
||||
site {
|
||||
buildTime(formatString: "YYYY-MM-DD hh:mm a z")
|
||||
}
|
||||
}
|
||||
`
|
||||
Reference in New Issue
Block a user