92 lines
2 KiB
TypeScript
92 lines
2 KiB
TypeScript
|
import { Grid, GridCol } from "@treejs/components/Grid";
|
||
|
|
import Image from "next/image";
|
||
|
|
import { FC, useMemo } from "react";
|
||
|
|
import { skills } from "../constants/skills";
|
||
|
|
import MyTitle from "./MyTitle";
|
||
|
|
import { map } from "ramda";
|
||
|
|
import { ISkill } from "../types/skills";
|
||
|
|
|
||
|
|
const Services: FC = () => {
|
||
|
|
const renderSkills = useMemo(() => {
|
||
|
|
let i = 0;
|
||
|
|
return map((skillList: ISkill[]) => {
|
||
|
|
let z = 0;
|
||
|
|
const skills = map((skill: ISkill) => {
|
||
|
|
z++;
|
||
|
|
return (
|
||
|
|
<li className="flex mb-1" key={z}>
|
||
|
|
<svg height="10" width="10" className="mt-1.5 mr-2">
|
||
|
|
<circle
|
||
|
|
cx="5"
|
||
|
|
cy="5"
|
||
|
|
r="4"
|
||
|
|
fill={skill.level === "full" ? "#90C8AC" : "#FFE7BF"}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
{skill.name}
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
})(skillList);
|
||
|
|
i++;
|
||
|
|
return (
|
||
|
|
<ol className="mt-2" key={i}>
|
||
|
|
{skills}
|
||
|
|
</ol>
|
||
|
|
);
|
||
|
|
})(skills);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Grid cols={6} className="mt-28">
|
||
|
|
<GridCol colSpan={1} className="text-center">
|
||
|
|
<Image
|
||
|
|
src="/services.svg"
|
||
|
|
alt="services"
|
||
|
|
width={200}
|
||
|
|
height={200}
|
||
|
|
objectFit="contain"
|
||
|
|
/>
|
||
|
|
</GridCol>
|
||
|
|
<GridCol colSpan={5} className="ml-10">
|
||
|
|
<MyTitle left="Umím" right="Ovládat" />
|
||
|
|
<Grid cols={4} className="mt-10">
|
||
|
|
<GridCol>
|
||
|
|
<b>Vývoj FE</b>
|
||
|
|
{renderSkills[0]}
|
||
|
|
</GridCol>
|
||
|
|
<GridCol>
|
||
|
|
<b>Vývoj BE</b>
|
||
|
|
{renderSkills[1]}
|
||
|
|
</GridCol>
|
||
|
|
<GridCol>
|
||
|
|
<b>Další</b>
|
||
|
|
{renderSkills[2]}
|
||
|
|
</GridCol>
|
||
|
|
<GridCol>
|
||
|
|
<b>Správa aplikací</b>
|
||
|
|
{renderSkills[3]}
|
||
|
|
</GridCol>
|
||
|
|
</Grid>
|
||
|
|
|
||
|
|
<div className="flex mt-6 text-sm">
|
||
|
|
<div className="flex">
|
||
|
|
<svg height="10" width="10" className="mt-1.5 mr-2">
|
||
|
|
<circle cx="5" cy="5" r="4" fill="#90C8AC" />
|
||
|
|
</svg>
|
||
|
|
používám na projektech
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex ml-5">
|
||
|
|
<svg height="10" width="10" className="mt-1.5 mr-2">
|
||
|
|
<circle cx="5" cy="5" r="4" fill="#FFE7BF" />
|
||
|
|
</svg>
|
||
|
|
hraju si a učím se
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</GridCol>
|
||
|
|
</Grid>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Services;
|