+
setCurrentSection(0)}
+ >
14/04/2022
-
+
setCurrentSection(1)}
+ >
14/04/2022
-
+
setCurrentSection(2)}
+ >
14/04/2022
-
Hello World
+
{experienceTitle[currentSection]}
- Dolor sit est sint quis labore culpa. Eiusmod tempor elit amet culpa ad enim nisi
- 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
+ {experience[currentSection]}
diff --git a/src/components/sections/Introduction.jsx b/src/components/sections/Introduction.jsx
index ba87b1c..e06c6f9 100644
--- a/src/components/sections/Introduction.jsx
+++ b/src/components/sections/Introduction.jsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
const Introduction = () => {
return (
@@ -8,23 +8,29 @@ const Introduction = () => {
Hi, I'm John
- 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. Furthermore,
- I am a private tutor for GCSE and A-level Maths and Computer Science.
+ 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.
+ Furthermore, I am a private tutor for GCSE and A-level Maths and
+ Computer Science.
- 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{' '}
+ 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{" "}
+ className="font-semibold hover:text-aurora-red text-aurora-orange transition-all underline cursor-pointer"
+ >
secure datasharing startup.
-
Technologies I work with:
+
+ Technologies I work with:
+
- JavaScript / TypeScript
@@ -33,11 +39,15 @@ const Introduction = () => {
- Golang
- React
- PostgreSQL
- - Including hosting and managing my own databases
+ -
+ Including hosting and managing my own databases
+
- Linux Management
- - I have hosted and managed several linux servers
+ -
+ I have hosted and managed several linux servers
+
- MongoDB
- Java
- Wordpress
diff --git a/src/components/text/AppearText.jsx b/src/components/text/AppearText.jsx
index 23dacd9..ad83d39 100644
--- a/src/components/text/AppearText.jsx
+++ b/src/components/text/AppearText.jsx
@@ -2,19 +2,19 @@
// Essential Imports
//============================================================
-import React, { useState, useEffect } from 'react';
-import clsx from 'clsx';
+import React, { useState, useEffect } from "react";
+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 (
<>
-
+
{text}
diff --git a/src/index.css b/src/index.css
index e9b2757..5268323 100644
--- a/src/index.css
+++ b/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;
diff --git a/src/index.jsx b/src/index.jsx
index a46a420..f3192b8 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './components/App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
-import './index.css';
+import "./index.css";
-ReactDOM.render(, document.getElementById('root'));
+ReactDOM.render(, document.getElementById("root"));
diff --git a/tailwind.config.js b/tailwind.config.js
index ebb759f..9a86e13 100644
--- a/tailwind.config.js
+++ b/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': {
- 100: '#4C566A',
- 200: '#434C5E',
- 300: '#3B4252',
- 400: '#2E3440',
+ "polar-night": {
+ 100: "#4C566A",
+ 200: "#434C5E",
+ 300: "#3B4252",
+ 400: "#2E3440",
},
- 'snow-storm': {
- 100: '#ECEFF4',
- 200: '#E5E9F0',
- 300: '#D8DEE9',
+ "snow-storm": {
+ 100: "#ECEFF4",
+ 200: "#E5E9F0",
+ 300: "#D8DEE9",
},
frost: {
- 100: '#8FBCBB',
- 200: '#88C0D0',
- 300: '#81A1C1',
- 400: '#5E81AC',
+ 100: "#8FBCBB",
+ 200: "#88C0D0",
+ 300: "#81A1C1",
+ 400: "#5E81AC",
},
aurora: {
- red: '#BF616A',
- orange: '#D08770',
- yellow: '#EBCB8B',
- green: '#A3BE8C',
- purple: '#B48EAD',
+ red: "#BF616A",
+ orange: "#D08770",
+ yellow: "#EBCB8B",
+ green: "#A3BE8C",
+ purple: "#B48EAD",
},
},
fontFamily: {
- display: ['Inter'],
+ display: ["Inter"],
},
},
},
diff --git a/vite.config.js b/vite.config.js
index 634be23..f50ca6c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,13 +1,13 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import path from 'path';
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
- '@': path.resolve(__dirname, './src'),
+ "@": path.resolve(__dirname, "./src"),
},
},
});