Merge branch 'master' of https://github.com/rahuldkjain/github-profile-readme-generator

README.md

@@ -34,6 +34,25 @@ You can preview the README too.
 
 You can add latest addons like `visitors count`, `shields`, `dev icons`, `github stats` etc to your README in just one click.
 
+### Installation Steps
+1. Clone the repository
+```bash
+git clone https://github.com/rahuldkjain/github-profile-readme-generator.git
+```
+2. Change the working directory
+```bash
+cd github-profile-readme-generator
+```
+3. Install dependencies
+```bash
+npm install
+```
+4. Run the app
+```bash
+npm start
+```
+🌟 You are all set!
+
 
 ### Special Thanks 🙇
 - [Anurag Hazra](https://github.com/anuraghazra) for amazing [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)

src/components/markdown.js

@@ -59,7 +59,7 @@ const Markdown = (props) => {
     }
     const isSocial = (social) => {
         return (social.dev || social.twitter || social.codepen || social.codesandbox || social.stackoverflow
-            || social.linkedin || social.kaggle || social.instagram || social.fb);
+            || social.linkedin || social.kaggle || social.instagram || social.fb || social.dribbble || social.behance ||social.medium ||social.youtube );
     }
     const DisplaySkills = (props) => {
         const listChosenSkills = [];
@@ -105,7 +105,15 @@ const Markdown = (props) => {
             <><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} /></>
+                username={ props.social.instagram } /></>
+            <><DisplaySocial base='https://dribbble.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg'
+                username={ props.social.dribbble } /></>
+            <><DisplaySocial base='https://www.behance.net' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg'
+                username={ props.social.behance } /></>
+            <><DisplaySocial base='https://medium.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg'
+                username={ props.social.medium } /></>
+            <><DisplaySocial base='https://www.youtube.com/c' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg'
+                username={props.social.youtube} /></>
             {isSocial(props.social) ? `</p>` : ''}
         </div>
     );

src/components/markdownPreview.js

@@ -74,7 +74,11 @@ const MarkdownPreview = (props) => {
                 <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} />
+                <DisplaySocial base="https://instagram.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" username={ props.social.instagram } />
+                <DisplaySocial base='https://dribbble.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg'username={ props.social.dribbble } />
+                <DisplaySocial base='https://www.behance.net' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg'username={ props.social.behance } />
+                <DisplaySocial base='https://medium.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg'username={ props.social.medium } />
+                <DisplaySocial base='https://www.youtube.com/c' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg'username={props.social.youtube} />
             </div>
         )
     }

src/components/social.js

@@ -64,6 +64,30 @@ const Social = (props) => {
                 <input id="instagram" placeholder="instagram username" className="inputField lg"
                 value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} />
             </div>
+            <div className="container">
+                <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
+                className="icon" alt="dribbble" />
+                <input id="dribbble" placeholder="dribbble username" className="inputField lg"
+                value={props.social.dribbble} onChange={event => props.handleSocialChange('dribbble', event)} />
+            </div>
+            <div className="container">
+                <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
+                className="icon" alt="behance" />
+                <input id="behance" placeholder="behance username" className="inputField lg"
+                value={props.social.behance} onChange={event => props.handleSocialChange('behance', event)} />
+            </div>
+            <div className="container">
+                <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
+                className="icon" alt="medium" />
+                <input id="medium" placeholder="medium username (with @)" className="inputField lg"
+                value={props.social.medium} onChange={event => props.handleSocialChange('medium', event)} />
+            </div>
+            <div className="container">
+                <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
+                className="icon" alt="youtube" />
+                <input id="youtube" placeholder="youtube channel name" className="inputField lg"
+                value={props.social.youtube} onChange={event => props.handleSocialChange('youtube', event)} />
+            </div>
         </div>
     );
 }

src/pages/index.js

@@ -60,6 +60,10 @@ const IndexPage = () => {
     fb: '',
     instagram: '',
     twitter: '',
+    dribbble: '',
+    behance: '',
+    medium: '',
+    youtube: ''
   });
   const [skills, setSkills] = useState(initialSkillState)
   const [generatePreview, setGeneratePreview] = useState(false);