tkhang1999 · tkhang1999 · Dec 8, 2023 · Dec 8, 2023 · Dec 8, 2023
diff --git a/src/App.js b/src/App.js
@@ -50,10 +50,10 @@ const App = () => {
         <About />
         {/* ===== SKILLS ===== */}
         <Skills />
-        {/* ===== PROJECTS ===== */}
-        <Projects />
         {/* ===== WORK ===== */}
         <Work />
+        {/* ===== PROJECTS ===== */}
+        <Projects />
       </main>
 
       {/* ===== FOOTER ===== */}

diff --git a/src/components/About.js b/src/components/About.js
@@ -14,13 +14,14 @@ const About = () => {
           <p className="about__text">
             My name is Khang Le and I am currently a Master's (Thesis) student
             at Simon Fraser University (SFU) with a research interest in
-            software testing and verification.
+            software engineering and programming languages.
             <br />
             <br />
             Previously, I graduated from Nanyang Technological University (NTU)
-            with a Bachelor degree in Computer Science with Honours (Highest
-            Distinction). In my free time, I enjoy cooking, jogging, and playing
-            table tennis and badminton.
+            with a Bachelor's degree in Computer Science, followed by several
+            professional working experiences as a software engineer. In my free
+            time, I enjoy cooking, jogging, and playing table tennis and
+            badminton.
           </p>
         </div>
       </div>

diff --git a/src/components/NavList.js b/src/components/NavList.js
@@ -5,8 +5,8 @@ export const navItems = [
   { key: "#home", value: "Home" },
   { key: "#about", value: "About" },
   { key: "#skills", value: "Skills" },
-  { key: "#projects", value: "Projects" },
   { key: "#work", value: "Work" },
+  { key: "#projects", value: "Projects" },
 ];
 
 const NavList = () => {

diff --git a/src/components/Work.js b/src/components/Work.js
@@ -1,160 +1,87 @@
+import sfuImg from "../images/sfu.png";
+import gsImg from "../images/goldman-sachs.png";
+import paypalImg from "../images/paypal.png";
+import noviscientImg from "../images/noviscient.png";
+import ackcioImg from "../images/ackcio.png";
+
 const Work = () => {
   return (
     <section className="work section" id="work">
       <h2 className="section-title">Work Experience</h2>
-      <div className="work__list">
-        <div className="work__container bd-container">
-          <div>
-            <h3>
-              <a
-                className="external__link"
-                href="https://www.goldmansachs.com/"
-              >
-                Goldman Sachs
-              </a>
-            </h3>
-            <p>
-              Software Engineer <br />
-              <i>Jul 2021 - Aug 2023</i>
-            </p>
-          </div>
-          <dl className="work__text">
-            <li>
-              Maintained various in-house applications covering external
-              connectivity for the Listed Derivatives clearing business of
-              millions of trades
-            </li>
-            <li>
-              Built full-stack web dashboards for client reporting services on{" "}
-              <a
-                className="external__link"
-                href="https://marquee.gs.com/welcome/products/prime-services"
-              >
-                GS Marquee
-              </a>{" "}
-              to help hedge funds manage risk, monitor portfolios, maintain
-              liquidity, and build businesses
-            </li>
-            <li>
-              Enhanced client order flow with horizontal scaling and distributed
-              processing using Kafka to support more than 1,000 active clients
-              across 50 markets globally
-            </li>
-          </dl>
+      <div className="work__list bd-container">
+        <div className="work__container work__grid">
+          <img className="work__img" src={sfuImg} alt="sfu-logo" />
+          <p className="work__text">
+            Graduate Research Assistant @{" "}
+            <a className="external__link" href="https://www.sfu.ca/">
+              SFU
+            </a>{" "}
+            <br />
+            <i>Sep 2023 - Present</i>
+          </p>
+        </div>
+        <div className="work__container work__grid">
+          <img className="work__img" src={gsImg} alt="goldman-sachs-logo" />
+          <p className="work__text">
+            Software Engineer @{" "}
+            <a className="external__link" href="https://www.goldmansachs.com/">
+              Goldman Sachs
+            </a>{" "}
+            <br />
+            <i>Jul 2021 - Aug 2023</i>
+          </p>
         </div>
 
-        <div className="work__container bd-container">
-          <div>
-            <h3>
-              <a
-                className="external__link"
-                href="https://www.goldmansachs.com/"
-              >
-                Goldman Sachs
-              </a>
-            </h3>
-            <p>
-              Summer Analyst <br />
-              <i>Jul 2020 - Aug 2020</i>
-            </p>
-          </div>
-          <dl className="work__text">
-            <li>
-              Built a full-stack web dashboard for memory usage monitoring of
-              multiple applications and concurrent processes running in the firm
-              using Java, Spring Boot, Kafka, and React
-            </li>
-            <li>
-              Worked with senior engineers to deploy the dashboard successfully
-              and present results to the global team
-            </li>
-          </dl>
+        <div className="work__container work__grid">
+          <img className="work__img" src={gsImg} alt="Goldman Sachs" />
+          <p className="work__text">
+            Summer Analyst @{" "}
+            <a className="external__link" href="https://www.goldmansachs.com/">
+              Goldman Sachs
+            </a>{" "}
+            <br />
+            <i>Jul 2020 - Aug 2020</i>
+          </p>
         </div>
 
-        <div className="work__container bd-container">
-          <div>
-            <h3>
-              <a className="external__link" href="https://www.paypal.com/">
-                PayPal
-              </a>
-            </h3>
-            <p>
-              Software Engineering Intern <br />
-              <i>Aug 2019 - Dec 2019</i>
-            </p>
-          </div>
-          <dl className="work__text">
-            <li>
-              Designed and developed multiple RESTful web services in the
-              Compliance platform to fulfill regulatory and Know Your Customer
-              (KYC) requirements using Java and Spring Boot
-            </li>
-            <li>
-              Built machine learning models, namely Random Forest and SVM, to
-              detect regulatory breaches based on partial account data present
-              during system failures
-            </li>
-            <li>
-              Researched and developed the open-source Conflict-free Replicated
-              Data Type (CRDT) designs in Java that support distributed systems
-              and focus on strong eventual consistency
-            </li>
-          </dl>
+        <div className="work__container work__grid">
+          <img className="work__img" src={paypalImg} alt="paypal-logo" />
+          <p className="work__text">
+            Software Engineering Inter @{" "}
+            <a className="external__link" href="https://www.paypal.com/">
+              PayPal
+            </a>{" "}
+            <br />
+            <i>Aug 2019 - Dec 2019</i>
+          </p>
         </div>
 
-        <div className="work__container bd-container">
-          <div>
-            <h3>
-              <a className="external__link" href="https://noviscient.com/">
-                Noviscient
-              </a>
-            </h3>
-            <p>
-              Junior Engineer (Apprenticeship under{" "}
-              <a className="external__link" href="https://www.sginnovate.com/">
-                SGInnovate
-              </a>
-              ) <br />
-              <i>May 2019 - Aug 2019</i>
-            </p>
-          </div>
-          <dl className="work__text">
-            <li>
-              Built a full-stack web application that gives investors and alpha
-              partners access to portfolio creation and monitoring tools using
-              different technologies such as Django, Docker, PostgreSQL, and
-              jQuery
-            </li>
-            <li>
-              Liaised with CTO to successfully deploy and present the demo
-              website to investors
-            </li>
-          </dl>
+        <div className="work__container work__grid">
+          <img
+            className="work__img"
+            src={noviscientImg}
+            alt="noviscient-logo"
+          />
+          <p className="work__text">
+            Junior Engineer @{" "}
+            <a className="external__link" href="https://noviscient.com/">
+              Noviscient
+            </a>{" "}
+            <br />
+            <i>May 2019 - Aug 2019</i>
+          </p>
         </div>
 
-        <div className="work__container bd-container">
-          <div>
-            <h3>
-              <a className="external__link" href="https://www.ackcio.com/">
-                Ackcio
-              </a>
-            </h3>
-            <p>
-              Intern Software Engineer <br />
-              <i>May 2018 - Aug 2018</i>
-            </p>
-          </div>
-          <dl className="work__text">
-            <li>
-              Developed a multi-threaded software running on Raspberry Pi to
-              concurrently read and transmit real-time serial data for wireless
-              construction monitoring using Python and SQLite
-            </li>
-            <li>
-              Collaborated with senior engineers to deploy the software
-              successfully to construction sites in Singapore and Korea
-            </li>
-          </dl>
+        <div className="work__container work__grid">
+          <img className="work__img" src={ackcioImg} alt="ackcio-logo" />
+          <p className="work__text">
+            Intern Software Engineer @{" "}
+            <a className="external__link" href="https://www.ackcio.com/">
+              Ackcio
+            </a>{" "}
+            <br />
+            <i>May 2018 - Aug 2018</i>
+          </p>
         </div>
       </div>
     </section>

diff --git a/src/images/ackcio.png b/src/images/ackcio.png
diff --git a/src/images/goldman-sachs.png b/src/images/goldman-sachs.png
diff --git a/src/images/noviscient.png b/src/images/noviscient.png
diff --git a/src/images/paypal.png b/src/images/paypal.png
diff --git a/src/images/profile-pic.png b/src/images/profile-pic.png
diff --git a/src/images/sfu.png b/src/images/sfu.png
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -300,19 +300,22 @@ body.dark__theme {
 
 /* ===== SKILLS =====*/
 .skills__container {
-  row-gap: 2rem;
+  row-gap: var(--mb-3);
 }
 .skills__subtitle {
   text-align: center;
 }
+.skills__list {
+  display: grid;
+  gap: var(--mb-3);
+}
 .skills__data {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
   font-weight: var(--font-semi);
   padding: 0.5rem 1rem;
-  margin-bottom: var(--mb-2);
   border-radius: 0.5rem;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
   text-align: left;
@@ -355,7 +358,6 @@ body.dark__theme {
 /* ===== PROJECTS & WORK =====*/
 .project__container,
 .work__container {
-  margin-top: var(--mb-4);
   overflow: hidden;
   text-overflow: ellipsis;
   background: var(--container-color);
@@ -364,6 +366,40 @@ body.dark__theme {
   border-radius: 0.25rem;
   padding: 1em;
 }
+.project__list {
+  display: grid;
+  gap: var(--mb-6);
+}
+.project__text {
+  margin-left: var(--mb-2);
+  margin-right: var(--mb-2);
+}
+.work__grid {
+  display: grid;
+  grid-template-columns: 25% 75%;
+}
+.work__img {
+  width: 60px;
+  margin: auto;
+}
+.work__text {
+  margin: var(--mb-2);
+}
+.work__list {
+  display: grid;
+  gap: var(--mb-4);
+  grid-auto-rows: 1fr;
+}
+/* .work__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mb-6);
+  justify-content: center;
+  margin-top: var(--mb-4)
+}
+.work__list > div {
+  width: 100%;
+} */
 
 /* ===== FOOTER =====*/
 .footer {
@@ -463,6 +499,13 @@ body.dark__theme {
   .skills__subtitle {
     text-align: initial;
   }
+
+  .work__list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  /* .work__list > div {
+    width: 45%;
+  } */
 }
 
 @media screen and (min-width: 1024px) {
@@ -473,9 +516,4 @@ body.dark__theme {
   .home__img {
     right: 10%;
   }
-  .project__text,
-  .work__text {
-    margin-left: 2rem;
-    margin-right: 2rem;
-  }
 }
diff --git a/src/tests/Work.test.js b/src/tests/Work.test.js
@@ -8,6 +8,6 @@ describe("test Work component", () => {
     expect(wrapper.find("#work").exists()).toBeTruthy();
     expect(wrapper.find(".section-title").length).toEqual(1);
     expect(wrapper.find(".work__list").length).toEqual(1);
-    expect(wrapper.find(".work__container").length).toEqual(5);
+    expect(wrapper.find(".work__container").length).toEqual(6);
   });
 });