feat: update project image paths and enhance project details in ProjectProps.json

public/data/ProjectProps.json

@@ -3,7 +3,7 @@
     "id": "SecCodeSmithFrontend",
     "title": "SecCodeSmith Portfolio Page - Frontend",
     "description": "A modern, responsive portfolio page showcasing my projects, skills, and blog posts. Built with React and styled-components for a sleek user interface.",
-    "image": "/images/projects/shadowguardian.jpg",
+    "image": "/images/SecCodeSmithFrontProj/Main.png",
     "category": ["Web"],
     "featured": true,
     "technologies": [
@@ -15,6 +15,29 @@
     "links": {
       "github": "https://github.com/SecCodeSmith/",
       "demo":   "https://seccodesmith.pl"
+    },
+    "projectDetails": {
+      "descriptions": [
+         "This portfolio page is designed to highlight my skills and projects in a visually appealing way. It features a clean layout, smooth animations, and responsive design for optimal viewing on all devices.",
+        "The project utilizes React for building the user interface, TypeScript for type safety, and SCSS for styling. The use of Vite ensures fast development and build times."
+      ],
+      "startDate": "12-05-2025",
+      "endDate": "",
+      "dateFormatted": "DD MMMM YYYY",
+      "role": "Frontend Developer",
+      "status": "In Progress",
+      "keyFeatures": [
+        "Responsive design with mobile-first approach",
+        "Dynamic project showcase with filtering options",
+        "Interactive blog section with latest posts"
+      ],
+      "gallery": ["/images/SecCodeSmithFrontProj/1.png", "/images/SecCodeSmithFrontProj/2.png", "/images/SecCodeSmithFrontProj/3.png", "/images/SecCodeSmithFrontProj/4.png" ],
+      "fullTechStack": [
+        { "name": "React", "icons": "devicon-react-original" },
+        { "name": "TypeScript", "icons": "devicon-typescript-plain" },
+        { "name": "SCSS", "icons": "devicon-sass-original" },
+        { "name": "Vite", "icons": "devicon-vitejs-plain" }
+      ]
     }
   }
 ]

src/components/ProjectCard.tsx

@@ -124,7 +124,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, onOpenDetails
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}>
         <div className={`position-relative`}>
-          <img src={project.image} className={style.cardImgTop} alt={project.title} />
+          <img src={`${import.meta.env.BASE_URL}${project.image}`} className={style.cardImgTop} alt={project.title} />
           <CategoryBadge category={project.category} />
         </div>
         <div className={`card-body d-flex flex-column ${style.cardBody}`}>