Merge pull request #46 from RossellaFer/feature/more-data-on-internships

#45 description added to data + disclaimer component

Author: princiya

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

@@ -9,7 +9,6 @@
   border: 1px solid #ccc;
   box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
   width: 110%;
-  height: 220%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -34,4 +33,3 @@
 .resourceLink:hover {
   background-color: rgba(0, 122, 124, 0.8);
 }
-

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 (
     <>
         <Toggle />
@@ -20,8 +19,8 @@ return (
                </div>
                <Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>
               </article>)}
-      </div>     
-
+      </div> 
+      <Disclaimer />
     </>
   );
 }

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

@@ -7,7 +7,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,
@@ -17,7 +18,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,
@@ -40,7 +42,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,
@@ -50,7 +53,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,
@@ -60,7 +64,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,
@@ -70,7 +75,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,
@@ -93,7 +99,8 @@
       "December"
     ],
     "stipend": false,
-    "location": ["Bangalore", "Remote"]
+    "location": ["Bangalore", "Remote"],
+    "description": "Deeproot started in 2000. Their main product is deepOfix Mail Server and is based on Debian."
   },
   {
     "id": 8,
@@ -116,7 +123,8 @@
       "December"
     ],
     "stipend": true,
-    "location": ["Remote"]
+    "location": ["Remote"],
+    "description": "An organisation dedicated to network functions virtualisation"
   },
   {
     "id": 9,
@@ -126,7 +134,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,
@@ -136,7 +145,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,
@@ -146,6 +156,7 @@
     "internship_period": null,
     "application_period": [],
     "stipend": true,
-    "location": ["Remote"]
+    "location": ["Remote"],
+    "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."
   }
 ]