58 lines
2.0 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-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="Hello World"
description="Hello World again lol"
/>
<ProjectCard
title="Hello World"
description="Hello World again lol"
/>
<ProjectCard
title="Hello World"
description="Hello World again lol"
/>
</div>
</div>
</div>
);
};
export default Projects;