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

feat: experience component getting there

Browse Source
This commit is contained in:
JohnCosta27
2022-04-14 16:18:39 +01:00
parent 8a899a12b2
commit 7a250dd444
4 changed files with 4403 additions and 9769 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14132
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -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/Experience';
import Experience from '../sections/Experience';
//============================================================
// Component
@ -72,7 +72,9 @@ const FrontPage = () => {
</FadeComponent>
<FadeComponent delay={DELAY * 2.5}>
<Introduction />
<Skills />
</FadeComponent>
<FadeComponent delay={DELAY * 2.5}>
<Experience />
</FadeComponent>
</div>
</>

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

@ -2,13 +2,39 @@ import React from 'react';
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 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">
<div className="w-full flex flex-col gap-4">
<h1 className="text-7xl text-center font-display font-bold text-polar-night-400">
Experience
</h1>
<div className="w-full flex flex-col list-disc"></div>
</div>
</div>
<div className="w-full flex justify-center px-4">
<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-4 h-8 flex justify-center items-center">
<div className="w-4 h-4 bg-frost-200 rounded-full z-20"></div>
</div>
<div className="w-4 h-8 flex justify-center items-center">
<div className="w-4 h-4 bg-frost-200 rounded-full z-20"></div>
</div>
<div className="w-4 h-8 flex justify-center items-center">
<div className="w-4 h-4 bg-frost-200 rounded-full z-20"></div>
</div>
<div className="w-1 h-full bg-blue-500 absolute rounded-full"></div>
</div>
<div className="w-full h-full flex flex-col justify-between">
<div className="h-8 flex items-center">
<p className="text-md text-snow-storm-300">14/04/2022</p>
</div>
<div className="h-8 flex items-center">
<p className="text-md text-snow-storm-300">14/04/2022</p>
</div>
<div className="h-8 flex items-center">
<p className="text-md text-snow-storm-300">14/04/2022</p>
</div>
</div>
</div>
</div>
</div>

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

@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
const Introduction = () => {
return (
<div className="w-full flex h-auto md:h-[40vh] justify-center items-center bg-frost-200">
<div className="w-full flex h-auto 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 flex flex-col gap-4 font-display text-polar-night-400">
<h1 className="text-7xl font-bold">Hi, I'm John</h1>