Updates to Next and experience

components/accordion.tsx

@@ -1,7 +1,5 @@
 import React, { ReactNode, useState } from "react";
 import ProjectHeader from "./projectHeader";
-import chevron from "../public/svg/chevron.svg";
-import github from "../public/svg/github.svg";
 import styles from "../styles/Accordion.module.scss";
 
 interface Props {
@@ -26,7 +24,7 @@ export default function Accordion(props: Props) {
       <div className={styles.summary}>
         <ProjectHeader title={props.title} subtitle={props.subtitle ?? ""} />
         <img
-          src={chevron}
+          src={"/svg/chevron.svg"}
           alt="expand card"
           className={styles.chevron + " undraggable"}
           aria-expanded={expanded}
@@ -37,7 +35,7 @@ export default function Accordion(props: Props) {
         <div className={styles.desc}>{props.children}</div>
         <a className={styles.github} href={props.github} target="_blank">
           <img
-            src={github}
+            src={"/svg/github.svg"}
             alt="go to Github repo"
             className="undraggable"
             width={35}

components/fishExperiences.tsx

@@ -1,11 +1,8 @@
 import React from "react";
-import SmallFish from "../public/svg/fish/sm-fish.svg";
-import PinkFish from "../public/svg/fish/pink-fish.svg";
-import YellowFish from "../public/svg/fish/yellow-fish.svg";
-import BlueFish from "../public/svg/fish/blue-fish.svg";
 import styles from "../styles/FishExp.module.scss";
 
 export default function FishExp() {
+  const SmallFish = "/svg/fish/sm-fish.svg";
   return (
     <div className={styles.fish_container}>
       <img className={styles.smFish1 + " undraggable"} src={SmallFish} alt="" />
@@ -16,23 +13,23 @@ export default function FishExp() {
       <div className={styles.exp1}>
         <img
           className={styles.fishImg + " undraggable"}
-          src={PinkFish}
+          src={"/svg/fish/pink-fish.svg"}
           alt=""
         />
       </div>
 
       <div className={styles.exp2}>
         <img
           className={styles.fishImg + " undraggable"}
-          src={YellowFish}
+          src={"/svg/fish/yellow-fish.svg"}
           alt=""
         />
       </div>
 
       <div className={styles.exp3}>
         <img
           className={styles.fishImg + " undraggable"}
-          src={BlueFish}
+          src={"/svg/fish/blue-fish.svg"}
           alt=""
         />
       </div>

components/header.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import highlight from "../public/svg/highlight.svg";
 import styles from "../styles/Header.module.scss";
 
 interface Props {
@@ -12,7 +11,7 @@ export default function Header(props: Props) {
     <div className={styles.container}>
       <h1 className={styles.header}>{props.title}</h1>
       <img
-        src={highlight}
+        src={"/svg/highlight.svg"}
         alt=""
         style={{ backgroundColor: props.color }}
         className={styles.highlight + " undraggable"}

components/jellyfishBtn.tsx

@@ -1,7 +1,4 @@
 import React from "react";
-import pinkJelly from "../public/svg/jellyfish/pink-jellyfish.svg";
-import purpleJelly from "../public/svg/jellyfish/purple-jellyfish.svg";
-import yellowJelly from "../public/svg/jellyfish/yellow-jellyfish.svg";
 import styles from "../styles/JellyfishBtn.module.scss";
 
 interface Props {
@@ -15,30 +12,30 @@ export default function JellyfishButton(props: Props) {
       case "pink":
         return (
           <img
-            src={pinkJelly}
+            src={"/svg/jellyfish/pink-jellyfish.svg"}
             alt="About Me Button"
             className={styles.jellyfish + " undraggable"}
           />
         );
       case "purple":
         return (
           <img
-            src={purpleJelly}
+            src={"/svg/jellyfish/purple-jellyfish.svg"}
             alt="Experience Button"
             className={styles.jellyfish + " undraggable"}
           />
         );
       case "yellow":
         return (
           <img
-            src={yellowJelly}
+            src={"/svg/jellyfish/yellow-jellyfish.svg"}
             alt="Contact Button"
             className={styles.jellyfish + " undraggable"}
           />
         );
       default:
         <img
-          src={pinkJelly}
+          src={"/svg/jellyfish/pink-jellyfish.svg"}
           alt="About Me Button"
           className={styles.jellyfish + " undraggable"}
         />;

content/experience.js

@@ -1,10 +1,10 @@
 const colors = {
-  "green": "rgba(166, 231, 127, 0.75)",
-  "blue": "rgba(160, 214, 238, 0.75)",
-  "purple": "rgba(228, 183, 255, 0.75)",
-  "pink": "rgba(229, 146, 191, 0.75)",
-  "orange": "rgba(248, 186, 93, 0.75)"
-}
+  green: "rgba(166, 231, 127, 0.75)",
+  blue: "rgba(160, 214, 238, 0.75)",
+  purple: "rgba(228, 183, 255, 0.75)",
+  pink: "rgba(229, 146, 191, 0.75)",
+  orange: "rgba(248, 186, 93, 0.75)",
+};
 
 // LOGOS
 
@@ -74,15 +74,43 @@ const technovaLogo = (
 const rbcLogo = <img src="rbc.jpg" />;
 const bdoLogo = <img src="bdo.jpg" />;
 const amazonLogo = <img src="amazon.png" />;
+const onepasswordLogo = <img src="1pass.png" />;
+const konradLogo = <img src="konrad.png" />;
 
 // EXPERIENCE
 
 export const experience = [
+  {
+    role: "Software Engineer",
+    company: "Konrad Group",
+    time: "May - Aug 2024",
+    tools: [
+      "TypeScript",
+      "Python",
+      "GraphQL",
+      "Prometheus",
+      "Postgres Exporter",
+      "Grafana",
+      "Slack API",
+    ],
+    desc: "KG Play team.",
+    logo: konradLogo,
+    bgColor: colors.orange,
+  },
+  {
+    role: "DevOps Engineer",
+    company: "1Password",
+    time: "Jan - Apr 2024",
+    tools: ["TypeScript", "Python", "Kubernetes", "Helm", "AWS", "TartVM"],
+    desc: "Build and Release team.",
+    logo: onepasswordLogo,
+    bgColor: colors.blue,
+  },
   {
     role: "Software Development Engineer",
     company: "Amazon",
     time: "May - Aug 2023",
-    tools: [],
+    tools: ["Java", "AWS", "Redjack", "Lumos", "Dagger"],
     desc: "Healthcare Payments team.",
     logo: amazonLogo,
     bgColor: colors.orange,
@@ -98,23 +126,27 @@ export const experience = [
       "Terraform",
       "Flask",
       "Docker",
-      "Azure"
+      "Azure",
     ],
-    desc: (
-      <ul>
-        <li>
-          Scripted 10+ data centre management tools in Python resulting in a 
-          highly-scalable Infrastructure as Code web framework, adopted by 50+ financial institutions.
-        </li>
-        <li>
-          Implemented Terraform command execution and custom file editors on the portal 
-          to enhance customizability.
-        </li>
-        <li>
-          Streamlined deployment processes by 3 hours by automating code execution to a virtual machine through Azure DevOps.
-        </li>
-      </ul>
-    ),
+    desc:
+      // (
+      //   <ul>
+      //     <li>
+      //       Scripted 10+ data centre management tools in Python resulting in a
+      //       highly-scalable Infrastructure as Code web framework, adopted by 50+
+      //       financial institutions.
+      //     </li>
+      //     <li>
+      //       Implemented Terraform command execution and custom file editors on the
+      //       portal to enhance customizability.
+      //     </li>
+      //     <li>
+      //       Streamlined deployment processes by 3 hours by automating code
+      //       execution to a virtual machine through Azure DevOps.
+      //     </li>
+      //   </ul>
+      // )
+      "",
     logo: bdoLogo,
     bgColor: colors.pink,
   },
@@ -129,28 +161,29 @@ export const experience = [
       "Jest",
       "Jenkins",
     ],
-    desc: (
-      <ul>
-        <li>
-          Implemented an end-to-end email decryption and CSV generating feature,
-          reducing manual operations by 5+ hours per use.
-        </li>
-        <li>
-          Automated the emailing of generated CSV files, exceeded project goals
-          by verifying permissions of the receiver for secure data transfers.
-        </li>
-        <li>
-          Developed full-stack administration portal and mobile app enhancements
-          to improve user experience and code scalability, raising efficiency
-          for 70+ employees by 20%.
-        </li>
-        <li>
-          Delivered back-end features in member cohort creation and management,
-          contributing to the app’s re-baselining project and decreasing weekly
-          workload by 7 hours.
-        </li>
-      </ul>
-    ),
+    desc: "",
+    // (
+    //   <ul>
+    //     <li>
+    //       Implemented an end-to-end email decryption and CSV generating feature,
+    //       reducing manual operations by 5+ hours per use.
+    //     </li>
+    //     <li>
+    //       Automated the emailing of generated CSV files, exceeded project goals
+    //       by verifying permissions of the receiver for secure data transfers.
+    //     </li>
+    //     <li>
+    //       Developed full-stack administration portal and mobile app enhancements
+    //       to improve user experience and code scalability, raising efficiency
+    //       for 70+ employees by 20%.
+    //     </li>
+    //     <li>
+    //       Delivered back-end features in member cohort creation and management,
+    //       contributing to the app’s re-baselining project and decreasing weekly
+    //       workload by 7 hours.
+    //     </li>
+    //   </ul>
+    // )
     logo: rbcLogo,
     bgColor: colors.blue,
   },
@@ -159,26 +192,27 @@ export const experience = [
     company: "UW Computer Science Club",
     time: "Feb 2021 - Present",
     tools: ["TypeScript", "React", "MDX", "Next", "Figma"],
-    desc: (
-      <ul>
-        <li>
-          Translated designs into responsive and customizable components,
-          allowing for flexibility and maintainability of the website.
-        </li>
-        <li>
-          Built dynamic and interactive pages of the re-branded website,
-          actively used by 900+ students.
-        </li>
-        <li>
-          Encouraged an inclusive user audience by applying principles of
-          accessible technology, delivering perceivable and operable content.
-        </li>
-        <li>
-          Populated data from dynamically imported files, simplifying the
-          creating and updating of website content.
-        </li>
-      </ul>
-    ),
+    desc: "",
+    // (
+    //   <ul>
+    //     <li>
+    //       Translated designs into responsive and customizable components,
+    //       allowing for flexibility and maintainability of the website.
+    //     </li>
+    //     <li>
+    //       Built dynamic and interactive pages of the re-branded website,
+    //       actively used by 900+ students.
+    //     </li>
+    //     <li>
+    //       Encouraged an inclusive user audience by applying principles of
+    //       accessible technology, delivering perceivable and operable content.
+    //     </li>
+    //     <li>
+    //       Populated data from dynamically imported files, simplifying the
+    //       creating and updating of website content.
+    //     </li>
+    //   </ul>
+    // )
     logo: cscLogo,
     bgColor: colors.green,
   },
@@ -187,28 +221,29 @@ export const experience = [
     company: "TechNova",
     time: "Apr 2021 - Sept 2021",
     tools: ["JavaScript", "React", "SCSS", "Heroku", "Figma"],
-    desc: (
-      <ul>
-        <li>
-          Coordinated the development of 25+ beginner-level workshops to empower
-          students in tech, for the University of Waterloo’s first Women+ in
-          Tech hackathon.
-        </li>
-        <li>
-          Communicated professionally with 15+ volunteers on a bi-weekly basis
-          to meet precise requirements and deadlines, adapting quickly to
-          accommodations.
-        </li>
-        <li>
-          Collaborated with 20 organizers to deliver cross-functional plans and
-          contingencies, seeking better procedures when necessary.
-        </li>
-        <li>
-          Developed the hackathon’s first website using React and SCSS, reaching
-          a traffic of 5000+ visitors per month.
-        </li>
-      </ul>
-    ),
+    desc: "",
+    // (
+    //   <ul>
+    //     <li>
+    //       Coordinated the development of 25+ beginner-level workshops to empower
+    //       students in tech, for the University of Waterloo’s first Women+ in
+    //       Tech hackathon.
+    //     </li>
+    //     <li>
+    //       Communicated professionally with 15+ volunteers on a bi-weekly basis
+    //       to meet precise requirements and deadlines, adapting quickly to
+    //       accommodations.
+    //     </li>
+    //     <li>
+    //       Collaborated with 20 organizers to deliver cross-functional plans and
+    //       contingencies, seeking better procedures when necessary.
+    //     </li>
+    //     <li>
+    //       Developed the hackathon’s first website using React and SCSS, reaching
+    //       a traffic of 5000+ visitors per month.
+    //     </li>
+    //   </ul>
+    // )
     logo: technovaLogo,
     bgColor: colors.purple,
   },

next-env.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
-/// <reference types="next-images" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.js

@@ -1,7 +0,0 @@
-const withImages = require("next-images");
-module.exports = withImages({
-  fileExtensions: ["jpg", "jpeg", "png", "gif", "svg"],
-  webpack(config, options) {
-    return config;
-  },
-});