added diagonal background to PreliminaryRound Page footer

src/App.tsx

@@ -22,6 +22,7 @@ import './App.scss';
 import ConnectWithUs from './pages/connectWithUs/ConnectWithUs';
 import InterviewRounds from './pages/interviewRounds/InterviewRounds';
 import SkillInformationStep from './pages/skillInformationStep/SkillInformationStep';
+import PreliminaryRound from './pages/preliminaryRound/PreliminaryRound';
 
 
 
@@ -37,6 +38,9 @@ const App: React.FC = () => (
         <Route exact path="/skillInformationStep">
           <SkillInformationStep />
         </Route>
+        <Route exact path="/PreliminaryRound">
+          <PreliminaryRound />
+        </Route>
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>

src/assets/icons/check-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg id="check-circle-fill" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path id="Path_4392" data-name="Path 4392" d="M18,9A9,9,0,1,1,9,0a9,9,0,0,1,9,9ZM13.534,5.592a.844.844,0,0,0-1.215.024L8.412,10.594,6.057,8.239A.844.844,0,0,0,4.865,9.431l2.977,2.977a.844.844,0,0,0,1.214-.023l4.491-5.614a.844.844,0,0,0-.011-1.181Z" fill="#209787" fill-rule="evenodd"/>
+</svg>

src/assets/icons/desktop-particles-2.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1326.628" height="233.732" viewBox="0 0 1326.628 233.732">
+  <g id="Group_3279" data-name="Group 3279" transform="translate(938.662 560.103) rotate(180)">
+    <g id="Ellipse_14" data-name="Ellipse 14" transform="translate(865.662 518)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
+      <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
+      <circle cx="13.5" cy="13.5" r="11" fill="none"/>
+    </g>
+    <g id="Ellipse_197" data-name="Ellipse 197" transform="matrix(-0.966, 0.259, -0.259, -0.966, -280.067, 553.115)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
+      <ellipse cx="13.5" cy="13.5" rx="13.5" ry="13.5" stroke="none"/>
+      <ellipse cx="13.5" cy="13.5" rx="11" ry="11" fill="none"/>
+    </g>
+    <g id="Ellipse_17" data-name="Ellipse 17" transform="translate(614.115 408.256)" fill="none" stroke="#313131" stroke-width="5">
+      <circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
+      <circle cx="8.5" cy="8.5" r="6" fill="none"/>
+    </g>
+    <g id="Ellipse_194" data-name="Ellipse 194" transform="matrix(-0.966, 0.259, -0.259, -0.966, 77.151, 410.589)" fill="none" stroke="#313131" stroke-width="5">
+      <ellipse cx="8.5" cy="8.5" rx="8.5" ry="8.5" stroke="none"/>
+      <ellipse cx="8.5" cy="8.5" rx="6" ry="6" fill="none"/>
+    </g>
+    <path id="Polygon_1" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(384.251 450.5) rotate(43)" fill="#626262"/>
+    <path id="Polygon_36" data-name="Polygon 36" d="M10.5,0,21,19H0Z" transform="matrix(0.53, -0.848, 0.848, 0.53, 161.613, 415.187)" fill="#626262"/>
+    <path id="Polygon_3" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(487.911 369.832) rotate(43)" fill="#626262"/>
+    <path id="Polygon_34" data-name="Polygon 34" d="M5.362,0l5.362,9.7H0Z" transform="matrix(0.53, -0.848, 0.848, 0.53, 553.158, 466.585)" fill="#626262"/>
+    <path id="Polygon_10" data-name="Polygon 10" d="M5.362,0l5.362,9.7H0Z" transform="translate(836.412 418.051) rotate(43)" fill="#626262"/>
+    <path id="Polygon_35" data-name="Polygon 35" d="M5.362,0l5.362,9.7H0Z" transform="matrix(0.53, -0.848, 0.848, 0.53, -355.13, 405.232)" fill="#626262"/>
+    <path id="Polygon_2" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(310.451 398.543) rotate(43)" fill="#2e2e2e"/>
+    <path id="Polygon_37" data-name="Polygon 37" d="M10.855,0,21.71,19.642H0Z" transform="matrix(0.53, -0.848, 0.848, 0.53, 208.941, 354.728)" fill="#2e2e2e"/>
+    <path id="Polygon_9" data-name="Polygon 9" d="M10.855,0,21.71,19.642H0Z" transform="translate(835.784 364.829) rotate(43)" fill="#2e2e2e"/>
+    <path id="Polygon_33" data-name="Polygon 33" d="M10.855,0,21.71,19.642H0Z" transform="matrix(0.53, -0.848, 0.848, 0.53, -309.344, 389.762)" fill="#2e2e2e"/>
+    <rect id="Rectangle_40" data-name="Rectangle 40" width="15" height="15" transform="matrix(0.883, -0.469, 0.469, 0.883, 724.662, 441.191)" fill="#383838"/>
+    <rect id="Rectangle_535" data-name="Rectangle 535" width="15" height="15" transform="translate(-115.055 442.11) rotate(-167)" fill="#383838"/>
+    <rect id="Rectangle_41" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(411.69 542.946) rotate(-65)" fill="#383838"/>
+    <rect id="Rectangle_537" data-name="Rectangle 537" width="14.685" height="14.685" transform="translate(173.245 499.309) rotate(-130)" fill="#383838"/>
+    <rect id="Rectangle_43" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(397.462 395.488) rotate(-65)" fill="#383838"/>
+    <rect id="Rectangle_536" data-name="Rectangle 536" width="9.685" height="9.685" transform="translate(459.413 492.265) rotate(-130)" fill="#383838"/>
+    <rect id="Rectangle_42" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(915.904 395.552) rotate(-65)" fill="#383838" opacity="0.368"/>
+    <rect id="Rectangle_534" data-name="Rectangle 534" width="14.685" height="14.685" transform="translate(-378.527 431.202) rotate(-130)" fill="#383838" opacity="0.368"/>
+    <circle id="Ellipse_15" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(841.662 493)" fill="#383838"/>
+    <ellipse id="Ellipse_195" data-name="Ellipse 195" cx="5" cy="5" rx="5" ry="5" transform="matrix(-0.966, 0.259, -0.259, -0.966, -267.755, 506.334)" fill="#383838"/>
+    <circle id="Ellipse_16" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(922.662 503)" fill="#383838"/>
+    <ellipse id="Ellipse_196" data-name="Ellipse 196" cx="8" cy="8" rx="8" ry="8" transform="matrix(-0.966, 0.259, -0.259, -0.966, -341.854, 542.754)" fill="#383838"/>
+    <circle id="Ellipse_18" data-name="Ellipse 18" cx="6.5" cy="6.5" r="6.5" transform="translate(922.419 406.629)" fill="#383838"/>
+    <ellipse id="Ellipse_193" data-name="Ellipse 193" cx="6.5" cy="6.5" rx="6.5" ry="6.5" transform="matrix(-0.966, 0.259, -0.259, -0.966, -367.339, 446.706)" fill="#383838"/>
+    <circle id="Ellipse_77" data-name="Ellipse 77" cx="6.5" cy="6.5" r="6.5" transform="translate(585.539 519)" fill="#383838"/>
+    <ellipse id="Ellipse_198" data-name="Ellipse 198" cx="6.5" cy="6.5" rx="6.5" ry="6.5" transform="matrix(-0.966, 0.259, -0.259, -0.966, 10.536, 505.561)" fill="#383838"/>
+  </g>
+</svg>

src/assets/icons/question-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg id="question-circle-fill" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path id="Path_4391" data-name="Path 4391" d="M18,9A9,9,0,1,1,9,0a9,9,0,0,1,9,9ZM7.392,6.787H5.906c-.034-2.122,1.608-2.85,3.1-2.85,1.572,0,3.007.821,3.007,2.52a2.745,2.745,0,0,1-1.4,2.314c-.829.629-1.136.864-1.136,1.672v.4H8.007L8,10.322A2.563,2.563,0,0,1,9.313,8.086c.664-.5,1.085-.828,1.085-1.542A1.307,1.307,0,0,0,8.919,5.23,1.435,1.435,0,0,0,7.392,6.787ZM8.8,14.035a1.053,1.053,0,1,1,0-2.1,1.055,1.055,0,1,1,0,2.1Z" transform="translate(0 0)" fill="#eb3e19" fill-rule="evenodd"/>
+</svg>

src/assets/icons/time.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path id="time" d="M12.375,3.375a9,9,0,1,0,9,9A9,9,0,0,0,12.375,3.375ZM16.529,13.76H12.375a.692.692,0,0,1-.692-.692V6.837a.692.692,0,0,1,1.385,0v5.538h3.462a.692.692,0,1,1,0,1.385Z" transform="translate(-3.375 -3.375)" fill="#fc9524"/>
+</svg>

src/common/styles/global.scss

@@ -5,10 +5,14 @@
 }
 
 body {
-    font-family: 'Poppins', sans-serif !important;
+    font-family: 'Poppins', sans-serif;
 }
 
 h1,h2,h3,h4,h5,h6 {
-    font-family: 'Oswald', sans-serif !important; 
+    font-family: 'Oswald', sans-serif; 
+}
+
+ion-button {
+    font-family: 'Poppins', sans-serif;
 }
 

