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

Compare commits

base: tech-masters:8f05d06fb9442c8f98430b1302cc7d822ab08ded
Branches Tags
tech-masters:main
...
compare: tech-masters:84c7ca2b4b52e27eaef7c15d87ed3e55539fe435
Branches Tags
tech-masters:main

3 Commits
8f05d06fb9 ... 84c7ca2b4b

Author SHA1 Message Date
Mohammed Al-yaseen
84c7ca2b4b move projects data to its folder 2026-02-07 01:43:23 +03:00
Mohammed Al-yaseen
cfd178cea6 projects: enhacne card styles and fix reset filters 2026-02-07 00:31:55 +03:00
Mohammed Al-yaseen
05cd5b5139 main: enhance scroll styles and add CTA section 2026-02-07 00:31:26 +03:00
7 changed files with 810 additions and 693 deletions
Expand all files Collapse all files

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

@@ -1,254 +1,9 @@
import { projectsData } from "@/data/projects";
import Paragraph from "antd/es/typography/Paragraph";
import Title from "antd/es/typography/Title";
import ProjectsShowcaseClient from "./ProjectsShowcaseClient";
import styles from "./ProjectsShowcaseSelector.module.css";
interface Project {
id: string;
title: string;
description: string;
imageUrl: string;
category: string;
technologies: string[];
featured: boolean;
detailedDescription: string;
images: string[];
liveUrl?: string;
githubUrl?: string;
features: string[];
duration: string;
teamSize: string;
}
// Sample project data
const projectsData: Project[] = [
{
id: "p1",
title: "BPro ERP System",
description:
"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 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: [
"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://bpro-erp.com",
githubUrl: "https://github.com/company/bpro-erp",
features: [
"Advanced business process management",
"Real-time analytics and reporting",
"Multi-department integration",
"Custom workflow automation",
"Comprehensive audit trails",
],
duration: "8 months",
teamSize: "12 developers",
},
{
id: "p2",
title: "Law Office Management",
description:
"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 comprehensive legal practice management system designed to streamline law office operations, manage cases, track billable hours, and provide secure client communication portals.",
images: [
"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://law-office-demo.com",
githubUrl: "https://github.com/company/law-office-system",
features: [
"Case management and tracking",
"Document management system",
"Client portal and communication",
"Time tracking and billing",
"Calendar and appointment management",
],
duration: "6 months",
teamSize: "8 developers",
},
{
id: "p3",
title: "MoneyOut Payment Platform",
description:
"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 payment processing platform that enables secure digital transactions with multi-currency support, advanced fraud detection, and comprehensive merchant tools.",
images: [
"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://moneyout-demo.com",
githubUrl: "https://github.com/company/moneyout-platform",
features: [
"Multi-currency payment processing",
"Advanced fraud detection",
"Merchant dashboard and analytics",
"Secure API integration",
"Real-time transaction monitoring",
],
duration: "7 months",
teamSize: "10 developers",
},
{
id: "p4",
title: "Cloths E-commerce Platform",
description:
"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:
"A cutting-edge fashion e-commerce platform featuring virtual try-on technology, personalized recommendations, and seamless mobile shopping experience.",
images: [
"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://cloths-ecommerce.com",
githubUrl: "https://github.com/company/cloths-ecommerce",
features: [
"Virtual try-on technology",
"Personalized recommendations",
"Advanced product catalog",
"Mobile-first design",
"Social commerce integration",
],
duration: "5 months",
teamSize: "6 developers",
},
{
id: "p5",
title: "Nanas Dashboard",
description:
"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 powerful business intelligence dashboard that provides real-time data visualization, predictive analytics, and comprehensive reporting for data-driven decision making.",
images: [
"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://nanas-dashboard.com",
githubUrl: "https://github.com/company/nanas-dashboard",
features: [
"Real-time data visualization",
"Predictive analytics",
"Custom reporting tools",
"Interactive dashboards",
"Data export capabilities",
],
duration: "4 months",
teamSize: "5 developers",
},
{
id: "p6",
title: "Easy Pay Login System",
description:
"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 robust authentication system designed for financial applications, featuring multi-factor authentication, advanced security protocols, and seamless user experience.",
images: [
"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://easy-pay-login.com",
githubUrl: "https://github.com/company/easy-pay-login",
features: [
"Multi-factor authentication",
"Advanced security protocols",
"Session management",
"Audit logging",
"Password recovery system",
],
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",
},
];
const ProjectsShowcase: React.FC = () => {
return (
<section className={styles.projectsSection}>

18
src/app/components/ProjectsShowcase/ProjectsShowcaseClient.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { Project } from "@/data/projects";
import {
CloseOutlined,
EyeOutlined,
@@ -25,23 +26,6 @@ import styles from "./ProjectsShowcaseSelector.module.css";
const { Title, Paragraph, Text } = Typography;
interface Project {
id: string;
title: string;
description: string;
imageUrl: string;
category: string;
technologies: string[];
featured: boolean;
detailedDescription: string;
images: string[];
liveUrl?: string;
githubUrl?: string;
features: string[];
duration: string;
teamSize: string;
}
interface ProjectsShowcaseClientProps {
projects: Project[];
}

74
src/app/page.module.css
View File

@@ -615,3 +615,77 @@
height: 8px;
}
}
/* CTA Section */
.ctaSection {
padding: 100px 0;
background: linear-gradient(135deg, #0F0525 0%, #2A0B45 100%);
text-align: center;
position: relative;
overflow: hidden;
color: white;
}
.ctaSection::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots-cta" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(116, 0, 184, 0.3)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots-cta)"/></svg>');
opacity: 0.5;
}
.ctaContent {
position: relative;
z-index: 10;
max-width: 800px;
margin: 0 auto;
}
.ctaTitle {
font-size: 3rem !important;
font-weight: 700 !important;
color: white !important;
margin-bottom: 24px !important;
line-height: 1.2 !important;
}
.ctaDescription {
font-size: 1.25rem !important;
color: rgba(255, 255, 255, 0.9) !important;
margin-bottom: 40px !important;
line-height: 1.6 !important;
}
.ctaButton {
height: auto !important;
padding: 12px 40px !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
border-radius: 50px !important;
background: white !important;
color: #7400b8 !important;
border: none !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.ctaButton:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.ctaSection {
padding: 80px 16px;
}
.ctaTitle {
font-size: 2.2rem !important;
}
.ctaDescription {
font-size: 1.1rem !important;
}
}

128
src/app/page.tsx
View File

@@ -2,6 +2,7 @@
"use client";
import {
ArrowRightOutlined,
BulbOutlined,
ClockCircleOutlined,
CodeOutlined,
@@ -10,7 +11,8 @@ import {
StarOutlined,
TeamOutlined,
} from "@ant-design/icons";
import { Card, Col, Row, Statistic, Typography } from "antd";
import { Button, Card, Col, Row, Statistic, Typography } from "antd";
import { motion, useScroll, useSpring } from "framer-motion";
import { useEffect, useState } from "react";
import Footer from "./components/Footer/Footer";
import HeroSection from "./components/Hero/HeroSection";
@@ -28,6 +30,13 @@ export default function Home() {
const [showPreferences, setShowPreferences] = useState(true);
const [loading, setLoading] = useState(true);
const { scrollYProgress } = useScroll();
const scaleX = useSpring(scrollYProgress, {
stiffness: 100,
damping: 30,
restDelta: 0.001,
});
useEffect(() => {
// Reading localStorage can only happen on the client; do it after mount.
try {
@@ -58,6 +67,21 @@ export default function Home() {
setShowPreferences(false);
};
const fadeInUp = {
hidden: { opacity: 0, y: 60 },
visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
};
const staggerContainer = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.2,
},
},
};
if (loading) {
return (
<div className={styles.loaderContainer}>
@@ -101,6 +125,21 @@ export default function Home() {
return (
<>
<motion.div
className="progress-bar"
style={{
scaleX,
position: "fixed",
top: 0,
left: 0,
right: 0,
height: "5px",
background: "linear-gradient(90deg, #7400b8, #56cfe1)",
transformOrigin: "0%",
zIndex: 1000,
}}
/>
{showPreferences && (
<PreferencesSelector onComplete={handlePreferencesComplete} />
)}
@@ -113,7 +152,13 @@ export default function Home() {
{/* Services Section */}
<section id="services" className={styles.servicesSection}>
<div className={styles.container}>
<div className={styles.sectionHeader}>
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeInUp}
className={styles.sectionHeader}
>
<Title level={2} className={styles.sectionTitle}>
Our Services
</Title>
@@ -121,10 +166,17 @@ export default function Home() {
We offer comprehensive solutions to transform your digital
presence and drive business growth
</Paragraph>
</div>
</motion.div>
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={staggerContainer}
>
<Row gutter={[32, 32]} className={styles.servicesGrid}>
<Col xs={24} sm={12} lg={8}>
<motion.div variants={fadeInUp} style={{ height: "100%" }}>
<Card className={styles.serviceCard} hoverable>
<div className={styles.serviceIcon}>
<CodeOutlined />
@@ -133,8 +185,9 @@ export default function Home() {
Web Development
</Title>
<Paragraph className={styles.serviceDescription}>
Custom web applications built with modern technologies and
best practices for optimal performance and user experience.
Custom web applications built with modern technologies
and best practices for optimal performance and user
experience.
</Paragraph>
<ul className={styles.serviceFeatures}>
<li>Responsive Design</li>
@@ -143,9 +196,11 @@ export default function Home() {
<li>Security Implementation</li>
</ul>
</Card>
</motion.div>
</Col>
<Col xs={24} sm={12} lg={8}>
<motion.div variants={fadeInUp} style={{ height: "100%" }}>
<Card className={styles.serviceCard} hoverable>
<div className={styles.serviceIcon}>
<RocketOutlined />
@@ -154,8 +209,8 @@ export default function Home() {
Mobile Development
</Title>
<Paragraph className={styles.serviceDescription}>
Native and cross-platform mobile applications that deliver
exceptional user experiences across all devices.
Native and cross-platform mobile applications that
deliver exceptional user experiences across all devices.
</Paragraph>
<ul className={styles.serviceFeatures}>
<li>iOS & Android Apps</li>
@@ -164,9 +219,11 @@ export default function Home() {
<li>Push Notifications</li>
</ul>
</Card>
</motion.div>
</Col>
<Col xs={24} sm={12} lg={8}>
<motion.div variants={fadeInUp} style={{ height: "100%" }}>
<Card className={styles.serviceCard} hoverable>
<div className={styles.serviceIcon}>
<BulbOutlined />
@@ -185,15 +242,23 @@ export default function Home() {
<li>Usability Testing</li>
</ul>
</Card>
</motion.div>
</Col>
</Row>
</motion.div>
</div>
</section>
{/* Statistics Section */}
<section id="statistics" className={styles.statisticsSection}>
<div className={styles.container}>
<div className={styles.sectionHeader}>
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeInUp}
className={styles.sectionHeader}
>
<Title level={2} className={styles.sectionTitle}>
Our Impact
</Title>
@@ -201,10 +266,17 @@ export default function Home() {
Numbers that speak for themselves - our commitment to excellence
in every project
</Paragraph>
</div>
</motion.div>
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={staggerContainer}
>
<Row gutter={[48, 32]} className={styles.statsGrid}>
<Col xs={12} sm={6}>
<motion.div variants={fadeInUp}>
<div className={styles.statCard}>
<div className={styles.statIcon}>
<ProjectOutlined />
@@ -216,9 +288,11 @@ export default function Home() {
className={styles.statistic}
/>
</div>
</motion.div>
</Col>
<Col xs={12} sm={6}>
<motion.div variants={fadeInUp}>
<div className={styles.statCard}>
<div className={styles.statIcon}>
<TeamOutlined />
@@ -230,9 +304,11 @@ export default function Home() {
className={styles.statistic}
/>
</div>
</motion.div>
</Col>
<Col xs={12} sm={6}>
<motion.div variants={fadeInUp}>
<div className={styles.statCard}>
<div className={styles.statIcon}>
<StarOutlined />
@@ -245,9 +321,11 @@ export default function Home() {
className={styles.statistic}
/>
</div>
</motion.div>
</Col>
<Col xs={12} sm={6}>
<motion.div variants={fadeInUp}>
<div className={styles.statCard}>
<div className={styles.statIcon}>
<ClockCircleOutlined />
@@ -259,8 +337,10 @@ export default function Home() {
className={styles.statistic}
/>
</div>
</motion.div>
</Col>
</Row>
</motion.div>
</div>
</section>
@@ -271,6 +351,36 @@ export default function Home() {
<section id="testimonials">
<TestimonialsSection />
</section>
{/* CTA Section */}
<section className={styles.ctaSection}>
<div className={styles.container}>
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
variants={fadeInUp}
className={styles.ctaContent}
>
<Title className={styles.ctaTitle}>
Ready to Transform Your Digital Presence?
</Title>
<Paragraph className={styles.ctaDescription}>
Let&apos;s collaborate to build something amazing. Our team is
ready to turn your vision into reality.
</Paragraph>
<Button
type="primary"
size="large"
icon={<ArrowRightOutlined />}
className={styles.ctaButton}
href="#contact"
>
Start Your Journey
</Button>
</motion.div>
</div>
</section>
</main>
<Footer />

143
src/app/projects/page.module.css
View File

@@ -186,30 +186,33 @@
/* Projects Grid */
.projectsGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 32px;
margin-bottom: 60px;
}
.projectCard {
background: white;
border-radius: 16px;
border-radius: 20px !important;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
border: none;
height: fit-content;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
height: 100%;
display: flex !important;
flex-direction: column;
}
.projectCard:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(116, 0, 184, 0.15);
border-color: rgba(116, 0, 184, 0.2) !important;
}
.projectImageContainer {
position: relative;
height: 200px;
height: 240px;
overflow: hidden;
}
@@ -217,22 +220,23 @@
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
transition: transform 0.6s ease;
}
.projectCard:hover .projectImage {
transform: scale(1.05);
transform: scale(1.1);
}
.projectOverlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
background: rgba(15, 5, 37, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
transition: all 0.3s ease;
backdrop-filter: blur(2px);
}
.projectCard:hover .projectOverlay {
@@ -240,11 +244,23 @@
}
.viewButton {
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
border: none;
width: 50px;
height: 50px;
font-size: 18px;
background: white !important;
color: #7400b8 !important;
border: none !important;
width: 56px !important;
height: 56px !important;
font-size: 20px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
transform: scale(0.8);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.projectCard:hover .viewButton {
transform: scale(1);
}
.featuredBadge {
@@ -255,65 +271,98 @@
}
.projectContent {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.categoryTag {
margin-bottom: 12px;
}
.projectTitle {
font-size: 1.1rem;
.categoryTag :global(.ant-tag) {
background: #f0fdf4 !important; /* Minty fresh background example */
color: #166534 !important;
border-color: #dcfce7 !important;
border-radius: 12px;
padding: 2px 10px;
font-weight: 600;
color: #1e293b;
margin-bottom: 8px;
line-height: 1.3;
border: none;
}
/* Dynamic colors for tags could be handled in JS, but static CSS here for now */
.projectContent .categoryTag :global(.ant-tag-blue) {
background: rgba(116, 0, 184, 0.08) !important;
color: #7400b8 !important;
border: none !important;
}
.projectTitle {
font-size: 1.25rem !important;
font-weight: 700 !important;
color: #1e293b !important;
margin-bottom: 12px !important;
line-height: 1.4 !important;
transition: color 0.3s ease;
}
.projectCard:hover .projectTitle {
color: #7400b8 !important;
}
.projectDescription {
color: #64748b;
line-height: 1.5;
margin-bottom: 12px;
font-size: 0.85rem;
color: #64748b !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
font-size: 0.95rem !important;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex-grow: 1;
}
.technologiesList {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 12px;
gap: 8px;
margin-bottom: 20px;
}
.techTag {
background: #f8fafc;
color: #475569;
border: 1px solid #e2e8f0;
font-size: 0.75rem;
padding: 2px 6px;
border-radius: 8px;
background: #f8fafc !important;
color: #64748b !important;
border: 1px solid #e2e8f0 !important;
font-size: 0.75rem !important;
padding: 4px 10px !important;
border-radius: 20px !important;
font-weight: 500;
transition: all 0.3s ease;
}
.projectCard:hover .techTag {
border-color: #a855f7 !important;
color: #7400b8 !important;
background: #faf5ff !important;
}
.projectMeta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
padding-top: 16px;
border-top: 1px solid #f1f5f9;
font-size: 0.8rem;
font-size: 0.85rem;
color: #94a3b8;
margin-top: auto;
}
.projectDuration {
font-size: 0.75rem;
color: #64748b;
}
.projectTeam {
font-size: 0.75rem;
color: #64748b;
.projectDuration, .projectTeam {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
/* Load More Section */

271
src/app/projects/page.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { categories, Project, projectsData } from "@/data/projects";
import {
CloseOutlined,
EyeOutlined,
@@ -26,269 +27,11 @@ import styles from "./page.module.css";
const { Title, Paragraph, Text } = Typography;
interface Project {
id: string;
title: string;
description: string;
imageUrl: string;
category: string;
technologies: string[];
featured: boolean;
detailedDescription: string;
images: string[];
liveUrl?: string;
githubUrl?: string;
features: string[];
duration: string;
teamSize: string;
}
// Sample project data (same as in ProjectsShowcase)
const projectsData: Project[] = [
{
id: "p1",
title: "BPro ERP System",
description:
"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 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: [
"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://bpro-erp.com",
githubUrl: "https://github.com/company/bpro-erp",
features: [
"Advanced business process management",
"Real-time analytics and reporting",
"Multi-department integration",
"Custom workflow automation",
"Comprehensive audit trails",
],
duration: "8 months",
teamSize: "12 developers",
},
{
id: "p2",
title: "Law Office Management",
description:
"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 comprehensive legal practice management system designed to streamline law office operations, manage cases, track billable hours, and provide secure client communication portals.",
images: [
"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://law-office-demo.com",
githubUrl: "https://github.com/company/law-office-system",
features: [
"Case management and tracking",
"Document management system",
"Client portal and communication",
"Time tracking and billing",
"Calendar and appointment management",
],
duration: "6 months",
teamSize: "8 developers",
},
{
id: "p3",
title: "MoneyOut Payment Platform",
description:
"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 payment processing platform that enables secure digital transactions with multi-currency support, advanced fraud detection, and comprehensive merchant tools.",
images: [
"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://moneyout-demo.com",
githubUrl: "https://github.com/company/moneyout-platform",
features: [
"Multi-currency payment processing",
"Advanced fraud detection",
"Merchant dashboard and analytics",
"Secure API integration",
"Real-time transaction monitoring",
],
duration: "7 months",
teamSize: "10 developers",
},
{
id: "p4",
title: "Cloths E-commerce Platform",
description:
"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:
"A cutting-edge fashion e-commerce platform featuring virtual try-on technology, personalized recommendations, and seamless mobile shopping experience.",
images: [
"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://cloths-ecommerce.com",
githubUrl: "https://github.com/company/cloths-ecommerce",
features: [
"Virtual try-on technology",
"Personalized recommendations",
"Advanced product catalog",
"Mobile-first design",
"Social commerce integration",
],
duration: "5 months",
teamSize: "6 developers",
},
{
id: "p5",
title: "Nanas Dashboard",
description:
"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 powerful business intelligence dashboard that provides real-time data visualization, predictive analytics, and comprehensive reporting for data-driven decision making.",
images: [
"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://nanas-dashboard.com",
githubUrl: "https://github.com/company/nanas-dashboard",
features: [
"Real-time data visualization",
"Predictive analytics",
"Custom reporting tools",
"Interactive dashboards",
"Data export capabilities",
],
duration: "4 months",
teamSize: "5 developers",
},
{
id: "p6",
title: "Easy Pay Login System",
description:
"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 robust authentication system designed for financial applications, featuring multi-factor authentication, advanced security protocols, and seamless user experience.",
images: [
"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://easy-pay-login.com",
githubUrl: "https://github.com/company/easy-pay-login",
features: [
"Multi-factor authentication",
"Advanced security protocols",
"Session management",
"Audit logging",
"Password recovery system",
],
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",
},
];
const categories = [
"All",
"Enterprise Software",
"Legal Software",
"FinTech",
"E-commerce",
"Business Intelligence",
"Security",
"Analytics",
"Education",
];
export default function ProjectsPage() {
const [selectedCategory, setSelectedCategory] = useState("All");
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const [visibleProjects, setVisibleProjects] = useState(9);
const [visibleProjects, setVisibleProjects] = useState(13);
const filteredProjects =
selectedCategory === "All"
@@ -314,6 +57,12 @@ export default function ProjectsPage() {
};
const handleCategoryClick = (category: string) => {
if (category === "All") {
setSelectedCategory("All");
setVisibleProjects(13);
return;
}
if (selectedCategory === category) {
// If clicking on the same category, remove the filter
setSelectedCategory("All");
@@ -427,10 +176,10 @@ export default function ProjectsPage() {
{/* Projects Grid */}
<motion.div
key={selectedCategory}
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
animate="visible"
className={styles.projectsGrid}
>
{displayedProjects.map((project) => (

396
src/data/projects.ts Normal file
View File

@@ -0,0 +1,396 @@
export interface Project {
id: string;
title: string;
description: string;
imageUrl: string;
category: string;
technologies: string[];
featured: boolean;
detailedDescription: string;
images: string[];
liveUrl?: string;
githubUrl?: string;
features: string[];
duration: string;
teamSize: string;
}
export const categories = [
"All",
"Enterprise Software",
"Legal Software",
"FinTech",
"E-commerce",
"Business Intelligence",
"POS System",
"Education",
"HealthTech"
];
export const projectsData: Project[] = [
{
id: "p1",
title: "BPro ERP System",
description:
"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 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: [
"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://bpro-erp.com",
githubUrl: "https://github.com/company/bpro-erp",
features: [
"Advanced business process management",
"Real-time analytics and reporting",
"Multi-department integration",
"Custom workflow automation",
"Comprehensive audit trails",
],
duration: "8 months",
teamSize: "12 developers",
},
{
id: "p2",
title: "Law Office Management",
description:
"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 comprehensive legal practice management system designed to streamline law office operations, manage cases, track billable hours, and provide secure client communication portals.",
images: [
"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://law-office-demo.com",
githubUrl: "https://github.com/company/law-office-system",
features: [
"Case management and tracking",
"Document management system",
"Client portal and communication",
"Time tracking and billing",
"Calendar and appointment management",
],
duration: "6 months",
teamSize: "8 developers",
},
{
id: "p3",
title: "MoneyOut Payment Platform",
description:
"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 payment processing platform that enables secure digital transactions with multi-currency support, advanced fraud detection, and comprehensive merchant tools.",
images: [
"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://moneyout-demo.com",
githubUrl: "https://github.com/company/moneyout-platform",
features: [
"Multi-currency payment processing",
"Advanced fraud detection",
"Merchant dashboard and analytics",
"Secure API integration",
"Real-time transaction monitoring",
],
duration: "7 months",
teamSize: "10 developers",
},
{
id: "p4",
title: "Cloths E-commerce Platform",
description:
"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:
"A cutting-edge fashion e-commerce platform featuring virtual try-on technology, personalized recommendations, and seamless mobile shopping experience.",
images: [
"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://cloths-ecommerce.com",
githubUrl: "https://github.com/company/cloths-ecommerce",
features: [
"Virtual try-on technology",
"Personalized recommendations",
"Advanced product catalog",
"Mobile-first design",
"Social commerce integration",
],
duration: "5 months",
teamSize: "6 developers",
},
{
id: "p5",
title: "Nanas Dashboard",
description:
"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 powerful business intelligence dashboard that provides real-time data visualization, predictive analytics, and comprehensive reporting for data-driven decision making.",
images: [
"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://nanas-dashboard.com",
githubUrl: "https://github.com/company/nanas-dashboard",
features: [
"Real-time data visualization",
"Predictive analytics",
"Custom reporting tools",
"Interactive dashboards",
"Data export capabilities",
],
duration: "4 months",
teamSize: "5 developers",
},
{
id: "p6",
title: "Easy Pay POS System",
description:
"Secure POS system with multi-factor authentication and advanced security features for financial applications.",
imageUrl: "https://tech-masters.guru/photos/projects/easy-pay-login.png",
category: "POS System",
technologies: ["React", "Node.js", "JWT", "Redis"],
featured: false,
detailedDescription:
"A robust POS system designed for financial applications, featuring multi-factor authentication, advanced security protocols, and seamless user experience.",
images: [
"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://easy-pay-login.com",
githubUrl: "https://github.com/company/easy-pay-login",
features: [
"Multi-factor authentication",
"Advanced security protocols",
"Session management",
"Audit logging",
"Password recovery system",
],
duration: "3 months",
teamSize: "4 developers",
},
{
id: "p7",
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",
},
{
id: "p8",
title: "Law Firm Management",
description:
"Comprehensive hardware inventory and management system for educational institutions with asset tracking.",
imageUrl: "https://tech-masters.guru/photos/projects/law-firm-management.png",
category: "Legal Software",
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",
},
{
id: "p9",
title: "Barber Shop Management",
description:
"Comprehensive barber shop management system for educational institutions with asset tracking.",
imageUrl: "https://tech-masters.guru/photos/projects/barber-shop-management.png",
category: "Enterprise Software",
technologies: ["React", "Node.js", "MySQL", "Docker"],
featured: false,
detailedDescription:
"A comprehensive barber shop management system designed for educational institutions, featuring asset tracking, maintenance scheduling, and detailed reporting capabilities.",
images: [
"https://tech-masters.guru/photos/projects/barber-shop-management.png",
"https://tech-masters.guru/photos/projects/barber-shop-management.png",
"https://tech-masters.guru/photos/projects/barber-shop-management.png",
],
liveUrl: "https://barber-shop-management.com",
githubUrl: "https://github.com/company/barber-shop-management",
features: [
"Asset tracking and management",
"Maintenance scheduling",
"Inventory control",
"Detailed reporting",
"User access management",
],
duration: "5 months",
teamSize: "6 developers",
},
{
id: "p10",
title: "Motiva Management",
description:
"Leading medical technology company specializing in breast aesthetics and reconstruction. Enhancing women's health through cutting-edge implant solutions.",
imageUrl: "https://tech-masters.guru/photos/projects/motiva-management.png",
category: "HealthTech",
technologies: ["React", "Node.js", "MySQL", "Docker"],
featured: false,
detailedDescription:
"A comprehensive barber shop management system designed for educational institutions, featuring asset tracking, maintenance scheduling, and detailed reporting capabilities.",
images: [
"https://tech-masters.guru/photos/projects/motiva-medical-site.png",
"https://tech-masters.guru/photos/projects/motiva-medical-site.png",
"https://tech-masters.guru/photos/projects/motiva-medical-site.png",
],
liveUrl: "https://motiva-medical-site.netlify.app/",
githubUrl: "https://github.com/company/barber-shop-management",
features: [
"Asset tracking and management",
"Maintenance scheduling",
"Inventory control",
"Detailed reporting",
"User access management",
],
duration: "5 months",
teamSize: "6 developers",
},
{
id: "p11",
title: "EasyBook Management",
description:
"Leading NoCode platform for appointment scheduling and management. Streamlining the booking process for businesses of all sizes.",
imageUrl: "https://tech-masters.guru/photos/projects/motiva-management.png",
category: "NoCode",
technologies: ["React", "Node.js", "MySQL", "Docker"],
featured: false,
detailedDescription:
"A comprehensive barber shop management system designed for educational institutions, featuring asset tracking, maintenance scheduling, and detailed reporting capabilities.",
images: [
"https://tech-masters.guru/photos/projects/easybook-management.png",
"https://tech-masters.guru/photos/projects/easybook-management.png",
"https://tech-masters.guru/photos/projects/easybook-management.png",
],
liveUrl: "https://easybook-management.netlify.app/",
githubUrl: "https://github.com/company/barber-shop-management",
features: [
"Asset tracking and management",
"Maintenance scheduling",
"Inventory control",
"Detailed reporting",
"User access management",
],
duration: "5 months",
teamSize: "6 developers",
},
{
id: "p12",
title: "Insighter Analytics",
description:
"Insightter is your data transformer Agency, together, we transform your Data into a strategic Asset, releasing unprecedented Intelligence for your Corporate Growth.",
imageUrl: "https://tech-masters.guru/photos/projects/motiva-management.png",
category: "Analytics",
technologies: ["Next.js", "Node.js", "MySQL", "Docker"],
featured: false,
detailedDescription:
"Insightter is your data transformer Agency, together, we transform your Data into a strategic Asset, releasing unprecedented Intelligence for your Corporate Growth.",
images: [
"https://tech-masters.guru/photos/projects/insighter-analytics.png",
"https://tech-masters.guru/photos/projects/insighter-analytics.png",
"https://tech-masters.guru/photos/projects/insighter-analytics.png",
],
liveUrl: "https://insightter.netlify.app/",
githubUrl: "https://github.com/company/ barber-shop-management",
features: [
"Asset tracking and management",
"Maintenance scheduling",
"Inventory control",
"Detailed reporting",
"User access management",
],
duration: "5 months",
teamSize: "6 developers",
},
{
id: "p13",
title: "Workiom Task Board",
description:
"Workiom is a task management platform for teams of all sizes. It helps you stay organized, productive, and on top of your work.",
imageUrl: "https://tech-masters.guru/photos/projects/workiom-task-board.png",
category: "Task Management",
technologies: ["Angular", "Node.js", "MySQL", "Docker"],
featured: false,
detailedDescription:
"Workiom is a task management platform for teams of all sizes. It helps you stay organized, productive, and on top of your work.",
images: [
"https://tech-masters.guru/photos/projects/workiom-task-board.png",
"https://tech-masters.guru/photos/projects/workiom-task-board.png",
"https://tech-masters.guru/photos/projects/workiom-task-board.png",
],
liveUrl: "https://workiom-task-board.netlify.app/",
githubUrl: "https://github.com/company/ barber-shop-management",
features: [
"Asset tracking and management",
"Maintenance scheduling",
"Inventory control",
"Detailed reporting",
"User access management",
],
duration: "5 months",
teamSize: "6 developers",
},
];