From ae2bb88d019828020f2ec22aaff768944f68f614 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 31 Mar 2025 18:01:18 +0200
Subject: [PATCH] fix: key props

---
 src/components/TechScroller.tsx  | 4 ++--
 src/sections/ProjectsSection.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/TechScroller.tsx b/src/components/TechScroller.tsx
index 9ed743e..7ae1b20 100644
--- a/src/components/TechScroller.tsx
+++ b/src/components/TechScroller.tsx
@@ -22,8 +22,8 @@ const techs = [FaHtml5, FaCss3Alt, FaJs, FaVuejs, FaReact, SiNestjs, SiNuxtdotjs
 function TechScroller() {
   return (
     <StyledTechScroller>
-      {techs.map((TechIcon) => (
-        <TechIcon />
+      {techs.map((TechIcon, i) => (
+        <TechIcon key={i} />
       ))}
     </StyledTechScroller>
   );
diff --git a/src/sections/ProjectsSection.tsx b/src/sections/ProjectsSection.tsx
index bd7b2ef..046ddaa 100644
--- a/src/sections/ProjectsSection.tsx
+++ b/src/sections/ProjectsSection.tsx
@@ -108,7 +108,7 @@ function ProjectsSection() {
 
       <div className="showcase-container">
         {projects.showcase.map((p) => (
-          <div className="project-card showcase">
+          <div className="project-card showcase" key={p.id}>
             <div className="project-thumbnail">
               <img src={p.thumbnailSrc} alt="" />
             </div>
@@ -122,7 +122,7 @@ function ProjectsSection() {
 
               <div className="project-badges">
                 {p.technologies.map((tech) => (
-                  <img src={tech} alt="technology badge"></img>
+                  <img key={tech} src={tech} alt="technology badge"></img>
                 ))}
               </div>
 
@@ -149,7 +149,7 @@ function ProjectsSection() {
 
       <div className="other-projects-container">
         {projects.other.map((p) => (
-          <div className="project-card">
+          <div className="project-card" key={p.id}>
             <div className="project-content">
               <div className="project-title">
                 {p.iconSrc && <img className="project-title-icon" src={p.iconSrc} alt="" />}
@@ -159,7 +159,7 @@ function ProjectsSection() {
 
               <div className="project-badges">
                 {p.technologies.map((tech) => (
-                  <img src={tech} alt="technology badge"></img>
+                  <img key={tech} src={tech} alt="technology badge"></img>
                 ))}
               </div>