Merge pull request #5 from Mildred14/ms-work-experience-info

Work Experience Content

src/assets/styles/_utilities.scss

@@ -8,6 +8,9 @@ $blue: #2c66ff;
 $purple: #5e17eb;
 $yellow: #fff42c;
 $white: #ffff;
+$gray: #515151;
+$grayLight: #cdcdcd;
+$black: #000000;
 
 // Font:
 $secondary-font: 'Berlinerins';

src/components/Card/Card.js

@@ -12,10 +12,10 @@ export const Card = ({name, imgIcon, id, selected, status}) => {
   }
 
   return (
-    <div className={`card card-${id}`} key={id}>
-      <a className="more-info" onClick={handleClick} title="more-info">
+      <a className={`more-info card card-${id}`} onClick={handleClick} title="more-info" key={id}>
+      <div className="img-wrapper">
         <img src={plusIcon} width="30"/>
-      </a>
+      </div>
       <div>
         <img src={imgIcon} className="img-category" />
       </div>
@@ -24,6 +24,6 @@ export const Card = ({name, imgIcon, id, selected, status}) => {
           {name}
         </p>
       </div>
-    </div>
+      </a>
   )
 }

src/components/Card/Card.scss

@@ -18,6 +18,12 @@
     box-sizing: border-box;
   }
 
