code/components/Home/Projects.tsx

36 lines
1.2 KiB
TypeScript

import { For } from 'solid-js';
import projects from '../../config/projects';
import ProjectCard from '../Project';
function Projects() {
return (
<>
<section id="projects">
<div><h2 class="text-3xl font-bold py-2">Library</h2></div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-flow-row gap-4 py-8">
<For each={projects.filter(o => o.type === 'library')}>
{project => <ProjectCard {...project} />}
</For>
</div>
</section>
<section>
<div><h2 class="text-3xl font-bold py-2">Application</h2></div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-flow-row gap-4 py-8">
<For each={projects.filter(o => o.type === 'application')}>
{project => <ProjectCard {...project} />}
</For>
</div>
</section>
<section class="py-4">
<p class="text-sm text-center text-gray-100 pb-8 lg:opacity-80 hover:opacity-100 transition duration-500 ease-in-out">
These are just a few of my projects.&nbsp;
<a class="hover:underline" href="https://www.github.com/aldy505">Explore more on my Github</a>
</p>
</section>
</>
);
}
export default Projects;