feat: update ProjectModal and projectsData for enhanced project details and technology display
This commit is contained in:
@@ -26,7 +26,7 @@ export const ProjectModal: React.FC<ProjectModalProps> = ({ project }) => {
|
|||||||
<div className={`row ${style.row}`}>
|
<div className={`row ${style.row}`}>
|
||||||
<div className="col-md-8">
|
<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 key={index} className="mb-3">{desc}</p>
|
||||||
)) :
|
)) :
|
||||||
<p>{project.description}</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>
|
<h4 className="mt-4 mb-3">Technologies Used</h4>
|
||||||
<div className="mb-4">
|
<div className="mb-4"></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
{
|
{
|
||||||
project.projectDetails?.gallery && project.projectDetails?.gallery.length > 0 && (
|
project.projectDetails?.fullTechStack && project.projectDetails?.fullTechStack?.length > 0 ? (
|
||||||
<>
|
<>
|
||||||
<h4 className="mt-4 mb-3">Gallery</h4>
|
{project.projectDetails.fullTechStack.map((tech, index) => (
|
||||||
<div className="row">
|
<span key={index} className={`tech-chip ${style.techChip}`}>
|
||||||
<div className="col-md-4 col-6">
|
<i className={`${tech.icons} tech-chip-icon`}></i>
|
||||||
{
|
<span className="tech-chip-name">{tech.name}</span>
|
||||||
project.projectDetails.gallery.map((image, index) => (
|
</span>
|
||||||
<div key={index} className="gallery-item">
|
))}
|
||||||
<img src={image} alt={`Gallery Image ${index + 1}`} className="gallery-image"></img>
|
</>
|
||||||
</div>
|
) : (
|
||||||
))
|
<>
|
||||||
}
|
{project.technologies && project.technologies.length > 0 ? (
|
||||||
</div>
|
project.technologies.map((tech, index) => (
|
||||||
</div>
|
|
||||||
|
<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>
|
||||||
<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
|
<i className="fab fa-github btn-icon"></i>Source Code
|
||||||
</a>
|
</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
|
<i className="fas fa-external-link-alt btn-icon"></i>Live Demo
|
||||||
</a>
|
</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
|
<i className="fas fa-book btn-icon"></i>Documentation
|
||||||
</a>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+32
-10
@@ -31,22 +31,44 @@ export const Categories: CategoryMap = {
|
|||||||
|
|
||||||
export const projectsData: ProjectProps[] = [
|
export const projectsData: ProjectProps[] = [
|
||||||
{
|
{
|
||||||
id: "shadowguardian",
|
id: "SecCodeSmithFrontend",
|
||||||
title: "ShadowGuardian: Secure IoT Monitoring System",
|
title: "SecCodeSmith Portfolio Page - Frontend",
|
||||||
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.",
|
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/projects/shadowguardian.jpg",
|
||||||
category: [Categories["IoT"], Categories["Embedded"]],
|
category: [Categories["Web"]],
|
||||||
featured: true,
|
featured: true,
|
||||||
technologies: [
|
technologies: [
|
||||||
{ name: "C++", icon: "devicon-cplusplus-plain tech-icon" },
|
{ name: "React", icon: "devicon-react-original tech-icon" },
|
||||||
{ name: "STM32", icon: "fas fa-microchip tech-icon" },
|
{ name: "TypeScript", icon: "devicon-typescript-plain tech-icon" },
|
||||||
{ name: "ESP32", icon: "fas fa-wifi tech-icon" },
|
{ name: "SCSS", icon: "devicon-sass-original tech-icon" },
|
||||||
{ name: "Encryption", icon: "fas fa-shield-alt tech-icon" },
|
{ name: "Vite", icon: "devicon-vitejs-plain tech-icon" }
|
||||||
{ name: "React Native", icon: "devicon-react-original tech-icon" }
|
|
||||||
],
|
],
|
||||||
links: {
|
links: {
|
||||||
github: "https://github.com/SecCodeSmith/shadowguardian",
|
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" }
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -12,4 +12,5 @@ export interface BlogPostProps {
|
|||||||
featured?: boolean;
|
featured?: boolean;
|
||||||
tags: string[];
|
tags: string[];
|
||||||
content: string;
|
content: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,19 +11,21 @@ export interface ProjectProps {
|
|||||||
links: {
|
links: {
|
||||||
github?: string;
|
github?: string;
|
||||||
demo?: string;
|
demo?: string;
|
||||||
|
documentation?: string;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ProjectDetails {
|
export interface ProjectDetails {
|
||||||
descriptions: string[];
|
descriptions?: string[];
|
||||||
startDate: string;
|
startDate?: string;
|
||||||
endDate: string;
|
endDate?: string;
|
||||||
dateFormatted?: string;
|
dateFormatted?: string;
|
||||||
role: string;
|
role?: string;
|
||||||
status: string;
|
status?: string;
|
||||||
client: string;
|
client?: string;
|
||||||
keyFeatures: string[];
|
keyFeatures?: string[];
|
||||||
gallery: string[];
|
gallery?: string[];
|
||||||
|
fullTechStack?: FullTechStack[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Category {
|
export interface Category {
|
||||||
@@ -37,3 +39,8 @@ export interface ProjectTech {
|
|||||||
name: string;
|
name: string;
|
||||||
icon: string;
|
icon: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface FullTechStack {
|
||||||
|
name: string;
|
||||||
|
icons: string;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user