Finished experience component

src/components/sections/Experience.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from "react";
 import clsx from "clsx";
 import Tensorcrypt from "./Tensorcrypt";
+import Realtutor from "./Realtutor";
+import Webdev from './Webdev';
 
 const Experience = () => {
   const [currentSection, setCurrentSection] = useState(0);
@@ -14,13 +16,17 @@ const Experience = () => {
     }, 250);
   };
 
+  /**
+   * This could be done with React-router,
+   * However this makes the animations easier - no need to over complciate it.
+   */
   const getText = (index) => {
     if (index == 0) {
       return <Tensorcrypt />;
     } else if (index == 1) {
-      return <Tensorcrypt />;
+      return <Realtutor />;
     } else {
-      return <Tensorcrypt />;
+      return <Webdev />;
     }
   };
 
@@ -61,10 +67,10 @@ const Experience = () => {
               <p className="text-lg text-snow-storm-300">Tensorcrypt</p>
             </div>
             <div className="h-8 flex items-center">
-              <p className="text-md text-snow-storm-300">14/04/2022</p>
+              <p className="text-lg text-snow-storm-300">Real Tutor</p>
             </div>
             <div className="h-8 flex items-center">
-              <p className="text-md text-snow-storm-300">14/04/2022</p>
+              <p className="text-lg text-snow-storm-300">Web dev</p>
             </div>
           </div>
           <div className={clsx("w-full h-full p-4 flex flex-col items-center")}>

src/components/sections/Realtutor.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const Realtutor = () => {
+  return (
+    <div className="w-full flex flex-col items-center text-4xl text-snow-storm-300 gap-4">
+      <h1>Real tutor</h1>
+      <p className="text-xl">
+        A company that I founded to provide online affordable tutoring in a
+        series of subjects. I have and still am a private tutor and I wanted to
+        grow my services and provide tutoring to more people, so I made a
+        company where I could hire free lance tutors to teach subjects which I
+        myself cannot.
+      </p>
+      <h2 className="text-3xl">Software Made</h2>
+      <p className="text-xl">I made software to track students progress as well as students and tutors lessons, I used this to make sure I knew what all the students were doing and how they were doing.</p>
+    </div>
+  );
+};
+export default Realtutor;

src/components/sections/Webdev.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+const Webdev = () => {
+  return (
+    <div className="w-full flex flex-col items-center text-4xl text-snow-storm-300 gap-4">
+      <h1>Free lance Web Development</h1>
+      <p className="text-xl">
+        I also work as a Free lance web developer, and I have worked on various
+        projects such as:
+      </p>
+      <ul className="px-4 text-lg list-disc">
+        <li>SCC Website (A security lab at my university).</li>
+        <li>This website.</li>
+        <li>Rio Illustrates (A portfolio website for a great artist).</li>
+      </ul>
+      <br />
+
+      <p className="text-xl">
+        I also make Web Applications, these are under the projects section.
+      </p>
+    </div>
+  );
+};
+export default Webdev;