Merge branch 'source' into patch-1

Author: Roshanjossey

package.json

@@ -5,15 +5,15 @@
   "homepage": "https://firstcontributions.github.io/",
   "devDependencies": {
     "enzyme": "^3.0.0",
-    "gh-pages": "^0.12.0",
-    "react-scripts": "3.2.0",
+    "gh-pages": "^3.1.0",
+    "react-scripts": "^4.0.3",
     "react-test-renderer": "^15.0.0",
     "sw-precache": "^5.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.19",
-    "react": "^15.4.0",
-    "react-dom": "^15.4.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-select": "^1.0.0-rc.10"
   },
   "scripts": {

src/components/LinkButton/LinkButton.css

@@ -7,15 +7,15 @@
 
   border-width: 0;
   border-radius: 2px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
-  
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+
   background-color: #2ecc71;
   color: #fff;
-  
-  -webkit-transition: background-color .3s;
-  -moz-transition: background-color .3s;
-  transition: background-color .3s;
-  margin-bottom: 10vw;
+
+  -webkit-transition: background-color 0.3s;
+  -moz-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  margin-bottom: 0 !important;
 }
 
 .LinkButton:hover {
@@ -24,5 +24,32 @@
 
 .LinkButton > span {
   font-size: 1.1em;
-  letter-spacing: .05em;
+  letter-spacing: 0.05em;
+}
+.LinkButton-Wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 2rem;
+}
+.Scroll-Down {
+  cursor: pointer;
+  position: relative;
+  animation: swing alternate 0.5s infinite;
+}
+.Scroll-Down:active {
+  opacity: 0.75;
+}
+.Scroll-Down-Wrapper {
+  padding: 1vw;
+  padding-bottom: 1.75vw;
+}
+@keyframes swing {
+  from {
+    top: -0.5rem;
+  }
+  to {
+    top: 1rem;
+  }
 }

src/components/LinkButton/LinkButton.jsx

@@ -1,12 +1,21 @@
-import React, { Component } from 'react';
-import './LinkButton.css';
+import React, { Component } from "react";
+import "./LinkButton.css";
+import scrollDown from "./scroll-down.svg";
 
 class LinkButton extends Component {
   render() {
     return (
-      <a className="LinkButton" href="https://github.com/firstcontributions/first-contributions/blob/master/README.md">
-        <span> Get started </span>
-      </a>
+      <div className="LinkButton-Wrapper">
+        <a
+          className="LinkButton"
+          href="https://github.com/firstcontributions/first-contributions/blob/master/README.md"
+        >
+          <span> Get started </span>
+        </a>
+        <div className="Scroll-Down-Wrapper">
+          <img className="Scroll-Down" onClick={() => { window.scrollBy({ top: window.innerHeight - 80, left: 0, behavior: "smooth" }); }} src={scrollDown} alt="Scroll Down!" width="64" height="64" />
+        </div>
+      </div>
     );
   }
 }

src/components/LinkButton/scroll-down.svg

@@ -34,8 +34,8 @@ const Card = ({
           <div className="Card-Description">
             <p> {description}</p>
           </div>
-          <div className="Card-Link">Go to Project</div>
         </div>
+        <div className="Card-Link">Go to Project</div>
       </a>
     </div>
   );

src/components/ProjectList/ProjectsCards.jsx

@@ -10,7 +10,7 @@
 }
 .Project-Logo {
   width: 45%;
-  height: 40%;
+  height: auto;
   margin-top: 5%;
 }
 .Card-Body {
@@ -49,6 +49,8 @@
   color: black;
 }
 .Card-Real-Link:link {
+  display: flex;
+  flex-direction: column;
   text-decoration: none;
   color: black;
   margin: 0 auto;
@@ -63,8 +65,16 @@
 }
 .Card-Link {
   position: relative;
-  padding: 10px;
+  padding: 15px;
   color: #0f3cef;
+  background: transparent;
+  transition: .5s;
+  margin-top: auto;
+  border-top: rgba(0, 0, 0, 0.12) 1px solid;
+}
+.Card-Link:hover {
+  color: whitesmoke;
+  background: #0f3cef;
 }
 .Card-Title {
   margin-top: 6%;

src/components/ProjectList/css/project-cards.css

@@ -16,6 +16,10 @@
   border: 1px solid #DCDCDC;
 }
 
+#search:hover,#search:focus {
+  border: 1px #0f3cef solid ;
+}
+
 .inputContainer {
    width: 47%;
    margin-top: 40px;

src/components/ProjectList/css/search.css

@@ -735,11 +735,11 @@ const projectList = [
     tags: ['React', 'Chat', 'Javascript', 'Beginner', 'NodeJS'],
   },
   {
-    name: 'Open Source Code',
-    imageSrc: 'https://raw.githubusercontent.com/OpenSouceCode/Frontend/master/public/logo/favicon-logo.png',
-    projectLink: 'https://github.com/OpenSouceCode',
+    name: 'CodeTrophs',
+    imageSrc: 'https://avatars.githubusercontent.com/u/62751673?s=200&v=4',
+    projectLink: 'https://github.com/CodeTrophs',
     description: 'Contributing to open source can be a rewarding way to learn, teach, and build experience in just about any skill you can imagine.',
-    tags: ['React', 'Chat', 'Javascript', 'Beginner', 'NodeJS', 'NextJS'],
+    tags: ['React', 'Chat', 'Javascript', 'Beginner', 'NodeJS', 'NextJS', 'Python', 'ML/AI', 'OpenSource'],
   },
   {
     name: 'Zulip',
@@ -803,6 +803,27 @@ const projectList = [
     projectLink: 'https://github.com/CollaboraOnline/online/contribute',
     description: 'A collaborative online office suite based on LibreOffice technology. This is also the source for the Collabora Office apps for iOS and Android.',
     tags: ['javascript', 'css', 'android', 'c++', 'design', 'ios', 'web', 'productivity', 'typescript', 'libreoffice', 'office', 'documents']
+  },
+  {
+    name: 'Jigsaw',
+    imageSrc: 'https://avatars.githubusercontent.com/u/19845815?s=200&v=4',
+    projectLink: 'https://github.com/Jigsaw-Code',
+    description: 'Jigsaw is an incubator within Google that uses technology to address geopolitical issues.',
+    tags: ['Go', 'TypeScript', 'c', 'Shell', 'Python'],
+  },
+  {
+    name: 'Idea Hub',
+    imageSrc: 'https://avatars3.githubusercontent.com/u/67384272?v=4',
+    projectLink: 'https://github.com/MakeContributions/ideahub#contribution-guidelines',
+    description: 'A collection of ideas and projects that contain from beginner to advance :octocat: 🎯🚀',
+    tags: ['Hub', 'ideas', 'Project List', 'Good First Issue', 'Beginner'],
+  },
+  {
+    name: 'Simple Icons',
+    imageSrc: 'https://github.com/simple-icons/simple-icons-website/blob/master/public/images/og.png',
+    projectLink: 'https://github.com/simple-icons/simple-icons',
+    description: 'SVG icons for popular brands',
+    tags: ['JavaScript', 'OpenSource', 'Beginner', 'SVG', 'NodeJS']
   }
 ];
 export default projectList;