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 React from "react";
import GitHubMark from "./GitHubMark"; import GitHubMark from "./GitHubMark";
const ProjectCard = ({ title, description }) => { const ProjectCard = ({ title, liveUrl, gitUrl, children }) => {
return ( 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="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"> <div className="w-full flex flex-col gap-2">
<h2 className="text-4xl text-snow-storm-100">{title}</h2> <h2 className="text-4xl text-snow-storm-100">{title}</h2>
<p className="text-lg text-snow-storm-100">{description}</p> {children}
</div> </div>
<div className="w-full flex items-center gap-2 text-lg"> <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 Live
</button> </a>
<button className="w-full flex justify-center items-center h-12 rounded bg-snow-storm-200 hover:bg-polar-night-100 transition-all"> <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" /> <GitHubMark width="32" height="32" />
</button> </a>
</div> </div>
</div> </div>
); );

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

@ -9,7 +9,9 @@ const Projects = () => {
Projects Projects
</h1> </h1>
<div className="w-full grid grid-cols-3 gap-4"> <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" /> <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" />