44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { SiteContext } from "../../layouts/general_layout/GeneralLayout";
|
||
|
|
import { Project } from "./HomepageComponent";
|
||
|
|
import MyWorkCard from "./MyWorkCard";
|
||
|
|
|
||
|
|
export default function MyWorkSection() {
|
||
|
|
const layoutContext: { projects: Project[] } = React.useContext(SiteContext);
|
||
|
|
const projects = layoutContext.projects;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-6xl w-full flex flex-col xl:flex-row items-start pb-40 page-section">
|
||
|
|
<div className="flex flex-col items-start gap-6 w-full xl:w-[50%]"></div>
|
||
|
|
<div className="flex flex-col items-start gap-6 w-full xl:w-[50%]">
|
||
|
|
<div className="h-[150px]"></div>
|
||
|
|
|
||
|
|
<h2 className="m-0">Some of my work</h2>
|
||
|
|
|
||
|
|
<div className="flex flex-col-reverse xl:flex-col items-start gap-4">
|
||
|
|
<span className="text-[24px]">I've been creating and building awesome designs and applications since 2016. Here are a few picks:</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col items-start gap-44 mt-10">
|
||
|
|
{projects &&
|
||
|
|
projects.slice(0, 4).map((project, index) => (
|
||
|
|
<MyWorkCard
|
||
|
|
key={index}
|
||
|
|
project={project}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href="/work"
|
||
|
|
className="button outlined mt-10"
|
||
|
|
>
|
||
|
|
See More
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|