Copyright © 2023. All rights are reserved
+Copyright © 2025. All rights are reserved
-
Front-End
+Full-Stack
{" "} Developer{" "} - in Punjab + in Lahore
- Hi, I'm Rustam Ali Kazmi. A passionate Front-end Developer + Hi, I'm Rustam Ali Kazmi. A passionate Full Stack Developer based in Lahore, Punjab. 📍
@@ -68,6 +68,13 @@ const HeroSection = () => {
alt="Tailwind&Sass"
/>
+
+ 
+
+ {/* Close button */}
+
+
+ {/* Previous button */}
+ {images.length > 1 && (
+
+ )}
+
+ {/* Next button */}
+ {images.length > 1 && (
+
+ )}
+
+ {/* Main image container */}
+
+ )
+}
+
+export default ImageLightbox
\ No newline at end of file
diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx
new file mode 100644
index 0000000..56e53a5
--- /dev/null
+++ b/src/components/ProjectCard.jsx
@@ -0,0 +1,150 @@
+import { useState } from 'react'
+import { Eye, ExternalLink, GitBranch, Code2 } from 'lucide-react'
+
+const ProjectCard = ({ project, onImageClick }) => {
+ const [imageError, setImageError] = useState({})
+
+ const handleImageError = (index) => {
+ setImageError(prev => ({ ...prev, [index]: true }))
+ }
+
+ const handleImageClick = (index) => {
+ onImageClick(project.images, index)
+ }
+
+ return (
+
+
+
+ {/* Thumbnail navigation */}
+ {images.length > 1 && (
+
+ 
+
+
+ {/* Image info */}
+
+
+ + {currentImage.alt} +
+ + {/* Image counter */} + {images.length > 1 && ( ++ {currentIndex + 1} of {images.length} +
+ )} +
+ {images.map((image, index) => (
+
+ ))}
+
+ )}
+
+ {/* Click outside to close */}
+
+
+ {/* Project Header */}
+
+ )
+}
+
+export default ProjectCard
\ No newline at end of file
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
index 4872817..bb18e82 100644
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -1,42 +1,111 @@
-import React from 'react'
+import { useState } from 'react'
+import { Building2, Truck, Briefcase, FolderOpen } from 'lucide-react'
+import ImageLightbox from './ImageLightbox'
+import ProjectCard from './ProjectCard'
import memershipDashboardImg from '../assets/screenshots/membership-dashboard.png'
import metricsDashboardImg from '../assets/screenshots/metrics-dashboard.png'
import loginPageImg from '../assets/screenshots/login-page.png'
import departmentImg from '../assets/screenshots/department.png'
const Projects = () => {
- return (
-
+
+
+ {/* Screenshots Section */}
+
+
+
+
+
+
+ {project.status}
+
+
+
+ + {project.title} +
+{project.period}
+ ++ {project.description} +
+
+
+
+ {/* Content Area - Flexible */}
+
+ {project.images.slice(0, 4).map((image, index) => (
+
+ handleImageClick(index)}
+ >
+ {!imageError[index] ? (
+ 
handleImageError(index)}
+ />
+ ) : (
+
+ ))}
+
+
+ )}
+
+
+
+ 🖼️
+ {image.alt}
+
+
+
+
+ {/* Tech Stack */}
+
+
+ {/* Action Buttons - Always at bottom */}
+
+
+
+ {/* Key Features */}
+ Tech Stack
+
+ {project.techStack.slice(0, 5).map((tech, index) => (
+
+ {tech}
+
+ ))}
+ {project.techStack.length > 5 && (
+
+ +{project.techStack.length - 5}
+
+ )}
+
+
+
+ Key Features
+
+ {project.keyFeatures.slice(0, 3).map((feature, index) => (
+
+
+
+ {feature}
+
+ ))}
+
+
+
+ {project.liveLink && (
+
+
+
+
+ )}
+
-
-
Projects
- -
-
)
}
diff --git a/src/index.css b/src/index.css
index bffa81a..65c6262 100644
--- a/src/index.css
+++ b/src/index.css
@@ -67,4 +67,17 @@
height: 22rem;
width: 22rem;
}
- }
\ No newline at end of file
+ }
+
+/* Line clamp utility for text truncation */
+.line-clamp-3 {
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+/* Aspect ratio utility for images */
+.aspect-video {
+ aspect-ratio: 16 / 9;
+}
\ No newline at end of file
🕌 MMS – Mosque Management System
-Feb 2025 – Present (Work in Progress)
+ const [lightboxOpen, setLightboxOpen] = useState(false) + const [selectedImages, setSelectedImages] = useState([]) + const [selectedImageIndex, setSelectedImageIndex] = useState(0) -- A real-time web application built to streamline mosque operations like member management, donation tracking, mosque events, and more — targeted for mosques in the USA, Europe, and Russia. -
+ const projects = [ + { + id: 1, + title: "MMS – Mosque Management System", + icon: Building2, + period: "Feb 2024 - Present", + status: "Work in Progress", + description: "A comprehensive real-time web application designed to streamline mosque operations including member management, donation tracking, event coordination, and administrative tasks. Specifically tailored for mosques across the USA, Europe, and Russia with multi-language support.", + techStack: ["Angular 16+", "RxJS", "Angular Material", "SCSS", "Chart.js", "REST APIs", "Stripe", "Cloudinary", "TypeScript", "Node.js"], + keyFeatures: ["Real-time analytics dashboard", "Cloudinary photo management", "Stripe payment integration", "Multi-step responsive forms"], + images: [ + { src: loginPageImg, alt: "Secure Login Interface" }, + { src: metricsDashboardImg, alt: "Analytics Dashboard" }, + { src: memershipDashboardImg, alt: "Member Management System" }, + { src: departmentImg, alt: "Department Organization" } + ], + liveLink: null, + githubLink: null + }, + { + id: 2, + title: "Numeo Freight Management Platform", + icon: Truck, + period: "2022 - Present", + status: "Live", + description: "Freight Management Platform (FMP): Web platform for managing freight operations, load tracking, payments, and carrier engagement. Built a real-time load matching system improving carrier efficiency. Optimized search/filtering with advanced algorithms, reducing database load by 40%. Designed a microservices architecture with Rush.js monorepo for scalable deployment.", + techStack: ["React", "Node.js", "Rush.js", "Microservices", "REST APIs", "WebSocket", "MongoDB", "Redis", "Docker", "AWS"], + keyFeatures: ["Real-time load matching system", "Advanced search algorithms", "Carrier engagement platform", "Microservices architecture"], + images: [ + { src: "https://via.placeholder.com/400x300/4F46E5/white?text=Freight+Dashboard", alt: "Freight Management Dashboard" }, + { src: "https://via.placeholder.com/400x300/7C3AED/white?text=Load+Tracking", alt: "Real-time Load Tracking System" } + ], + liveLink: "https://agent.numeo.ai/", + githubLink: null + }, + { + id: 3, + title: "Tamakun Job Seeking Platform", + icon: Briefcase, + period: "2025", + status: "Live", + description: "A comprehensive job seeking and recruitment platform connecting job seekers with employers across the UAE. Features advanced job matching algorithms, real-time application tracking, employer dashboards, and seamless candidate management. Built with modern web technologies to provide an intuitive user experience for both job seekers and recruiters.", + techStack: ["React", "Next.js", "Tailwind CSS", "Node.js", "MongoDB", "Vercel", "Express", "JWT", "Stripe"], + keyFeatures: ["Advanced job matching algorithms", "Real-time application tracking", "Employer dashboard & analytics", "Candidate profile management"], + images: [ + { src: "https://via.placeholder.com/400x300/F59E0B/white?text=Job+Portal+Homepage", alt: "Job Portal Homepage" }, + { src: "https://via.placeholder.com/400x300/EF4444/white?text=Job+Search+Dashboard", alt: "Job Search Dashboard" } + ], + liveLink: "https://www.tamakun.ae/", + githubLink: null + } + ] -- Tech Stack: Angular 16+, RxJS, Angular Material, SCSS, Chart.js, REST APIs, Stripe, Cloudinary -
+ const openLightbox = (images, index) => { + setSelectedImages(images) + setSelectedImageIndex(index) + setLightboxOpen(true) + } -- My Contributions: Developed reusable components, implemented real-time charts, handled photo uploads via Cloudinary, integrated Stripe for secure donations, and built responsive multi-step forms with full API connectivity. -
+ return ( +
+
-
+ {/* Header Section */}
+ setLightboxOpen(false)}
+ initialIndex={selectedImageIndex}
+ />
-
+
+
- + Featured Projects +
++ Discover my latest work in web development, showcasing modern technologies, + innovative solutions, and user-centric design principles +
+
- 
- 
- 
- 
+ {/* Projects Grid - 2 columns on desktop, 1 on mobile */}
+
-
+ {projects.map((project) => (
+
Project is currently in development. Live link will be added upon launch.
+ {/* Image Lightbox */} +