mirror of https://github.com/aldy505/code.git
89 lines
3.6 KiB
JavaScript
89 lines
3.6 KiB
JavaScript
// eslint-disable-next-line no-unused-vars
|
|
import { NavLink } from 'solid-app-router';
|
|
// eslint-disable-next-line no-unused-vars
|
|
import { For, Show } from 'solid-js';
|
|
// eslint-disable-next-line no-unused-vars
|
|
import Icons from '../components/Icons';
|
|
import projects from '../config/projects';
|
|
|
|
function Projects() {
|
|
return (
|
|
<>
|
|
<section className="w-full flex flex-col md:flex-row justify-between py-6 items-center">
|
|
<div className="flex-3">
|
|
<NavLink href="/">
|
|
<h1 className="text-3xl font-bold inline-block">Reinaldy Rafli </h1>
|
|
<img
|
|
src="/me.png"
|
|
alt="My Memoji"
|
|
class="w-14 h-auto md:py-4 inline pl-4"
|
|
/>
|
|
</NavLink>
|
|
</div>
|
|
<div className="flex-1 text-right py-2 text-2xl">Projects</div>
|
|
</section>
|
|
|
|
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-flow-row gap-4 py-8">
|
|
<For each={projects}>
|
|
{project =>
|
|
<div className="p-4 rounded-lg bg-steel-900 hover:bg-wisteria-800 transition duration-500 ease-in-out">
|
|
<div className="flex flex-col">
|
|
<div className="flex-1 py-2">
|
|
<h2 className="text-xl font-bold">{project.title}</h2>
|
|
<p className="text-base">{project.description}</p>
|
|
</div>
|
|
<div className="flex-1 py-2">
|
|
<div className="flex-col md:flex-row items-center">
|
|
<p className="text-xs text-gray-300 inline pr-2">{project.type.toUpperCase()}</p>
|
|
<p className="text-xs text-gray-300 inline pr-2">{project.role.toUpperCase()}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 py-2">
|
|
<div className="flex flex-row flex-wrap items-center">
|
|
<For each={project.stack}>
|
|
{item => <div className="flex-initial pr-2"><Icons name={item}></Icons></div>}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 py-2">
|
|
<div className="flex flex-row flex-wrap items-center">
|
|
<Show when={project.repository}>
|
|
<div className="flex-initial pr-2">
|
|
<a href={project.repository}>
|
|
<Icons name="github"></Icons>
|
|
</a>
|
|
</div>
|
|
<div className="flex-initial pr-4 text-xs">
|
|
<a href={project.repository}>Repository</a>
|
|
</div>
|
|
</Show>
|
|
<Show when={project.website}>
|
|
<div className="flex-initial pr-2">
|
|
<a href={project.website}>
|
|
<Icons name="arrow-right"></Icons>
|
|
</a>
|
|
</div>
|
|
<div className="flex-initial pr-2 text-xs">
|
|
<a href={project.website}>Website</a>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</For>
|
|
</section>
|
|
|
|
<section className="py-4">
|
|
<p className="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.
|
|
Explore more on my <a className="hover:underline" href="https://www.github.com/aldy505">Github</a>
|
|
</p>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Projects;
|