Finished introduction section

src/components/pages/Front.page.jsx

@@ -12,7 +12,7 @@ import AppearText from '../text/AppearText';
 import Cdiv from '../core/Cdiv';
 import FadeComponent from '../core/FadeComponent';
 import Introduction from '../sections/Introduction';
-import Skills from '../sections/Skills';
+import Skills from '../sections/Experience';
 
 //============================================================
 // Component
@@ -29,21 +29,21 @@ const FrontPage = () => {
             <Cdiv className="flex-1 h-full">
               <AppearText
                 className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
-                text="Option #1"
+                text="About Me"
                 delay={DELAY * 2.5}
               />
             </Cdiv>
             <Cdiv className="flex-1 h-full">
               <AppearText
                 className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
-                text="Option #2"
+                text="Experience"
                 delay={DELAY * 2.5}
               />
             </Cdiv>
             <Cdiv className="flex-1 h-full">
               <AppearText
                 className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
-                text="Option #3"
+                text="Projects"
                 delay={DELAY * 2.5}
               />
             </Cdiv>

src/components/sections/Experience.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-const Skills = () => {
+const Experience = () => {
   return (
     <div className="w-full flex h-[40vh] justify-center  items-center bg-frost-200">
       <div className="w-full fle md:flex-row flex-col p-4 max-w-5xl gap-4">
         <div className="w-full flex flex-col gap-4">
           <h1 className="text-7xl text-center font-display font-bold text-polar-night-400">
-            Skills
+            Experience
           </h1>
           <div className="w-full flex flex-col list-disc"></div>
         </div>
@@ -14,4 +14,4 @@ const Skills = () => {
     </div>
   );
 };
-export default Skills;
+export default Experience;

src/components/sections/Introduction.jsx

@@ -1,18 +1,48 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const Introduction = () => {
   return (
-    <div className="w-full flex h-[40vh] justify-center items-center bg-frost-200">
+    <div className="w-full flex h-auto md:h-[40vh] justify-center items-center bg-frost-200">
       <div className="w-full flex md:flex-row flex-col p-4 max-w-5xl gap-4">
-        <div className="w-full">
+        <div className="w-full flex flex-col gap-4 font-display text-polar-night-400">
-          <h1 className="text-7xl font-display font-bold text-polar-night-400">Hi, I'm John</h1>
+          <h1 className="text-7xl font-bold">Hi, I'm John</h1>
-          <br />
+          <p className="text-xl">
-          <p className="text-xl font-display text-polar-night-400">
             I am a BSc Computer Science student who loves to program. I a most intrested in
             full-stack development - taking an idea all the way to the end and creating a full
             application, I love working as part of a team and making project with friends. I am also
-            a Linux Enthusiat and I run Garuda Linux as my main OS on all my machines.
+            a Linux Enthusiat and I run Garuda Linux as my main OS on all my machines. Furthermore,
+            I am a private tutor for GCSE and A-level Maths and Computer Science.
           </p>
+          <p className="text-xl">
+            I have worked on an extensive number of projects, such as making my own tutoring company
+            whilst at university, creating a web based revision application for my students, and
+            creating the frontend for a{' '}
+            <a
+              href="https://tensor.software/"
+              className="font-semibold hover:text-aurora-red text-aurora-orange transition-all underline cursor-pointer">
+              secure datasharing startup.
+            </a>
+          </p>
+          <h2 className="text-3xl font-bold mt-16">Technologies I work with:</h2>
+          <div className="w-full grid grid-cols-1 md:grid-cols-2 items-center px-8">
+            <ul className="w-3/4 list-disc flex flex-col gap-2 text-lg">
+              <li>JavaScript / TypeScript</li>
+              <li className="ml-2">Both frontend and backend</li>
+              <li>Node.js</li>
+              <li>Golang</li>
+              <li>React</li>
+              <li>PostgreSQL</li>
+              <li className="ml-2">Including hosting and managing my own databases</li>
+            </ul>
+            <ul className="w-3/4 list-disc flex flex-col gap-2 text-lg">
+              <li>Linux Management</li>
+              <li className="ml-2">I have hosted and managed several linux servers</li>
+              <li>MongoDB</li>
+              <li>Java</li>
+              <li>Wordpress</li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>