❇️ Improved Spotlight

- Enable open meet - Move trips to spotlight - Add projects in spotlight in place of job
krimlabs · Jan 12, 2024 · bf9c734 · bf9c734
1 parent b39ae97
commit bf9c734
Show file tree

Hide file tree

Showing 13 changed files with 252 additions and 142 deletions.
diff --git a/krimlabs.com.sketch b/krimlabs.com.sketch
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/img/spotlightIcons/mbk.png b/public/img/spotlightIcons/mbk.png
diff --git a/public/img/spotlightIcons/st.png b/public/img/spotlightIcons/st.png
diff --git a/public/img/spotlightIcons/status.png b/public/img/spotlightIcons/status.png
diff --git a/src/components/Spotlight.tsx b/src/components/Spotlight.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { fetchWorkoutStats } from '@src/domain/workouts';
 import { fetchMeditationAggregates } from '@src/domain/meditations';
 import { fetchSleepAggregates } from '@src/domain/sleep';
-import { getLastTripAndEndCityTime } from '@src/domain/content';
 import Img from '@src/components/Img';
 import StateItem, {
   BoltIcon,
@@ -14,6 +13,8 @@ import StateItem, {
   SpaceIcon,
   FireIcon,
 } from '@src/components/StateItem';
+import Travels from '@src/components/spotlight/Travels';
+import Projects from '@src/components/spotlight/Projects';
 
 import type { WorkoutStats } from '@src/domain/workouts';
 import type { StateItemProps } from '@src/components/StateItem';
@@ -118,7 +119,6 @@ function SpotlightBaseCard(props: SpotlightBaseCardProps) {
         'rounded-xl',
         'flex flex-col',
         'py-3 px-4 mb-4',
-        '',
         props.bgColorClass,
         props.textColorClass
       )}
