feat: experience section is now reactive, need to do content for it.

package.json

@@ -14,6 +14,7 @@
   "license": "ISC",
   "devDependencies": {
     "@vitejs/plugin-react": "^1.3.0",
+    "autoprefixer": "^10.4.4",
     "postcss": "^8.4.5",
     "tailwindcss": "^3.0.2",
     "vite": "^2.9.1"

src/components/App.jsx

@@ -2,14 +2,14 @@
 // Essential Imports
 //============================================================
 
-import React from 'react';
+import React from "react";
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 //============================================================
 // Pages
 //============================================================
 
-import FrontPage from './pages/Front.page';
+import FrontPage from "./pages/Front.page";
 
 const App = () => {
   return (

src/components/core/Cdiv.jsx

@@ -2,14 +2,18 @@
 // Essential Imports
 //============================================================
 
-import React from 'react';
+import React from "react";
-import clsx from 'clsx';
+import clsx from "clsx";
 
 //============================================================
 // Component
 //============================================================
 
 const Cdiv = ({ className, children }) => {
-  return <div className={clsx('flex justify-center items-center', className)}>{children}</div>;
+  return (
+    <div className={clsx("flex justify-center items-center", className)}>
+      {children}
+    </div>
+  );
 };
 export default Cdiv;

src/components/core/FadeComponent.jsx

@@ -2,19 +2,19 @@
 // Essential Imports
 //============================================================
 
-import clsx from 'clsx';
+import clsx from "clsx";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 
 //============================================================
 // Component
 //============================================================
 
 const FadeComponent = ({ delay, children }) => {
-  const [showComponent, setShowComponent] = useState('opacity-0');
+  const [showComponent, setShowComponent] = useState("opacity-0");
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setShowComponent('opacity-100');
+      setShowComponent("opacity-100");
     }, delay);
 
     return () => {
@@ -24,7 +24,12 @@ const FadeComponent = ({ delay, children }) => {
 
   return (
     <div className="w-full bg-polar-night-400">
-      <div className={clsx('w-full transition-all ease-in-out duration-500 ', showComponent)}>
+      <div
+        className={clsx(
+          "w-full transition-all ease-in-out duration-500 ",
+          showComponent
+        )}
+      >
         {children}
       </div>
     </div>

src/components/pages/Front.page.jsx

@@ -2,17 +2,17 @@
 // Essential Imports
 //============================================================
 
-import React from 'react';
+import React from "react";
 
 //============================================================
 // Imported Components
 //============================================================
 
-import AppearText from '../text/AppearText';
+import AppearText from "../text/AppearText";
-import Cdiv from '../core/Cdiv';
+import Cdiv from "../core/Cdiv";
-import FadeComponent from '../core/FadeComponent';
+import FadeComponent from "../core/FadeComponent";
-import Introduction from '../sections/Introduction';
+import Introduction from "../sections/Introduction";
-import Experience from '../sections/Experience';
+import Experience from "../sections/Experience";
 
 //============================================================
 // Component
@@ -67,7 +67,8 @@ const FrontPage = () => {
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
             <path
               className="fill-frost-200"
-              d="M0,192L120,202.7C240,213,480,235,720,240C960,245,1200,235,1320,229.3L1440,224L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
+              d="M0,192L120,202.7C240,213,480,235,720,240C960,245,1200,235,1320,229.3L1440,224L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"
+            ></path>
           </svg>
         </FadeComponent>
         <FadeComponent delay={DELAY * 2.5}>

src/components/sections/Experience.jsx

@@ -1,6 +1,12 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
+
+const experienceTitle = ["Real Tutor", "Tensorcrypt", "SSC Website"]
+const experience = ["Hello", "World", "!"];
 
 const Experience = () => {
+  const [currentSection, setCurrentSection] = useState(0);
+  useEffect(() => console.log(currentSection), [currentSection]);
+
   return (
     <div className="w-full flex flex-col justify-center  items-center bg-frost-200 py-12">
       <div className="w-full flex md:flex-row flex-col p-4 max-w-5xl gap-4">
@@ -14,34 +20,49 @@ const Experience = () => {
         <div className="w-full max-w-7xl flex bg-polar-night-400 py-4 rounded-md">
           <div className="w-12 flex flex-col justify-between items-center h-96 relative">
             <div className="w-8 h-8 flex justify-center items-center">
-              <div className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"></div>
+              <div
+                className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
+                onClick={() => setCurrentSection(0)}
+              ></div>
             </div>
             <div className="w-8 h-8 flex justify-center items-center">
-              <div className="w-4 h-4 bg-frost-200 rounded-full z-20"></div>
+              <div
+                className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
+                onClick={() => setCurrentSection(1)}
+              ></div>
             </div>
             <div className="w-8 h-8 flex justify-center items-center">
-              <div className="w-4 h-4 bg-frost-200 rounded-full z-20"></div>
+              <div
+                className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
+                onClick={() => setCurrentSection(2)}
+              ></div>
             </div>
             <div className="w-1 h-full bg-blue-500 absolute rounded-full"></div>
           </div>
           <div className="w-24 h-full flex flex-col justify-between">
-            <div className="h-8 flex items-center">
+            <div
+              className="h-8 flex items-center"
+              onClick={() => setCurrentSection(0)}
+            >
               <p className="text-md text-snow-storm-300">14/04/2022</p>
             </div>
-            <div className="h-8 flex items-center">
+            <div
+              className="h-8 flex items-center"
+              onClick={() => setCurrentSection(1)}
+            >
               <p className="text-md text-snow-storm-300">14/04/2022</p>
             </div>
-            <div className="h-8 flex items-center">
+            <div
+              className="h-8 flex items-center"
+              onClick={() => setCurrentSection(2)}
+            >
               <p className="text-md text-snow-storm-300">14/04/2022</p>
             </div>
           </div>
           <div className="w-full h-full p-4 flex flex-col items-center gap-2">
-            <h1 className="text-2xl text-snow-storm-100">Hello World</h1>
+            <h1 className="text-2xl text-snow-storm-100">{experienceTitle[currentSection]}</h1>
             <p className="text-md text-snow-storm-100">
-              Dolor sit est sint quis labore culpa. Eiusmod tempor elit amet culpa ad enim nisi
+              {experience[currentSection]}
-              consequat duis consequat commodo eu quis id. Nostrud ut consectetur ut occaecat. Dolor
-              sit est sint quis labore culpa. Eiusmod tempor elit amet culpa ad enim nisi Dolor sit
-              est sint quis labore culpa. Eiusmod tempor elit amet culpa ad enim nisi
             </p>
           </div>
         </div>

src/components/sections/Introduction.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 const Introduction = () => {
   return (
@@ -8,23 +8,29 @@ const Introduction = () => {
         <div className="w-full flex flex-col gap-4 font-display text-polar-night-400">
           <h1 className="text-7xl font-bold">Hi, I'm John</h1>
           <p className="text-xl">
-            I am a BSc Computer Science student who loves to program. I a most intrested in
+            I am a BSc Computer Science student who loves to program. I a most
-            full-stack development - taking an idea all the way to the end and creating a full
+            intrested in full-stack development - taking an idea all the way to
-            application, I love working as part of a team and making project with friends. I am also
+            the end and creating a full application, I love working as part of a
-            a Linux Enthusiat and I run Garuda Linux as my main OS on all my machines. Furthermore,
+            team and making project with friends. I am also a Linux Enthusiat
-            I am a private tutor for GCSE and A-level Maths and Computer Science.
+            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
+            I have worked on an extensive number of projects, such as making my
-            whilst at university, creating a web based revision application for my students, and
+            own tutoring company whilst at university, creating a web based
-            creating the frontend for a{' '}
+            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">
+              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>
+          <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>
@@ -33,11 +39,15 @@ const Introduction = () => {
               <li>Golang</li>
               <li>React</li>
               <li>PostgreSQL</li>
-              <li className="ml-2">Including hosting and managing my own databases</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 className="ml-2">
+                I have hosted and managed several linux servers
+              </li>
               <li>MongoDB</li>
               <li>Java</li>
               <li>Wordpress</li>

src/components/text/AppearText.jsx

@@ -2,19 +2,19 @@
 // Essential Imports
 //============================================================
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import clsx from 'clsx';
+import clsx from "clsx";
 
 //============================================================
 // Component
 //============================================================
 
 const AppearText = ({ text, delay, className }) => {
-  const [showText, setShowText] = useState('opacity-0');
+  const [showText, setShowText] = useState("opacity-0");
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setShowText('opacity-100');
+      setShowText("opacity-100");
     }, delay);
 
     return () => {
@@ -24,7 +24,13 @@ const AppearText = ({ text, delay, className }) => {
 
   return (
     <>
-      <h1 className={clsx('transition-all ease-in-out duration-500', className, showText)}>
+      <h1
+        className={clsx(
+          "transition-all ease-in-out duration-500",
+          className,
+          showText
+        )}
+      >
         {text}
       </h1>
     </>

src/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 @tailwind base;
 @tailwind components;

src/index.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import App from './components/App';
+import App from "./components/App";
 
-import './index.css';
+import "./index.css";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));

tailwind.config.js

@@ -1,35 +1,39 @@
 module.exports = {
-  content: ['./components/**/*.{html,js,jsx}', './public/index.html', './src/**/*.{html,js,jsx}'],
+  content: [
+    "./components/**/*.{html,js,jsx}",
+    "./public/index.html",
+    "./src/**/*.{html,js,jsx}",
+  ],
   theme: {
     extend: {
       colors: {
-        'polar-night': {
+        "polar-night": {
-          100: '#4C566A',
+          100: "#4C566A",
-          200: '#434C5E',
+          200: "#434C5E",
-          300: '#3B4252',
+          300: "#3B4252",
-          400: '#2E3440',
+          400: "#2E3440",
         },
-        'snow-storm': {
+        "snow-storm": {
-          100: '#ECEFF4',
+          100: "#ECEFF4",
-          200: '#E5E9F0',
+          200: "#E5E9F0",
-          300: '#D8DEE9',
+          300: "#D8DEE9",
         },
         frost: {
-          100: '#8FBCBB',
+          100: "#8FBCBB",
-          200: '#88C0D0',
+          200: "#88C0D0",
-          300: '#81A1C1',
+          300: "#81A1C1",
-          400: '#5E81AC',
+          400: "#5E81AC",
         },
         aurora: {
-          red: '#BF616A',
+          red: "#BF616A",
-          orange: '#D08770',
+          orange: "#D08770",
-          yellow: '#EBCB8B',
+          yellow: "#EBCB8B",
-          green: '#A3BE8C',
+          green: "#A3BE8C",
-          purple: '#B48EAD',
+          purple: "#B48EAD",
         },
       },
       fontFamily: {
-        display: ['Inter'],
+        display: ["Inter"],
       },
     },
   },

vite.config.js

@@ -1,13 +1,13 @@
-import { defineConfig } from 'vite';
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react';
+import react from "@vitejs/plugin-react";
-import path from 'path';
+import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
 });