feat: add exp/projects content

README.md

@@ -7,10 +7,11 @@
 >
 > Want to build from (almost) scratch, with all the boring stuff configured? Check out this [starter template](https://github.com/jcserv/react-vite-shadcn-template).
 
-This portfolio has been re-designed with responsiveness & accessibility in mind, and to try out some new libraries.
+This portfolio has been rewritten in TypeScript, revamped with responsiveness & accessibility in mind, and to try out some new libraries.
 
 Changes from V2.0:
 
+- 🏙️ TypeScript
 - ⌨️ Keyboard navigation
 - 🗞️ Added a certificates section under about
 - 😎 Updated with the latest trendy UI libraries (shadcn, tailwindcss, vite)
@@ -63,7 +64,6 @@ The design of the site was heavily influenced by a lot of awesome portfolios out
 TODO:
 
 - Improve search
-- Setup analytics
 
 (still on the fence about re-adding...)
 

src/assets/experience.json

@@ -0,0 +1,68 @@
+[
+  {
+    "workplace": "dbt Labs",
+    "position": "Software Engineer",
+    "duration": ["Aug 2024 - Present"],
+    "description": [
+      "Developed and maintained customer-facing features for dbt Explorer using React, Django, and GraphQL to enhance user experience and product capabilities",
+      "Collaborated closely with engineers and product managers to understand requirements and build quality solutions",
+      "Participated in code reviews and provide constructive feedback to maintain code quality"
+    ],
+    "url": "https://getdbt.com/"
+  },
+  {
+    "workplace": "SailPoint",
+    "position": "Senior Software Engineer",
+    "duration": ["Jan 2022 - Jul 2024"],
+    "description": [
+      "Developed large-scale features for Workflows, a low-code automation platform built with Go, resulting in increased usage of SailPoint APIs",
+      "Re-architected execution flow to improve DynamoDB read/write patterns, leading to 38% increased throughput and 53% cost savings",
+      "Led development project of actions versioning feature, enabling team to develop/patch new & existing actions without risk",
+      "Successfully rolled out operational improvements to various teams"
+    ],
+    "url": "https://sailpoint.com/"
+  },
+  {
+    "workplace": "Citi",
+    "position": "Software Developer Intern",
+    "duration": ["May 2021 - Aug 2021", "Jul 2020 - Aug 2020"],
+    "description": [
+      "Migrated legacy infrastructure from monolithic architecture into microservices, resulting in a 32.6% processing time decrease",
+      "Created internal dev tools using Angular and Java/Spring, yielding a 15.6% productivity increase",
+      "Managed a team of 4 software developers to build portfolio management service PoC with React"
+    ],
+    "url": "https://www.citigroup.com/citi/"
+  },
+  {
+    "workplace": "Citylitics",
+    "position": "Software Developer Intern",
+    "duration": ["Aug 2020 - April 2021"],
+    "description": [
+      "Overhauled querying engine by developing highly requested features using React and Redux, improving lead generation efficiency by 150%",
+      "Implemented RESTful APIs using Django to allow for storage of consumer data, generating a 30% increase in size of key dataset in just 90 days",
+      "Wrote tests in Jest verifying standard user flows, increasing code coverage to 78%"
+    ],
+    "url": "https://citylitics.com/"
+  },
+  {
+    "workplace": "University of Toronto",
+    "position": "Head TA",
+    "duration": ["Jan 2020 - Dec 2021"],
+    "description": [
+      "Created microservices assignment using Java backend APIs with a JavaScript/React frontend, built and deployed with Docker",
+      "Provided technical mentorship for multiple full stack projects over a 4-month scrum development cycle",
+      "Answered questions on course forums with 1000+ students, with 3rd highest contributions amongst TAs"
+    ]
+  },
+  {
+    "workplace": "PAL Lab",
+    "position": "Social Robotics Programmer",
+    "duration": ["May 2019 - Dec 2019"],
+    "description": [
+      "Implemented tooling for researchers enabling subject/robot engagement, leveraging Furhat API",
+      "Developed a React web application for researchers to remotely control run robot actions",
+      "Designed the PAL Lab website"
+    ],
+    "url": "https://www.psycholinguistics.ca/"
+  }
+]

src/components/CommandBar.tsx

@@ -13,6 +13,11 @@ import {
 } from "@/components/ui/command";
 import { Button } from "@/components/ui/button";
 import { cn, scrollToSection } from "@/lib/utils";
+import { experienceToContent } from "@/types/experience";
+import { projectsToContent } from "@/types/project";
+import experience from "@/assets/experience.json";
+import projects from "@/assets/projects.json";
+
 
 type SectionCommand = {
   label: string;
@@ -44,32 +49,27 @@ const sections: SectionCommand[] = [
   },
   {
     label: "Experience",
-    content: [
-      // TODO: Import experience.json, and format into this string array
-      "",
-    ],
+    content: experienceToContent(experience),
     value: "experience",
     icon: <Briefcase className="mr-2 h-4 w-4" />,
     shortcut: "F3",
   },
   {
     label: "Projects",
-    content: [
-      // TODO: Import projects.json, and format into this string array
-      "UofT TA Application System (UTAP): UTAP is the official platform for all MCS TA postings @ UTM enabling students to apply for postings and instructors to manage applications. Technologies: React, Node.js, PostgreSQL",
-      "ULinks.io: ULinks.io is a platform for students to browse & upload academic group chats to stay connected during online school. Technologies: React, GraphQL, Node.js",
-    ],
+    content: projectsToContent(projects),
     value: "projects",
     icon: <Wand className="mr-2 h-4 w-4" />,
     shortcut: "F4",
   },
 ];
 
+// TODO: Add ability to ask natural language questions
 export const CommandBar: React.FC = () => {
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState("");
 
   // TODO: Include other search items like Github, LinkedIn, etc.
+  // TODO: Include experience and project content in search that links to the respective sections with ?activeTab=<x>
   const [searchResults, setSearchResults] = React.useState<
     FuseResult<SectionCommand>[]
   >([]);

src/lib/utils.ts

@@ -8,4 +8,4 @@ export function cn(...inputs: ClassValue[]) {
 export function scrollToSection(section: string): void {
   const element = document.getElementById(section);
   element?.scrollIntoView({ behavior: "smooth" });
-}
+}

src/sections/About/About.tsx

@@ -50,7 +50,7 @@ export const About: React.FC = () => {
         <div className="flex md:flex-row flex-col-reverse items-center md:items-start gap-8">
           <div className="flex flex-col justify-center items-center w-full md:w-1/2">
             <p className="mt-4">
-              Hi, I&apos;m Jarrod! I studied computer science at the University
+              Howdy! 🤠 I studied computer science at the University
               of Toronto, and I&apos;m currently working at{" "}
               <Link href="https://www.getdbt.com/">dbt Labs</Link> as a{" "}
               <strong className="text-[#1ca7d0] dark:text-[#90cdf4]">

src/sections/Experience/Experience.tsx

@@ -11,85 +11,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import experiences from "@/assets/experience.json";
+import { Experience } from "@/types/experience";
 
-type Experience = {
-  workplace: string;
-  position: string;
-  duration: string[];
-  description: string[];
-  url?: string;
-};
-
-const experiences: Experience[] = [
-  {
-    workplace: "dbt Labs",
-    position: "Software Engineer",
-    duration: ["Aug 2024 - Present"],
-    description: [
-      "Developed and maintained customer-facing features for dbt Explorer using React, Django, and GraphQL to enhance user experience and product capabilities",
-      "Collaborated closely with engineers and product managers to understand requirements and build quality solutions",
-      "Participated in code reviews and provide constructive feedback to maintain code quality",
-    ],
-    url: "https://getdbt.com/",
-  },
-  {
-    workplace: "SailPoint",
-    position: "Senior Software Engineer",
-    duration: ["Jan 2022 - Jul 2024"],
-    description: [
-      "Developed large-scale features for Workflows, a low-code automation platform built with Go, resulting in increased usage of SailPoint APIs",
-      "Re-architected execution flow to improve DynamoDB read/write patterns, leading to 38% increased throughput and 53% cost savings",
-      "Led development project of actions versioning feature, enabling team to develop/patch new & existing actions without risk",
-      "Successfully rolled out operational improvements to various teams",
-    ],
-    url: "https://sailpoint.com/",
-  },
-  {
-    workplace: "Citi",
-    position: "Software Developer Intern",
-    duration: ["May 2021 - Aug 2021", "Jul 2020 - Aug 2020"],
-    description: [
-      "Migrated legacy infrastructure from monolithic architecture into microservices, resulting in a 32.6% processing time decrease",
-      "Created internal dev tools using Angular and Java/Spring, yielding a 15.6% productivity increase",
-      "Managed a team of 4 software developers to build portfolio management service PoC with React",
-    ],
-    url: "https://www.citigroup.com/citi/",
-  },
-  {
-    workplace: "Citylitics",
-    position: "Software Developer Intern",
-    duration: ["Aug 2020 - April 2021"],
-    description: [
-      "Overhauled querying engine by developing highly requested features using React and Redux, improving lead generation efficiency by 150%",
-      "Implemented RESTful APIs using Django to allow for storage of consumer data, generating a 30% increase in size of key dataset in just 90 days",
-      "Wrote tests in Jest verifying standard user flows, increasing code coverage to 78%",
-    ],
-    url: "https://citylitics.com/",
-  },
-  {
-    workplace: "University of Toronto",
-    position: "Head TA",
-    duration: ["Jan 2020 - Dec 2021"],
-    description: [
-      "Created microservices assignment using Java backend APIs with a JavaScript/React frontend, built and deployed with Docker",
-      "Provided technical mentorship for multiple full stack projects over a 4-month scrum development cycle",
-      "Answered questions on course forums with 1000+ students, with 3rd highest contributions amongst TAs",
-    ],
-  },
-  {
-    workplace: "PAL Lab",
-    position: "Social Robotics Programmer",
-    duration: ["May 2019 - Dec 2019"],
-    description: [
-      "Implemented tooling for researchers enabling subject/robot engagement, leveraging Furhat API",
-      "Developed a React web application for researchers to remotely control run robot actions",
-      "Designed the PAL Lab website",
-    ],
-    url: "https://www.psycholinguistics.ca/",
-  },
-];
-
-export const Experience: React.FC = () => {
+export const ExperienceSection: React.FC = () => {
+  // TODO: Use query param activeTab to set the current experience so that its linkable from command bar
   const [currExperience, setCurrExperience] = React.useState<number>(0);
   return (
     <section
@@ -103,7 +29,7 @@ export const Experience: React.FC = () => {
         <div className="flex md:flex-row flex-col items-center md:items-start">
           {/* Button navigation shows up when viewport >= md */}
           <div className="flex flex-col justify-center items-center space-y-4 max-md:hidden w-full md:w-1/3 self-center">
-            {experiences.map((exp, idx) => (
+            {experiences.map((exp: Experience, idx) => (
               <Button
                 key={`${exp.workplace}`}
                 onClick={() => setCurrExperience(idx)}

src/sections/Projects/Projects.tsx

@@ -8,6 +8,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { IconButton } from "@/components/Link";
 import { ContinueIndicator } from "@/components/ContinueIndicator";
 import { cn } from "@/lib/utils";
+import { Project } from "@/types/project";
 
 const FEATURED_PROJECTS_COUNT = 4;
 
@@ -41,22 +42,6 @@ const linkIcons: Map<LinkType, JSX.Element> = new Map([
   ["link", <Link key="link" aria-label="Link to Project" className="hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]" />],
 ]);
 
-type ProjectLink = {
-  label: string;
-  icon: string;
-  url: string;
-};
-
-type Project = {
-  name: string;
-  tech: string[];
-  links: ProjectLink[];
-  type?: string;
-  description?: string;
-  subtitle?: string;
-  pic?: string;
-};
-
 export const Projects: React.FC = () => {
   return (
     <section

src/sections/index.ts

@@ -1,6 +1,6 @@
 import { About } from "./About/About";
-import { Experience } from "./Experience/Experience";
+import { ExperienceSection } from "./Experience/Experience";
 import { Landing } from "./Landing/Landing";
 import { Projects } from "./Projects/Projects";
 
-export { About, Experience, Landing, Projects };
+export { About, ExperienceSection as Experience, Landing, Projects };

src/types/experience.ts

@@ -0,0 +1,17 @@
+export type Experience = {
+  workplace: string;
+  position: string;
+  duration: string[];
+  description: string[];
+  url?: string;
+};
+
+/** Used to generate searchable content */
+export function experienceToContent(experience: Experience[]): string[] {
+  return experience.map((exp) => {
+    return [
+      exp.workplace,
+      ...exp.description,
+    ].join(" ");
+  });
+}

src/types/project.ts

@@ -0,0 +1,27 @@
+export type ProjectLink = {
+  label: string;
+  icon: string;
+  url: string;
+};
+
+export type Project = {
+  name: string;
+  tech: string[];
+  links: ProjectLink[];
+  type?: string;
+  description?: string;
+  subtitle?: string;
+  pic?: string;
+};
+
+/** Used to generate searchable content */
+export function projectsToContent(projects: Project[]): string[] {
+    return projects.map((project) => {
+        return [
+            project.name,
+            project.description,
+            project.subtitle,
+            ...project.tech,
+        ].join(" ");
+    });
+}