[fix]: current learning not in markdown, preview

src/components/footer.js

@@ -2,6 +2,7 @@ import React from 'react';
 const Footer = () => {
     return (
         <div className="footer">
+            <div><a id="footer-about" href="/about">About GPRG</a></div>
             Developed with <span role="img" aria-label="love">❤️</span> by <a href="https://rahuldkjain.github.io" style={{textDecoration: 'none'}}>Rahul</a>
         </div>
     )

src/components/header.js

@@ -41,21 +41,23 @@ const Header = props => {
 
   return (
     <div className="header">
-      <h1 className="heading">
-        <img
-          src={logo}
-          onClick={() => window.location.reload(false)}
-          className="logo"
-          alt="github profile markdown generator logo"
-        />
-        <div
-          onClick={() => window.location.reload(false)}
-          role="button"
-          tabIndex="0"
-        >
-          {props.heading}
-        </div>
-      </h1>
+      <a href="/">
+        <h1 className="heading">
+          <img
+            src={logo}
+            onClick={() => window.location.reload(false)}
+            className="logo"
+            alt="github profile markdown generator logo"
+          />
+          <div
+            onClick={() => window.location.reload(false)}
+            role="button"
+            tabIndex="0"
+          >
+            {props.heading}
+          </div>
+        </h1>
+      </a>
       <div className="github">
         <a
           href="https://github.com/rahuldkjain/github-profile-readme-generator"

src/components/markdown.js

@@ -78,6 +78,7 @@ const Markdown = (props) => {
             <><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.currentLearn} project={props.data.currentLearn} /></>
             <><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} link={props.link.portfolio} /></>

src/components/markdownPreview.js

@@ -46,6 +46,7 @@ const MarkdownPreview = (props) => {
         return (
             <>
                 <DisplayWork prefix={prefix.currentWork} project={data.currentWork} link={link.currentWork} />
+                <DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
                 <DisplayWork prefix={prefix.helpWith} project={data.helpWith} link={link.helpWith} />
                 <DisplayWork prefix={prefix.collaborateOn} project={data.collaborateOn}
                     link={link.collaborateOn} />

src/pages/about.css

@@ -0,0 +1,58 @@
+: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;
+  }
+#about-title {
+    color: var(--grey-90);
+}
+.content-container {
+    padding: 2%;
+    font-size: 20px;
+    color: var(--grey-80)
+}
+.content-title {
+    font-size: 22px;
+    font-weight: 600;
+    color: var(--grey-90);
+}
+#introduction {
+    margin: 2% 0%
+}
+#how-to-use {
+    margin: 5% 0%
+}
+#faq {
+    margin: 5% 0%
+}
+#gprg-gif {
+    text-align: center;
+    margin: 2% 0%;
+}
+@media only screen and (max-width: 1199px) {
+    #about-title {
+        text-align: center;
+    }
+    .content-container {
+        font-size: 14px;
+    }
+    .content-title {
+        font-size: 18px;
+    }
+    #gprg-gif {
+        width: 350px;
+    }
+}

src/pages/about.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import Header from '../components/header';
+import Footer from '../components/footer';
+import './about.css';
+
+const About = () => {
+    return (
+        <>
+            <Header heading="Github Profile README Generator" />
+            <h1 id="about-title">About</h1>
+            <div className="content-container">
+                <div id="introduction">
+                    Github Profile README Generator provides a cool interface to generate Github profile README in markdown.
+                    The tool aims to provide hassle-free experience to add trending addons like profile visitors count, github-stats,
+                    dynamic blog posts etc.
+                    <br /><br />
+                    The profile should be neat and minimal to give a clear overview of the work. Non-uniform icons, too much content, too much images/gifs
+                    distracts visitors to see your actual work.
+                    <br /><br />
+                    To solve this, Github Profile README Generator came into existence.
+                    <br /><br />
+                    So many developers contributed to the project and made it more awesome to use. You can contribute too to make it grow even further.
+                </div>
+                <br /><br />
+                <div id="how-to-use">
+                    <div className="content-title">How to use?</div>
+                    Tired of editing profile README.md to add new features like visitors-count badge, github-stats etc?
+                    <br />
+                    Don't worry. Keep calm and fill the form and let the tool do the work for you
+                    <br />
+                    <img src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/github-profile-readme-generator.gif"
+                        style={{ textAlign: 'center' }} id="gprg-gif" alt="github profile readme generator" />
+                </div>
+                <div id="faq">
+                    <div className="content-title">Why visitors count keeps on increasing?</div>
+                    So many users raised an issue that the counter keeps on increasing everytime the page reloads.
+                    <br />
+                    Well it is visitors count not "unique" visitors count. The goal of the addon is to provide a good stat
+                    of how well the github profile is doing.
+                    <br />
+                    Proper use or misuse of the addon is the sole responsibility of the user.
+                    The developer of the addon is working on it to fix this issue.
+                </div>
+            </div>
+            <Footer />
+        </>
+    );
+}
+export default About;

src/pages/index.css

@@ -353,6 +353,9 @@ a {
   .footer {
     font-size: 12px;
   }
+  #footer-about {
+    color: var(--grey-75) !important;
+  }
   .github-button {
     font-size: 10px !important;
     padding: 2% 1% !important;

src/pages/index.js

@@ -256,7 +256,7 @@ const IndexPage = () => {
   return (
     <>
       <SEO title="Github Profile Readme Generator" description="Github Profile Readme Generator" />
-      <><Header heading="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} />