Occupation links

src/app/page.tsx

@@ -129,13 +129,16 @@ const HomePage = async () => {
                     key={occupation.company.name}
                     className="relative aspect-[7/2] w-full scale-100 transition-transform duration-200 ease-in-out hover:scale-110"
                   >
-                    <img
-                      src={
-                        occupation.company.logoLight ?? occupation.company.logo
-                      }
-                      alt={occupation.company.name}
-                      className="h-full w-full object-contain"
-                    />
+                    <Link href={occupation.company.url} target="_blank">
+                      <img
+                        src={
+                          occupation.company.logoLight ??
+                          occupation.company.logo
+                        }
+                        alt={occupation.company.name}
+                        className="h-full w-full object-contain"
+                      />
+                    </Link>
                     <span className="sr-only">{occupation.company.name}</span>
                   </div>
                 ))}

src/app/programming/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+import Link from "next/link";
 import { CustomLink } from "@/components/atoms/CustomLink/CustomLink";
 import { FadeInView } from "@/components/atoms/FadeInView/FadeInView";
 import { PageWrapper } from "@/components/organisms/PageWrapper/PageWrapper";
@@ -42,11 +43,13 @@ const ProgrammingPortfolioPage = () => {
                 key={occupation.company.name}
                 className="relative aspect-[7/2] w-full scale-100 transition-transform duration-200 ease-in-out hover:scale-110"
               >
-                <img
-                  src={occupation.company.logo}
-                  alt={occupation.company.name}
-                  className="h-full w-full object-contain"
-                />
+                <Link href={occupation.company.url} target="_blank">
+                  <img
+                    src={occupation.company.logo}
+                    alt={occupation.company.name}
+                    className="h-full w-full object-contain"
+                  />
+                </Link>
                 <span className="sr-only">{occupation.company.name}</span>
               </div>
             ))}

src/constants/occupations.ts

@@ -6,6 +6,10 @@ export type OccupationType = {
   fullTime?: boolean;
   company: {
     name: string;
+    /**
+     * URL of the company. This must begin with http(s) so that the router know it is an external link.
+     */
+    url: string;
     logo: string;
     logoLight?: string;
   };
@@ -18,6 +22,7 @@ export const occupations: OccupationType[] = [
     fullTime: true,
     company: {
       name: "Nuro",
+      url: "https://nuro.ai",
       logo: getCdnAsset("media/occupations/nuro_padding_png"),
       logoLight: getCdnAsset("media/occupations/nuro_padding_light_png"),
     },
@@ -28,6 +33,7 @@ export const occupations: OccupationType[] = [
     fullTime: true,
     company: {
       name: "Codeium",
+      url: "https://codeium.com",
       logo: getCdnAsset("media/occupations/codeium_png"),
     },
   },
@@ -36,6 +42,7 @@ export const occupations: OccupationType[] = [
     featured: true,
     company: {
       name: "Airbnb",
+      url: "https://airbnb.com",
       logo: getCdnAsset("media/occupations/airbnb_png"),
     },
   },
@@ -47,20 +54,25 @@ export const occupations: OccupationType[] = [
     featured: true,
     company: {
       name: "Salesforce",
+      url: "https://salesforce.com",
       logo: getCdnAsset("media/occupations/salesforce_png"),
     },
   },
   {
     years: [[2017, 2017]],
     company: {
       name: "Moat (Oracle)",
+      // TODO (kevin): Find a news article about the aquisition.
+      url: "https://oracle.com",
       logo: getCdnAsset("media/occupations/moat_png"),
     },
   },
   {
     years: [[2016, 2016]],
     company: {
       name: "Breathometer",
+      // TODO (kevin): Populate with a business insider link or something of that sort.
+      url: "#",
       logo: getCdnAsset("media/occupations/breathometer_png"),
     },
   },

src/constants/programmingProjects.ts

@@ -57,6 +57,15 @@ export const programmingProjects: ProgrammingProjectType[] = [
     description:
       "Publically available on the Apple app store! A fun UX and iOS engineering project to make scheduling calendar events a smoother and more enjoyable experience. It uses basic machine learning to build a model of your calendar and predict your event so you don't need to type anything in. It also does away with a lot of poor UI elements like date pickers.",
   },
+  {
+    name: "Codeium Playground Demo",
+    subtitle: "NPM Install Codeium",
+    slug: PAGES.CODEIUM_DEMO,
+    image: getCdnAsset("media/programming/thumbnails/codeium_website_png"),
+    category: ProjectCategory.WebApp,
+    description:
+      "Weekend hack to make the Codeium service an open-source, NPM package so other projects can leverage Codeium's unlimited AI autocomplete.",
+  },
   {
     name: "HTMLexa",
     subtitle: "HackPrinceton Fall 2017 Finalist",