Merge branch 'master' of https://github.com/RaspberryProgramming/portfolio

src/actions/index.js

@@ -14,7 +14,7 @@ export const getUser = (username) => async (dispatch, getState) => {
 };
 
 export const getRepos = (username) => async (dispatch, getState) => {
-  const response = await github.get(`/users/${username}/repos`); // axios request for repositories
+  const response = await github.get(`/users/${username}/repos`, {params: {sort: 'updated'}}); // axios request for repositories
 
   dispatch({
     type: 'GET_REPOS',

src/components/About.js

@@ -3,8 +3,6 @@ import { Link } from 'react-router-dom';
 import './css/About.css';
 import Theater from './subcomponents/Theater';
 import Card from './subcomponents/Card';
-import GithubRepos from './subcomponents/GithubRepos';
-
 
 class About extends React.Component {
   /**
@@ -43,9 +41,9 @@ class About extends React.Component {
           social media below, just click the image and it'll bring you to the selected website.
         </Card>
 
-        <Card title="Github" image="/img/github.webp" link="/github">
-          You can access a list of github repositories that I've created directly on this site.
-          <GithubRepos style={{width: "50vw"}} username="RaspberryProgramming" single/>
+        <Card title="Github"link="/github">
+          <p>You can access a list of github repositories that I've created directly on this site.</p>
+          <Link className='btn' to='/github'>Learn More</Link>
         </Card>
 
 
@@ -58,18 +56,18 @@ class About extends React.Component {
 
           <div className="links">
 
-            <a href="https://github.com/RaspberryProgramming" target="_blank" rel="noreferrer" className="link">
+            <a href="https://github.com/RaspberryProgramming" target="_blank" rel="noreferrer" className="link bg-white">
               <img src="/img/github.webp" alt="Github"/>
             </a>
 
-            <a href="https://www.linkedin.com/in/camerin-figueroa-2662bb157/" target="_blank" rel="noreferrer" className="link">
+            <a href="https://www.linkedin.com/in/camerin-figueroa-2662bb157/" target="_blank" rel="noreferrer" className="link bg-white">
               <img src="/img/linkedin.webp" alt="LinkedIn"/>
             </a>
 
             <a href="https://www.hackerrank.com/figueroa0609" target="_blank" rel="noreferrer" className="link">
               <img src="/img/hackerrank.webp" alt="Hacker Rank"/>
             </a>
-            <a href="https://app.hackthebox.eu/profile/734741" target="_blank" rel="noreferrer" className="link">
+            <a href="https://app.hackthebox.eu/profile/734741" target="_blank" rel="noreferrer" className="link bg-white">
               <img src="/img/hackthebox.webp" alt="Hack The Box"/>
             </a>
             <a href="https://www.udemy.com/user/camerin-figueroa/" target="_blank" rel="noreferrer" className="link">

src/components/css/About.css

@@ -12,7 +12,7 @@
 }
 
 .About .title {
-    margin-top: 2rem;
+    margin-top: 4rem;
     color: #BF8D8C !important;
     font-size: 48px;
 }
@@ -46,6 +46,16 @@
     margin: 10px;
 }
 
+.About .link.bg-white {
+    background-color: white;
+    border-radius: 5px;
+    display:flex;
+    height: 10rem;
+    align-items: center;
+    justify-content: center;
+}
+
+
 @media only screen and (max-width: 600px) {
     .About .links .link img {
         width: 25vw;

src/components/css/App.css

@@ -30,6 +30,15 @@ html, body {
     height:100%;
 }
 
+.btn {
+    border-style: solid;
+    border-color: #837483;
+    border-radius: 5px;
+    border-width: 1px;
+    background-color: #373747;
+    padding: 6px;
+}
+
 @media only screen and (max-width: 600px) {
     .App {
         flex-direction: column-reverse;

src/components/subcomponents/GithubRepos.js

@@ -88,7 +88,7 @@ class GithubRepos extends React.Component {
           <div className="repo-list">
             {render}
             {this.props.page < pages ?
-              <div className="button" onClick={()=>this.props.nextPage()}>Load More ({this.props.page}/{pages})</div>
+              <div className="btn" onClick={()=>this.props.nextPage()}>Load More ({this.props.page}/{pages})</div>
               : ""
             }
           </div>

src/components/subcomponents/Topic.js

@@ -23,6 +23,7 @@ const Card = (props) => {
                 <div className="children">
                     {props.children}
                 </div>
+                <Link className="btn" to={props.link}>Learn More</Link>
             </div>
         </div>
     );