src/components/stepsHeader/StepsHeader.module.scss → src/components/stepsHeader/StepHeader.module.scss

@@ -9,7 +9,7 @@
 
         display: flex;
         flex-direction: column;
-        margin-left: 4rem;
+        margin-left: 3.5rem;
 
         .step {
             color: white;
@@ -31,7 +31,7 @@
         height: 4rem;
         color: white;
         opacity: 0.8;
-        margin-right: 4rem;
+        margin-right: 2.8rem;
     }
 }
 

src/components/stepsHeader/StepsHeader.tsx → src/components/stepsHeader/StepHeader.tsx

@@ -1,4 +1,4 @@
-import styles from './StepsHeader.module.scss';
+import styles from './StepHeader.module.scss';
 
 import { IonHeader, IonIcon } from '@ionic/react';
 import { close } from 'ionicons/icons'
@@ -8,16 +8,16 @@ interface Props {
     roundName: string;
 }
 
-const StepsHeader: React.FC<Props> = (props) => {
+const StepHeader: React.FC<Props> = (props) => {
     return (
-        <div className={styles.header}>
+        <header className={styles.header}>
             <div className={styles.heading}>
                 <div className={styles.step}>Step {props.stepNumber}</div>
                 <h3 className={styles.roundName}>{props.roundName}</h3>
             </div>
             <IonIcon icon={close}></IonIcon>
-        </div>
+        </header>
     )
 }
 
-export default StepsHeader;
+export default StepHeader;

src/pages/interviewRounds/InterviewRounds.tsx

@@ -27,6 +27,7 @@ const InterviewRounds: React.FC = () => {
             <Header />
             <IonContent>
                 <Steps
+                    // descriptionimage stepnumber round name and button text and isUnlocked store in an array of obj use map and render it
                     stepNumber={1}
                     roundName="Skill Information"
                     isUnlocked={true}

src/pages/interviewRounds/StepsDescreption.module.scss → src/pages/interviewRounds/StepDescreption.module.scss

@@ -1,12 +1,11 @@
 .stepDescription {
-    height: 74vh;
+    height: 78vh;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-evenly;
     width: 100vw;
     background-color: white;
-    padding-top: 1.5rem;
 
     .header {
         display: flex;
@@ -46,12 +45,12 @@
         animation-fill-mode: forwards;
     }
 
-    .descreption {
+    .description {
         color: #868686;
         font-size: 1.4rem;
         width: 80%;
         line-height: 2.8rem;
-
+        text-align: center;
         animation: fadeInAnimation ease 0.2s;
         animation-iteration-count: 1;
         animation-fill-mode: forwards;
@@ -60,6 +59,15 @@
         animation: fadeInAnimation ease 0.2s;
         animation-iteration-count: 1;
         animation-fill-mode: forwards;
+
+        ion-button {
+            width: 32.8rem;
+            height: 4rem;
+            font-weight: 500;
+            font-size: 1.6rem;
+            --background: var(--primary-button-color);
+        }
+
     }
 }
 
@@ -67,16 +75,10 @@ ion-icon {
     color: var(--primary-button-color);
     width: 1.5rem;
     height: 1.5rem;
+
 }
 
-ion-button {
-    width: 32.8rem;
-    height: 4rem;
-    font-weight: 500;
-    font-size: 1.6rem;
-    font-family: 'Poppins', sans-serif !important;
 
-}
 
 @keyframes fadeInAnimation {
     0% {

src/pages/interviewRounds/StepsDescreption.tsx → src/pages/interviewRounds/StepDescreption.tsx

@@ -1,4 +1,4 @@
-import styles from './StepsDescreption.module.scss';
+import styles from './StepDescreption.module.scss';
 
 import { IonButton, IonIcon } from '@ionic/react';
 import { lockOpen, lockClosed } from 'ionicons/icons'
@@ -14,7 +14,7 @@ interface Props {
 
 const StepsDescription: React.FC<Props> = (props) => {
 
-    const itemRef = useRef<null | HTMLDivElement>(null);
+    const itemRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         if (itemRef && itemRef.current) {
@@ -26,7 +26,8 @@ const StepsDescription: React.FC<Props> = (props) => {
     return (
         <div className={styles.stepDescription} ref={itemRef}>
             <div className={styles.header}>
-                <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>
+
+                {props.isUnlocked ? <IonIcon icon={lockOpen} /> : <IonIcon icon={lockClosed} color="dark" />}
 
                 <div className={styles.stepName}>
                     <div className={styles.step}>step {props.stepNumber}</div>
@@ -36,12 +37,13 @@ const StepsDescription: React.FC<Props> = (props) => {
             <div className={styles.image}>
                 <img src={props.descriptionImage} alt="skill info" />
             </div>
-            <div className={styles.descreption}>
+
+            <p className={styles.description}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </div>
+            </p>
 
             <div className={styles.button}>
-                <IonButton shape="round" color='success' expand='block'>{props.buttonText}</IonButton>
+                <IonButton shape="round" expand='block'>{props.buttonText}</IonButton>
             </div>
 
         </div>

src/pages/interviewRounds/Steps.tsx

@@ -1,7 +1,7 @@
 import styles from './Steps.module.scss';
 import { lockOpen, lockClosed } from 'ionicons/icons';
 import { IonIcon, IonItem } from '@ionic/react';
-import StepsDescription from './StepsDescreption';
+import StepDescription from './StepDescreption';
 
 interface Props {
     stepNumber: number;
@@ -11,13 +11,15 @@ interface Props {
     buttonText: string;
     descriptionImage: string;
     setDescription: (stepNumber: number) => void;
+    // rename to select step
 }
 
 const Steps: React.FC<Props> = (props) => {
 
     return (
         <IonItem lines='none' onClick={() => props.setDescription(props.stepNumber)}>
-            {props.showDescription ? <StepsDescription
+            {/* single step so use singular name */}
+            {props.showDescription ? <StepDescription
                 stepNumber={props.stepNumber}
                 roundName={props.roundName}
                 isUnlocked={props.isUnlocked}

src/pages/preliminaryRound/PreliminaryRound.module.scss

@@ -0,0 +1,90 @@
+.roundDescription {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: space-around;
+    height: 44.5vh;
+    width: 90%;
+    margin: 0 auto;
+    ion-icon {
+        width: 8rem;
+        height: 8rem;
+        padding-top: 2rem;
+    }
+
+    .heading {
+        color: #363636;
+        font-weight: 300;
+        font-size: 2.4rem;
+    }
+
+    .description {
+        color: #868686;
+        font-size: 1.4rem;
+        line-height: 2.8rem;
+
+    }
+}
+
+.quizDescription {
+    height: 44vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    background-color: #151515;
+    background-image: url("../../assets/icons/desktop-particles-2.svg");
+    background-repeat: no-repeat;
+    background-position: 25% 30%;
+    border-top-right-radius: 75%;
+
+
+    &::before {
+        position: absolute;
+        content:" ";
+        top: 50%;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        background-color: #151515;
+        height: 30vh; 	
+        transform: skewY(5deg);
+        z-index: -1;
+    }
+
+    .heading {
+        color: #BCBCBC;
+        font-weight: 300;
+        letter-spacing: 0.024rem;
+        font-size: 2.4rem;
+        margin-left: 2rem;
+    }
+
+    .description {
+        margin-left: 2rem;
+        .textHolder {
+            display: flex;
+            margin-bottom: 2rem;
+            .text {
+                color: #E5E5E5;
+                font-size: 1.4rem;
+                font-weight: 600;
+                margin-left: 2rem;
+            }
+        }
+    }
+
+    ion-button {
+        --background: var(--primary-button-color);
+        font-weight: 500;
+        font-family: 'Poppins', sans-serif;
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    .wish {
+        color: #E5E5E5;
+        font-size: 1.8rem;
+        text-align: center;
+    }
+}

src/pages/preliminaryRound/PreliminaryRound.tsx

@@ -0,0 +1,50 @@
+import styles from './PreliminaryRound.module.scss';
+
+import preliminaryRound from '../../assets/icons/Preliminary_Round.svg';
+import { IonButton, IonContent, IonIcon, IonPage } from '@ionic/react';
+import StepHeader from '../../components/stepsHeader/StepHeader';
+import questionIcon from '../../assets/icons/question-circle-fill.svg';
+import checkIcon from '../../assets/icons/check-circle-fill.svg';
+import timeIcon from '../../assets/icons/time.svg';
+
+const PreliminaryRound: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader stepNumber={2} roundName="Preliminary Round" />
+            <IonContent>
+                <div className={styles.roundDescription}>
+
+                    <IonIcon src={preliminaryRound}></IonIcon>
+                    <h4 className={styles.heading}>Let us check your knowledge.</h4>
+                    <p className={styles.description}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </p>
+                </div>
+                <div className={styles.quizDescription}>
+
+                    <h4 className={styles.heading}>Quiz</h4>
+                    <div className={styles.description}>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={questionIcon}></IonIcon>
+                            <div className={styles.text}>20 questions</div>
+                        </div>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={timeIcon}></IonIcon>
+                            <div className={styles.text}>20 mins + 10 mins grace</div>
+                        </div>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={checkIcon}></IonIcon>
+                            <div className={styles.text}>Note: 85% of results minimum</div>
+                        </div>
+                    </div>
+
+                    <IonButton shape="round" expand='block'>Done!</IonButton>
+
+                    <div className={styles.wish}>All the best!</div>
+                </div>
+            </IonContent>
+        </IonPage>
+    )
+}
+
+export default PreliminaryRound;

src/pages/skillInformationStep/SkillInformationStep.module.scss

@@ -0,0 +1,47 @@
+ion-content {
+    .description {
+        text-align: center;
+        width: 85%;
+        margin: 0 auto;
+        .heading {
+            color: #363636;
+            font-size: 2.4rem;
+            font-weight: 300;
+            letter-spacing: 0.024rem;
+            margin-top: 4rem;
+        }
+        .note {
+            color: #868686;
+            font-size: 1.4rem;
+            line-height: 1.4;
+            margin-top: 4rem;
+        }
+    }
+
+    .skillsCard {
+        .heading {
+            color: #363636;
+            font-size: 1.8rem;
+            letter-spacing: 0.018rem;
+            font-weight: 200;
+            text-align: center;
+            margin: 4rem 0;
+        }
+
+        .skills {
+            width: 90%;
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-gap: 2rem;
+            margin: 0 auto;
+        }
+    }
+        a {
+            text-decoration: none;
+        }
+        ion-button {
+            margin: 5rem 2rem;
+            --background: var(--primary-button-color);
+        }
+   
+}

src/pages/skillInformationStep/SkillInformationStep.tsx

@@ -1,20 +1,111 @@
-import styles from './SlillInformation.module.scss';
-import { IonContent, IonPage } from "@ionic/react";
-import StepsHeader from "../../components/stepsHeader/StepsHeader";
-import Skills from './Skills';
+import styles from './SkillInformationStep.module.scss';
+import { IonButton, IonContent, IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import SkillsCard from './SkillsCard';
+
 import reactIcon from '../../assets/images/React.png';
+import angularIcon from '../../assets/images/Angular.png';
+import ionicIcon from '../../assets/images/IonicFramework.png';
+import reactNative from '../../assets/images/ReactNative.png';
+import vueIcon from '../../assets/images/VueJS.png';
+import nodeJSIcon from '../../assets/images/NodeJS.png';
+import ExpressJSICon from '../../assets/images/ExpressJS.png';
+import DjangoIcon from '../../assets/images/DjangoFramework.png';
+import MySqlIcon from '../../assets/images/MySql.png';
+import MongoDBIcon from '../../assets/images/Mongo.png';
+import postgreSqlIcon from '../../assets/images/PostgreSQL.png';
+import FirebaseIcon from '../../assets/images/Firebase.png';
+import DevOpsIcon from '../../assets/images/DevOps.png';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
 
 const SkillInformationStep: React.FC = () => {
+
+    const [skills, setSkills] = useState<string[]>([]);
+
+    const toggleSkill = (skill: string) => {
+        let newSkills: string[] = [];
+        if (skills.includes(skill)) {
+            newSkills = skills.filter(oldSkill => oldSkill !== skill);
+        } else {
+            newSkills = skills.concat([skill]);
+        }
+        setSkills(newSkills);
+    }
+
     return (
         <IonPage>
-            <StepsHeader
+
+            <StepHeader
                 stepNumber={1}
                 roundName="Skill Information" />
             <IonContent>
-                <Skills name='React JS/TS' icon={reactIcon} />
+                <div className={styles.description}>
+                    <h3 className={styles.heading}>What are you good at?</h3>
+
+                    <p className={styles.note}>
+                        Please note that you should have knowledge of at least 1 tech stack in each category & must know the basics of HTML/CSS/JS, Git.
+                    </p>
+
+                </div>
+
+                <div className={styles.skillsCard}>
+
+                    <h5 className={styles.heading}>Front-end:</h5>
+
+                    <div className={styles.skills}>
+                        <SkillsCard name='React JS/TS' icon={reactIcon} isHighlighted={skills.includes("React JS/TS")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='Angular8+' icon={angularIcon} isHighlighted={skills.includes("Angular8+")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='Ionic FrameWork' icon={ionicIcon} isHighlighted={skills.includes("Ionic FrameWork")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='React Native' icon={reactNative} isHighlighted={skills.includes("React Native")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='VueJS' icon={vueIcon} isHighlighted={skills.includes("VueJS")} toggleSkills={toggleSkill} />
+                    </div>
+
+                </div>
+
+                <div className={styles.skillsCard}>
+
+                    <h5 className={styles.heading}>Back-end:</h5>
+
+                    <div className={styles.skills}>
+                        <SkillsCard name='NodeJS' icon={nodeJSIcon} isHighlighted={skills.includes("NodeJS")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='ExpressJS' icon={ExpressJSICon} isHighlighted={skills.includes("ExpressJS")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='Django FrameWork' icon={DjangoIcon} isHighlighted={skills.includes("Django FrameWork")} toggleSkills={toggleSkill} />
+                    </div>
+
+                </div>
+
+                <div className={styles.skillsCard}>
+
+                    <h5 className={styles.heading}>Database:</h5>
+
+                    <div className={styles.skills}>
+                        <SkillsCard name='MySql' icon={MySqlIcon} isHighlighted={skills.includes("MySql")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='MongoDB' icon={MongoDBIcon} isHighlighted={skills.includes("MongoDB")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='PostgreSQL' icon={postgreSqlIcon} isHighlighted={skills.includes("PostgreSQL")} toggleSkills={toggleSkill} />
+                    </div>
+
+                </div>
+
+                <div className={styles.skillsCard}>
+
+                    <h5 className={styles.heading}>Beneficial:</h5>
+
+                    <div className={styles.skills}>
+                        <SkillsCard name='Firebase' isHighlighted={skills.includes("Firebase")} icon={FirebaseIcon} toggleSkills={toggleSkill} />
+                        <SkillsCard name='DevOps (Docker / Kubernetes)' isHighlighted={skills.includes("DevOps (Docker / Kubernetes)")} icon={DevOpsIcon} toggleSkills={toggleSkill} />
+                    </div>
+
+                </div>
+
+                <Link to="/">
+                    <IonButton shape="round" expand='block'>Done!</IonButton>
+                </Link>
+
             </IonContent>
         </IonPage>
-    )
+    );
 }
 
 export default SkillInformationStep;

src/pages/skillInformationStep/Skills.tsx

@@ -1,18 +0,0 @@
-import { IonIcon } from '@ionic/react';
-import styles from './Skills.module.scss';
-
-interface Props {
-    icon: string;
-    name: string;
-}
-
-const Skills: React.FC<Props> = (props) => {
-    return (
-        <div className={styles.skill}>
-            <img src={props.icon} alt={props.name} />
-            <div className={styles.name}>{props.name}</div>
-        </div>
-    )
-}
-
-export default Skills;

src/pages/skillInformationStep/Skills.module.scss → src/pages/skillInformationStep/SkillsCard.module.scss

@@ -6,11 +6,16 @@
     height: 7rem;
     border-radius: 2rem;
     justify-content: space-evenly;
-    margin: 5rem;
-
+    
     .name {
         color: #868686;
         font-size: 1.4rem;
         font-weight: 500;
+        width: 8rem;
     }
+}
+
+.isHighlighted {
+    border: 0.3rem solid #33CE9380;
+    box-shadow: 0px 0px 10px #00000012;
 }

src/pages/skillInformationStep/SkillsCard.tsx

@@ -0,0 +1,21 @@
+import { IonIcon } from '@ionic/react';
+import styles from './SkillsCard.module.scss';
+
+interface OwnProps {
+    icon: string;
+    name: string;
+    isHighlighted?: boolean;
+    toggleSkills: (skill: string) => void;
+
+}
+
+const SkillsCard: React.FC<OwnProps> = (props) => {
+    return (
+        <section className={styles.skill + ' ' + (props.isHighlighted ? styles.isHighlighted : "")} onClick={() => props.toggleSkills(props.name)}>
+            <img src={props.icon} alt={props.name} />
+            <div className={styles.name}>{props.name}</div>
+        </section>
+    )
+}
+
+export default SkillsCard;