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

Finished introduction section

Browse Source
This commit is contained in:
JohnCosta27
2022-04-10 13:51:21 +01:00
parent 3d6ec6aeec
commit 8a899a12b2
3 changed files with 43 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
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/Skills';
import Skills from '../sections/Experience';
//============================================================
// Component
@ -29,21 +29,21 @@ const FrontPage = () => {
<Cdiv className="flex-1 h-full">
<AppearText
className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #1"
text="About Me"
delay={DELAY * 2.5}
/>
</Cdiv>
<Cdiv className="flex-1 h-full">
<AppearText
className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #2"
text="Experience"
delay={DELAY * 2.5}
/>
</Cdiv>
<Cdiv className="flex-1 h-full">
<AppearText
className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #3"
text="Projects"
delay={DELAY * 2.5}
/>
</Cdiv>

6
src/components/sections/Skills.jsx → src/components/sections/Experience.jsx
View File

@ -1,12 +1,12 @@
import React from 'react';
const Skills = () => {
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 gap-4">
<h1 className="text-7xl text-center font-display font-bold text-polar-night-400">
Skills
Experience
</h1>
<div className="w-full flex flex-col list-disc"></div>
</div>
@ -14,4 +14,4 @@ const Skills = () => {
</div>
);
};
export default Skills;
export default Experience;

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

@ -1,18 +1,48 @@
import React from 'react';
import { Link } from 'react-router-dom';
const Introduction = () => {
return (
<div className="w-full flex h-[40vh] justify-center items-center bg-frost-200">
<div className="w-full flex h-auto md: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>
<br />
<p className="text-xl font-display text-polar-night-400">
<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.
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{' '}
<a
href="https://tensor.software/"
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>
<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>
<li className="ml-2">Both frontend and backend</li>
<li>Node.js</li>
<li>Golang</li>
<li>React</li>
<li>PostgreSQL</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>MongoDB</li>
<li>Java</li>
<li>Wordpress</li>
</ul>
</div>
</div>
</div>
</div>