fix: web-layout

client/i18n/locales/english/translations.json

@@ -38,6 +38,7 @@
     "sign-me-out": "Sign me out of freeCodeCamp",
     "flag-user": "Flag This User's Account for Abuse",
     "current-challenge": "Go to current challenge",
+    "follow-link": "Follow Link",
     "try-again": "Try again",
     "menu": "Menu",
     "settings": "Settings",

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

@@ -1,57 +1,71 @@
 .portfolio-container {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
   position: relative;
+  padding: 0 1em 1em 0;
+  max-height: 300px;
   border: 1px solid var(--secondary-color);
-  gap: 0.5rem;
-  margin-top: 1em;
-  margin-bottom: 3em;
+  gap: 1rem 1rem;
+  grid-template-columns: repeat(3, 1fr);
 }
 
 .portfolio-screen-shot {
-  width: 100%;
-  height: 100%;
   display: block;
+  width: 300px;
+  height: 300px;
   grid-column: 1/ -1;
   grid-row: 1;
-  object-fit: cover;
+}
+
+.portfolio-container h2 {
+  grid-column: 1/ -1;
+  grid-row: 2;
 }
 
 .portfolio-container h3 {
-  margin-top: 0.5em;
-  margin-inline: 0.5rem;
   grid-column: 1/ -1;
-  grid-row: 3;
+  grid-row: 4;
   font-size: unset;
+  justify-self: end;
+  width: 60%;
 }
 
 .portfolio-container a {
+  display: flex;
   background-color: var(--primary-color);
   color: var(--primary-background);
-  display: flex;
   justify-content: center;
-  text-align: center;
-  padding-inline: 0.75rem;
-  padding-block: 0.5rem;
+  padding: 0.5rem;
   border-radius: 15px;
 }
 
 .portfolio-container p {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
   grid-column: 1/ -1;
-  margin-inline-start: 0.5em;
-  grid-row: 2;
+  grid-row: 3;
+}
+
+#link-icon {
+  margin-left: 1rem;
 }
 
 @media (max-width: 990px) {
   .portfolio-screen-shot {
     max-height: 300px;
   }
+
+  .portfolio-container {
+    max-height: 900px;
+    max-width: 300px;
+  }
 }
 
 @media (min-width: 995px) {
   .portfolio-container {
-    grid-template-rows: 1fr 0.1fr;
-    grid-template-columns: 300px 1fr;
+    grid-template-rows: 75px 125px 100px;
+    grid-template-columns: 300px 1.2fr;
   }
 
   .portfolio-screen-shot {
@@ -59,14 +73,19 @@
     grid-row: 1 / -1;
   }
 
-  .portfolio-container h3 {
+  .portfolio-container h2 {
     grid-column: 2;
-    grid-row: 2;
+    grid-row: 1;
   }
 
   .portfolio-container p {
     grid-column: 2;
-    grid-row: 1;
+    grid-row: 2;
+  }
+
+  .portfolio-container h3 {
+    grid-column: 2;
+    grid-row: 3;
   }
 }
 

client/src/components/profile/components/portfolio.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import type { Portfolio as PortfolioData } from '../../../redux/prop-types';
 import { FullWidthRow } from '../../helpers';
 
@@ -20,11 +21,16 @@ function Portfolio({ portfolio = [] }: PortfolioProps): JSX.Element | null {
       <h2 className='text-center'>{t('profile.portfolio')}</h2>
       {portfolio.map(({ title, url, image, description, id }) => (
         <div className='portfolio-container' key={id}>
+          <h2>{title}</h2>
           <h3>
             <a href={url} rel='nofollow noopener noreferrer'>
-              {title}
+              {t('buttons.follow-link')}
+              <div id='link-icon'>
+                <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+              </div>
             </a>
           </h3>
+
           {image && (
             <img alt='' className='portfolio-screen-shot' src={image} />
           )}