JohnCosta27/JohnTech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
JohnCosta27
2022-04-21 00:10:43 +01:00
parent 24e501724a
commit c8f2e633cc
13 changed files with 954 additions and 1284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"

2028
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

6
src/components/App.jsx
View File

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

10
src/components/core/Cdiv.jsx
View File

@ -2,14 +2,18 @@
// Essential Imports
//============================================================
import React from 'react';
import clsx from 'clsx';
import React from "react";
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;

15
src/components/core/FadeComponent.jsx
View File

@ -2,19 +2,19 @@
// Essential Imports
//============================================================
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import clsx from "clsx";
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>

15
src/components/pages/Front.page.jsx
View File

@ -2,17 +2,17 @@
// Essential Imports
//============================================================
import React from 'react';
import React from "react";
//============================================================
// Imported Components
//============================================================
import AppearText from '../text/AppearText';
import Cdiv from '../core/Cdiv';
import FadeComponent from '../core/FadeComponent';
import Introduction from '../sections/Introduction';
import Experience from '../sections/Experience';
import AppearText from "../text/AppearText";
import Cdiv from "../core/Cdiv";
import FadeComponent from "../core/FadeComponent";
import Introduction from "../sections/Introduction";
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}>

45
src/components/sections/Experience.jsx
View File

@ -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
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]}
</p>
</div>
</div>

38
src/components/sections/Introduction.jsx
View File

@ -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 = () => {
<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
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.
</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{' '}
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">
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>

16
src/components/text/AppearText.jsx
View File

@ -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 (
<>
<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>
</>

2
src/index.css
View File

@ -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;

10
src/index.jsx
View File

@ -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(<App />, document.getElementById('root'));
ReactDOM.render(<App />, document.getElementById("root"));

44
tailwind.config.js
View File

@ -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"],
},
},
},

8
vite.config.js
View File

@ -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"),
},
},
});