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

adding skills section

Browse Source
This commit is contained in:
JohnCosta27
2022-04-10 00:00:11 +01:00
parent cb05338a3f
commit 8fb61a39ae
3 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +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';
//============================================================
// Component
@ -66,12 +67,12 @@ const FrontPage = () => {
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
className="fill-frost-200"
fill-opacity="1"
d="M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,101.3C1120,107,1280,85,1360,74.7L1440,64L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,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}>
<Introduction />
<Skills />
</FadeComponent>
</div>
</>

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

@ -1,16 +1,8 @@
//============================================================
// Essential Imports
//============================================================
import React from 'react';
//============================================================
// Component
//============================================================
const Introduction = () => {
return (
<div className="w-full flex justify-center bg-frost-200">
<div className="w-full flex 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">
<h1 className="text-7xl font-display font-bold text-polar-night-400">Hi, I'm John</h1>
@ -22,12 +14,6 @@ const Introduction = () => {
a Linux Enthusiat and I run Garuda Linux as my main OS on all my machines.
</p>
</div>
<div className="md:w-1/2 w-full flex justify-center">
<img
src="https://i.imgur.com/dlD9BZc.jpeg"
className="rounded-full object-contain max-h-[50vh]"
/>
</div>
</div>
</div>
);

17
src/components/sections/Skills.jsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
const Skills = () => {
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
</h1>
<div className="w-full flex flex-col list-disc"></div>
</div>
</div>
</div>
);
};
export default Skills;