@@ -129,8 +129,8 @@ function SpotlightBaseCard(props: SpotlightBaseCardProps) {
           alt={`${props.title} icon`}
           defaultWidth={240}
           className={clsx(
-            'mr-[-12%] sm:mr-[-10%] md:mr-[-24%] mb-[-48%]',
-            'h-[96px] w-[96px]'
+            'mr-[-8%] sm:mr-[-6%] md:mr-[-24%] mb-[-48%]',
+            'h-[48px] w-[48px] md:h-[96px] md:w-[96px]'
           )}
         />
       </div>
@@ -153,8 +153,8 @@ function OpenMeetContent() {
     <div className="text-sm leading-5 w-[80%]">
       <p>Meeting strangers increases the surface area for luck to land on.</p>
       <p className="mt-2">
-        If you find anything I do interesting, we should meet. No agenda, just a
-        30 minutes meeting. Preferably in person.
+        If you find anything I do interesting, we should meet. 30 minutes.
+        Preferably in person.
       </p>
     </div>
   );
@@ -244,7 +244,7 @@ const txfmStatsFactory = ({
       id: 'Sleep',
       icon: HeartIcon,
       description:
-        'A combination of factors like timing, temperatture, heart rate etc. Score out of 100.',
+        'A combination of factors like timing, temperature, heart rate etc. Score out of 100.',
       itemType: 'count',
       countProps: {
         value: sleepAggregates.latest.sleepIndex.toFixed(0),
@@ -254,7 +254,7 @@ const txfmStatsFactory = ({
       id: 'Time left',
       icon: TimeIcon,
       description:
-        'Assuming that I live until 78 years, this is how many days I have left.',
+        'Assuming that I live until 78 years of age, this is how many days I have left.',
       deathProps: { daysLeft: daysUntilNovember2072() },
       itemType: 'death',
       descriptor: 'days',
@@ -286,27 +286,6 @@ function StateOfBeingContent() {
   );
 }
 
-function CurrentLocationContent() {
-  const { trip, timeAndOffset } = getLastTripAndEndCityTime();
-
-  return (
-    <div>
-      <p className={clsx('text-3xl font-bold')}>{trip.endCity}</p>
-      <p className="text-sm mt-2 opacity-50">Timezone: {timeAndOffset[2]}</p>
-    </div>
-  );
-}
-
-function CurrentJobComponent() {
-  return (
-    <div className="w-[80%] md:w-[90%]">
-      <p className={clsx('text-2xl font-bold')}>
-        Sr. Clojure Engineer at Status
-      </p>
-    </div>
-  );
-}
-
 function ClojureCourseContent() {
   return (
     <div className="w-[80%] md:w-[90%]">
@@ -318,15 +297,6 @@ function ClojureCourseContent() {
 }
 
 const spotlightItems: Record<string, SpotlightBaseCardProps> = {
-  // openMeet: {
-  //   title: 'Open meet',
-  //   contentComponent: OpenMeetContent,
-  //   icon: '/img/spotlightIcons/salad-bowl.png',
-  //   bgColorClass: 'from-[#ebffd3] to-[#ccffa8]',
-  //   ctaLabel: 'Meet me',
-  //   ctaColorClass: 'text-[#3D6520]',
-  //   ctaArrow: 'out'
-  // },
   stateOfBeing: {
     title: 'State of being',
     contentComponent: StateOfBeingContent,
@@ -339,22 +309,33 @@ const spotlightItems: Record<string, SpotlightBaseCardProps> = {
   },
   currentLocation: {
     title: 'Currently in',
-    contentComponent: CurrentLocationContent,
+    contentComponent: Travels,
     icon: '/img/spotlightIcons/globe.png',
     bgColorClass: 'from-[#D3F4FF] to-[#A8E6FF]',
     smallHeading: true,
   },
-  currentJob: {
-    title: 'Current job',
+  projects: {
+    title: 'Projects',
     icon: '/img/spotlightIcons/workbot.png',
-    contentComponent: CurrentJobComponent,
+    contentComponent: Projects,
     bgColorClass: 'from-[#FFE7B7] to-[#FFE0A8]',
     smallHeading: true,
     ctaLabel: 'LinkedIn',
     ctaLink: 'https://www.linkedin.com/in/shivekkhurana/',
     ctaColorClass: 'text-[#AC781C]',
     ctaArrow: 'out',
   },
+  openMeet: {
+    title: 'Open meet',
+    contentComponent: OpenMeetContent,
+    icon: '/img/spotlightIcons/salad-bowl.png',
+    bgColorClass: 'from-[#ebffd3] to-[#ccffa8]',
+    ctaLabel: 'Meet me',
+    ctaColorClass: 'text-[#3D6520]',
+    ctaArrow: 'out',
+    ctaLink: `mailto:khuranashivek@outlook.com?subject=%5BOpen%20Meet%5D%20%7BAdd%20your%20subject%20line%20here%7D&body=Hi%20Shivek%2C%0D%0A%0D%0AI%20am%3A%0D%0A-%20some%0D%0A-%20info%0D%0A-%20about%0D%0A-%20you%0D%0A%0D%0AI%20want%20to%20meet%20you%20because%3A%0D%0A-%20Some%0D%0A-%20info%0D%0A-%20about%0D%0A-%20why%20you%20want%20to%20meet%20me%0D%0A%0D%0AI%20live%20in%3A%20%7Byour%20city%7D%0D%0A%0D%0AI'd%20prefer%20it%20to%20be%3A%20%7Bonline%20or%20offline%7D%0D%0A%0D%0AThanks%20%3A)`,
+  },
+
   clojureCourse: {
     title: 'Want to learn Clojure ?',
     icon: '/img/spotlightIcons/paperclip.png',

diff --git a/src/components/StateItem.tsx b/src/components/StateItem.tsx
@@ -14,7 +14,7 @@ function BoltIcon() {
         className=""
       >
         <path
-          stroke-Linecap="round"
+          strokeLinecap="round"
           strokeLinejoin="round"
           d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
         />
@@ -252,7 +252,7 @@ function StateItem(props: PropsWithChildren<StateItemProps>) {
   return (
     <div className={props.containerClassName || ''}>
       <div className={clsx('flex items-start')}>
-        <div className="w-1/12">
+        <div className="w-6 shrink-0">
           <Icon />
         </div>
         <div

diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
@@ -1,14 +1,16 @@
 import clsx from 'clsx';
-import { useState } from 'react';
 import type { PropsWithChildren } from 'react';
 import { convertDateString } from '@src/utils/time';
-import { Post, MicroPost, Trip } from '@contentlayer/generated';
+import type { Post, MicroPost } from '@contentlayer/generated';
 import type { TimelineItem } from '@src/domain/content';
 
 function PostLink(props: PropsWithChildren<{ post: Post }>) {
-  const { title, slug, publishedOn } = props.post;
+  const { title, slug } = props.post;
   return (
-    <a href={`/blog/${slug}`} className="">
+    <a
+      href={`/blog/${slug}`}
+      className=""
+    >
       <div
         className={clsx(
           'underline underline-offset-4 decoration-gray-200',
@@ -22,11 +24,6 @@ function PostLink(props: PropsWithChildren<{ post: Post }>) {
   );
 }
 
-function TripLog(props: PropsWithChildren<{ trip: Trip }>) {
-  const { createdAt, endCity } = props.trip;
-  return <div className={clsx('text-md leading-6')}>Landed in {endCity}</div>;
-}
-
 function MicroPostLog(props: PropsWithChildren<{ microPost: MicroPost }>) {
   const { body } = props.microPost;
   return (
@@ -47,10 +44,6 @@ function BaseTimelineLog(props: PropsWithChildren<{ t: TimelineItem }>) {
     if (itemType === 'MicroPost') {
       return '/img/timelineIcons/writing-bolt.svg';
     }
-
-    if (itemType === 'Trip') {
-      return '/img/timelineIcons/plane-landing.svg';
-    }
   };
   return (
     <div className={clsx('flex items-center', 'group')}>
@@ -63,8 +56,12 @@ function BaseTimelineLog(props: PropsWithChildren<{ t: TimelineItem }>) {
       >
         {convertDateString(t.createdAt || t.publishedOn).split(',')[0]}
       </div>
-      <div className='w-1/12'>
-        <img src={getSrc(t.type)} alt={`${t.type} icon`} className={clsx('w-6 h-6', 'opacity-50 group-hover:opacity-90')} />
+      <div className="w-1/12">
+        <img
+          src={getSrc(t.type)}
+          alt={`${t.type} icon`}
+          className={clsx('w-6 h-6', 'opacity-50 group-hover:opacity-90')}
+        />
       </div>
       <div className={clsx('w-8/12', 'text-md leading-6', 'my-2')}>
         {props.children}
@@ -77,8 +74,6 @@ function ComputedComp(props: PropsWithChildren<{ t: TimelineItem }>) {
   const { t } = props;
   if (t.type === 'Post') {
     return <PostLink post={t} />;
-  } else if (t.type === 'Trip') {
-    return <TripLog trip={t} />;
   } else if (t.type === 'MicroPost') {
     return <MicroPostLog microPost={t} />;
   }
@@ -93,7 +88,7 @@ function TimelineLogs(
       {timelineItems[year].map((t: TimelineItem) => {
         return (
           <BaseTimelineLog
-            key={t.slug || t.title || `${t.createdAt}-${t.startCity}`}
+            key={t.slug || t.title}
             t={t}
           >
             <ComputedComp t={t} />
@@ -105,48 +100,68 @@ function TimelineLogs(
 }
 
 function Filters(props: { selected: string }) {
-  const types = ['All', 'Posts', 'Trips', 'Micro']
+  const types = ['All', 'Posts', 'Micro'];
   return (
     <div className={clsx('flex', 'mt-4 md:mt-0 md:ml-8')}>
-      {types.map(t => {
-        const thisSelected = props.selected === t
-        return <a
-          href={`/${t === 'All' ? "" : t.toLowerCase()}`}
-          key={t}
-        >
-          {thisSelected &&
-            <div className={clsx(
-              'w-12 h-12 rounded-full',
-              'bg-gradient-to-r from-pink-200 to-yellow-400 blur-lg'
-            )} />}
+      {types.map((t) => {
+        const thisSelected = props.selected === t;
+        return (
+          <a
+            href={`/${t === 'All' ? '' : t.toLowerCase()}`}
+            key={t}
+          >
+            {thisSelected && (
+              <div
+                className={clsx(
+                  'w-12 h-12 rounded-full',
+                  'bg-gradient-to-r from-pink-200 to-yellow-400 blur-lg'
+                )}
+              />
+            )}
 
-          <div className={clsx(
-            { 'border border-gray-300': !thisSelected },
-            'rounded',
-            'px-5 py-1 mr-4',
-            'font-bold text-sm',
-            'cursor-pointer',
-            { "bg-black text-white border-black": thisSelected },
-            { 'backdrop-blur-md -mt-12': thisSelected })}>
-            {t}
-          </div>
-        </a>
+            <div
+              className={clsx(
+                { 'border border-gray-300': !thisSelected },
+                'rounded',
+                'px-5 py-1 mr-4',
+                'font-bold text-sm',
+                'cursor-pointer',
+                { 'bg-black text-white border-black': thisSelected },
+                { 'backdrop-blur-md -mt-12': thisSelected }
+              )}
+            >
+              {t}
+            </div>
+          </a>
+        );
       })}
     </div>
   );
 }
 
-function Timeline({ timelineItems, filter }: { timelineItems: Record<number, TimelineItem[]>, filter: string }) {
+function Timeline({
+  timelineItems,
+  filter,
+}: {
+  timelineItems: Record<number, TimelineItem[]>;
+  filter: string;
+}) {
   return (
     <section className="selection:bg-fuchsia-300 selection:text-fuchsia-900">
       <Filters selected={filter} />
       {Object.keys(timelineItems)
         .sort((a: string, b: string) => parseInt(b) - parseInt(a))
         .map((year: string) => {
           return (
-            <div key={year} className="pl-0 md:pl-8">
+            <div
+              key={year}
+              className="pl-0 md:pl-8"
+            >
               <div className="font-bold text-xs opacity-60 mt-8">{year}</div>
-              <TimelineLogs year={year} timelineItems={timelineItems} />
+              <TimelineLogs
+                year={year}
+                timelineItems={timelineItems}
+              />
             </div>
           );
         })}