160 lines
4.3 KiB
Text
160 lines
4.3 KiB
Text
---
|
|
import SkillsSection from '@/sections/skills-section.astro';
|
|
import type { SkillsSection as SkillsSectionData } from '@/types/skills-section';
|
|
|
|
const skills: SkillsSectionData = {
|
|
config: {
|
|
title: 'Skills',
|
|
icon: 'fa6-solid:bars-progress',
|
|
},
|
|
skillSets: [
|
|
{
|
|
title: 'I already know',
|
|
skills: [
|
|
{
|
|
icon: 'simple-icons:react',
|
|
iconColor: '#61DAFB',
|
|
name: 'React.js',
|
|
level: 5,
|
|
url: 'https://reactjs.org/',
|
|
description:
|
|
'Proin ut erat sed massa tempus suscipit. Mauris efficitur nunc sem, nec scelerisque ligula bibendum ut.',
|
|
},
|
|
{
|
|
icon: 'simple-icons:typescript',
|
|
iconColor: '#3178C6',
|
|
name: 'TypeScript',
|
|
level: 4,
|
|
url: 'https://www.typescriptlang.org/',
|
|
description: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
|
|
},
|
|
{
|
|
icon: 'simple-icons:sass',
|
|
iconColor: '#CC6699',
|
|
name: 'SASS',
|
|
level: 4,
|
|
url: 'https://sass-lang.com/',
|
|
description: 'Nulla interdum pellentesque ultricies. Ut id eros commodo, ultrices ligula eu, elementum ante.',
|
|
},
|
|
{
|
|
icon: 'simple-icons:chakraui',
|
|
iconColor: '#319795',
|
|
name: 'Chakra UI',
|
|
level: 5,
|
|
url: 'https://chakra-ui.com/',
|
|
},
|
|
{
|
|
icon: 'simple-icons:tailwindcss',
|
|
iconColor: '#06B6D4',
|
|
name: 'Tailwind CSS',
|
|
level: 2,
|
|
url: 'https://tailwindcss.com/',
|
|
},
|
|
{
|
|
icon: 'simple-icons:prettier',
|
|
iconColor: '#F7B93E',
|
|
name: 'Prettier',
|
|
level: 5,
|
|
url: 'https://prettier.io/',
|
|
},
|
|
{
|
|
icon: 'simple-icons:eslint',
|
|
iconColor: '#4B32C3',
|
|
name: 'ESLint',
|
|
level: 4,
|
|
url: 'https://eslint.org/',
|
|
description:
|
|
'Nulla tempor turpis at vehicula pharetra. Vestibulum tellus tortor, commodo et suscipit id, lobortis id nunc.',
|
|
},
|
|
{
|
|
icon: 'simple-icons:nestjs',
|
|
iconColor: '#E0234E',
|
|
name: 'NestJS',
|
|
level: 2,
|
|
url: 'https://nestjs.com/',
|
|
description:
|
|
'Praesent feugiat ultricies iaculis. In posuere vehicula odio, sed consequat velit porta viverra.',
|
|
},
|
|
{
|
|
icon: 'simple-icons:postgresql',
|
|
iconColor: '#4169E1',
|
|
name: 'PostgreSQL',
|
|
level: 2,
|
|
url: 'https://www.postgresql.org/',
|
|
},
|
|
{
|
|
icon: 'simple-icons:mongodb',
|
|
iconColor: '#47A248',
|
|
name: 'MongoDB',
|
|
level: 1,
|
|
url: 'https://www.mongodb.com/',
|
|
},
|
|
{
|
|
icon: 'simple-icons:firebase',
|
|
iconColor: '#FFCA28',
|
|
name: 'Firebase',
|
|
level: 1,
|
|
url: 'https://firebase.google.com/',
|
|
},
|
|
{
|
|
icon: 'simple-icons:pnpm',
|
|
iconColor: '#F69220',
|
|
name: 'pnpm',
|
|
level: 3,
|
|
url: 'https://pnpm.io/',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'I want to learn',
|
|
skills: [
|
|
{
|
|
icon: 'simple-icons:apollographql',
|
|
iconColor: '#311C87',
|
|
name: 'Apollo GraphQL',
|
|
},
|
|
{
|
|
icon: 'simple-icons:astro',
|
|
iconColor: '#FF5D01',
|
|
name: 'Astro',
|
|
},
|
|
{
|
|
icon: 'simple-icons:supabase',
|
|
iconColor: '#3ECF8E',
|
|
name: 'Supabase',
|
|
},
|
|
{
|
|
icon: 'simple-icons:cypress',
|
|
iconColor: '#17202C',
|
|
name: 'Cypress',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'I speak',
|
|
skills: [
|
|
{
|
|
icon: 'circle-flags:pl',
|
|
name: 'Polish - native',
|
|
},
|
|
{
|
|
icon: 'circle-flags:us',
|
|
name: 'English - C1',
|
|
},
|
|
{
|
|
icon: 'circle-flags:es-variant',
|
|
name: 'Spanish - B1',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
---
|
|
|
|
<body class="flex justify-center bg-gray-50">
|
|
<div class="flex gap-8 w-full max-w-6xl px-2 py-3 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
|
|
<main class="w-full space-y-4 sm:space-y-6 lg:space-y-8">
|
|
<SkillsSection config={skills.config} skillSets={skills.skillSets} />
|
|
</main>
|
|
</div>
|
|
</body>
|