gave everything an id

.eslintrc.json

@@ -23,6 +23,7 @@
     "prettier/prettier": "off",
     "import/no-unresolved": "off",
     "import/named": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
     "import/order": [
       "warn",
       {

src/components/Education.tsx

@@ -24,7 +24,7 @@ const Education = () => {
       {education.isLoading ? (
         <Skeleton count={4} />
       ) : (
-        education.data?.map((item) => <EducationItem key={item.title} education={item} />)
+        education.data?.map((item) => <EducationItem key={item.id} education={item} />)
       )}
     </Section>
   );

src/components/Experience.tsx

@@ -36,13 +36,8 @@ const Experience = () => {
       {jobs.isLoading ? (
         <Skeleton count={6} />
       ) : (
-        jobs.data?.map((job, i) => (
-          <div
-            key={i}
-            className={classnames(
-              'pb-7 flex items-start ml-1  translate-y-1 -translate-x-1',
-              i !== jobs.data.length - 1 && ''
-            )}>
+        jobs.data?.map((job) => (
+          <div key={job.id} className="pb-7 flex items-start ml-1  translate-y-1 -translate-x-1">
             <HiChevronRight className="h-4 w-4  rounded-full shrink-0  mr-1 -translate-x-1 text-accent" />
             <Job job={job} />
           </div>

src/components/Skills.tsx

@@ -17,7 +17,7 @@ const Skills = () => {
         <Skeleton count={4} />
       ) : (
         technicalSkills.data?.map((skill) => (
-          <li key={skill.skill} className="text-xs text-gray-500">
+          <li key={skill.id} className="text-xs text-gray-500">
             {skill.skill}
           </li>
         ))
@@ -28,7 +28,7 @@ const Skills = () => {
         <Skeleton count={4} />
       ) : (
         leadershipSkills.data?.map((skill) => (
-          <li key={skill.skill} className="text-xs text-gray-500">
+          <li key={skill.id} className="text-xs text-gray-500">
             {skill.skill}
           </li>
         ))

src/last-updated.ts

@@ -1 +1 @@
-export const lastUpdated = 100;
+export const lastUpdated = 0;

src/main.tsx

@@ -6,7 +6,6 @@ import './index.css';
 import { FirebaseContext } from './contexts/FirebaseContext';
 import { QueryContext } from './contexts/QueryContext';
 
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <FirebaseContext>

src/store/education.ts

@@ -5,6 +5,7 @@ import { education } from '~/store/store-backup';
 import { db } from '~/contexts/FirebaseContext';
 
 export interface EducationType {
+  id: string;
   title: string;
   subTitle: string;
   school: string;
@@ -14,7 +15,7 @@ export interface EducationType {
 export function useEducation() {
   return useQuery<EducationType[]>(['education'], () =>
     getDocs(collection(db, 'education')).then(
-      (r) => r.docs.map((doc) => doc.data()) as EducationType[],
+      (r) => r.docs.map((doc) => ({ ...doc.data(), id: doc.id })) as EducationType[],
       () => education
     )
   );

src/store/jobs.ts

@@ -5,6 +5,7 @@ import { jobs } from '~/store/store-backup';
 import { db } from '~/contexts/FirebaseContext';
 
 export interface JobType {
+  id: string;
   title: string;
   company: string;
   duration: string;
@@ -15,7 +16,7 @@ export interface JobType {
 export function useJobs() {
   return useQuery<JobType[]>(['jobs'], () =>
     getDocs(collection(db, 'jobs')).then(
-      (r) => r.docs.map((doc) => doc.data()) as JobType[],
+      (r) => r.docs.map((doc) => ({ ...doc.data(), id: doc.id })) as JobType[],
       () => jobs
     )
   );

src/store/skills.ts

@@ -4,21 +4,22 @@ import { collection, getDocs } from 'firebase/firestore';
 import { db } from '~/contexts/FirebaseContext';
 
 export interface SkillType {
+  id: string;
   skill: string;
 }
 
 export function useTechnicalSkills() {
   return useQuery(['skills', 'technical'], () =>
     getDocs(collection(db, 'skills_technical')).then(
-      (r) => r.docs.map((doc) => doc.data()) as SkillType[]
+      (r) => r.docs.map((doc) => ({ ...doc.data(), id: doc.id })) as SkillType[]
     )
   );
 }
 
 export function useLeadershipSkills() {
   return useQuery(['skills', 'leadership'], () =>
     getDocs(collection(db, 'skills_leadership')).then(
-      (r) => r.docs.map((doc) => doc.data()) as SkillType[]
+      (r) => r.docs.map((doc) => ({ ...doc.data(), id: doc.id })) as SkillType[]
     )
   );
 }

src/store/store-backup.ts

@@ -4,6 +4,7 @@ import { JobType } from './jobs';
 
 export const education: EducationType[] = [
   {
+    id: '1',
     title: 'Bachelor of Computer Science',
     subTitle: 'Minor in Business Administration (CO-OP)',
     school: 'University of New Brunswick',
@@ -30,6 +31,7 @@ export const professionalSkills: string[] = [
 
 export const jobs: JobType[] = [
   {
+    id: '1',
     title: 'Frontend Developer',
     company: 'Magnet Forensics',
     duration: 'July 2022 - Present',
@@ -41,6 +43,7 @@ export const jobs: JobType[] = [
     ]
   },
   {
+    id: '2',
     title: 'Lead Frontend Developer - Lead UX Designer',
     company: 'Gray Wolf Analytics Inc.',
     duration: 'January 2021 - July 2022',
@@ -52,6 +55,7 @@ export const jobs: JobType[] = [
     ]
   },
   {
+    id: '3',
     title: 'Software Developer',
     company: 'IBM',
     duration: 'September 2017 - September 2020',

tailwind.config.js

@@ -1,10 +1,10 @@
 module.exports = {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
   theme: {
     extend: {
       colors: {
         motif: '#A57A58',
-        accent: '#8B8064'
+        accent: '#0ea5e9'
       },
       fontFamily: {
         body: ['Roboto', 'sans-serif']