Add Experience section to replace Projects

src/App.tsx

@@ -14,7 +14,8 @@ function App() {
         <ContentContainer>
           <Header />
           <About />
-          <Projects />
+          <Experience />
+          {/* <Projects /> */}
           <Contact />
         </ContentContainer>
       </PageContainer>

src/components/Experience/experiences/Korelogic.tsx

@@ -0,0 +1,47 @@
+import { SectionContent } from "../../common.css";
+import {
+  ExperienceHeaderRow,
+  ExperienceTitle,
+  ExperienceDates,
+  ExperienceDescription,
+  SkillRow,
+  SkillPill,
+} from "../styles.css";
+
+export const Korelogic = () => {
+  return (
+    <SectionContent>
+      <ExperienceHeaderRow>
+        <ExperienceTitle>
+          Junior Javascript Developer - Korelogic Ltd
+        </ExperienceTitle>
+        <ExperienceDates>Feb 2021 - Dec 2021</ExperienceDates>
+      </ExperienceHeaderRow>
+      <ExperienceDescription>
+        <ul>
+          <li>Worked with external clients to deliver expected projects.</li>
+          <li>
+            Used work tracking tools and communicated progress with internal and
+            external teams on a daily basis.
+          </li>
+          <li>
+            Provided aide for the internal AWS architect for setting up and
+            maintaining project resources, IAM roles, and CloudFormation
+            templates
+          </li>
+          <li>
+            Developed new solutions using modern frameworks alongside
+            maintaining legacy systems
+          </li>
+        </ul>
+        <SkillRow>
+          <SkillPill>TypeScript</SkillPill>
+          <SkillPill>Project Management</SkillPill>
+          <SkillPill>AWS</SkillPill>
+          <SkillPill>Team Communication</SkillPill>
+          <SkillPill>Business-to-business (B2B)</SkillPill>
+        </SkillRow>
+      </ExperienceDescription>
+    </SectionContent>
+  );
+};

src/components/Experience/experiences/ShopAppy.tsx

@@ -0,0 +1,67 @@
+import { SectionContent } from "../../common.css";
+import {
+  ExperienceHeaderRow,
+  ExperienceTitle,
+  ExperienceDates,
+  ExperienceDescription,
+  SkillRow,
+  SkillPill,
+} from "../styles.css";
+
+export const ShopAppy = () => {
+  return (
+    <SectionContent>
+      <ExperienceHeaderRow>
+        <ExperienceTitle>Lead Software Engineer - ShopAppy Ltd</ExperienceTitle>
+        <ExperienceDates>Dec 2021 - Aug 2023</ExperienceDates>
+      </ExperienceHeaderRow>
+      <ExperienceDescription>
+        <p>
+          This role threw me into the deep-end in regards to responsibility,
+          workload, and expectations. Despite this, I managed to perform above
+          and beyond, leading the business to make huge savings by cutting off
+          an external agency, significantly improve the performance and
+          stability of their platform, lead new exciting projects to boost their
+          offerings, and more.
+        </p>
+        Notable Achievements:
+        <ul>
+          <li>
+            Brought development in-house from previous usage of external
+            agencies.
+          </li>
+          <li>
+            Led a system-wide re-platforming, while managing external developers
+            to ensure deadlines were met.
+          </li>
+          <li>
+            Built a multi-purpose hub for integrating data with various external
+            systems
+          </li>
+          <li>
+            Developed a multi-environment infrastructure stack using AWS-CDK
+          </li>
+          <li>
+            Despite working remotely, built up a strong relationship with the
+            team and became the single source of truth across multiple layers of
+            the company.
+          </li>
+          <li>
+            Responsibility for maintaining site stability with responsive
+            action.
+          </li>
+        </ul>
+        <SkillRow>
+          <SkillPill>PHP</SkillPill>
+          <SkillPill>Project Management</SkillPill>
+          <SkillPill>TypeScript</SkillPill>
+          <SkillPill>Magento 2</SkillPill>
+          <SkillPill>Team Communication</SkillPill>
+          <SkillPill>AWS</SkillPill>
+          <SkillPill>Business-to-business (B2B)</SkillPill>
+          <SkillPill>CI/CD</SkillPill>
+        </SkillRow>
+      </ExperienceDescription>
+    </SectionContent>
+  );
+};

src/components/Experience/index.tsx

@@ -0,0 +1,26 @@
+import {
+  SectionContainer,
+  SectionContent,
+  SectionHeader,
+  Link,
+} from "../common.css";
+import { Korelogic } from "./experiences/Korelogic";
+import { ShopAppy } from "./experiences/ShopAppy";
+import {
+  ExperienceHeaderRow,
+  ExperienceDates,
+  ExperienceDescription,
+  ExperienceTitle,
+  SkillRow,
+  SkillPill,
+} from "./styles.css";
+
+export const Experience = () => {
+  return (
+    <SectionContainer>
+      <SectionHeader>Where have I been?</SectionHeader>
+      <ShopAppy />
+      <Korelogic />
+    </SectionContainer>
+  );
+};

src/components/Experience/styles.css.ts

@@ -0,0 +1,79 @@
+import styled, { css } from "styled-components";
+import { device } from "../../utils/media";
+import { theme } from "../common.css";
+
+export const ExperienceHeaderRow = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+  ${device.tablet} {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+export const ExperienceTitle = styled.h3`
+  font-weight: 500;
+  font-size: 18px;
+  margin: 0;
+
+  ${device.laptop} {
+    font-size: 22px;
+  }
+`;
+
+export const ExperienceDates = styled.div`
+  float: right;
+  font-style: italic;
+  font-size: 14px;
+  color: ${theme.colours.darkgrey.foreground};
+  ${device.laptop} {
+    font-size: 18px;
+  }
+`;
+
+export const ExperienceDescription = styled.div`
+  width: 100%;
+  text-align: left;
+
+  ${device.laptop} {
+    padding-left: 4px;
+    width: calc(100% - 4px);
+  }
+`;
+
+export const SkillRow = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  ${device.tablet} {
+    justify-content: flex-start;
+  }
+`;
+
+export const SkillPill = styled.div<{ colour?: keyof typeof theme.colours }>`
+  padding: 0 2px;
+  margin: 4px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 14px;
+
+  ${device.laptop} {
+    padding: 0 4px;
+    font-size: 16px;
+  }
+
+  ${(props) =>
+    props.colour
+      ? css`
+          background-color: ${theme.colours[props.colour].background};
+        `
+      : css`
+          background-color: ${theme.colours.blue.background};
+          &:nth-child(odd) {
+            background-color: ${theme.colours.green.background};
+          }
+        `}
+`;