78 lines
3.1 KiB
JavaScript
78 lines
3.1 KiB
JavaScript
import React from "react";
|
|
import ProjectCard from "./ProjectCard";
|
|
|
|
const Projects = () => {
|
|
return (
|
|
<div className="w-full flex flex-col justify-center items-center bg-frost-200 py-12">
|
|
<div className="w-full flex flex-col p-4 max-w-screen-2xl gap-4">
|
|
<h1 className="w-full text-7xl text-center font-display font-bold text-polar-night-400">
|
|
Projects
|
|
</h1>
|
|
<div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<ProjectCard
|
|
title="Real Tutor"
|
|
liveUrl="https://realtutor.johncosta.tech/"
|
|
gitUrl="https://github.com/JohnCosta27/RealTutorMERN"
|
|
>
|
|
<p className="text-xl text-snow-storm-100">
|
|
A lesson and progress management system which allowed tutors at my
|
|
company to schedule lessons, add repots and keep track of students
|
|
progress. Built using the MERN stack.
|
|
</p>
|
|
<p className="text-xl text-snow-storm-100">
|
|
Use the following credentitals to play around:
|
|
</p>
|
|
<ul className="text-lg text-snow-storm-100">
|
|
<li>Username: 1@tutor.com</li>
|
|
<li>Password: SafePassword123.</li>
|
|
</ul>
|
|
</ProjectCard>
|
|
<ProjectCard
|
|
title="Odin"
|
|
liveUrl="https://odin.johncosta.tech/"
|
|
gitUrl="https://github.com/JohnCosta27/Odin"
|
|
>
|
|
<p className="text-xl text-snow-storm-100">
|
|
A revision tool which allows students to revise various subjects.
|
|
Uses Auth0 for user sign ups.
|
|
</p>
|
|
</ProjectCard>
|
|
<ProjectCard
|
|
title="Restaurant ordering system"
|
|
liveUrl="https://www.youtube.com/watch?v=BZY2Le_Szgg&t=1s&ab_channel=JohnCosta"
|
|
gitUrl="https://github.com/JohnCosta27/"
|
|
>
|
|
<p className="text-xl text-snow-storm-100">
|
|
A revision tool which allows students to revise various subjects.
|
|
Year 2 Team Project, I was resposible for making the entire UI. I
|
|
cannot release the source code, but there is a video.
|
|
</p>
|
|
</ProjectCard>
|
|
<ProjectCard
|
|
title="Disser"
|
|
gitUrl="https://github.com/JohnCosta27/Disser-RoyalHackaway2022"
|
|
>
|
|
<p className="text-xl text-snow-storm-100">
|
|
Royal Hackathon Project 2022. A real time social media which
|
|
allows users to communicate with each other in real time. It also
|
|
involves GPT-3 bots which communicate with each other and the
|
|
users.
|
|
</p>
|
|
</ProjectCard>
|
|
<ProjectCard
|
|
title="Snake"
|
|
gitUrl="https://github.com/JohnCosta27/Snake"
|
|
liveUrl="https://johncosta27.github.io/Snake/"
|
|
>
|
|
<p className="text-xl text-snow-storm-100">
|
|
My first big project. A classic snake game that adapts to the
|
|
screen size you are on.
|
|
</p>
|
|
</ProjectCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default Projects;
|