From b1816ec6041062453428276b01cf6005064d277c Mon Sep 17 00:00:00 2001
From: seccodesmith <admin@seccodesmith.pl>
Date: Mon, 26 May 2025 22:34:44 +0200
Subject: [PATCH] feat: update ProjectModal and projectsData for enhanced
 project details and technology display

---
 src/components/ProjectModal.tsx | 126 +++++++++++++++-----------------
 src/data/projectsData.ts        |  42 ++++++++---
 src/untils/BlogPostProps.ts     |   3 +-
 src/untils/ProjectProps.ts      |  23 ++++--
 4 files changed, 108 insertions(+), 86 deletions(-)

diff --git a/src/components/ProjectModal.tsx b/src/components/ProjectModal.tsx
index 52dd64f..79f3483 100644
--- a/src/components/ProjectModal.tsx
+++ b/src/components/ProjectModal.tsx
@@ -26,7 +26,7 @@ export const ProjectModal: React.FC<ProjectModalProps> = ({ project }) => {
                             <div className={`row ${style.row}`}>
                                 <div className="col-md-8">
                                     {
-                                        project.projectDetails ? project.projectDetails.descriptions.map((desc, index) => (
+                                        project.projectDetails ? project.projectDetails.descriptions?.map((desc, index) => (
                                             <p key={index} className="mb-3">{desc}</p>
                                         )) :
                                             <p>{project.description}</p>
@@ -80,84 +80,76 @@ export const ProjectModal: React.FC<ProjectModalProps> = ({ project }) => {
                                 )
                             }
 
-
-
-
                             <h4 className="mt-4 mb-3">Technologies Used</h4>
-                            <div className="mb-4">
-                                <span className="tech-chip">
-                                    <i className="devicon-cplusplus-plain tech-chip-icon"></i>
-                                    <span className="tech-chip-name">C++</span>
-                                </span>
-                                <span className="tech-chip">
-                                    <i className="fas fa-microchip tech-chip-icon"></i>
-                                    <span className="tech-chip-name">STM32F4</span>
-                                </span>
-                                <span className="tech-chip">
-                                    <i className="fas fa-wifi tech-chip-icon"></i>
-                                    <span className="tech-chip-name">ESP32</span>
-                                </span>
-                                <span className="tech-chip">
-                                    <i className="fas fa-shield-alt tech-chip-icon"></i>
-                                    <span className="tech-chip-name">AES-256</span>
-                                </span>
-                                <span className="tech-chip">
-                                    <i className="devicon-react-original tech-chip-icon"></i>
-                                    <span className="tech-chip-name">React Native</span>
-                                </span>
-                                <span className="tech-chip">
-                                    <i className="fas fa-broadcast-tower tech-chip-icon"></i>
-                                    <span className="tech-chip-name">BLE 5.0</span>
-                                </span>
-                                <span className="tech-chip">
-                                    <i className="fas fa-network-wired tech-chip-icon"></i>
-                                    <span className="tech-chip-name">Zigbee</span>
-                                </span>
-                                <span className="tech-chip">
-                                    <i className="fas fa-server tech-chip-icon"></i>
-                                    <span className="tech-chip-name">Node.js</span>
-                                </span>
-                                <span className="tech-chip">
-                                    <i className="fas fa-database tech-chip-icon"></i>
-                                    <span className="tech-chip-name">PostgreSQL</span>
-                                </span>
-                                <span className="tech-chip">
-                                    <i className="devicon-docker-plain tech-chip-icon"></i>
-                                    <span className="tech-chip-name">Docker</span>
-                                </span>
-                            </div>
-
+                            <div className="mb-4"></div>
                             {
-                                project.projectDetails?.gallery && project.projectDetails?.gallery.length > 0 && (
+                                project.projectDetails?.fullTechStack && project.projectDetails?.fullTechStack?.length > 0 ? (
                                     <>
-                                        <h4 className="mt-4 mb-3">Gallery</h4>
-                                        <div className="row">
-                                            <div className="col-md-4 col-6">
-                                                {
-                                                    project.projectDetails.gallery.map((image, index) => (
-                                                        <div key={index} className="gallery-item">
-                                                            <img src={image} alt={`Gallery Image ${index + 1}`} className="gallery-image"></img>
-                                                        </div>
-                                                    ))
-                                                }
-                                            </div>
-                                        </div>
+                                        {project.projectDetails.fullTechStack.map((tech, index) => (
+                                            <span key={index} className={`tech-chip ${style.techChip}`}>
+                                                <i className={`${tech.icons} tech-chip-icon`}></i>
+                                                <span className="tech-chip-name">{tech.name}</span>
+                                            </span>
+                                        ))}
+                                    </>
+                                ) : (
+                                    <>
+                                        {project.technologies && project.technologies.length > 0 ? (
+                                            project.technologies.map((tech, index) => (
+
+                                                <span key={index} className={`tech-chip ${style.techChip}`}>
+                                                    <i className={`${tech.icon} tech-chip-icon`}></i>
+                                                    <span className="tech-chip-name">{tech.name}</span>
+                                                </span>
+
+                                            ))
+                                        ) : (
+                                            <p className="text-muted">No technologies listed.</p>
+                                        )
+                                        }
                                     </>
                                 )
-                            }                            
+                            }
                         </div>
-                        <div className={`modal-footer ${style.modalFooter}`}>
-                            <a href="#" className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}>
+
+                        {
+                            project.projectDetails?.gallery && project.projectDetails?.gallery.length > 0 && (
+                                <>
+                                    <h4 className="mt-4 mb-3">Gallery</h4>
+                                    <div className="row">
+                                        {
+                                            project.projectDetails.gallery.map((image, index) => (
+                                                <div className="col-md-4 col-6">
+                                                    <div key={index} className={`gallery-item ${style.galleryItem}`}>
+                                                        <img src={image} alt={`Gallery Image ${index + 1}`} className={`gallery-image ${style.galleryImage}`}></img>
+                                                    </div>
+                                                </div>
+                                            ))
+                                        }
+
+                                    </div>
+                                </>
+                            )
+                        }
+                    </div>
+                    <div className={`modal-footer ${style.modalFooter}`}>
+                        {project.links.github && (
+                            <a href={project.links.github} className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`} target="_blank" rel="noopener noreferrer">
                                 <i className="fab fa-github btn-icon"></i>Source Code
                             </a>
-                            <a href="#" className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}>
+                        )}
+                        {project.links.demo && (
+                            <a href={project.links.demo} className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`} target="_blank" rel="noopener noreferrer">
                                 <i className="fas fa-external-link-alt btn-icon"></i>Live Demo
                             </a>
-                            <a href="#" className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}>
+                        )}
+                        {project.links.documentation && (
+                            <a href={project.links.documentation} className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`} target="_blank" rel="noopener noreferrer">
                                 <i className="fas fa-book btn-icon"></i>Documentation
                             </a>
-                            <button type="button" className={`btn btn-secondary`} data-bs-dismiss="modal">Close</button>
-                        </div>
+                        )}
+
+                        <button type="button" className={`btn btn-secondary`} data-bs-dismiss="modal">Close</button>
                     </div>
                 </div>
             </div>
diff --git a/src/data/projectsData.ts b/src/data/projectsData.ts
index 986b394..1574efd 100644
--- a/src/data/projectsData.ts
+++ b/src/data/projectsData.ts
@@ -31,22 +31,44 @@ export const Categories: CategoryMap = {
 
 export const projectsData: ProjectProps[] = [
   {
-    id: "shadowguardian",
-    title: "ShadowGuardian: Secure IoT Monitoring System",
-    description: "A comprehensive security monitoring system built on STM32 microcontrollers with end-to-end encryption and low-power operation. Integrates with home automation systems and provides real-time alerts through a mobile application.",
+    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",
-    category: [Categories["IoT"], Categories["Embedded"]],
+    category: [Categories["Web"]],
     featured: true,
     technologies: [
-      { name: "C++", icon: "devicon-cplusplus-plain tech-icon" },
-      { name: "STM32", icon: "fas fa-microchip tech-icon" },
-      { name: "ESP32", icon: "fas fa-wifi tech-icon" },
-      { name: "Encryption", icon: "fas fa-shield-alt tech-icon" },
-      { name: "React Native", icon: "devicon-react-original tech-icon" }
+      { name: "React", icon: "devicon-react-original tech-icon" },
+      { name: "TypeScript", icon: "devicon-typescript-plain tech-icon" },
+      { name: "SCSS", icon: "devicon-sass-original tech-icon" },
+      { name: "Vite", icon: "devicon-vitejs-plain tech-icon" }
     ],
     links: {
       github: "https://github.com/SecCodeSmith/shadowguardian",
-      demo: "https://shadowguardian.demo.com"
+      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/projects/shadowguardian1.jpg", "/images/projects/shadowguardian2.jpg"],
+      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" }
+      ]
     }
   },
   {
diff --git a/src/untils/BlogPostProps.ts b/src/untils/BlogPostProps.ts
index 3b298a9..ee36a9d 100644
--- a/src/untils/BlogPostProps.ts
+++ b/src/untils/BlogPostProps.ts
@@ -12,4 +12,5 @@ export interface BlogPostProps {
   featured?: boolean;
   tags: string[];
   content: string;
-}
\ No newline at end of file
+}
+
diff --git a/src/untils/ProjectProps.ts b/src/untils/ProjectProps.ts
index bd7c382..1586526 100644
--- a/src/untils/ProjectProps.ts
+++ b/src/untils/ProjectProps.ts
@@ -11,19 +11,21 @@ export interface ProjectProps {
   links: {
     github?: string;
     demo?: string;
+    documentation?: string;
   };
 }
 
 export interface ProjectDetails {
-  descriptions: string[];
-  startDate: string;
-  endDate: string;
+  descriptions?: string[];
+  startDate?: string;
+  endDate?: string;
   dateFormatted?: string;
-  role: string;
-  status: string;
-  client: string;
-  keyFeatures: string[];
-  gallery: string[];
+  role?: string;
+  status?: string;
+  client?: string;
+  keyFeatures?: string[];
+  gallery?: string[];
+  fullTechStack?: FullTechStack[];
 }
 
 export interface Category {
@@ -37,3 +39,8 @@ export interface ProjectTech {
   name: string;
   icon: string;
 }
+
+export interface FullTechStack {
+  name: string;
+  icons: string;
+}