+  & > .img-wrapper {
+    text-align: end;
+    padding: 20px 20px 0 0;
+    box-sizing: border-box;
+  }
+
   & > .title {
     width: 100%;
     display: flex;

src/components/Modal/Modal.js

@@ -1,5 +1,6 @@
 import React from "react"
 import plusIcon from '../../assets/images/plus.svg'
+import { WorkExperience } from "../WorkExperience/WorkExperience"
 import "./Modal.scss"
 
 export const Modal = ({name, id, selected, status}) => {
@@ -9,6 +10,18 @@ export const Modal = ({name, id, selected, status}) => {
     status(false)
     selected('')
   }
+  const modalContent = () => {
+    switch(id) {
+      case 0: return(<WorkExperience />);
+      case 1: return(<h1>1</h1>);
+      case 2: return(<h1>2</h1>);
+      case 3: return(<h1>3</h1>);
+      case 4: return(<h1>4</h1>);
+      case 5: return(<h1>5</h1>);
+      default:
+        return null
+    }
+  }
 
   return (
     <div className="modal-open" id={`modal-${id}`} title={`modal-${id}`}>
@@ -18,6 +31,7 @@ export const Modal = ({name, id, selected, status}) => {
           <img src={plusIcon} width="30" />
         </a>
       </div>
+      {modalContent()}
     </div>
   )
 }

src/components/Modal/Modal.scss

@@ -7,6 +7,7 @@
 .modal-open {
   background-color: utilities.$white;
   width: calc(100% - 50px);
+  max-width: 950px;
   height: 80%;
   position: fixed;
   margin: auto;
@@ -19,12 +20,15 @@
   box-sizing: border-box;
   border-radius: 30px;
   display: block;
+  overflow-y: scroll;
   animation: open-modal 500ms linear;
   animation-fill-mode: forwards;
-
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+
   & > .modal-header {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     & > a {
       cursor: pointer;
       & > img {

src/components/WorkExperience/WorkExperience.js

@@ -0,0 +1,56 @@
+import React from "react";
+import './WorkExperience.scss'
+import salesloftLogo from '../../assets/images/salesloft.png'
+import roverpassLogo from '../../assets/images/roverpass.png'
+import micheladaLogo from '../../assets/images/michelada.jpeg'
+
+export const WorkExperience = () => {
+  const experiences = [
+    { name: "Salesloft",
+      period: "2024-2021",
+      img: salesloftLogo,
+      description: "A workflow platform for seller teams to drive more revenue, make forecasts, and close deals with buyers",
+      jobTitle: 'Software Engineer',
+      link: 'https://www.salesloft.com/'
+    },
+    { name: "Roverpass",
+      period: "2021-2019",
+      img: roverpassLogo,
+      description: "Web application to make reservations for camprounds RV located in US",
+      jobTitle: 'Jr. Software Engineer',
+      link: 'https://www.roverpass.com/'
+    },
+    { name: "michelada.io",
+      period: "2019-2018",
+      img: micheladaLogo,
+      description: "Software development consultant",
+      jobTitle: 'Apprentice',
+      link: 'https://www.michelada.io/'
+    },
+  ]
+
+  const displayExperience = () => {
+    return experiences.map((experience) => {
+      return (
+        <a href={experience.link} target="_blank" rel="noopener" className="work-experience--card">
+            <div className="work-experience--img">
+              <img src={experience?.img}/>
+            </div>
+            <div className="content">
+              <p className="period">{experience.period}</p>
+              <p className="company-name">{experience.name}</p>
+              <p className="job-title">{experience.jobTitle}</p>
+              <p className="description">{experience.description}</p>
+            </div>
+        </a>
+      )
+    })
+  }
+
+  return (
+    <div className="work-experience--wrap">
+      {displayExperience()}
+      <h2 className="github">No worries, there's more in <a href="https://github.com/Mildred14" target="_blank" rel="noopener" className="github-link">GitHub</a></h2>
+    </div>
+  )
+}

src/components/WorkExperience/WorkExperience.scss

@@ -0,0 +1,89 @@
+@use '../../assets/styles/utilities';
+
+.work-experience--wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+
+  > .work-experience--card {
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 280px;
+    padding: 20px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    text-decoration: none;
+    &:hover, :visited, :active {
+      text-decoration: none;
+    }
+    > .work-experience--img {
+      text-align: center;
+      width: 280px;
+      > img {
+        border-radius: 10px;
+        width: 100%;
+       }
+    }
+
+    > .content {
+      text-align: left;
+      width: 100%;
+      color: utilities.$black;
+      > .period {
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 14px;
+        margin: 0;
+        margin-top: 10px;
+      }
+      > .company-name {
+        font-family: utilities.$secondary-font;
+        font-size: 24px;
+        margin: 0;
+      }
+
+      > .description {
+        margin: 0;
+        font-size: 13px;
+        color: utilities.$gray;
+      }
+
+      > .job-title{
+        font-size: 12px;
+        margin: 0;
+        margin-bottom: 10px;
+      }
+    }
+  }
+  > .github  {
+    font-family: utilities.$secondary-font;
+    margin: auto;
+    font-weight: 100;
+    & > .github-link {
+      color: utilities.$blue;
+      text-decoration: none;
+    }
+  }
+  @media (min-width: utilities.$layout-breakpoint-desktop) {
+    align-items: baseline;
+    > .work-experience--card {
+      width: 100%;
+      align-items: flex-start;
+      flex-direction: row;
+      max-width: -webkit-fill-available;
+      > .work-experience--img {
+        width: 150px;
+        margin-right: 20px;
+      }
+      > .content {
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+.work-experience--card:hover {
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}

src/components/WorkExperience/__test__/WorkExperience.test.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { screen, render } from '@testing-library/react'
+import { WorkExperience } from "../WorkExperience";
+
+test('should display experiences', () => {
+  render(<WorkExperience />)
+
+  const salesloft = screen.getByText("Salesloft")
+  const roverpass = screen.getByText("Roverpass")
+  const michelada = screen.getByText("michelada.io")
+  expect(salesloft).toBeInTheDocument();
+  expect(roverpass).toBeInTheDocument();
+  expect(michelada).toBeInTheDocument();
+})
+
+test('should redirect to Github', () => {
+  render(<WorkExperience />)
+
+  const salesloft = screen.getByText("GitHub")
+  expect(salesloft).toHaveAttribute('href', 'https://github.com/Mildred14' )
+})

src/views/Categories/Categories.js

@@ -31,7 +31,7 @@ export const Categories = () => {
 
   const topCategories= [
     {
-      name: 'Companies',
+      name: 'Work Experience',
       img: companies,
     },
     {

src/views/Categories/__test__/Categories.test.js

@@ -5,7 +5,7 @@ import { Categories } from '../Categories'
 test('display all categories',  () => {
   render(<Categories />)
 
-  expect(screen.getAllByText('Companies')[0]).toBeInTheDocument()
+  expect(screen.getAllByText('Work Experience')[0]).toBeInTheDocument()
   expect(screen.getAllByText('Technology Stack')[0]).toBeInTheDocument()
   expect(screen.getAllByText('Contact')[0]).toBeInTheDocument()
   expect(screen.getAllByText('Curious Facts')[0]).toBeInTheDocument()