From b7717c41818bc0f3965cb10d2edc7c60f59b1317 Mon Sep 17 00:00:00 2001 From: Ollie Beckwith Date: Fri, 28 Jul 2023 15:39:17 +0100 Subject: [PATCH] Add Experience section to replace Projects --- src/App.tsx | 3 +- .../Experience/experiences/Korelogic.tsx | 47 +++++++++++ .../Experience/experiences/ShopAppy.tsx | 67 ++++++++++++++++ src/components/Experience/index.tsx | 26 ++++++ src/components/Experience/styles.css.ts | 79 +++++++++++++++++++ 5 files changed, 221 insertions(+), 1 deletion(-) create mode 100644 src/components/Experience/experiences/Korelogic.tsx create mode 100644 src/components/Experience/experiences/ShopAppy.tsx create mode 100644 src/components/Experience/index.tsx create mode 100644 src/components/Experience/styles.css.ts diff --git a/src/App.tsx b/src/App.tsx index 7c53136..0c82184 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,7 +14,8 @@ function App() {
- + + {/* */} diff --git a/src/components/Experience/experiences/Korelogic.tsx b/src/components/Experience/experiences/Korelogic.tsx new file mode 100644 index 0000000..9d3f16f --- /dev/null +++ b/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 ( + + + + Junior Javascript Developer - Korelogic Ltd + + Feb 2021 - Dec 2021 + + +
    +
  • Worked with external clients to deliver expected projects.
    • +
  • + Used work tracking tools and communicated progress with internal and + external teams on a daily basis. +
    • +
  • + Provided aide for the internal AWS architect for setting up and + maintaining project resources, IAM roles, and CloudFormation + templates +
    • +
  • + Developed new solutions using modern frameworks alongside + maintaining legacy systems +
    • +
+ + TypeScript + Project Management + AWS + Team Communication + Business-to-business (B2B) + + + + ); +}; diff --git a/src/components/Experience/experiences/ShopAppy.tsx b/src/components/Experience/experiences/ShopAppy.tsx new file mode 100644 index 0000000..10fa69c --- /dev/null +++ b/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 ( + + + Lead Software Engineer - ShopAppy Ltd + Dec 2021 - Aug 2023 + + +

+ 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. +

+ Notable Achievements: +
    +
  • + Brought development in-house from previous usage of external + agencies. +
    • +
  • + Led a system-wide re-platforming, while managing external developers + to ensure deadlines were met. +
    • +
  • + Built a multi-purpose hub for integrating data with various external + systems +
    • +
  • + Developed a multi-environment infrastructure stack using AWS-CDK +
    • +
  • + Despite working remotely, built up a strong relationship with the + team and became the single source of truth across multiple layers of + the company. +
    • +
  • + Responsibility for maintaining site stability with responsive + action. +
    • +
+ + PHP + Project Management + TypeScript + Magento 2 + Team Communication + AWS + Business-to-business (B2B) + CI/CD + + + + ); +}; diff --git a/src/components/Experience/index.tsx b/src/components/Experience/index.tsx new file mode 100644 index 0000000..9b16b1a --- /dev/null +++ b/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 ( + + Where have I been? + + + + ); +}; diff --git a/src/components/Experience/styles.css.ts b/src/components/Experience/styles.css.ts new file mode 100644 index 0000000..544d7f6 --- /dev/null +++ b/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}; + } + `} +`;