42 lines
2.1 KiB
TypeScript
42 lines
2.1 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
|
|
export const Skills = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 justify-center font-light'>
|
|
<h1 className='text-xl font-bold'>{t("landing.skills.title")}</h1>
|
|
|
|
<div className="flex flex-col md:flex-row gap-4 md:gap-0 justify-between">
|
|
<div className="flex flex-col">
|
|
<p className='text-xl md:text-base'>{t("landing.skills.languages")}</p>
|
|
<p className='text-blue-400'>HTML</p>
|
|
<p className='text-red-400'>React</p>
|
|
<p className='text-orange-300'>TypeScript</p>
|
|
<p className='text-blue-500'>C</p>
|
|
<p className='text-purple-500'>GO</p>
|
|
<p>{t('landing.skills.more')}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<p className='text-xl md:text-base'>{t("landing.skills.tools")}</p>
|
|
<p className='text-blue-400'>JetBrains</p>
|
|
<p className='text-red-400'>Visual Studio Code</p>
|
|
<p className='text-orange-300'>Termius</p>
|
|
<p className='text-blue-500'>AutoCAD</p>
|
|
<p className='text-violet-500'>Proxmox</p>
|
|
<p className='text-cyan-500'>Cloudflare</p>
|
|
|
|
<p>{t('landing.skills.more')}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<p className='text-xl md:text-base'>{t("landing.skills.softskills.title")}</p>
|
|
<p className='text-red-400'>{t("landing.skills.softskills.adaptability")}</p>
|
|
<p className='text-emerald-500'>{t("landing.skills.softskills.problem_solving")}</p>
|
|
<p className='text-cyan-300'>{t("landing.skills.softskills.creativity")}</p>
|
|
<p className='text-purple-500'>{t("landing.skills.softskills.time_managment")}</p>
|
|
<p className='text-purple'>{t("landing.skills.softskills.hard_work")}</p>
|
|
</div>
|
|
</div>
|
|
</div>;
|
|
} |