mirror of https://github.com/mkrhere/pw2
122 lines
2.2 KiB
122 lines
2.2 KiB
import React from "react";
|
|
import { css } from "@emotion/css";
|
|
import Container from "../../components/Container";
|
|
import { projects } from "./data/project";
|
|
|
|
type Project = {
|
|
title: string;
|
|
url?: string;
|
|
description: string;
|
|
cat: string;
|
|
tags: string[];
|
|
};
|
|
|
|
const ProjectUnit: React.FC<Project> = ({
|
|
title,
|
|
url,
|
|
description,
|
|
cat,
|
|
tags,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={css`
|
|
position: relative;
|
|
background: var(--card-bg);
|
|
padding: 1.5rem;
|
|
cursor: default;
|
|
border-radius: 0.5rem;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 200ms;
|
|
|
|
:hover {
|
|
filter: hue-rotate(30deg) invert(0.04);
|
|
transform: translateY(-0.2rem);
|
|
}
|
|
`}>
|
|
<a
|
|
className={css`
|
|
display: block;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
`}
|
|
href={url}
|
|
target="_blank"
|
|
rel="noreferrer">
|
|
<h4>{title}</h4>
|
|
<p
|
|
className={css`
|
|
color: #bdbdbd;
|
|
margin-bottom: 0.8rem;
|
|
font-size: 0.9rem;
|
|
`}>
|
|
{description}
|
|
</p>
|
|
<p
|
|
className={css`
|
|
font-weight: 500;
|
|
color: #9f9f9f;
|
|
font-size: 0.8rem;
|
|
margin-top: auto;
|
|
`}>
|
|
{tags.map(tag => (
|
|
<span
|
|
key={tag}
|
|
className={css`
|
|
display: inline-block;
|
|
padding: 0.2rem 0.4rem;
|
|
background: var(--card-tags);
|
|
color: white;
|
|
border-radius: 0.2rem;
|
|
transition: all 200ms;
|
|
|
|
:hover {
|
|
background: var(--card-tags-hover);
|
|
}
|
|
|
|
& + & {
|
|
margin-left: 0.6rem;
|
|
}
|
|
`}>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</p>
|
|
<span
|
|
className={css`
|
|
position: absolute;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
color: #bbbbbb;
|
|
font-size: 0.8rem;
|
|
`}>
|
|
{cat}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Exp: React.FC = () => {
|
|
return (
|
|
<Container>
|
|
<h2>Things I've built</h2>
|
|
<p>Some tools, libraries, and apps over time:</p>
|
|
<div
|
|
className={css`
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
|
|
gap: 1rem;
|
|
width: 100%;
|
|
`}>
|
|
{projects.map(unit => (
|
|
<ProjectUnit {...unit} key={unit.title} />
|
|
))}
|
|
</div>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default Exp;
|
|
|