Merge pull request #2 from favour-chibueze/frontendstudygroup-master

Frontendstudygroup master

Author: favour-chibueze

src/components/Disclaimer/Disclaimer.css

@@ -0,0 +1,12 @@
+.disclaimerContainer {
+  padding: 30px 80px 30px 80px;
+}
+
+.disclaimerLink {
+  text-decoration: underline;
+  color: rgb(0, 122, 124);
+}
+
+.disclaimerLink:hover {
+  color: rgba(0, 122, 124, 0.5);
+}

src/components/Disclaimer/Disclaimer.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import '../../assets/css/App.css';
+import './Disclaimer.css';
+
+export default function Disclaimer(props) {
+
+  return (
+    <>
+      <div className="disclaimerContainer">
+         <p>The source for the data used in this project is <a className="disclaimerLink" target="_blank" href="https://itsfoss.com/best-open-source-internships/" rel="noreferrer">"It's Foss"</a>, an award-winning web-portal that focuses on Open Source.</p>
+      </div>     
+
+    </>
+  );
+}

src/components/Resources/Resources.css

@@ -59,3 +59,4 @@ article h1 {
     height: 350px;
   }
 }
+

src/components/Resources/Resources.js

@@ -3,12 +3,11 @@ import '../../assets/css/App.css';
 import './Resources.css';
 import ResourcesList from '../data/data.json';
 import { Link } from "react-router-dom";
-import Toggle from "../Toggle"
-
-
-
+import Toggle from "../Toggle";
+import Disclaimer from "../Disclaimer/Disclaimer";
 
 export default function Resources() {
+
 return (
     <div className="container">
         <Toggle />
@@ -20,7 +19,11 @@ return (
                 <p className="text">{resource.body}
                </p>
                <Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>
-              </article>)
+
+              </article>)}
+      </div> 
+      <Disclaimer />
+    </>   </article>)
           }
       </div>     
 

src/components/SingleResource/SingleResource.css

@@ -1,5 +1,5 @@
 .fullCardContainer {
-  height: calc(100vh - 62px);
+  min-height: calc(100vh - 62px);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -8,6 +8,7 @@
 .fullCard {
   width: 400px;
   padding: 20px 30px;
+  margin: 30px auto;
   border: 1px solid rgb(0, 122, 124);
   box-shadow: 4px 5px 10px 0px rgb(0 122 124 / 30%);
   display: flex;
@@ -20,6 +21,10 @@
   font-weight: 600;
 }
 
+.fullCardDescription {
+  line-height: 1.5em;
+}
+
 .fullCardLabelsContainer {
   display: flex;
   flex-wrap: wrap;

src/components/SingleResource/SingleResource.js

@@ -3,6 +3,7 @@ import '../../assets/css/App.css';
 import './SingleResource.css';
 import { useParams } from "react-router-dom";
 import data from '../data/data.json';
+import Disclaimer from '../Disclaimer/Disclaimer';
 
 export default function SingleResource() {
   const { id } = useParams();
@@ -15,19 +16,20 @@ export default function SingleResource() {
               .map((resource) => (
                 <div className="fullCard" key={ resource.id }>
                   <h2 className="fullCardTitle">{resource.name}</h2>
+                  <p className="fullCardDescription">{resource.description}</p>
                   <p>Duration: <strong>{resource.internship_period} months</strong></p>
                   {resource.application_period.length > 0 &&
                     <div><p>Application period:</p>
                       <div className="fullCardLabelsContainer">{ resource.application_period.map((month, index) => <span key={index} className="fullCardLabel">{ month }</span>) }</div>
                       </div>
                   }
                   <p>Stipend: {resource.stipend ? <strong>Paid</strong> : <strong>Unpaid</strong>}</p>
-                  <p>Location: { resource.location.join(', ')}</p>
+                  <p>Location: <strong>{ resource.location.join(', ')}</strong></p>
                   <a className="fullCardLink" target="_blank" href={resource.url} rel="noreferrer">Go to resource website</a>
                 </div>
               ))}
       </div>     
-
+      <Disclaimer />
     </>
   );
 }

src/components/data/data.json

@@ -8,7 +8,8 @@
     "internship_period": 3,
     "application_period": ["March", "April"],
     "stipend": true,
-    "location": ["Remote"]
+    "location": ["Remote"],
+    "description": "You can work with famous organizations like, Debian, Fedora, GCC, FreeBSD, Git (Not GitHub), Gnome, OpenSUSE Arduino, and other more top names in Open Source community."
   },
   {
     "id": 2,
@@ -19,7 +20,8 @@
     "internship_period": 3,
     "application_period": ["April", "May"],
     "stipend": false,
-    "location": ["Remote", "Boston, US"]
+    "location": ["Remote", "Boston, US"],
+    "description": "The oldest, mother of all organizations which started the free software movement. The Internship program runs thrice a year."
   },
   {
     "id": 3,
@@ -43,7 +45,8 @@
       "December"
     ],
     "stipend": true,
