Ajout de 4 recommandations Malt et avatars manquants

Nouvelles recommandations : John Samson, Thomas Kientz, Thomas
Morellato, Vadim Toropoff. Champ company rendu optionnel dans le
schéma. Ajout de 11 avatars.

src/components/code/FeaturedRecommendation.astro

@@ -10,7 +10,7 @@ const avatarImages = import.meta.glob<{ default: ImageMetadata }>(
 interface Props {
   author: string;
   authorRole: string;
-  company: string;
+  company?: string;
   text: string;
   avatar?: string;
   url?: string;

src/components/code/NavigationCard.astro

@@ -1,23 +0,0 @@
----
-interface Props {
-  title: string;
-  description: string;
-  href: string;
-  icon: string;
-}
-
-const { title, description, href, icon } = Astro.props;
----
-
-<a
-  href={href}
-  class="facet-card group block rounded-2xl bg-white/[0.06] border border-white/[0.1] p-6 hover:bg-white/[0.12] hover:border-white/[0.2] hover:scale-[1.02] transition-all duration-300 no-underline"
->
-  <div class="text-3xl mb-3 opacity-80 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300 inline-block">{icon}</div>
-  <h3 class="text-lg font-bold text-white mb-2 group-hover:text-purple-200 transition-colors">
-    {title}
-  </h3>
-  <p class="text-sm text-white/55 leading-relaxed group-hover:text-white/70 transition-colors">
-    {description}
-  </p>
-</a>

src/components/code/RecommendationCard.astro

@@ -10,7 +10,7 @@ const avatarImages = import.meta.glob<{ default: ImageMetadata }>(
 interface Props {
   author: string;
   authorRole: string;
-  company: string;
+  company?: string;
   text: string;
   date: Date;
   avatar?: string;

src/content.config.ts

@@ -75,7 +75,7 @@ const recommendationsCollection = defineCollection({
 	schema: z.object({
 		author: z.string(),
 		authorRole: z.string(),
-		company: z.string(),
+		company: z.string().optional(),
 		avatar: z.string().optional(),
 		url: z.string().url().optional(),
 		date: z.date(),

src/content/recommendations/antoine-wolff.md

@@ -2,6 +2,7 @@
 author: "Antoine Wolff"
 authorRole: "Développeur, graphiste et chef de projet"
 company: "LeCollectif"
+avatar: antoine-wolff.png
 url: https://www.linkedin.com/in/wolffantoine
 date: 2020-12-07
 lang: "fr"

src/content/recommendations/benoit-sarda.md

@@ -1,6 +1,6 @@
 ---
 author: "Benoit Sarda"
-authorRole: "Sr Solution Architect, Manuf"
+authorRole: "Sr Solution Architect"
 company: "Amazon Web Services (AWS)"
 avatar: benoit-sarda.jpg
 url: https://www.linkedin.com/in/benoitsarda

src/content/recommendations/bouchra-ghaoui.md

@@ -2,6 +2,7 @@
 author: "Bouchra Ghaoui"
 authorRole: "Senior Engagement Manager"
 company: "Capgemini"
+avatar: bouchra-ghaoui.jpg
 url: https://www.linkedin.com/in/bouchra-ghaoui-46509a10
 date: 2011-12-09
 lang: "fr"

src/content/recommendations/john-samson.md

@@ -0,0 +1,10 @@
+---
+author: "John Samson"
+authorRole: "Président"
+company: "DisMoi SAS"
+avatar: john-samson.png
+url: https://www.malt.fr/profile/jalilarfaoui
+date: 2022-06-17
+lang: "fr"
+---
+Jalil a su trouver la bonne architecture à notre projet à 5 pattes, il est réactif en cas d'urgence, et s'engage au-delà de son rôle de développeur, très apprécié par les autres membres de l'équipe.

src/content/recommendations/thomas-kientz.md

@@ -0,0 +1,9 @@
+---
+author: "Thomas Kientz"
+authorRole: "Expert Vue.js | Nuxt"
+avatar: thomas-kientz.jpg
+url: https://www.malt.fr/profile/jalilarfaoui
+date: 2022-06-17
+lang: "fr"
+---
+Jalil est un développeur et mentor hors pair. Le développement logiciel est pour lui un art dont il adore partager sa passion. Je consulte Jalil régulièrement pour avoir son regard expérimenté tant le choix d'une nouvelle techno que pour des reviews de code. C'est un véritable atout à avoir dans son équipe, je le recommande fortement.

src/content/recommendations/thomas-morellato.md

@@ -0,0 +1,9 @@
+---
+author: "Thomas Morellato"
+authorRole: "UI / UX designer"
+avatar: thomas-morellato.webp
+url: https://www.malt.fr/profile/jalilarfaoui
+date: 2022-06-17
+lang: "fr"
+---
+Jalil est un professionnel engagé et très compétent. Son relationnel et sa vision du projet en font un élément indispensable au sein d'une équipe. Je recommande vivement son profil.

src/content/recommendations/vadim-toropoff.md

@@ -0,0 +1,11 @@
+---
+author: "Vadim Toropoff"
+authorRole: "Dirigeant"
+company: "Event Finder"
+url: https://www.malt.fr/profile/jalilarfaoui
+date: 2015-10-08
+lang: "fr"
+---
+Jalil nous a apporté conseil et expertise pour le lancement de tous nos projets technos pour notre agence événementielle. Il a réussi à comprendre et à mettre en place des systèmes complexes et surtout sur mesure.
+
+Patient, à l'écoute, je conseille les yeux fermés de travailler avec lui.

src/content/recommendations/vanessa-boissard.md

@@ -2,6 +2,7 @@
 author: "Vanessa Boissard"
 authorRole: "Psychologue sociale"
 company: "AlterAlliance"
+avatar: vanessa-boissard.jpg
 url: https://www.linkedin.com/in/vanessaboissard
 date: 2011-12-05
 lang: "fr"

src/pages/ar/برمجة/index.astro

@@ -3,9 +3,11 @@ import { getCollection } from "astro:content";
 import { Image } from "astro:assets";
 import Layout from "../../../layouts/main.astro";
 import Link from "../../../components/Link.astro";
-import NavigationCard from "../../../components/code/NavigationCard.astro";
 import FeaturedRecommendation from "../../../components/code/FeaturedRecommendation.astro";
+import ProjectCard from "../../../components/code/ProjectCard.astro";
+import SkillBadge from "../../../components/code/SkillBadge.astro";
 import logoTiqa from "../../../assets/images/logo-tiqa-blanc.png";
+import skillsData from "../../../data/skills.json";
 
 const locale = "ar";
 
@@ -13,7 +15,15 @@ const experiences = (await getCollection("experiences"))
   .filter((e) => e.data.lang === locale && !e.data.draft)
   .sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1));
 
-const currentPosition = experiences.find((e) => !e.data.endDate);
+const recentExperiences = experiences.slice(0, 4);
+
+const projects = (await getCollection("projects"))
+  .filter((p) => p.data.lang === locale && !p.data.draft && p.data.category === "dev")
+  .sort((a, b) => {
+    if (a.data.featured !== b.data.featured) return a.data.featured ? -1 : 1;
+    return b.data.date.getTime() - a.data.date.getTime();
+  })
+  .slice(0, 3);
 
 const recommendations = (await getCollection("recommendations"))
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
@@ -23,6 +33,14 @@ const recommendationTexts = recommendations.map((rec) => ({
   ...rec,
   text: rec.body || '',
 }));
+
+const topSkills = skillsData.categories.slice(0, 3);
+
+function formatMonth(dateStr: string) {
+  const [year, month] = dateStr.split('-');
+  return new Date(parseInt(year), parseInt(month) - 1)
+    .toLocaleDateString('ar-SA', { year: 'numeric', month: 'short' });
+}
 ---
 
 <Layout
@@ -44,47 +62,56 @@ const recommendationTexts = recommendations.map((rec) => ({
       </p>
     </div>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12">
+    <div class="mb-12">
-      <NavigationCard
+      <div class="flex items-center justify-between mb-5">
-        title="المسار"
+        <h2 class="text-2xl font-bold text-white">المسار</h2>
-        description="الجدول الزمني لخبراتي المهنية منذ 2002."
+        <a href="/ar/برمجة/مسار" class="text-sm text-purple-200 hover:text-white transition-colors">&larr; عرض الكل</a>
-        href="/ar/برمجة/مسار"
+      </div>
-        icon="📋"
+      <div class="space-y-3">
-      />
+        {recentExperiences.map((exp) => {
-      <NavigationCard
+          const isOngoing = !exp.data.endDate;
-        title="المشاريع"
+          const start = formatMonth(exp.data.startDate);
-        description="برمجيات مفتوحة المصدر ومشاريع شخصية."
+          const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'الحالي';
-        href="/ar/برمجة/مشاريع"
+          return (
-        icon="💻"
+            <div class="facet-card rounded-xl bg-white/[0.06] border border-white/[0.1] p-4 hover:bg-white/[0.1] transition-colors">
-      />
+              <div class="flex items-start justify-between gap-4">
-      <NavigationCard
+                <div class="min-w-0">
-        title="المهارات"
+                  <p class="font-semibold text-white text-sm truncate">{exp.data.role}</p>
-        description="لغات، أطر عمل، ممارسات وأدوات."
+                  <p class="text-xs text-white/50 mt-0.5">
-        href="/ar/برمجة/مهارات"
+                    {exp.data.companyUrl ? (
-        icon="🛠"
+                      <a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{exp.data.company}</a>
-      />
+                    ) : exp.data.company}
-      <NavigationCard
+                    {exp.data.location && ` · ${exp.data.location}`}
-        title="التوصيات"
+                  </p>
-        description="ما يقوله الأشخاص الذين عملت معهم."
+                </div>
-        href="/ar/برمجة/توصيات"
+                <span class:list={["text-xs whitespace-nowrap flex-shrink-0", isOngoing ? "text-purple-200 font-semibold" : "text-white/40"]}>
-        icon="💬"
+                  {start} — {end}
-      />
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </div>
 
-    {currentPosition && (
+    <div class="mb-12">
-      <div class="facet-card rounded-2xl bg-gradient-to-r from-purple-500/20 to-indigo-500/20 border border-purple-300/15 p-6 mb-10">
+      <div class="flex items-center justify-between mb-5">
-        <p class="text-xs font-semibold text-purple-200 uppercase tracking-wider mb-2">المنصب الحالي</p>
+        <h2 class="text-2xl font-bold text-white">المشاريع</h2>
-        <p class="text-xl font-bold text-white">{currentPosition.data.role}</p>
+        <a href="/ar/برمجة/مشاريع" class="text-sm text-purple-200 hover:text-white transition-colors">&larr; عرض الكل</a>
-        <p class="text-sm text-white/60 mt-1">
-          {currentPosition.data.companyUrl ? (
-            <a href={currentPosition.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{currentPosition.data.company}</a>
-          ) : (
-            currentPosition.data.company
-          )}
-          {currentPosition.data.location && ` · ${currentPosition.data.location}`}
-        </p>
       </div>
-    )}
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {projects.map((project) => (
+          <ProjectCard
+            title={project.data.title}
+            description={project.data.description}
+            technologies={project.data.technologies}
+            url={project.data.url}
+            github={project.data.github}
+            featured={project.data.featured}
+          />
+        ))}
+      </div>
+    </div>
 
     {recommendationTexts.length > 0 && (
       <div class="mb-12">
@@ -107,6 +134,25 @@ const recommendationTexts = recommendations.map((rec) => ({
       </div>
     )}
 
+    <div class="mb-12">
+      <div class="flex items-center justify-between mb-5">
+        <h2 class="text-2xl font-bold text-white">المهارات</h2>
+        <a href="/ar/برمجة/مهارات" class="text-sm text-purple-200 hover:text-white transition-colors">&larr; عرض الكل</a>
+      </div>
+      <div class="space-y-4">
+        {topSkills.map((category) => (
+          <div>
+            <p class="text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">{category.name[locale as keyof typeof category.name]}</p>
+            <div class="flex flex-wrap gap-1.5">
+              {category.skills.map((skill) => (
+                <SkillBadge name={skill} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+
     <h2 class="text-2xl font-bold text-white mb-5">القيم والمنهج</h2>
     <div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
       <ul class="space-y-3 text-white/70">

src/pages/code/index.astro

@@ -3,9 +3,11 @@ import { getCollection } from "astro:content";
 import { Image } from "astro:assets";
 import Layout from "../../layouts/main.astro";
 import Link from "../../components/Link.astro";
-import NavigationCard from "../../components/code/NavigationCard.astro";
 import FeaturedRecommendation from "../../components/code/FeaturedRecommendation.astro";
+import ProjectCard from "../../components/code/ProjectCard.astro";
+import SkillBadge from "../../components/code/SkillBadge.astro";
 import logoTiqa from "../../assets/images/logo-tiqa-blanc.png";
+import skillsData from "../../data/skills.json";
 
 const locale = "fr";
 
@@ -13,7 +15,15 @@ const experiences = (await getCollection("experiences"))
   .filter((e) => e.data.lang === locale && !e.data.draft)
   .sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1));
 
-const currentPosition = experiences.find((e) => !e.data.endDate);
+const recentExperiences = experiences.slice(0, 4);
+
+const projects = (await getCollection("projects"))
+  .filter((p) => p.data.lang === locale && !p.data.draft && p.data.category === "dev")
+  .sort((a, b) => {
+    if (a.data.featured !== b.data.featured) return a.data.featured ? -1 : 1;
+    return b.data.date.getTime() - a.data.date.getTime();
+  })
+  .slice(0, 3);
 
 const recommendations = (await getCollection("recommendations"))
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
@@ -23,6 +33,14 @@ const recommendationTexts = recommendations.map((rec) => ({
   ...rec,
   text: rec.body || '',
 }));
+
+const topSkills = skillsData.categories.slice(0, 3);
+
+function formatMonth(dateStr: string) {
+  const [year, month] = dateStr.split('-');
+  return new Date(parseInt(year), parseInt(month) - 1)
+    .toLocaleDateString('fr-FR', { year: 'numeric', month: 'short' });
+}
 ---
 
 <Layout
@@ -44,47 +62,56 @@ const recommendationTexts = recommendations.map((rec) => ({
       </p>
     </div>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12">
+    <div class="mb-12">
-      <NavigationCard
+      <div class="flex items-center justify-between mb-5">
-        title="Parcours"
+        <h2 class="text-2xl font-bold text-white">Parcours</h2>
-        description="Timeline de mes expériences professionnelles depuis 2002."
+        <a href="/code/parcours" class="text-sm text-purple-200 hover:text-white transition-colors">Voir tout &rarr;</a>
-        href="/code/parcours"
+      </div>
-        icon="📋"
+      <div class="space-y-3">
-      />
+        {recentExperiences.map((exp) => {
-      <NavigationCard
+          const isOngoing = !exp.data.endDate;
-        title="Projets"
+          const start = formatMonth(exp.data.startDate);
-        description="Logiciels open source et projets personnels."
+          const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'Présent';
-        href="/code/projets"
+          return (
-        icon="💻"
+            <div class="facet-card rounded-xl bg-white/[0.06] border border-white/[0.1] p-4 hover:bg-white/[0.1] transition-colors">
-      />
+              <div class="flex items-start justify-between gap-4">
-      <NavigationCard
+                <div class="min-w-0">
-        title="Compétences"
+                  <p class="font-semibold text-white text-sm truncate">{exp.data.role}</p>
-        description="Langages, frameworks, pratiques et outils."
+                  <p class="text-xs text-white/50 mt-0.5">
-        href="/code/competences"
+                    {exp.data.companyUrl ? (
-        icon="🛠"
+                      <a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{exp.data.company}</a>
-      />
+                    ) : exp.data.company}
-      <NavigationCard
+                    {exp.data.location && ` · ${exp.data.location}`}
-        title="Recommandations"
+                  </p>
-        description="Ce que disent les gens avec qui j'ai travaillé."
+                </div>
-        href="/code/recommandations"
+                <span class:list={["text-xs whitespace-nowrap flex-shrink-0", isOngoing ? "text-purple-200 font-semibold" : "text-white/40"]}>
-        icon="💬"
+                  {start} — {end}
-      />
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </div>
 
-    {currentPosition && (
+    <div class="mb-12">
-      <div class="facet-card rounded-2xl bg-gradient-to-r from-purple-500/20 to-indigo-500/20 border border-purple-300/15 p-6 mb-10">
+      <div class="flex items-center justify-between mb-5">
-        <p class="text-xs font-semibold text-purple-200 uppercase tracking-wider mb-2">Poste actuel</p>
+        <h2 class="text-2xl font-bold text-white">Projets</h2>
-        <p class="text-xl font-bold text-white">{currentPosition.data.role}</p>
+        <a href="/code/projets" class="text-sm text-purple-200 hover:text-white transition-colors">Voir tous &rarr;</a>
-        <p class="text-sm text-white/60 mt-1">
-          {currentPosition.data.companyUrl ? (
-            <a href={currentPosition.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{currentPosition.data.company}</a>
-          ) : (
-            currentPosition.data.company
-          )}
-          {currentPosition.data.location && ` · ${currentPosition.data.location}`}
-        </p>
       </div>
-    )}
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {projects.map((project) => (
+          <ProjectCard
+            title={project.data.title}
+            description={project.data.description}
+            technologies={project.data.technologies}
+            url={project.data.url}
+            github={project.data.github}
+            featured={project.data.featured}
+          />
+        ))}
+      </div>
+    </div>
 
     {recommendationTexts.length > 0 && (
       <div class="mb-12">
@@ -107,6 +134,25 @@ const recommendationTexts = recommendations.map((rec) => ({
       </div>
     )}
 
+    <div class="mb-12">
+      <div class="flex items-center justify-between mb-5">
+        <h2 class="text-2xl font-bold text-white">Compétences</h2>
+        <a href="/code/competences" class="text-sm text-purple-200 hover:text-white transition-colors">Voir toutes &rarr;</a>
+      </div>
+      <div class="space-y-4">
+        {topSkills.map((category) => (
+          <div>
+            <p class="text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">{category.name[locale as keyof typeof category.name]}</p>
+            <div class="flex flex-wrap gap-1.5">
+              {category.skills.map((skill) => (
+                <SkillBadge name={skill} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+
     <h2 class="text-2xl font-bold text-white mb-5">Valeurs & Approche</h2>
     <div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
       <ul class="space-y-3 text-white/70">

src/pages/en/code/index.astro

@@ -3,9 +3,11 @@ import { getCollection } from "astro:content";
 import { Image } from "astro:assets";
 import Layout from "../../../layouts/main.astro";
 import Link from "../../../components/Link.astro";
-import NavigationCard from "../../../components/code/NavigationCard.astro";
 import FeaturedRecommendation from "../../../components/code/FeaturedRecommendation.astro";
+import ProjectCard from "../../../components/code/ProjectCard.astro";
+import SkillBadge from "../../../components/code/SkillBadge.astro";
 import logoTiqa from "../../../assets/images/logo-tiqa-blanc.png";
+import skillsData from "../../../data/skills.json";
 
 const locale = "en";
 
@@ -13,7 +15,15 @@ const experiences = (await getCollection("experiences"))
   .filter((e) => e.data.lang === locale && !e.data.draft)
   .sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1));
 
-const currentPosition = experiences.find((e) => !e.data.endDate);
+const recentExperiences = experiences.slice(0, 4);
+
+const projects = (await getCollection("projects"))
+  .filter((p) => p.data.lang === locale && !p.data.draft && p.data.category === "dev")
+  .sort((a, b) => {
+    if (a.data.featured !== b.data.featured) return a.data.featured ? -1 : 1;
+    return b.data.date.getTime() - a.data.date.getTime();
+  })
+  .slice(0, 3);
 
 const recommendations = (await getCollection("recommendations"))
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
@@ -23,6 +33,14 @@ const recommendationTexts = recommendations.map((rec) => ({
   ...rec,
   text: rec.body || '',
 }));
+
+const topSkills = skillsData.categories.slice(0, 3);
+
+function formatMonth(dateStr: string) {
+  const [year, month] = dateStr.split('-');
+  return new Date(parseInt(year), parseInt(month) - 1)
+    .toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
+}
 ---
 
 <Layout
@@ -44,47 +62,56 @@ const recommendationTexts = recommendations.map((rec) => ({
       </p>
     </div>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12">
+    <div class="mb-12">
-      <NavigationCard
+      <div class="flex items-center justify-between mb-5">
-        title="Career"
+        <h2 class="text-2xl font-bold text-white">Career</h2>
-        description="Timeline of my professional experiences since 2002."
+        <a href="/en/code/career" class="text-sm text-purple-200 hover:text-white transition-colors">See all &rarr;</a>
-        href="/en/code/career"
+      </div>
-        icon="📋"
+      <div class="space-y-3">
-      />
+        {recentExperiences.map((exp) => {
-      <NavigationCard
+          const isOngoing = !exp.data.endDate;
-        title="Projects"
+          const start = formatMonth(exp.data.startDate);
-        description="Open source software and personal projects."
+          const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'Present';
-        href="/en/code/projects"
+          return (
-        icon="💻"
+            <div class="facet-card rounded-xl bg-white/[0.06] border border-white/[0.1] p-4 hover:bg-white/[0.1] transition-colors">
-      />
+              <div class="flex items-start justify-between gap-4">
-      <NavigationCard
+                <div class="min-w-0">
-        title="Skills"
+                  <p class="font-semibold text-white text-sm truncate">{exp.data.role}</p>
-        description="Languages, frameworks, practices and tools."
+                  <p class="text-xs text-white/50 mt-0.5">
-        href="/en/code/skills"
+                    {exp.data.companyUrl ? (
-        icon="🛠"
+                      <a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{exp.data.company}</a>
-      />
+                    ) : exp.data.company}
-      <NavigationCard
+                    {exp.data.location && ` · ${exp.data.location}`}
-        title="Recommendations"
+                  </p>
-        description="What people I've worked with say about me."
+                </div>
-        href="/en/code/recommendations"
+                <span class:list={["text-xs whitespace-nowrap flex-shrink-0", isOngoing ? "text-purple-200 font-semibold" : "text-white/40"]}>
-        icon="💬"
+                  {start} — {end}
-      />
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </div>
 
-    {currentPosition && (
+    <div class="mb-12">
-      <div class="facet-card rounded-2xl bg-gradient-to-r from-purple-500/20 to-indigo-500/20 border border-purple-300/15 p-6 mb-10">
+      <div class="flex items-center justify-between mb-5">
-        <p class="text-xs font-semibold text-purple-200 uppercase tracking-wider mb-2">Current position</p>
+        <h2 class="text-2xl font-bold text-white">Projects</h2>
-        <p class="text-xl font-bold text-white">{currentPosition.data.role}</p>
+        <a href="/en/code/projects" class="text-sm text-purple-200 hover:text-white transition-colors">See all &rarr;</a>
-        <p class="text-sm text-white/60 mt-1">
-          {currentPosition.data.companyUrl ? (
-            <a href={currentPosition.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{currentPosition.data.company}</a>
-          ) : (
-            currentPosition.data.company
-          )}
-          {currentPosition.data.location && ` · ${currentPosition.data.location}`}
-        </p>
       </div>
-    )}
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {projects.map((project) => (
+          <ProjectCard
+            title={project.data.title}
+            description={project.data.description}
+            technologies={project.data.technologies}
+            url={project.data.url}
+            github={project.data.github}
+            featured={project.data.featured}
+          />
+        ))}
+      </div>
+    </div>
 
     {recommendationTexts.length > 0 && (
       <div class="mb-12">
@@ -107,6 +134,25 @@ const recommendationTexts = recommendations.map((rec) => ({
       </div>
     )}
 
+    <div class="mb-12">
+      <div class="flex items-center justify-between mb-5">
+        <h2 class="text-2xl font-bold text-white">Skills</h2>
+        <a href="/en/code/skills" class="text-sm text-purple-200 hover:text-white transition-colors">See all &rarr;</a>
+      </div>
+      <div class="space-y-4">
+        {topSkills.map((category) => (
+          <div>
+            <p class="text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">{category.name[locale as keyof typeof category.name]}</p>
+            <div class="flex flex-wrap gap-1.5">
+              {category.skills.map((skill) => (
+                <SkillBadge name={skill} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+
     <h2 class="text-2xl font-bold text-white mb-5">Values & Approach</h2>
     <div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
       <ul class="space-y-3 text-white/70">