updates to cell descriptions and structures

kajgm · Feb 9, 2024 · b97e6fd · b97e6fd
1 parent e428dcd
commit b97e6fd
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 92 deletions.
diff --git a/src/components/Template/Cell.js b/src/components/Template/Cell.js
@@ -1,32 +1,44 @@
 import React from 'react';
 
-const Cell = ({ data: { title, role, duration, image, invert, link, description } }) => (
-  <div className="cell">
-    <section className="cell-title">
-      <a href={link}>
-        {image ? <img src={image} className={'cell-icon' + (invert ? ' dark-invert' : '')} alt={title} /> : null}
-      </a>
-      <div className="cell-header">
+import List from './List';
+import Paragraph from './Paragraph';
+
+const Cell = ({ data: { title, role, duration, image, invert, link, description, skills } }) => {
+  let cellDescription;
+
+  if (description && description.type) {
+    if (description.type == 'list') {
+      cellDescription = <List content={description.content} />;
+    } else if (description.type == 'paragraph') {
+      cellDescription = <Paragraph content={description.content} />;
+    }
+  } else {
+    cellDescription == null;
+  }
+
+  return (
+    <div className="cell">
+      <section className="cell-title">
         <a href={link}>
-          <h2 className="underline">{title}</h2>
+          {image ? <img src={image} className={'cell-icon' + (invert ? ' dark-invert' : '')} alt={title} /> : null}
         </a>
-        {role && duration ? (
-          <h3>
-            {role}, {duration}
-          </h3>
-        ) : null}
-      </div>
-    </section>
+        <div className="cell-header">
+          <a href={link}>
+            <h2 className="underline">{title}</h2>
+          </a>
+          {role && duration ? (
+            <h3>
+              {role}, {duration}
+            </h3>
+          ) : null}
+        </div>
+      </section>
+
+      {cellDescription}
 
-    {description ? (
-      <ul>
-        {description.map((description, index) => {
-          index++;
-          return <li key={index}>{description}</li>;
-        })}
-      </ul>
-    ) : null}
-  </div>
-);
+      <h3 className="skills">{'Relevant Skills: ' + skills.join(', ')}</h3>
+    </div>
+  );
+};
 
 export default Cell;
