feat: update BlogCard and Project components with improved styling and structure
This commit is contained in:
@@ -26,7 +26,7 @@ export const BlogCard: React.FC<BlogCardProps> = ({ post }) => {
|
||||
<div className={`card ${styles.card} ${post.featured ? styles.featuredCard : ''}`}>
|
||||
<div className="position-relative">
|
||||
<img src={post.image} className={`card-img-top ${post.featured ? styles.featuredImg : ''}`} alt={post.title} />
|
||||
<div className="category-badge">{post.category}</div>
|
||||
<div className={styles.categoryBadge}>{post.category}</div>
|
||||
|
||||
{post.featured && (
|
||||
<div className={`featured-badge ${styles.featuredBadge}`}>
|
||||
|
||||
@@ -64,13 +64,13 @@ const ProjectLinks: React.FC<{ links: { github?: string; demo?: string }, id: st
|
||||
className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}
|
||||
onClick={() => onOpenDetails(id)}
|
||||
>
|
||||
<i className={`fas fa-info-circle ${style.btnIcon}`}></i>
|
||||
<i className={`fas fa-info-circle ${style.btnIcon}`} ></i>
|
||||
Project Details
|
||||
</button>
|
||||
|
||||
{links.github && (
|
||||
<a href={links.github} className={`btn btn-outline-secondary ${style.btnOutlineSecondary} `}>
|
||||
<i className={`fab fa-github ${style.btnIcon}`}></i>
|
||||
<i className={`fab fa-github ${style.btnIcon}`} ></i>
|
||||
View Code
|
||||
</a>
|
||||
)}
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import type { ProjectProps } from './ProjectCard';
|
||||
|
||||
import style from '@styles/Project.module.scss'
|
||||
|
||||
|
||||
interface ProjectModalProps {
|
||||
project: ProjectProps | null;
|
||||
onClose: () => void;
|
||||
@@ -9,48 +12,65 @@ export const ProjectModal: React.FC<ProjectModalProps> = ({ project, onClose })
|
||||
if (!project) return null;
|
||||
|
||||
return (
|
||||
<div className="modal fade show" style={{ display: 'block' }} tabIndex={-1}>
|
||||
<div className="modal-dialog modal-xl modal-dialog-scrollable">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{project.title}</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="mb-4">
|
||||
<img src={project.image} className="img-fluid rounded mb-3" alt={project.title} />
|
||||
<div className="modal fade" id="shadowguardianModal" tabIndex={-1} aria-labelledby="shadowguardianModalLabel" aria-hidden="true">
|
||||
<div className="modal-dialog modal-xl modal-dialog-scrollable">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title" id="shadowguardianModalLabel">ShadowGuardian: Secure IoT Monitoring System</h5>
|
||||
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="mb-4">
|
||||
<img src="/api/placeholder/1000/400" className="img-fluid rounded mb-3" alt="ShadowGuardian Project"></img>
|
||||
<div className="row">
|
||||
<div className="col-md-8">
|
||||
<p>ShadowGuardian is a comprehensive security monitoring system designed for both residential and commercial applications. Built on a foundation of STM32 microcontrollers, it provides reliable, secure monitoring with extremely low power consumption, allowing for battery operation of up to 2 years.</p>
|
||||
<p>The system features end-to-end encryption for all communications, ensuring that sensitive security data remains private. Its modular architecture allows for easy expansion with additional sensors and integration with existing home automation systems.</p>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="card h-100">
|
||||
<div className="card-header">
|
||||
<h5 className="mb-0">Project Overview</h5>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<p><strong>Duration:</strong> 6 months</p>
|
||||
<p><strong>Role:</strong> Lead Developer</p>
|
||||
<p><strong>Status:</strong> Completed</p>
|
||||
<p><strong>Client:</strong> ConnectedWorld Technologies</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 className="mt-4 mb-3">Key Features</h4>
|
||||
<ul className="features-list">
|
||||
<li>Military-grade AES-256 encryption for all data transmission</li>
|
||||
<li>Ultra-low power consumption with intelligent sleep modes</li>
|
||||
<li>Modular sensor architecture supporting motion, contact, glass-break, and environmental sensors</li>
|
||||
<li>Local processing to reduce cloud dependency and improve response times</li>
|
||||
<li>Mesh networking for extended coverage without Wi-Fi dependencies</li>
|
||||
<li>Real-time notifications via mobile app (iOS and Android)</li>
|
||||
<li>Integration with popular home automation platforms including HomeKit, Google Home, and Alexa</li>
|
||||
<li>Tamper detection and notification system</li>
|
||||
<li>Optional cellular backup connection for critical deployments</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<a href="#" className="btn btn-outline-secondary">
|
||||
<i className="fab fa-github btn-icon"></i>Source Code
|
||||
</a>
|
||||
<a href="#" className="btn btn-outline-secondary">
|
||||
<i className="fas fa-external-link-alt btn-icon"></i>Live Demo
|
||||
</a>
|
||||
<a href="#" className="btn btn-outline-secondary">
|
||||
<i className="fas fa-book btn-icon"></i>Documentation
|
||||
</a>
|
||||
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>{project.description}</p>
|
||||
|
||||
<h4 className="mt-4 mb-3">Technologies Used</h4>
|
||||
<div className="mb-4">
|
||||
{project.technologies.map((tech, index) => (
|
||||
<span className="tech-chip" key={index}>
|
||||
<i className={`${tech.icon} tech-chip-icon`}></i>
|
||||
<span className="tech-chip-name">{tech.name}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
{project.links.github && (
|
||||
<a href={project.links.github} className="btn btn-outline-secondary">
|
||||
<i className="fab fa-github me-2"></i>Source Code
|
||||
</a>
|
||||
)}
|
||||
|
||||
{project.links.demo && (
|
||||
<a href={project.links.demo} className="btn btn-outline-secondary">
|
||||
<i className="fas fa-external-link-alt me-2"></i>Live Demo
|
||||
</a>
|
||||
)}
|
||||
|
||||
<button type="button" className="btn btn-secondary" onClick={onClose}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-backdrop fade show"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import { PageHeader } from '../components/PageHeader';
|
||||
import { ProjectCard, type ProjectProps } from '../components/ProjectCard';
|
||||
import { ProjectModal } from '../components/ProjectModal';
|
||||
import { projectsData, Categories } from '../data/projectsData';
|
||||
import { styleText } from 'util';
|
||||
|
||||
import style from '@styles/Project.module.scss'
|
||||
|
||||
@@ -48,7 +47,7 @@ export const Projects = () => {
|
||||
{/* Projects Filter */}
|
||||
<div className={`filter-container ${style.filterContainer} text-center`}>
|
||||
<button
|
||||
className={`filter-button ${style.filterButton} ${activeFilter === 'all' ? style.active : ''}`}
|
||||
className={`filter-button ${style.filterButton} ${activeFilter === 'all' ? style.active : ''}`}
|
||||
onClick={() => handleFilterClick('all')}
|
||||
>
|
||||
All Artifacts
|
||||
@@ -56,7 +55,7 @@ export const Projects = () => {
|
||||
{Object.values(categories).map((category) => (
|
||||
<button
|
||||
key={category.shortName}
|
||||
className={`filter-button ${style.filterButton} ${activeFilter === category.shortName.toLowerCase() ? style.active : ''}`}
|
||||
className={`filter-button ${style.filterButton} ${activeFilter === category.shortName.toLowerCase() ? style.active : ''}`}
|
||||
onClick={() => handleFilterClick(category.shortName.toLowerCase())}
|
||||
>
|
||||
{category.fullName}
|
||||
@@ -83,8 +82,8 @@ export const Projects = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-center mt-4">
|
||||
<a href="https://github.com/SecCodeSmith" className="btn btn-primary">
|
||||
<div className="text-center mt-4 mb-5">
|
||||
<a href="https://github.com/SecCodeSmith" className={`btn btn-primary ${style.btnPrimary}`}>
|
||||
<i className="fab fa-github me-2"></i> View All Projects on GitHub
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user