71 lines
2.0 KiB
JavaScript
71 lines
2.0 KiB
JavaScript
import { Link } from "react-router-dom";
|
|
import { useRecoilValue } from "recoil";
|
|
import { projectsAtom } from "../store";
|
|
import Tags from "../components/Tags";
|
|
|
|
function Experiance() {
|
|
const experianceList = useRecoilValue(projectsAtom);
|
|
|
|
const experianceListUI = experianceList.map((item, key) => {
|
|
const even = key % 2;
|
|
|
|
return (
|
|
<article
|
|
className={`flex-1 gap-4 mb-12 bg-[#f0f0f3] border shadow-box ${
|
|
(even === 0 && "rounded-tl-3xl rounded-br-3xl") ||
|
|
"rounded-tr-3xl rounded-bl-3xl"
|
|
}`}
|
|
key={item.id}
|
|
>
|
|
<div className={`flex pt-4 md:pt-14 flex-col `}>
|
|
<div className="px-4 mb-4">
|
|
<h3 className="text-subTMiniPhone md:text-subTMini font-ht">
|
|
{item.title}
|
|
</h3>
|
|
</div>
|
|
<figure className="basis-5/12">
|
|
<img
|
|
className="w-full"
|
|
src={item.img[0]}
|
|
alt={`Preview of ${item.title} project`}
|
|
/>
|
|
</figure>
|
|
<div className="grow"></div>
|
|
<div className="flex flex-col px-4 pt-4 pb-8 basis-3/12">
|
|
<div className="mb-4">
|
|
<Tags listOfTags={item.tags} />
|
|
</div>
|
|
|
|
<div className="text-base mb-6">
|
|
<p>{item.info}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<section className="relative" aria-labelledby="projects-heading">
|
|
<div
|
|
id="experience"
|
|
className="absolute -top-16"
|
|
aria-hidden="true"
|
|
></div>
|
|
<div className="min-h-screen">
|
|
<h2
|
|
id="projects-heading"
|
|
className="text-subTPhone md:text-subT font-headline mb-6"
|
|
>
|
|
Projects<span className="text-highlight">.</span>
|
|
</h2>
|
|
<div className="py-4 flex flex-col md:flex-row gap-10" role="list">
|
|
{experianceListUI}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default Experiance;
|