tech-masters/about-us
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add some projects urls

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-07-28 11:32:31 +03:00
parent e32ddaa2db
commit b803532cde
3 changed files with 208 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
next.config.ts
View File

@@ -1,7 +1,9 @@
import type { NextConfig } from "next"; import type { NextConfig } from "next";
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
/* config options here */ images: {
domains: ["tech-masters.guru"],
},
}; };
export default nextConfig; export default nextConfig;

297
src/app/components/ProjectsShowcase/ProjectsShowcase.tsx
View File

@@ -1,7 +1,24 @@
// File: src/components/home/ProjectsShowcase.tsx // File: src/components/home/ProjectsShowcase.tsx
import { CloseOutlined, EyeOutlined, GithubOutlined, LeftOutlined, LinkOutlined, RightOutlined } from "@ant-design/icons"; import {
import { Badge, Button, Card, Carousel, Col, Modal, Row, Tag, Typography } from "antd"; 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 { AnimatePresence, motion, useAnimation } from "framer-motion";
import Image from "next/image"; import Image from "next/image";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
@@ -30,168 +47,228 @@ interface Project {
const projectsData: Project[] = [ const projectsData: Project[] = [
{ {
id: "p1", id: "p1",
title: "FinTech Dashboard", title: "BPro ERP System",
description: description:
"An AI-powered financial analytics platform with real-time data visualization and predictive insights.", "Comprehensive enterprise resource planning system with advanced business process management and real-time analytics.",
imageUrl: "/api/placeholder/600/400", imageUrl: "https://tech-masters.guru/photos/projects/bpro-erp.jpg",
category: "Web Application", category: "Enterprise Software",
technologies: ["React", "Node.js", "TensorFlow", "AWS"], technologies: ["React", "Node.js", "PostgreSQL", "Redis"],
featured: true, 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: [ images: [
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/bpro-erp.jpg",
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/bpro-erp.jpg",
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/bpro-erp.jpg",
"/api/placeholder/800/500"
], ],
liveUrl: "https://fintech-demo.com", liveUrl: "https://bpro-erp.com",
githubUrl: "https://github.com/company/fintech-dashboard", githubUrl: "https://github.com/company/bpro-erp",
features: [ features: [
"Real-time data visualization with interactive charts", "Advanced business process management",
"AI-powered predictive analytics", "Real-time analytics and reporting",
"Automated risk assessment", "Multi-department integration",
"Multi-device responsive design", "Custom workflow automation",
"Advanced security and encryption" "Comprehensive audit trails",
], ],
duration: "6 months", duration: "8 months",
teamSize: "8 developers" teamSize: "12 developers",
}, },
{ {
id: "p2", id: "p2",
title: "Healthcare Management System", title: "Law Office Management",
description: description:
"Comprehensive solution for managing patient records, appointments, and medical data with advanced security features.", "Complete legal practice management solution with case tracking, document management, and client portal.",
imageUrl: "/api/placeholder/600/400", imageUrl: "https://tech-masters.guru/photos/projects/law-office-home.png",
category: "Enterprise Software", category: "Legal Software",
technologies: ["Angular", ".NET Core", "SQL Server", "Azure"], technologies: ["Angular", ".NET Core", "SQL Server", "Azure"],
featured: true, 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: [ images: [
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/law-office-home.png",
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/law-office-login.png",
"/api/placeholder/800/500" "https://tech-masters.guru/photos/projects/law-office-home.png",
], ],
liveUrl: "https://healthcare-demo.com", liveUrl: "https://law-office-demo.com",
githubUrl: "https://github.com/company/healthcare-system", githubUrl: "https://github.com/company/law-office-system",
features: [ features: [
"Electronic Health Records (EHR)", "Case management and tracking",
"Appointment scheduling and management", "Document management system",
"Billing and insurance processing", "Client portal and communication",
"HIPAA compliance features", "Time tracking and billing",
"Advanced reporting and analytics" "Calendar and appointment management",
], ],
duration: "8 months", duration: "6 months",
teamSize: "12 developers" teamSize: "8 developers",
}, },
{ {
id: "p3", id: "p3",
title: "E-commerce Marketplace", title: "MoneyOut Payment Platform",
description: description:
"Feature-rich online marketplace connecting vendors and customers with integrated payment processing and inventory management.", "Secure digital payment processing platform with multi-currency support and advanced fraud detection.",
imageUrl: "/api/placeholder/600/400", imageUrl: "https://tech-masters.guru/photos/projects/moneyout.png",
category: "E-commerce", category: "FinTech",
technologies: ["Next.js", "Stripe", "MongoDB", "GraphQL"], technologies: ["Next.js", "Stripe", "MongoDB", "GraphQL"],
featured: true, 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: [ images: [
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/moneyout.png",
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/moneyout.png",
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/moneyout.png",
"/api/placeholder/800/500",
"/api/placeholder/800/500"
], ],
liveUrl: "https://marketplace-demo.com", liveUrl: "https://moneyout-demo.com",
githubUrl: "https://github.com/company/ecommerce-marketplace", githubUrl: "https://github.com/company/moneyout-platform",
features: [ features: [
"Multi-vendor marketplace", "Multi-currency payment processing",
"Advanced search and filtering", "Advanced fraud detection",
"Secure payment processing", "Merchant dashboard and analytics",
"Inventory management system", "Secure API integration",
"Real-time notifications" "Real-time transaction monitoring",
], ],
duration: "7 months", duration: "7 months",
teamSize: "10 developers" teamSize: "10 developers",
}, },
{ {
id: "p4", id: "p4",
title: "Smart City IoT Platform", title: "Cloths E-commerce Platform",
description: description:
"IoT ecosystem for urban monitoring and management, featuring real-time data collection and analytics.", "Modern fashion e-commerce platform with advanced product catalog, virtual try-on, and personalized recommendations.",
imageUrl: "/api/placeholder/600/400", imageUrl: "https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
category: "IoT", category: "E-commerce",
technologies: ["Python", "MQTT", "Kubernetes", "TensorFlow"], technologies: ["React", "Node.js", "MongoDB", "AWS"],
featured: false, 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: [ images: [
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
"/api/placeholder/800/500" "https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
], ],
liveUrl: "https://smartcity-demo.com", liveUrl: "https://cloths-ecommerce.com",
githubUrl: "https://github.com/company/smart-city-platform", githubUrl: "https://github.com/company/cloths-ecommerce",
features: [ features: [
"Real-time sensor data collection", "Virtual try-on technology",
"Traffic flow optimization", "Personalized recommendations",
"Environmental monitoring", "Advanced product catalog",
"Predictive maintenance alerts", "Mobile-first design",
"Interactive city dashboard" "Social commerce integration",
], ],
duration: "10 months", duration: "5 months",
teamSize: "15 developers" teamSize: "6 developers",
}, },
{ {
id: "p5", id: "p5",
title: "Logistics Tracking System", title: "Nanas Dashboard",
description: description:
"Real-time fleet management and package tracking solution with route optimization algorithms.", "Comprehensive business intelligence dashboard with real-time data visualization and predictive analytics.",
imageUrl: "/api/placeholder/600/400", imageUrl:
category: "Mobile & Web", "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
technologies: ["React Native", "Node.js", "PostgreSQL", "Google Maps API"], category: "Business Intelligence",
technologies: ["Vue.js", "Python", "PostgreSQL", "Docker"],
featured: false, 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: [ images: [
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
"/api/placeholder/800/500" "https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
], ],
liveUrl: "https://logistics-demo.com", liveUrl: "https://nanas-dashboard.com",
githubUrl: "https://github.com/company/logistics-system", githubUrl: "https://github.com/company/nanas-dashboard",
features: [ features: [
"Real-time GPS tracking", "Real-time data visualization",
"Route optimization algorithms", "Predictive analytics",
"Driver mobile application", "Custom reporting tools",
"Delivery status updates", "Interactive dashboards",
"Analytics and reporting" "Data export capabilities",
], ],
duration: "5 months", duration: "4 months",
teamSize: "6 developers" teamSize: "5 developers",
}, },
{ {
id: "p6", id: "p6",
title: "Virtual Learning Environment", title: "Easy Pay Login System",
description: description:
"Interactive educational platform with personalized learning paths, video conferencing, and progress tracking.", "Secure authentication system with multi-factor authentication and advanced security features for financial applications.",
imageUrl: "/api/placeholder/600/400", imageUrl: "https://tech-masters.guru/photos/projects/easy-pay-login.png",
category: "Education", category: "Security",
technologies: ["Vue.js", "Django", "WebRTC", "Docker"], technologies: ["React", "Node.js", "JWT", "Redis"],
featured: false, 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: [ images: [
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/easy-pay-login.png",
"/api/placeholder/800/500", "https://tech-masters.guru/photos/projects/easy-pay-login.png",
"/api/placeholder/800/500" "https://tech-masters.guru/photos/projects/easy-pay-login.png",
], ],
liveUrl: "https://learning-demo.com", liveUrl: "https://easy-pay-login.com",
githubUrl: "https://github.com/company/virtual-learning", githubUrl: "https://github.com/company/easy-pay-login",
features: [ features: [
"Video conferencing and screen sharing", "Multi-factor authentication",
"Personalized learning paths", "Advanced security protocols",
"Progress tracking and analytics", "Session management",
"Interactive whiteboard", "Audit logging",
"Assignment and grading system" "Password recovery system",
], ],
duration: "9 months", duration: "3 months",
teamSize: "11 developers" 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",
}, },
]; ];

36
src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css
View File

@@ -23,9 +23,10 @@
font-size: 2.5rem !important; font-size: 2.5rem !important;
font-weight: 700 !important; font-weight: 700 !important;
margin-bottom: 16px !important; margin-bottom: 16px !important;
background: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text;
} }
.sectionSubtitle { .sectionSubtitle {
@@ -57,7 +58,7 @@
.projectCard:hover { .projectCard:hover {
transform: translateY(-8px); 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 { .projectImageContainer {
@@ -83,7 +84,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4); background: rgba(116, 0, 184, 0.4);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -97,13 +98,13 @@
.viewButton { .viewButton {
background: #fff; background: #fff;
color: #6e48aa; color: #7400b8;
border: none; border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
} }
.viewButton:hover { .viewButton:hover {
background: #6e48aa; background: #7400b8;
color: #fff; color: #fff;
} }
@@ -120,7 +121,7 @@
.techTag { .techTag {
margin: 0; margin: 0;
color: #6e48aa; color: #7400b8;
} }
.featuredBadge { .featuredBadge {
@@ -158,16 +159,15 @@
padding: 0 32px; padding: 0 32px;
border-radius: 24px; border-radius: 24px;
font-weight: 500; font-weight: 500;
background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
border: none; 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; transition: all 0.3s ease;
} }
.viewAllButton:hover { .viewAllButton:hover {
transform: translateY(-2px); 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 */ /* Modal Styles */
@@ -208,7 +208,7 @@
.modalHeader { .modalHeader {
padding: 32px 32px 24px; padding: 32px 32px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
color: white; color: white;
position: relative; position: relative;
} }
@@ -310,7 +310,7 @@
} }
.carouselDots :global(.ant-carousel .slick-dots li.slick-active button) { .carouselDots :global(.ant-carousel .slick-dots li.slick-active button) {
background: #6e48aa; background: #7400b8;
} }
.projectDetails { .projectDetails {
@@ -341,7 +341,7 @@
left: 0; left: 0;
width: 40px; width: 40px;
height: 3px; height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2); background: linear-gradient(90deg, #7400b8, #6930c3);
border-radius: 2px; border-radius: 2px;
} }
@@ -383,7 +383,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 12px; top: 12px;
color: #6e48aa; color: #7400b8;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
} }
@@ -401,7 +401,7 @@
padding: 16px; padding: 16px;
background: #f8f9fa; background: #f8f9fa;
border-radius: 8px; border-radius: 8px;
border-left: 4px solid #6e48aa; border-left: 4px solid #7400b8;
} }
.infoItem:last-child { .infoItem:last-child {
@@ -417,9 +417,9 @@
} }
.modalTechTag { .modalTechTag {
background: #e6f7ff; background: rgba(116, 0, 184, 0.1);
border: 1px solid #91d5ff; border: 1px solid rgba(116, 0, 184, 0.2);
color: #1890ff; color: #7400b8;
font-weight: 500; font-weight: 500;
border-radius: 16px; border-radius: 16px;
padding: 4px 12px; padding: 4px 12px;