-    "location": ["Remote"]
+    "location": ["Remote"],
+    "description": "Project which develops, maintains, supports the free software stack for accelerated graphics for all graphics hardware."
   },
   {
     "id": 4,
@@ -54,7 +57,8 @@
     "internship_period": 3,
     "application_period": ["February", "March", "April"],
     "stipend": true,
-    "location": ["Remote"]
+    "location": ["Remote"],
+    "description": "Project to entice/enhance women participation in Rust, Clojure, JavaScript, PHP, Python, Ruby on Rails, Rails web framework etc."
   },
   {
     "id": 5,
@@ -65,7 +69,8 @@
     "internship_period": 4,
     "application_period": ["February", "March"],
     "stipend": true,
-    "location": ["United States"]
+    "location": ["United States"],
+    "description": "A project to collect, understand earth observational data using a variety of sensors, testing and making cohesive sense out of the data collected."
   },
   {
     "id": 6,
@@ -76,7 +81,8 @@
     "internship_period": 3,
     "application_period": ["January", "February", "March"],
     "stipend": true,
-    "location": ["Remote"]
+    "location": ["Remote"],
+    "description": "FOSS Project which works to use and promote software-defined networking and network functions visualization."
   },
   {
     "id": 7,
@@ -96,6 +102,7 @@
       "September"
     ],
     "stipend": false,
+    "description": "Deeproot started in 2000. Their main product is deepOfix Mail Server and is based on Debian."
     "location": ["Remote"]
   },
   {
@@ -110,7 +117,8 @@
       "February"
     ],
     "stipend": true,
-    "location": ["Remote"]
+    "location": ["Remote"],
+    "description": "An organisation dedicated to network functions virtualisation"
   },
   {
     "id": 9,
@@ -121,7 +129,8 @@
     "internship_period": 3,
     "application_period": ["February", "March", "April"],
     "stipend": true,
-    "location": ["Remote"]
+    "location": ["Remote"],
+    "description": "Outreachy started in 2006, wrapped up, and started up again in 2010. I did share an interview with Maria Glukova which shared her experience. Twice a year it runs and has in excess of 30+ interns per year from 20+ projects including Debian, Redhat, OpenStack, and many others."
   },
   {
     "id": 10,
@@ -132,7 +141,8 @@
     "internship_period": 3,
     "application_period": ["June", "July"],
     "stipend": false,
-    "location": ["Remote"]
+    "location": ["Remote"],
+    "description": "Technical writers can spend three months working closely with an open-source community. Bring their technical writing expertise to the project’s documentation. Google uses Payoneer to pay a stipend to technical writers who have successfully completed their Season of Docs projects."
   },
   {
     "id": 11,
@@ -143,6 +153,7 @@
     "internship_period": null,
     "application_period": [],
     "stipend": true,
+    "description": "Khan Academy is looking for talented software developers to create a free virtual classroom for the world. You can work on developing web solutions, data analysis developing classroom content, etc."
     "location": ["Remote"]
   },
   {