moved content to firestore, queried with react-query

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.7",
+    "@tanstack/react-query": "^4.22.4",
+    "@tanstack/react-query-devtools": "^4.24.6",
     "classnames": "^2.3.1",
     "firebase": "^9.16.0",
     "react": "^18.0.0",

src/components/About.tsx

@@ -1,11 +1,13 @@
-import { aboutText } from '~/content';
-
 import Section from './Section';
 
 const About = () => {
   return (
     <Section title="About">
-      <p className="text-gray-500 text-xs  text-justify">{aboutText}</p>
+      <p className="text-gray-500 text-xs  text-justify">
+        Nathan is a passionate, driven, and highly ambitious worker who takes immense pride in the
+        things he creates. He cares deeply about the end user experience, and is dedicated to
+        providing humane and beautiful interfaces for everyday use.
+      </p>
     </Section>
   );
 };

src/components/Education.tsx

@@ -1,15 +1,26 @@
-import { education } from '~/content';
+import { EducationType, useEducation } from '~/store/education';
 
 import Section from './Section';
 
-const Education = () => {
+const EducationItem = ({ education }: { education: EducationType }) => {
   return (
-    <Section title="Education">
+    <div>
       <h4 className="text-xs  w-40  text-gray-500">
         <span className="font-medium text-gray-700">{education.title}</span>, {education.subTitle}
       </h4>
       <h5 className="text-xs mt-1 font-medium text-motif">{education.school}</h5>
       <h5 className="text-xs opacity-80 mt-1 text-motif">{education.duration}</h5>
+    </div>
+  );
+};
+
+const Education = () => {
+  const education = useEducation();
+  return (
+    <Section title="Education">
+      {education.data?.map((item) => (
+        <EducationItem key={item.title} education={item} />
+      ))}
     </Section>
   );
 };

src/components/Experience.tsx

@@ -1,20 +1,42 @@
 import classnames from 'classnames';
+import { BsDot } from 'react-icons/bs';
 import { HiChevronRight } from 'react-icons/hi';
 
-import { jobs } from '~/content';
+import { JobType, useJobs } from '~/store/jobs';
 
-import Job from './Job';
 import Section from './Section';
+import SubHeading from './SubHeading';
+
+const Job = ({ job }: { job: JobType }) => {
+  return (
+    <div className="text-motif">
+      <SubHeading text={job.title} />
+      <div className="flex items-center  space-x-1  text-xs  tracking-wider ">
+        <span className="font-medium ">{job.company}</span>
+        <BsDot className="h-4 w-4" />
+        <span className="opacity-90"> {job.duration}</span>
+      </div>
+      <p className="text-xs text-gray-500 text-justify mt-2 mb-2">{job.description}</p>
+      {job.responsibilities.map((resp) => (
+        <li key={resp} className="text-xs text-gray-500 ml-5">
+          {resp}
+        </li>
+      ))}
+    </div>
+  );
+};
 
 const Experience = () => {
+  const jobs = useJobs();
+
   return (
     <Section title="Experience">
-      {jobs.map((job, i) => (
+      {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.length - 1 && ''
+            i !== jobs.data.length - 1 && ''
           )}>
           <HiChevronRight className="h-4 w-4  rounded-full shrink-0  mr-1 -translate-x-1 text-accent" />
           <Job job={job} />