fix: Portfolio styling

client/src/components/profile/components/Portfolio.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Thumbnail, Media } from '@freecodecamp/react-bootstrap';
+import { Media } from '@freecodecamp/react-bootstrap';
 
 import { FullWidthRow } from '../../helpers';
 
+import './portfolio.css';
+
 const propTypes = {
   portfolio: PropTypes.arrayOf(
     PropTypes.shape({
@@ -21,25 +23,22 @@ function Portfolio({ portfolio = [] }) {
     return null;
   }
   return (
-    <div>
     <FullWidthRow>
       <h2 className='text-center'>Portfolio</h2>
       {portfolio.map(({ title, url, image, description, id }) => (
         <Media key={id}>
           <Media.Left align='middle'>
             {image && (
-                <a href={url} rel='nofollow'>
+              <img
-                  <Thumbnail
                 alt={`A screen shot of ${title}`}
+                className='portfolio-screen-shot'
                 src={image}
-                    style={{ width: '150px' }}
               />
-                </a>
             )}
           </Media.Left>
           <Media.Body>
-              <Media.Heading>
+            <Media.Heading className='portfolio-heading'>
-                <a href={url} rel='nofollow'>
+              <a href={url} rel='nofollow noopener noreferrer'>
                 {title}
               </a>
             </Media.Heading>
@@ -47,9 +46,8 @@ function Portfolio({ portfolio = [] }) {
           </Media.Body>
         </Media>
       ))}
-      </FullWidthRow>
       <hr />
-    </div>
+    </FullWidthRow>
   );
 }
 

client/src/components/profile/components/portfolio.css

@@ -0,0 +1,8 @@
+.portfolio-heading.media-heading {
+  border-bottom: 1px solid rgba(0, 100, 0, 0.6);
+  padding-bottom: 10px;
+}
+.portfolio-screen-shot {
+  width: 150px;
+  min-width: 150px;
+}