From 9de884aaf1c651d8fb5e00e6f4cf8f9cd7ad29be Mon Sep 17 00:00:00 2001 From: Hannah Whelan Date: Mon, 29 Apr 2024 14:59:44 +0100 Subject: [PATCH] added Careers landing page + tests --- public/assets/career.svg | 6 + public/assets/person.svg | 6 + src/app/assets/career_videos.json | 50 +++++++++ .../{Careers.tsx => CareersBanner.tsx} | 27 +++-- src/app/components/navigation/IsaacApp.tsx | 2 + src/app/components/pages/Careers.tsx | 105 ++++++++++++++++++ src/app/components/site/Homepage.tsx | 4 +- src/app/components/site/NavigationBar.tsx | 3 +- src/app/services/constants.ts | 3 - src/scss/common/careers.scss | 31 ++++-- ...areers.test.tsx => CareersBanner.test.tsx} | 4 +- src/test/pages/Careers.test.tsx | 46 ++++++++ src/test/pages/IsaacApp.test.tsx | 3 +- 13 files changed, 255 insertions(+), 35 deletions(-) create mode 100644 public/assets/career.svg create mode 100644 public/assets/person.svg create mode 100644 src/app/assets/career_videos.json rename src/app/components/elements/{Careers.tsx => CareersBanner.tsx} (80%) create mode 100644 src/app/components/pages/Careers.tsx rename src/test/components/elements/{Careers.test.tsx => CareersBanner.test.tsx} (95%) create mode 100644 src/test/pages/Careers.test.tsx diff --git a/public/assets/career.svg b/public/assets/career.svg new file mode 100644 index 0000000000..0768029bda --- /dev/null +++ b/public/assets/career.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/public/assets/person.svg b/public/assets/person.svg new file mode 100644 index 0000000000..fdfa9d38af --- /dev/null +++ b/public/assets/person.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/app/assets/career_videos.json b/src/app/assets/career_videos.json new file mode 100644 index 0000000000..bbbf2bb737 --- /dev/null +++ b/src/app/assets/career_videos.json @@ -0,0 +1,50 @@ +[ + { + "id": 1, + "video": "t0ojrm0fMoE", + "title": "Virtual Storage", + "description": "Users often have access to storage that is not installed as part of their own computer system. Cloud storage is facilitated by the internet, and is usually owned and managed by commercial organisations. In this video, Sabrina Singh, Cloud DBA at Morgan Stanley, explains the topic of virtual (cloud) storage and how she uses it in her day-to-day role.", + "name": "Sabrina Singh", + "job": "Cloud DBA at Morgan Stanley" + }, + { + "id": 2, + "video": "l9ZTDi72yGU", + "title": "Systems Architecture", + "description": "Systems architecture refers to the parts of the computer like the processor, the memory, I/O expansion ports, and the buses that connect them together. Watch John explain how he uses systems architecture on a daily basis when designing computer systems to solve client problems - from designing a system that ensures a smooth running of the airport to developing a supercomputer for the American government. ", + "name": "John Easton", + "job": "Distinguished Engineer at IBM" + }, + { + "id": 3, + "video": "IGXHArOSF-g", + "title": "Networking Hardware", + "description": "Everything in the connected world is built on computer networks including the internet. For any career in tech, it is essential to have knowledge of networking basics, and networking devices like switches, routers and wireless access points are the bedrock of networks that connect the world. Watch Elizabeth talk about her own career path and how you can help shape the future through technology. ", + "name": "Elizabeth Barr", + "job": "Head of the Cisco Networking Academy UK & Ireland" + }, + { + "id": 4, + "video": "e7oxJqjGm2k", + "title": "Databases (SQL)", + "description": "SQL, which stands for Structured Query Language, is a language used in databases to create, update, delete, and read data. You can use the SELECT command and inner joins to retrieve data from the database. In a data-rich world, being able to filter and use data effectively is key. In this video, Zac explains how he helps all types of businesses use their data better and the exciting opportunities a role like his offers. ", + "name": "Zachary Decent", + "job": "Data Governance & Quality Manager at UK Power Networks" + }, + { + "id": 5, + "video": "ZF52BMcuovY", + "title": "Cyber Security", + "description": "Cyber security is the process of applying techniques to prevent unauthorised access to computer networks and data stored within them. It helps us deal with security threats that have an intention to cause harm to code or steal our data. Watch Veno explain how she helps keep us safe online and protect our data by heading up a team of technical support engineers at Cisco Umbrella.", + "name": "Veno Senthil", + "job": "Technical Support Manager at Cisco" + }, + { + "id": 6, + "video": "tGigHlIVgbI", + "title": "Programming 2D Arrays", + "description": "A 2D array is a data structure used in programming that has two pointers - an X and a Y. It can hold multiple pieces of data but has a single identifier and can be visualised as a table with rows and columns. Watch Gerard, a researcher and lecturer explain how robots use 2D arrays to detect objects and how you can learn to program them to complete tasks like moving things or even dress or feed people. ", + "name": "Gerard Canal", + "job": "Lecturer in Autonomous Systems at Kings College London" + } +] diff --git a/src/app/components/elements/Careers.tsx b/src/app/components/elements/CareersBanner.tsx similarity index 80% rename from src/app/components/elements/Careers.tsx rename to src/app/components/elements/CareersBanner.tsx index 90bfafdb93..330b42a397 100644 --- a/src/app/components/elements/Careers.tsx +++ b/src/app/components/elements/CareersBanner.tsx @@ -1,7 +1,8 @@ import React from "react"; import { Col, Container, Row } from "reactstrap"; import { selectors, useAppSelector } from "../../state"; -import { CAREER_VIDEO_LINK, isStudent } from "../../services"; +import { isStudent } from "../../services"; +import careerVideos from "../../assets/career_videos.json"; const CsAtWorkDescription = () => { const user = useAppSelector(selectors.user.orNull); @@ -17,39 +18,37 @@ const CsAtWorkDescription = () => { return

{!user?.loggedIn ? loggedOutDescription : roleSpecificDescription}

; }; -export const Careers = () => { +const videoId = careerVideos[0].video; + +export const CareersBanner = () => { const user = useAppSelector(selectors.user.orNull); return ( - - + +