diff --git a/src/components/Template/List.js b/src/components/Template/List.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const List = ({ content }) => {
+  return (
+    <ul>
+      {content.map((description, index) => {
+        index++;
+        return <li key={index}>{description}</li>;
+      })}
+    </ul>
+  );
+};
+
+export default List;
diff --git a/src/components/Template/Paragraph.js b/src/components/Template/Paragraph.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Paragraph = ({ content }) => {
+  return <p>{content}</p>;
+};
+
+export default Paragraph;
diff --git a/src/data/experience.js b/src/data/experience.js
@@ -5,17 +5,11 @@ const data = [
     duration: 'May 2022 - Dec 2022',
     image: '/images/content/sap.svg',
     link: 'https://www.sap.com/canada/index.html',
-    description: [
-      'Implemented a layered cache resiliency system involving several core microservices to ensure 99%+ uptime',
-      'Analyzed artifact build pipeline to expose regression-related variations between local and cloud deployments',
-      'Resolved a crucial ERP connection error by identifying an overlooked edge case related to the transfer of SQL ' +
-        'data between microservices, ensuring the on-time deployment of several essential features',
-      'Refactored core system dependencies and designed asynchronous logic to adhere to architectural standards',
-      'Converted core module to use asynchronous logic, resulting in a 2% reduction of system-wide loading times ',
-      'Created and maintained several automated Jest and Jasmine testing suites to achieve 99%+ code coverage',
-      'Led team-wide knowledge transfer sessions, reducing development time for several workflows by up to 95%',
-      'Verified proposed changes with remote Jenkins, local Node.js, and cloud-based Kubernetes environments',
-    ],
+    description: {
+      type: 'paragraph',
+      content:
+        'In the third year of my computer engineering degree, I opted to deeper into the realm of software development by joining the core infrastructure team at SAP Canda Inc. This Co-Op marked my initiation into handling large-scale code bases and contributing directly to projects. Throughout this experience, I garnered expertise in diverse areas, such as managing asynchronous webpack dependencies, implementing certificate generation and storage for Go configuration servers, creating automated testing suites using Jest and Jasmine, conducting Jenkins CI/CD analysis, overseeing version bump processes, orchestrating cloud deployments with Kubernetes and Docker, cross-microservice debugging, and so much more. I worked alongside both fellow students and senior engineers to deliver quality code following the agile methodology and concurrently managed the completion of countless Jira tickets. I led code reviews and even full-team meetings to seamlessly integrate improvements into existing workflows and explore new approaches.',
+    },
     skills: [
       'JavaScript',
       'Python',
@@ -42,15 +36,11 @@ const data = [
     image: '/images/content/sony.svg',
     invert: true,
     link: 'https://www.imageworks.com/',
-    description: [
-      'Resolved 200+ tickets relating to performance or configuration issues on production level Linux machines',
-      'Designed a project management system involving an SQL database, user-based permission sharing, cached' +
-        ' data retrieval, and integration with the google app suite to improve department productivity and efficiency',
-      'Reduced Dialogflow chatbot prompt failures by 87% and implemented an automated analytics dashboard',
-      'Created an application using less than 1% of system resources to safely reboot machines with large uptimes',
-      'Developed a Django app using the Jamf API to efficiently manage Apple devices and display usage statistics',
-      'Received a film credit for the Animated Film: The Sea Beast',
-    ],
+    description: {
+      type: 'paragraph',
+      content:
+        "During my second year of university, I received an opportunity to join the Systems Engineering Department at Sony Pictures Imageworks. Eager to be part of the immense artistic and technical talent responsible for bringing my favorite movies, like Spider-Man: Into the Spider-Verse, Lord of the Rings, and Men in Black, to life, I embraced the chance. My tenure at Sony revolved around adapting to a Unix-based environment, where I took on responsibilities involving the maintenance and troubleshooting of the organization's computing infrastructure. Working closely with senior engineers, I contributed to various projects aimed at enhancing both artistic and engineering capabilities. I had the privilege of witnessing multi-million-dollar projects progress through every stage of development, from lighting and texturing to animation and rigging. I even received a film credit for the amazing film: The Sea Beast.",
+    },
     skills: [
       'JavaScript',
       'Python',
@@ -63,7 +53,7 @@ const data = [
       'Jamf',
       'Django',
       'Dialogflow',
-      'Linux',
+      'Unix',
     ],
   },
 ];

diff --git a/src/data/projects.js b/src/data/projects.js
@@ -7,12 +7,15 @@ const data = [
     role: 'SFU Engineering Capstone',
     duration: 'May 2023 - Dec 2023',
     link: 'https://github.com/kajgrant/rolltech',
-    description: [
-      'Designed a modular attachment for office chairs using a spherical wheel for enhanced powered movement',
-      'Led a team of 5 students to produce a minimum viable product and publicly demonstrate system capabilities',
-      'Built an enclosed electrical circuit with 14+ motor control, communication, logic, and safety elements',
-      'Devised a mechanical system with machined steel and 3D printed components to control a 2200W motor',
-    ],
+    description: {
+      type: 'list',
+      content: [
+        'Designed a modular attachment for office chairs using a spherical wheel for enhanced powered movement',
+        'Led a team of 5 students to produce a minimum viable product and publicly demonstrate system capabilities',
+        'Built an enclosed electrical circuit with 14+ motor control, communication, logic, and safety elements',
+        'Devised a mechanical system with machined steel and 3D printed components to control a 2200W motor',
+      ],
+    },
     skills: ['C++', 'SolidWorks', 'KiCad', 'Soldering', 'Electrical Design', 'Photoshop'],
   },
   {
@@ -21,12 +24,15 @@ const data = [
     role: 'ENSC 453/894 Final Project',
     duration: 'Sept 2023 - Dec 2023',
     link: 'https://github.com/kajgrant/gaussian-acceleration',
-    description: [
-      'Minimized execution time via buffering, tiling, memory, compute, and ping-pong data transfer enhancements',
-      'Achieved an 8.4 speedup factor using Intel Intrinsics and OpenMP optimizations on the CPU-based platform',
-      'Doubled performance of CUDA algorithm based on analysis of underlying GPU architecture and cache layout',
-      'Compared CPU (Intel i9-10900X), FPGA (AMD Alevo U50), and GPU (Nvidia A4000) implementations',
-    ],
+    description: {
+      type: 'list',
+      content: [
+        'Minimized execution time via buffering, tiling, memory, compute, and ping-pong data transfer enhancements',
+        'Achieved an 8.4 speedup factor using Intel Intrinsics and OpenMP optimizations on the CPU-based platform',
+        'Doubled performance of CUDA algorithm based on analysis of underlying GPU architecture and cache layout',
+        'Compared CPU (Intel i9-10900X), FPGA (AMD Alevo U50), and GPU (Nvidia A4000) implementations',
+      ],
+    },
     skills: ['C', 'Cuda', 'Intel Intrinsics', 'OpenMp', 'Xilinx Vitis'],
   },
   {
@@ -36,12 +42,15 @@ const data = [
     role: 'ENSC 452/894 Final Project',
     duration: 'Jan 2023 - May 2023',
     link: 'https://github.com/kajgrant/guitar-tuner',
-    description: [
-      'Designed a dual core ARM-based architecture using the Xilinx Zedboard FPGA for a custom guitar tuner',
-      'Streamlined data transfer logic to achieve 1Hz accuracy and an input to output latency of less than 1 second',
-      'Interfaced 9+ Audio Codecs, FFT blocks, GPIO blocks, and VGA controllers with C-based software',
-      'Created an optimized hardware block in VHDL to perform the Harmonic Product Spectrum calculation',
-    ],
+    description: {
+      type: 'list',
+      content: [
+        'Designed a dual core ARM-based architecture using the Xilinx Zedboard FPGA for a custom guitar tuner',
+        'Streamlined data transfer logic to achieve 1Hz accuracy and an input to output latency of less than 1 second',
+        'Interfaced 9+ Audio Codecs, FFT blocks, GPIO blocks, and VGA controllers with C-based software',
+        'Created an optimized hardware block in VHDL to perform the Harmonic Product Spectrum calculation',
+      ],
+    },
     skills: ['C', 'VHDL', 'Vivado', 'Xilinx Vitis', 'Frequency Theory'],
   },
   {
@@ -50,11 +59,14 @@ const data = [
     role: 'ENSC 350 Final Project',
     duration: 'Jan 2022 - May 2022',
     link: 'https://github.com/kajgrant/ExU',
-    description: [
-      'Designed a VHDL based execution unit capable of executing the full RISC-V instruction set',
-      'Implemented barrel shifters, a 64-bit adder, and a logic unit to correctly respond to input signals',
-      'Synthesized on the Cyclone IV FPGA and performed timing analysis using ModelSim waveforms',
-    ],
+    description: {
+      type: 'list',
+      content: [
+        'Designed a VHDL based execution unit capable of executing the full RISC-V instruction set',
+        'Implemented barrel shifters, a 64-bit adder, and a logic unit to correctly respond to input signals',
+        'Synthesized on the Cyclone IV FPGA and performed timing analysis using ModelSim waveforms',
+      ],
+    },
     skills: ['RISC-V', 'VHDL', 'Quartus', 'Modelsim'],
   },
   {
@@ -63,29 +75,17 @@ const data = [
     role: 'Personal interest project',
     duration: 'Feb 2023 - Present',
     link: 'https://github.com/kajgrant/transittracker',
-    description: [
-      'Personal interest project to explore interactions with the Translink API platform',
-      'Uses either a command line interface or graphical interface intended for a small raspberry pi screen',
-      'Continuously displays current bus schedules and the time remaining till arrival of chosen bus routes',
-      'Includes animated features, a user interface designed for quick comprehension, and robust error handling',
-    ],
+    description: {
+      type: 'list',
+      content: [
+        'Personal interest project to explore interactions with the Translink API platform',
+        'Uses either a command line interface or graphical interface intended for a small raspberry pi screen',
+        'Continuously displays current bus schedules and the time remaining till arrival of chosen bus routes',
+        'Includes animated features, a user interface designed for quick comprehension, and robust error handling',
+      ],
+    },
     skills: ['Python', 'APIs'],
   },
-  // },
-  // {
-  //   title: 'RedditSalesTracker',
-  //   image: '/images/content/reddit.svg',
-  //   role: 'Personal interest project',
-  //   duration: 'Jan 2023 - Present',
-  //   link: 'https://github.com/kajgrant/transittracker',
-  //   description: [
-  //     'Personal interest project to explore interactions with the Reddit API platform',
-  //     'Retrieves post statistics and data from over 1000 distinct sales-specific subreddits',
-  //     'Features optional arguments to control notification sounds, watch list, and frequency of query',
-  //     'Enhances the capacity to capitalize on time-sensitive sales opportunities with a real-time notification system',
-  //   ],
-  //   skills: ['Python', 'APIs'],
-  // },
 ];
 
 export default data;
diff --git a/src/static/css/components/_cell.scss b/src/static/css/components/_cell.scss
@@ -2,6 +2,7 @@
   padding-inline: 10px;
   padding-bottom: 10px;
   margin-bottom: 20px;
+  transition: ease-in-out _duration(text);
 
   h2 {
     display: inline;
@@ -36,10 +37,29 @@
     padding-left: 25px;
   }
 
+  p {
+    padding-top: 5px;
+    padding-left: 10px;
+    line-height: 1.5;
+    font-weight: _font(weight-p);
+    font-size: _size(description);
+    color: var(--sub-text-color);
+  }
+
+  .skills {
+    opacity: 0;
+    padding-top: 20px;
+    margin-left: 10px;
+    transition: ease-in-out _duration(text);
+  }
+
   &:hover {
     border-radius: 5px;
-    transition-duration: _duration(text);
     background-color: var(--content-background);
+
+    .skills {
+      opacity: 1;
+    }
   }
 }
 

diff --git a/src/static/css/layout/_about.scss b/src/static/css/layout/_about.scss
@@ -1,3 +1,7 @@
+#about {
+  font-size: _size(about);
+}
+
 #kaj-text {
   margin: 0px;
   display: inline-flex;

diff --git a/src/static/css/layout/_content.scss b/src/static/css/layout/_content.scss
@@ -24,7 +24,6 @@
   width: $contentwidth;
   p {
     margin: 0;
-    font-size: _size(about);
     color: var(--body-color);
   }
 }
diff --git a/src/static/css/libs/_vars.scss b/src/static/css/libs/_vars.scss
@@ -55,6 +55,7 @@ $size: (
   underline: 0.1em,
   hidden-kaj: 0.8em,
   subtitle: 0.9em,
+  skills: 0.9em,
   description: 1em,
   about: 1.15em,
   content-header: 2em,
@@ -75,6 +76,7 @@ $font: (
   weight: 400,
   weight-bold: 700,
   weight-li: 500,
+  weight-p: 400,
   weight-heading: 500,
   weight-heading-bold: 800,
   kerning-heading: 0.01em,