From b803532cde49cffdbeb5b0498cfcb112c3145c0c Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Mon, 28 Jul 2025 11:32:31 +0300 Subject: [PATCH] add some projects urls --- next.config.ts | 4 +- .../ProjectsShowcase/ProjectsShowcase.tsx | 297 +++++++++++------- .../ProjectsShowcaseSelector.module.css | 36 +-- 3 files changed, 208 insertions(+), 129 deletions(-) diff --git a/next.config.ts b/next.config.ts index e9ffa30..765f648 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,7 +1,9 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { - /* config options here */ + images: { + domains: ["tech-masters.guru"], + }, }; export default nextConfig; diff --git a/src/app/components/ProjectsShowcase/ProjectsShowcase.tsx b/src/app/components/ProjectsShowcase/ProjectsShowcase.tsx index 5efdd7c..f55c110 100644 --- a/src/app/components/ProjectsShowcase/ProjectsShowcase.tsx +++ b/src/app/components/ProjectsShowcase/ProjectsShowcase.tsx @@ -1,7 +1,24 @@ // File: src/components/home/ProjectsShowcase.tsx -import { CloseOutlined, EyeOutlined, GithubOutlined, LeftOutlined, LinkOutlined, RightOutlined } from "@ant-design/icons"; -import { Badge, Button, Card, Carousel, Col, Modal, Row, Tag, Typography } from "antd"; +import { + CloseOutlined, + EyeOutlined, + GithubOutlined, + LeftOutlined, + LinkOutlined, + RightOutlined, +} from "@ant-design/icons"; +import { + Badge, + Button, + Card, + Carousel, + Col, + Modal, + Row, + Tag, + Typography, +} from "antd"; import { AnimatePresence, motion, useAnimation } from "framer-motion"; import Image from "next/image"; import React, { useEffect, useState } from "react"; @@ -30,168 +47,228 @@ interface Project { const projectsData: Project[] = [ { id: "p1", - title: "FinTech Dashboard", + title: "BPro ERP System", description: - "An AI-powered financial analytics platform with real-time data visualization and predictive insights.", - imageUrl: "/api/placeholder/600/400", - category: "Web Application", - technologies: ["React", "Node.js", "TensorFlow", "AWS"], + "Comprehensive enterprise resource planning system with advanced business process management and real-time analytics.", + imageUrl: "https://tech-masters.guru/photos/projects/bpro-erp.jpg", + category: "Enterprise Software", + technologies: ["React", "Node.js", "PostgreSQL", "Redis"], featured: true, - detailedDescription: "A comprehensive financial analytics platform that leverages artificial intelligence to provide real-time insights into market trends, portfolio performance, and risk assessment. The platform features advanced data visualization, predictive analytics, and automated reporting capabilities.", + detailedDescription: + "A comprehensive ERP system designed for modern businesses, featuring advanced business process management, real-time analytics, and seamless integration with existing enterprise systems. The platform streamlines operations across all departments.", images: [ - "/api/placeholder/800/500", - "/api/placeholder/800/500", - "/api/placeholder/800/500", - "/api/placeholder/800/500" + "https://tech-masters.guru/photos/projects/bpro-erp.jpg", + "https://tech-masters.guru/photos/projects/bpro-erp.jpg", + "https://tech-masters.guru/photos/projects/bpro-erp.jpg", ], - liveUrl: "https://fintech-demo.com", - githubUrl: "https://github.com/company/fintech-dashboard", + liveUrl: "https://bpro-erp.com", + githubUrl: "https://github.com/company/bpro-erp", features: [ - "Real-time data visualization with interactive charts", - "AI-powered predictive analytics", - "Automated risk assessment", - "Multi-device responsive design", - "Advanced security and encryption" + "Advanced business process management", + "Real-time analytics and reporting", + "Multi-department integration", + "Custom workflow automation", + "Comprehensive audit trails", ], - duration: "6 months", - teamSize: "8 developers" + duration: "8 months", + teamSize: "12 developers", }, { id: "p2", - title: "Healthcare Management System", + title: "Law Office Management", description: - "Comprehensive solution for managing patient records, appointments, and medical data with advanced security features.", - imageUrl: "/api/placeholder/600/400", - category: "Enterprise Software", + "Complete legal practice management solution with case tracking, document management, and client portal.", + imageUrl: "https://tech-masters.guru/photos/projects/law-office-home.png", + category: "Legal Software", technologies: ["Angular", ".NET Core", "SQL Server", "Azure"], featured: true, - detailedDescription: "A robust healthcare management system designed to streamline patient care workflows, manage electronic health records, and ensure compliance with healthcare regulations. The system includes appointment scheduling, billing management, and advanced reporting features.", + detailedDescription: + "A comprehensive legal practice management system designed to streamline law office operations, manage cases, track billable hours, and provide secure client communication portals.", images: [ - "/api/placeholder/800/500", - "/api/placeholder/800/500", - "/api/placeholder/800/500" + "https://tech-masters.guru/photos/projects/law-office-home.png", + "https://tech-masters.guru/photos/projects/law-office-login.png", + "https://tech-masters.guru/photos/projects/law-office-home.png", ], - liveUrl: "https://healthcare-demo.com", - githubUrl: "https://github.com/company/healthcare-system", + liveUrl: "https://law-office-demo.com", + githubUrl: "https://github.com/company/law-office-system", features: [ - "Electronic Health Records (EHR)", - "Appointment scheduling and management", - "Billing and insurance processing", - "HIPAA compliance features", - "Advanced reporting and analytics" + "Case management and tracking", + "Document management system", + "Client portal and communication", + "Time tracking and billing", + "Calendar and appointment management", ], - duration: "8 months", - teamSize: "12 developers" + duration: "6 months", + teamSize: "8 developers", }, { id: "p3", - title: "E-commerce Marketplace", + title: "MoneyOut Payment Platform", description: - "Feature-rich online marketplace connecting vendors and customers with integrated payment processing and inventory management.", - imageUrl: "/api/placeholder/600/400", - category: "E-commerce", + "Secure digital payment processing platform with multi-currency support and advanced fraud detection.", + imageUrl: "https://tech-masters.guru/photos/projects/moneyout.png", + category: "FinTech", technologies: ["Next.js", "Stripe", "MongoDB", "GraphQL"], featured: true, - detailedDescription: "A modern e-commerce platform that connects multiple vendors with customers through a unified marketplace. Features include advanced search, personalized recommendations, secure payment processing, and comprehensive inventory management.", + detailedDescription: + "A modern payment processing platform that enables secure digital transactions with multi-currency support, advanced fraud detection, and comprehensive merchant tools.", images: [ - "/api/placeholder/800/500", - "/api/placeholder/800/500", - "/api/placeholder/800/500", - "/api/placeholder/800/500", - "/api/placeholder/800/500" + "https://tech-masters.guru/photos/projects/moneyout.png", + "https://tech-masters.guru/photos/projects/moneyout.png", + "https://tech-masters.guru/photos/projects/moneyout.png", ], - liveUrl: "https://marketplace-demo.com", - githubUrl: "https://github.com/company/ecommerce-marketplace", + liveUrl: "https://moneyout-demo.com", + githubUrl: "https://github.com/company/moneyout-platform", features: [ - "Multi-vendor marketplace", - "Advanced search and filtering", - "Secure payment processing", - "Inventory management system", - "Real-time notifications" + "Multi-currency payment processing", + "Advanced fraud detection", + "Merchant dashboard and analytics", + "Secure API integration", + "Real-time transaction monitoring", ], duration: "7 months", - teamSize: "10 developers" + teamSize: "10 developers", }, { id: "p4", - title: "Smart City IoT Platform", + title: "Cloths E-commerce Platform", description: - "IoT ecosystem for urban monitoring and management, featuring real-time data collection and analytics.", - imageUrl: "/api/placeholder/600/400", - category: "IoT", - technologies: ["Python", "MQTT", "Kubernetes", "TensorFlow"], + "Modern fashion e-commerce platform with advanced product catalog, virtual try-on, and personalized recommendations.", + imageUrl: "https://tech-masters.guru/photos/projects/cloths-e-commerce.png", + category: "E-commerce", + technologies: ["React", "Node.js", "MongoDB", "AWS"], featured: false, - detailedDescription: "An Internet of Things platform designed for smart city applications, enabling real-time monitoring of urban infrastructure, traffic management, and environmental data collection with advanced analytics capabilities.", + detailedDescription: + "A cutting-edge fashion e-commerce platform featuring virtual try-on technology, personalized recommendations, and seamless mobile shopping experience.", images: [ - "/api/placeholder/800/500", - "/api/placeholder/800/500", - "/api/placeholder/800/500" + "https://tech-masters.guru/photos/projects/cloths-e-commerce.png", + "https://tech-masters.guru/photos/projects/cloths-e-commerce.png", + "https://tech-masters.guru/photos/projects/cloths-e-commerce.png", ], - liveUrl: "https://smartcity-demo.com", - githubUrl: "https://github.com/company/smart-city-platform", + liveUrl: "https://cloths-ecommerce.com", + githubUrl: "https://github.com/company/cloths-ecommerce", features: [ - "Real-time sensor data collection", - "Traffic flow optimization", - "Environmental monitoring", - "Predictive maintenance alerts", - "Interactive city dashboard" + "Virtual try-on technology", + "Personalized recommendations", + "Advanced product catalog", + "Mobile-first design", + "Social commerce integration", ], - duration: "10 months", - teamSize: "15 developers" + duration: "5 months", + teamSize: "6 developers", }, { id: "p5", - title: "Logistics Tracking System", + title: "Nanas Dashboard", description: - "Real-time fleet management and package tracking solution with route optimization algorithms.", - imageUrl: "/api/placeholder/600/400", - category: "Mobile & Web", - technologies: ["React Native", "Node.js", "PostgreSQL", "Google Maps API"], + "Comprehensive business intelligence dashboard with real-time data visualization and predictive analytics.", + imageUrl: + "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png", + category: "Business Intelligence", + technologies: ["Vue.js", "Python", "PostgreSQL", "Docker"], featured: false, - detailedDescription: "A comprehensive logistics and fleet management system that provides real-time tracking, route optimization, and delivery management. The platform includes mobile apps for drivers and web dashboards for managers.", + detailedDescription: + "A powerful business intelligence dashboard that provides real-time data visualization, predictive analytics, and comprehensive reporting for data-driven decision making.", images: [ - "/api/placeholder/800/500", - "/api/placeholder/800/500", - "/api/placeholder/800/500" + "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png", + "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png", + "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png", ], - liveUrl: "https://logistics-demo.com", - githubUrl: "https://github.com/company/logistics-system", + liveUrl: "https://nanas-dashboard.com", + githubUrl: "https://github.com/company/nanas-dashboard", features: [ - "Real-time GPS tracking", - "Route optimization algorithms", - "Driver mobile application", - "Delivery status updates", - "Analytics and reporting" + "Real-time data visualization", + "Predictive analytics", + "Custom reporting tools", + "Interactive dashboards", + "Data export capabilities", ], - duration: "5 months", - teamSize: "6 developers" + duration: "4 months", + teamSize: "5 developers", }, { id: "p6", - title: "Virtual Learning Environment", + title: "Easy Pay Login System", description: - "Interactive educational platform with personalized learning paths, video conferencing, and progress tracking.", - imageUrl: "/api/placeholder/600/400", - category: "Education", - technologies: ["Vue.js", "Django", "WebRTC", "Docker"], + "Secure authentication system with multi-factor authentication and advanced security features for financial applications.", + imageUrl: "https://tech-masters.guru/photos/projects/easy-pay-login.png", + category: "Security", + technologies: ["React", "Node.js", "JWT", "Redis"], featured: false, - detailedDescription: "A modern virtual learning environment that provides interactive online education with video conferencing, personalized learning paths, and comprehensive progress tracking for students and educators.", + detailedDescription: + "A robust authentication system designed for financial applications, featuring multi-factor authentication, advanced security protocols, and seamless user experience.", images: [ - "/api/placeholder/800/500", - "/api/placeholder/800/500", - "/api/placeholder/800/500" + "https://tech-masters.guru/photos/projects/easy-pay-login.png", + "https://tech-masters.guru/photos/projects/easy-pay-login.png", + "https://tech-masters.guru/photos/projects/easy-pay-login.png", ], - liveUrl: "https://learning-demo.com", - githubUrl: "https://github.com/company/virtual-learning", + liveUrl: "https://easy-pay-login.com", + githubUrl: "https://github.com/company/easy-pay-login", features: [ - "Video conferencing and screen sharing", - "Personalized learning paths", - "Progress tracking and analytics", - "Interactive whiteboard", - "Assignment and grading system" + "Multi-factor authentication", + "Advanced security protocols", + "Session management", + "Audit logging", + "Password recovery system", ], - duration: "9 months", - teamSize: "11 developers" + duration: "3 months", + teamSize: "4 developers", + }, + { + id: "p7", + title: "Majsin Dashboard", + description: + "Advanced analytics dashboard with machine learning insights and customizable reporting for enterprise clients.", + imageUrl: "https://tech-masters.guru/photos/projects/majsin-dashborad.png", + category: "Analytics", + technologies: ["Angular", "Python", "TensorFlow", "AWS"], + featured: false, + detailedDescription: + "An advanced analytics dashboard powered by machine learning, providing deep insights and customizable reporting for enterprise-level decision making.", + images: [ + "https://tech-masters.guru/photos/projects/majsin-dashborad.png", + "https://tech-masters.guru/photos/projects/majsin-dashborad.png", + "https://tech-masters.guru/photos/projects/majsin-dashborad.png", + ], + liveUrl: "https://majsin-dashboard.com", + githubUrl: "https://github.com/company/majsin-dashboard", + features: [ + "Machine learning insights", + "Customizable reporting", + "Real-time data processing", + "Advanced visualizations", + "API integration capabilities", + ], + duration: "6 months", + teamSize: "7 developers", + }, + { + id: "p8", + title: "SVU Hardware Management", + description: + "Comprehensive hardware inventory and management system for educational institutions with asset tracking.", + imageUrl: "https://tech-masters.guru/photos/projects/svu-hw.png", + category: "Education", + technologies: ["React", "Node.js", "MySQL", "Docker"], + featured: false, + detailedDescription: + "A comprehensive hardware management system designed for educational institutions, featuring asset tracking, maintenance scheduling, and detailed reporting capabilities.", + images: [ + "https://tech-masters.guru/photos/projects/svu-hw.png", + "https://tech-masters.guru/photos/projects/svu-hw.png", + "https://tech-masters.guru/photos/projects/svu-hw.png", + ], + liveUrl: "https://svu-hardware.com", + githubUrl: "https://github.com/company/svu-hardware", + features: [ + "Asset tracking and management", + "Maintenance scheduling", + "Inventory control", + "Detailed reporting", + "User access management", + ], + duration: "5 months", + teamSize: "6 developers", }, ]; diff --git a/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css b/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css index aa28e1d..9a4651d 100644 --- a/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css +++ b/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css @@ -23,9 +23,10 @@ font-size: 2.5rem !important; font-weight: 700 !important; margin-bottom: 16px !important; - + background: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; + background-clip: text; } .sectionSubtitle { @@ -57,7 +58,7 @@ .projectCard:hover { transform: translateY(-8px); - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); + box-shadow: 0 12px 24px rgba(116, 0, 184, 0.15); } .projectImageContainer { @@ -83,7 +84,7 @@ left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, 0.4); + background: rgba(116, 0, 184, 0.4); display: flex; justify-content: center; align-items: center; @@ -97,13 +98,13 @@ .viewButton { background: #fff; - color: #6e48aa; + color: #7400b8; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .viewButton:hover { - background: #6e48aa; + background: #7400b8; color: #fff; } @@ -120,7 +121,7 @@ .techTag { margin: 0; - color: #6e48aa; + color: #7400b8; } .featuredBadge { @@ -158,16 +159,15 @@ padding: 0 32px; border-radius: 24px; font-weight: 500; - + background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%); border: none; - box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15); + box-shadow: 0 4px 12px rgba(116, 0, 184, 0.15); transition: all 0.3s ease; } .viewAllButton:hover { transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2); - + box-shadow: 0 6px 16px rgba(116, 0, 184, 0.2); } /* Modal Styles */ @@ -208,7 +208,7 @@ .modalHeader { padding: 32px 32px 24px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%); color: white; position: relative; } @@ -310,7 +310,7 @@ } .carouselDots :global(.ant-carousel .slick-dots li.slick-active button) { - background: #6e48aa; + background: #7400b8; } .projectDetails { @@ -341,7 +341,7 @@ left: 0; width: 40px; height: 3px; - background: linear-gradient(90deg, #667eea, #764ba2); + background: linear-gradient(90deg, #7400b8, #6930c3); border-radius: 2px; } @@ -383,7 +383,7 @@ position: absolute; left: 0; top: 12px; - color: #6e48aa; + color: #7400b8; font-weight: bold; font-size: 14px; } @@ -401,7 +401,7 @@ padding: 16px; background: #f8f9fa; border-radius: 8px; - border-left: 4px solid #6e48aa; + border-left: 4px solid #7400b8; } .infoItem:last-child { @@ -417,9 +417,9 @@ } .modalTechTag { - background: #e6f7ff; - border: 1px solid #91d5ff; - color: #1890ff; + background: rgba(116, 0, 184, 0.1); + border: 1px solid rgba(116, 0, 184, 0.2); + color: #7400b8; font-weight: 500; border-radius: 16px; padding: 4px 12px;