Fix-projects #8
@@ -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>
|
||||
|
||||
+32
-10
@@ -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" }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -13,3 +13,4 @@ export interface BlogPostProps {
|
||||
tags: string[];
|
||||
content: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user