skills
This commit is contained in:
matthieu42morin
parent
de6c8eb073
commit
e49c5001c2
|
|
@ -1,52 +1,52 @@
|
|||
export type SkillLevel = 'A' | 'B' | 'C'; // A: Proficient, B: Experienced, C: limited Experience
|
||||
export type Level = 'A' | 'B' | 'C'; // A: Proficient, B: Experienced, C: limited Experience
|
||||
|
||||
export interface Skill {
|
||||
title: string;
|
||||
level: SkillLevel;
|
||||
level: Level;
|
||||
}
|
||||
export interface SkillSubCategory {
|
||||
export interface SubCategory {
|
||||
title: string;
|
||||
level: number;
|
||||
skills: Skill[];
|
||||
}
|
||||
export interface SkillCategory {
|
||||
export interface Category {
|
||||
icon: string;
|
||||
title: string;
|
||||
level: number;
|
||||
subCategories: SkillSubCategory[];
|
||||
subCategories: SubCategory[];
|
||||
}
|
||||
// prettier-ignore
|
||||
const skillCategories: SkillCategory[] = [
|
||||
{title:'Software Development', level: 70, subcategories: [
|
||||
{title:'Programming Languages', level: 75, skills: [
|
||||
const list: Category[] = [
|
||||
{ icon: '🚀', title:'Software Development', level: 70, subCategories: [
|
||||
{ title:'Programming Languages', level: 75, skills: [
|
||||
{ title: 'JavaScript/TypeScript', level: 'A' },
|
||||
{ title: 'Python', level: 'B' },
|
||||
{ title: 'Rust', level: 'C' },
|
||||
{ title: 'Bash', level: 'B' },
|
||||
{ title: 'SQL', level: 'B' },
|
||||
{ title: 'LaTeX', level: 'B' },
|
||||
{ title: 'Rust', level: 'C' },
|
||||
]},
|
||||
{title:'Web Frameworks', level: 70, skills: [
|
||||
{ title:'Web Frameworks', level: 70, skills: [
|
||||
{ title: 'Svelte(Kit)', level: 'A' },
|
||||
{ title: 'React', level: 'C'},
|
||||
]},
|
||||
{title:'Configuration and Performance', level: 70, skills: [
|
||||
{ title:'Configuration and Performance', level: 70, skills: [
|
||||
{ title: 'SEO', level: 'B'},
|
||||
{ title: 'Performance', level: 'B'},
|
||||
{ title: 'Obfuscation', level: 'B'},
|
||||
]},
|
||||
{title:'Databases', level: 70, skills: [
|
||||
{ title:'Databases', level: 70, skills: [
|
||||
{ title: 'PostgreSQL', level: 'A' },
|
||||
{ title: 'MariaDB', level: 'B' },
|
||||
{ title: 'MongoDB', level: 'C' }
|
||||
]},
|
||||
{title:'Testing & Validation', level: 50, skills: [
|
||||
{ title:'Testing & Validation', level: 50, skills: [
|
||||
{ title: 'ajv', level: 'A' },
|
||||
{ title: 'Playwright', level: 'B'},
|
||||
{ title: 'SEO, performance optimizations', level: 'B'},
|
||||
]},
|
||||
]},
|
||||
{title:'DevOps', level: 70, subcategories: [
|
||||
{title:'Infrastructure & Configuration Management', level: 80, skills: [
|
||||
{ icon: '🔁🔁', title:'DevOps', level: 70, subCategories: [
|
||||
{ title:'Infrastructure & Configuration Management', level: 80, skills: [
|
||||
{ title: 'Terraform & tooling', level: 'A'},
|
||||
{ title: 'Ansible', level: 'A'},
|
||||
{ title: 'Docker, Docker-Compose', level: 'A' },
|
||||
|
|
@ -54,18 +54,16 @@ const skillCategories: SkillCategory[] = [
|
|||
]},
|
||||
{ title: 'Version Control & CI/CD', level: 90, skills: [
|
||||
{ title: 'Git', level: 'A' },
|
||||
{ title: 'GitHub Ecosystem', level: 'A' },
|
||||
{ title: 'Gitea', level: 'A' },
|
||||
{ title: 'GitHub & Gitea Ecosystem', level: 'A' },
|
||||
{ title: 'Gitlab Ecosystem', level: 'B' }
|
||||
]},
|
||||
{ title: 'Monitoring & Observability ', level: 90, skills: [
|
||||
{ title: 'Grafana', level: 'B' },
|
||||
{ title: 'Prometheus', level: 'B' },
|
||||
]},
|
||||
{title:'Vercel', level: 100, skills: []},
|
||||
]},
|
||||
{title:'Cloud Computing', level: 70, subcategories: [
|
||||
{title:'AWS', level: 80, skills: [
|
||||
{ icon: '⛅', title:'Cloud Computing', level: 70, subCategories: [
|
||||
{ title:'AWS', level: 80, skills: [
|
||||
{ title: 'EC2', level: 'A' },
|
||||
{ title: 'RDS', level: 'A'},
|
||||
{ title: 'S3', level: 'A'},
|
||||
|
|
@ -79,11 +77,11 @@ const skillCategories: SkillCategory[] = [
|
|||
{ title: 'Vault', level: 'B' },
|
||||
{ title: 'Consul', level: 'C' },
|
||||
]},
|
||||
{title:'Vercel', level: 100, skills: []},
|
||||
{title:'DigitalOcean', level: 100, skills: []},
|
||||
{ title:'Vercel', level: 100, skills: []},
|
||||
{ title:'DigitalOcean', level: 100, skills: []},
|
||||
]},
|
||||
{title:'System Administration', level: 75, subcategories: [
|
||||
{title:'Operating Systems', level: 80, skills: [
|
||||
{ icon: '🔧💻🔒⚙️', title:'System Administration', level: 75, subCategories: [
|
||||
{ title:'Operating Systems', level: 80, skills: [
|
||||
{ title: 'Debian / Ubuntu', level: 'A' },
|
||||
{ title: 'Nix(OS)', level: 'B' },
|
||||
{ title: 'Arch Linux', level: 'B' },
|
||||
|
|
@ -105,8 +103,8 @@ const skillCategories: SkillCategory[] = [
|
|||
{ title: 'AWS Secrets Manager', level: 'B' },
|
||||
]}
|
||||
]},
|
||||
{title:"Some fun geek skillz", level: 70, subcategories: [
|
||||
{title:'mini hardware', level: 80, skills: [
|
||||
{ icon: '', title:"Some fun geek skillz", level: 70, subCategories: [
|
||||
{ title:'mini hardware', level: 80, skills: [
|
||||
{ title: 'Raspberry Pi', level: 'A' },
|
||||
{ title: 'ESP8266, ESP32', level: 'A' },
|
||||
{ title: 'Arduino', level: 'A' },
|
||||
|
|
@ -121,19 +119,28 @@ const skillCategories: SkillCategory[] = [
|
|||
{ title: 'Ultimaker Cura', level: 'B' },
|
||||
]},
|
||||
]},
|
||||
{title:'Languages', level: 70, skills: [
|
||||
{ icon: '🤐💬', title:'Languages', level: 70, subCategories: [
|
||||
{ title: 'English', level: 'A' },
|
||||
{ title: 'Czech', level: 'A' },
|
||||
{ title: 'French', level: 'B' },
|
||||
{ title: 'German', level: 'C' }
|
||||
]},
|
||||
{title:'Design', level: 70, skills: [
|
||||
{ title: 'Figma', level: 'A' },
|
||||
{ icon: '🎨✏️📐', title:'Design', level: 70, subCategories: [
|
||||
{ title: 'UI/UX', level: 'B' },
|
||||
{ title: 'LaTeX', level: 'C' },
|
||||
{ title: 'Wireframing & Prototyping', level: 'B' },
|
||||
{ title: 'Myriads of image manipulation and generation tools', level: 'B' },
|
||||
{ title: 'Wireframing, Prototyping, Diagramming', level: 'B', skills: [
|
||||
{ title: 'Figma', level: 'A' },
|
||||
{ title: 'Devops diagram tool - '}
|
||||
|
||||
] },
|
||||
{ title: 'Images, Diagrams, Vectors', level: 'B', skills: [
|
||||
//only foss
|
||||
{ title: 'Inkscape', level: 'A' },
|
||||
{ title: 'Gimp', level: 'A' },
|
||||
{ title: 'Blender', level: 'B'},
|
||||
{ title: 'Adobe PS, AI, InDesign'}
|
||||
]},
|
||||
]}
|
||||
];
|
||||
|
||||
export default skillCategories;
|
||||
export default list;
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
<script lang="ts">
|
||||
import skills from '$content/skills';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="card flex flex-col items-center justify-center mx-auto w-3/4 bg-surface-50 bg-opacity-50 p-8 m-8"
|
||||
id="skills"
|
||||
>
|
||||
<h2 class="h2 m-2">My skillset</h2>
|
||||
{#each skills as skill}
|
||||
<div class="text-lg font-bold m-2">{skill.title}</div>
|
||||
<div class="flex flex-wrap justify-center space-x-2 m-2">
|
||||
{#each skill.list as s}
|
||||
<div class="chip variant-outline-primary">{s}</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<script lang="ts">
|
||||
import { AccordionItem, ProgressBar } from '@skeletonlabs/skeleton';
|
||||
|
||||
import type { Skill } from '$content/skills';
|
||||
import list from '$content/skills';
|
||||
|
||||
function sortSkills(skills: Skill[]): Skill[] {
|
||||
return skills.sort((a, b) => {
|
||||
if (a.level < b.level) return -1;
|
||||
if (a.level > b.level) return 1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each list as category}
|
||||
<AccordionItem>
|
||||
<svelte:fragment slot="lead">
|
||||
<i class="text-3xl">{category.icon}</i>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="summary">
|
||||
<h2 class="h2 font-bold m-2">{category.title}</h2>
|
||||
<!-- Progresses are stupidly subjective and I don't know how to grade this so no progress bars for now.
|
||||
<ProgressBar class="min-w-[100px] h-2" value={category.level} max={100} /> -->
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="content">
|
||||
<div class="flex flex-col justify-center m-2 space-y-8">
|
||||
{#if category.subCategories}
|
||||
{#each category.subCategories as subCategory (subCategory.title)}
|
||||
<div class="flex flex-col space-y-2">
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<p class="text-xl font-medium m-2">{subCategory.title}</p>
|
||||
<!-- <ProgressBar value={subCategory.level} max={100} /> -->
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-center space-x-2 m-2">
|
||||
{#if subCategory.skills}
|
||||
{#each sortSkills(subCategory.skills) as skill (skill.title)}
|
||||
<span
|
||||
class="chip {skill.level === 'A'
|
||||
? 'variant-filled-primary'
|
||||
: skill.level === 'B'
|
||||
? 'variant-outline-primary'
|
||||
: 'variant-outline-tertiary'}"
|
||||
>
|
||||
{skill.title}
|
||||
</span>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</AccordionItem>
|
||||
{/each}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script lang="ts">
|
||||
import { Accordion } from '@skeletonlabs/skeleton';
|
||||
import IndividualSkills from './IndividualSkills.svelte';
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<Accordion
|
||||
class="card flex flex-col items-center justify-center mx-auto w-3/4 bg-surface-50 bg-opacity-50 p-8 m-8 space-y-4"
|
||||
autocollapse
|
||||
id="skills"
|
||||
>
|
||||
<h2 class="h2 m-2">My skillset</h2>
|
||||
<p class="text-center">
|
||||
Below is a list of tools, frameworks, languages and skills <br />I use or have used to
|
||||
varying degrees and a subjective rating
|
||||
</p>
|
||||
<span class="h6 m-2">based on my proficiency:</span>
|
||||
<div class="flex flex-wrap justify-center space-x-2 m-2">
|
||||
<span class="chip variant-filled-primary text-lg">Proficient</span>
|
||||
<span class="chip variant-outline-primary text-lg">Experienced</span>
|
||||
<span class="chip variant-outline-tertiary text-lg">Limited Experience</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center mx-auto space-x-2 space-y-2">
|
||||
<IndividualSkills />
|
||||
</div>
|
||||
</Accordion>
|
||||
</section>
|
||||
Loading…
Reference in New Issue