Skip to content

Commit

Permalink
feat: improve Ui and add project img section
Browse files Browse the repository at this point in the history
  • Loading branch information
@kpatel0170
kpatel0170 committed May 27, 2024
1 parent f461dd1 commit 4d52ed1
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 57 deletions.
Binary file added src/assets/projects/settleout.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
84 changes: 42 additions & 42 deletions src/pages/Project/Project.js
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,65 @@
import React, { useState } from "react";
import React from "react";
import { FaGithub, FaEye } from "react-icons/fa";

const TechStack = ({ techStack, showTech, setShowTech }) => (
<p className="mt-2">
const TechStack = ({ techStack }) => (
<li className=" text-slate-400">
Tech Stack:{" "}
<span
className={`cursor-pointer text-blue-500 ${showTech ? "underline" : ""}`}
onClick={() => setShowTech(!showTech)}
>
{showTech ? techStack.join(", ") : "Show Tech Stack"}
<span className={`cursor-pointer text-slate-600 `}>
{techStack.join(", ")}
</span>
</p>
</li>
);

const ProjectLinks = ({ links }) => (
<div className="flex space-x-4 mt-4">
{links.map((link, i) => (
<a
key={i}
href={link.url}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-gray-700 hover:bg-gray-800 focus:outline-none focus:border-gray-900 focus:shadow-outline-black active:bg-gray-900 transition duration-150 ease-in-out"
>
<svg
className="w-5 h-5 mr-2 -ml-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path fillRule="evenodd" d={getSvgPath(link.svg)} />
</svg>
{link.name}
</a>
))}
{links.map((link, i) => {
if (link.name === "GitHub") {
return (
<a
key={i}
href={link.url}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-slate-300 bg-slate-700 hover:bg-slate-800 focus:outline-none focus:border-slate-900 focus:shadow-outline-black active:bg-slate-900 transition duration-150 ease-in-out"
>
<FaGithub className="w-5 h-5 mr-2 -ml-1" />
{link.name}
</a>
);
} else if (link.name === "Live") {
return (
<a
key={i}
href={link.url}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-slate-300 bg-slate-700 hover:bg-slate-800 focus:outline-none focus:border-slate-900 focus:shadow-outline-black active:bg-slate-900 transition duration-150 ease-in-out"
>
<FaEye className="w-5 h-5 mr-2 -ml-1" />
{link.name}
</a>
);
} else {
return null;
}
})}
</div>
);

const ProjectBlock = ({ project }) => {
const [showTech, setShowTech] = useState(false);

return (
<div className="flex flex-col mb-8">
<div className="flex relative">
<div className="w-4 h-4 bg-blue-500 absolute -left-2 rounded-full z-10 mt-2 md:mt-0"></div>
<div className="w-5 h-5 bg-blue-500 absolute -left-[11px] rounded-full z-10 md:mt-0"></div>
<div className="ml-4 flex flex-col">
<h2 className="text-xl font-bold">{project.name}</h2>
<ul className="list-disc list-inside mt-2">
{project.description.map((desc, i) => (
<li key={i}>{desc}</li>
<li key={i} className="text-slate-400">
{desc}
</li>
))}
<TechStack techStack={project.techStack} />
</ul>
<TechStack techStack={project.techStack} showTech={showTech} setShowTech={setShowTech} />
{project.image && (
<img src={project.image} alt={project.name} className="mt-4" />
)}{" "}
<ProjectLinks links={project.links} />
</div>
</div>
Expand Down Expand Up @@ -79,14 +90,3 @@ const Project = () => {
};

export default Project;

function getSvgPath(name) {
switch (name) {
case "GitHub":
return "M12 2C6.48 2 2 6.48 2 12c0 4.42 2.88 8.14 6.84 9.47.5.09.68-.22.68-.48v-1.69c-2.8.62-3.39-1.34-3.39-1.34-.46-1.17-1.11-1.48-1.11-1.48-.91-.62.07-.61.07-.61 1.01.07 1.54 1.03 1.54 1.03.9 1.55 2.37 1.1 2.95.84.09-.65.35-1.1.64-1.35-2.23-.25-4.57-1.11-4.57-4.94 0-1.1.39-2 .84-2.7-.08-.26-.36-1.28.08-2.66 0 0 .84-.27 2.75 1.03A9.47 9.47 0 0 1 12 5.79c.85 0 1.7.11 2.5.33 1.91-1.31 2.75-1.03 2.75-1.03.44 1.38.16 2.4.08 2.66.46.69.84 1.6.84 2.7 0 3.85-2.34 4.69-4.58 4.94.36.31.68.92.68 1.86v2.76c0 .26.18.57.69.48A10.03 10.03 0 0 0 22 12c0-5.52-4.48-10-10-10z";
case "Eye":
return "M3.999 12c0-4.42 3.589-8 8-8 4.42 0 8 3.589 8 8 0 4.42-3.58 8-8 8-4.411 0-8-3.58-8-8zm9-6.5c-4.137 0-7.5 3.363-7.5 7.5 0 4.137 3.363 7.5 7.5 7.5 4.137 0 7.5-3.363 7.5-7.5 0-4.137-3.363-7.5-7.5-7.5zm1.5 11h-3v-1h3v1zm0-2h-3v-5h3v5z";
default:
return "";
}
}
19 changes: 4 additions & 15 deletions src/pages/Project/Projects.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

{
"projects": {
"text": "Projects are a great way to apply all our learnings. Here are the ones that I have created:",
"text": "Projects are a great way to apply all our learnings. Here are the ones that I have built:",
"list": [
{
"name": "Settlout",
Expand All @@ -10,15 +10,14 @@
"Managed the team as a Scrum Master, implementing the factory and observer design patterns while following SDLC."
],
"techStack": ["MERN stack", "Postman", "Tailwind", "Stripe API", "SendGrid API", "Twillo"],
"image": "../../assets/projects/settlout.png",
"links": [
{
"name": "GitHub",
"svg": "GitHub",
"url": "#"
"url": "https://github.com/kpatel0170/settleout-frontend"
},
{
"name": "Live",
"svg": "Eye",
"url": "https://settleout.onrender.com/"
}
]
Expand All @@ -33,12 +32,10 @@
"links": [
{
"name": "GitHub",
"svg": "GitHub",
"url": ""
"url": "https://github.com/urgdsc/24hour-winter-2023-frontend"
},
{
"name": "Live",
"svg": "Eye",
"url": "https://24hour.yazdanra.com/"
}
]
Expand All @@ -50,12 +47,10 @@
"links": [
{
"name": "GitHub",
"svg": "GitHub",
"url": "https://github.com/kartikpatel0170/Winter-Find"
},
{
"name": "Live",
"svg": "Eye",
"url": "https://findurgf-in-winter-io.vercel.app"
}
]
Expand All @@ -67,12 +62,10 @@
"links": [
{
"name": "GitHub",
"svg": "GitHub",
"url": "https://github.com/kpatel0170/SharkTanks"
},
{
"name": "Live",
"svg": "Eye",
"url": "https://sharktanks.tech/"
}
]
Expand All @@ -84,7 +77,6 @@
"links": [
{
"name": "GitHub",
"svg": "GitHub",
"url": "https://github.com/kartikpatel0170/Electron"
}
]
Expand All @@ -96,7 +88,6 @@
"links": [
{
"name": "GitHub",
"svg": "GitHub",
"url": "https://github.com/kartikpatel0170/parkAway"
}
]
Expand All @@ -108,7 +99,6 @@
"links": [
{
"name": "GitHub",
"svg": "GitHub",
"url": "https://github.com/kartikpatel0170/CRUD-App"
}
]
Expand All @@ -120,7 +110,6 @@
"links": [
{
"name": "GitHub",
"svg": "GitHub",
"url": "https://github.com/kartikpatel0170/SpyPooch"
}
]
Expand Down

0 comments on commit 4d52ed1

Please sign in to comment.