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

feat: buttons now work and refactored project card

Browse Source
This commit is contained in:
John Costa
2022-05-13 15:55:54 +01:00
parent ad4b48eefe
commit 7ab1688865
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/sections/ProjectCard.jsx
View File

@ -1,20 +1,20 @@
import React from "react";
import GitHubMark from "./GitHubMark";
const ProjectCard = ({ title, description }) => {
const ProjectCard = ({ title, liveUrl, gitUrl, children }) => {
return (
<div className="min-h-[400px] w-full rounded-lg flex flex-col bg-polar-night-400 p-4 shadow-md justify-between">
<div className="w-full flex flex-col gap-2">
<h2 className="text-4xl text-snow-storm-100">{title}</h2>
<p className="text-lg text-snow-storm-100">{description}</p>
{children}
</div>
<div className="w-full flex items-center gap-2 text-lg">
<button className="w-full h-12 rounded bg-aurora-green text-polar-night-200 hover:bg-aurora-orange transition-all">
<a href={liveUrl} className="w-full flex justify-center items-center h-12 rounded bg-aurora-green text-polar-night-200 hover:bg-aurora-orange transition-all text-xl">
Live
</button>
<button className="w-full flex justify-center items-center h-12 rounded bg-snow-storm-200 hover:bg-polar-night-100 transition-all">
</a>
<a href={gitUrl} className="w-full flex justify-center items-center h-12 rounded bg-snow-storm-200 hover:bg-polar-night-100 transition-all">
<GitHubMark width="32" height="32" />
</button>
</a>
</div>
</div>
);

4
src/components/sections/Projects.jsx
View File

@ -9,7 +9,9 @@ const Projects = () => {
Projects
</h1>
<div className="w-full grid grid-cols-3 gap-4">
<ProjectCard title="Real Tutor" description="Lessons and progress management tool, for my tutoring company." />
<ProjectCard title="Real Tutor" liveUrl="/" gitUrl="/">
<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>
</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" />