73 lines
No EOL
2.9 KiB
TypeScript
73 lines
No EOL
2.9 KiB
TypeScript
async function GetSkills() {
|
|
const res = await fetch(`${process.env.BACKEND_URL}/cv/skills`, {
|
|
cache: process.env.CACHE
|
|
});
|
|
|
|
if (!res.ok) {
|
|
throw new Error("Erreur lors du chargement des skills du CV");
|
|
}
|
|
return res.json();
|
|
}
|
|
export default async function Skills(){
|
|
const skills = await GetSkills();
|
|
|
|
const obj: Record<string, string[]> = Array.isArray(skills) ? (skills[0] ?? {}) : {};
|
|
const entries = Object.entries(obj) as [string, string[]][];
|
|
|
|
if (entries.length === 0) {
|
|
return (
|
|
<section id="skills" className="section">
|
|
<div className="container">
|
|
<h2 className="section-title">Mes compétences</h2>
|
|
<p className="u-muted">Aucune compétence à afficher.</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
/*
|
|
*
|
|
{mySkillsEntries.length > 0 && (
|
|
<section id="competences" className="section">
|
|
<div className="container">
|
|
<h2 className="section-title">Compétences clés</h2>
|
|
<ul className="skill-grid">
|
|
{mySkillsEntries.map(([category, items]) => (
|
|
<li key={category} className="skill-card">
|
|
<h3 className="skill-card__title">{category}</h3>
|
|
<div className="skill-card__tags">
|
|
{items.map((it) => (
|
|
<span key={it} className="badge">{it}</span>
|
|
))}
|
|
</div>
|
|
|
|
<div className="skill-meter" aria-hidden="true">
|
|
<div className="skill-meter__bar" style={{["--level" as any]: "75%"}}/>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
)}
|
|
* */
|
|
<section id="competences" className="section">
|
|
<div className="container">
|
|
<h2 className="section-title">Mes compétences</h2>
|
|
<ul className="skill-grid">
|
|
{entries.map(([category, skills]) => (
|
|
<li key={category} className="skill-card">
|
|
<h3 className="skill-card__title">{category}</h3>
|
|
<div className="skill-card__tags">
|
|
{skills.map((skill: string) => (
|
|
<span key={skill} className="badge">{skill}</span>
|
|
))}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |