From a04ab46f11017650e2e8cdc5f0367b879dce06af Mon Sep 17 00:00:00 2001 From: vimal-tech-starter Date: Sun, 22 Mar 2026 08:16:06 +0530 Subject: [PATCH] Services html, css align with global css Hero color and particles works perfectly with mouse move and explode font align, h1, h2, h3, p come from global Signed-off-by: vimal-tech-starter --- css/global.css | 80 +++++-- css/index.css | 19 +- css/latest-works.css | 1 + css/open-modal-btn.css | 246 +++++++++++++------ css/services.css | 533 ++++++++++++++++++++++++----------------- expertise/index.html | 1 + index.html | 25 +- js/expertise.js | 33 +++ js/global.js | 33 --- js/index.js | 33 +++ js/open-modal-btn.js | 8 +- js/services.js | 241 ++++++++++++------- services/index.html | 450 +++++++++++++++++++--------------- 13 files changed, 1047 insertions(+), 656 deletions(-) create mode 100644 js/expertise.js create mode 100644 js/index.js diff --git a/css/global.css b/css/global.css index 1dc571d..4bc060e 100644 --- a/css/global.css +++ b/css/global.css @@ -44,21 +44,28 @@ h1 { h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); - font-weight: 700; - font-weight: bold; + font-family: "Lexend", sans-serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; } h3 { font-size: 1.3rem; - font-weight: 600; + font-family: "Montserrat", sans-serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; + margin-bottom: 1.5rem; } /* TYPOGRAPHY */ p { + font-size: 1.1rem; color: var(--color-muted); font-family: "Outfit", sans-serif; font-optical-sizing: auto; - font-weight: 400; + font-weight: 500; font-style: normal; } @@ -149,7 +156,8 @@ p { color: #333; } -.nav-links li a.active { +.nav-links li a.active, +.nav-links li a.active:hover { color: #003cff; font-weight: 300; } @@ -303,7 +311,7 @@ p { animation: fadeUp 0.8s ease forwards; } -.highlight { +.highlight-text { color: #a3e635; } @@ -378,6 +386,20 @@ p { .section-title { text-align: center; margin-bottom: 2rem; + text-transform: uppercase; + letter-spacing: 1px; + background-color: linear-gradient(90deg, #38bdf8, #22c55e, #a3e635, #38bdf8); + background-size: 200% auto; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: var(--color-text); + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); + animation: gradientMove 4s linear infinite; + filter: drop-shadow(0 0 6px rgba(163, 230, 53, 0.4)); +} + +body.dark .section-title { + --color-text: #e0e0e0; } /* ===== BUTTON FIX (IMPORTANT) ===== */ @@ -394,6 +416,7 @@ p { .btn:hover { box-shadow: 0 0 20px rgba(255, 152, 0, 0.6); + transform: scale(1.05); } .btn:hover::after { @@ -432,6 +455,11 @@ p { /* ====================================================== ================ NavBar Dark mode ==================== ====================================================== */ +body.dark { + background: #181818; + color: #e0e0e0; +} + body.dark .navbar .brand-name-vimal { color: #fff; } @@ -461,15 +489,14 @@ body.dark .hamburger { color: #000; } -body.dark { - background: #181818; - color: #e0e0e0; -} - body.dark p { color: #ccc; } +body.dark .site-footer { + background: #0f172a; +} + /* =================================================== ===== Containers & Animations ===== =================================================== */ @@ -498,10 +525,10 @@ body.dark p { =================================================== */ .site-footer { - background: linear-gradient(180deg, #0f172a, #020617); - color: #e5e7eb; + background: linear-gradient(180deg, #112c6d, #020617); + color: #e5ff7a; padding: 60px 20px; - font-size: 14px; + font-size: 18px; } /* top divider */ @@ -518,7 +545,7 @@ body.dark p { display: flex; justify-content: space-between; align-items: flex-start; - gap: 60px; + gap: 10px; } /* 3-Column Layout */ @@ -526,13 +553,13 @@ body.dark p { .footer-center, .footer-links { flex: 1; - max-width: 320px; + /* max-width: 320px; */ } .footer-center { border-left: 1px solid rgb(208, 255, 0); border-right: 1px solid rgb(208, 255, 0); - padding: 0 80px; + padding: 0 0 70px 10px; } .footer-links { @@ -550,6 +577,7 @@ body.dark p { .site-footer p { margin: 6px 0; line-height: 1.5; + color: #fff; } .tagline { @@ -565,7 +593,7 @@ body.dark p { .brand-divider-left, .brand-divider-center, .brand-divider-right { - width: 50px; + width: 110px; height: 2px; background: #60a5fa; margin: 14px 0 18px 0; @@ -575,7 +603,7 @@ body.dark p { .msme, .udyam { - font-size: 13px; + font-size: 16px; opacity: 0.85; } @@ -611,11 +639,17 @@ body.dark p { .footer-bottom { border-top: 1px solid rgb(208, 255, 0); margin-top: 30px; - padding-top: 18px; + padding-top: 10px; text-align: center; opacity: 0.8; } +.footer-left p, +.footer-right p { + margin: 8px 0; + line-height: 1.6; +} + /* ===== Mobile ===== */ @media (max-width:768px) { @@ -659,12 +693,6 @@ body.dark p { } } -.footer-left p, -.footer-right p { - margin: 8px 0; - line-height: 1.6; -} - /* ========================== ====== Quick Links ======= ========================== */ diff --git a/css/index.css b/css/index.css index 2313366..e1bff36 100644 --- a/css/index.css +++ b/css/index.css @@ -10,12 +10,12 @@ ===== Experience Section ===== =================================================== */ #experience { - /* background: #fff; */ background-color: #e9ecef; padding: 3rem 2rem; border-radius: 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); text-align: center; + margin-bottom: 50px; } /* =================================================== @@ -78,7 +78,7 @@ body.dark #experience, body.dark #projects, body.dark #cta-section { background-color: #467db4; - color: #000; + color: #ffffff; } body.dark .project-card { @@ -100,21 +100,6 @@ body.dark .project-card { margin-top: 50px; } -.cta-section a.btn { - background: #ff9800; - color: #fff; - padding: 14px 30px; - border-radius: 30px; - font-weight: bold; - text-decoration: none; - transition: all 0.3s ease; -} - -.cta-section a.btn:hover { - background: #ff5722; - transform: scale(1.05); -} - /* Container */ .cta-wrap { text-align: center; diff --git a/css/latest-works.css b/css/latest-works.css index 718b841..cdc7dda 100644 --- a/css/latest-works.css +++ b/css/latest-works.css @@ -5,6 +5,7 @@ #projects { text-align: center; background-color: #ced4da; + margin-bottom: 2rem; } .projects-wrap { diff --git a/css/open-modal-btn.css b/css/open-modal-btn.css index 0a328f4..faf10ad 100644 --- a/css/open-modal-btn.css +++ b/css/open-modal-btn.css @@ -1,69 +1,177 @@ - /* Modal backdrop */ - .modal { - display: none; - /* Hidden by default */ - position: fixed; - z-index: 1000; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0, 0, 0, 0.5); - /* semi-transparent background */ - justify-content: center; - align-items: center; - opacity: 0; - transition: opacity 0.3s ease; - } - - .modal.show { - display: flex; - opacity: 1; - } - - /* Modal content */ - .modal-content { - background-color: #fff; - padding: 20px; - border-radius: 12px; - max-width: 400px; - width: 80%; - text-align: center; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); - position: relative; - transform: translateY(-50px); - transition: transform 0.3s ease; - } - - .modal.show .modal-content { - transform: translateY(0); - } - - /* Close button */ - .close { - position: absolute; - top: 10px; - right: 15px; - font-size: 24px; - cursor: pointer; - } - - /* Button styling */ - .open-modal-btn { - font-size: 16px; - cursor: pointer; - border: none; - display: inline-block; - padding: 12px 25px; - border-radius: 30px; - background: #ff9800; - color: #fff; - text-decoration: none; - font-weight: bold; - transition: background 0.3s, transform 0.3s; - } - - .open-modal-btn:hover { - background-color: #0056b3; - } \ No newline at end of file +/* ===== MODAL BACKDROP ===== */ +.modal { + display: none; + position: fixed; + z-index: 9999; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(15, 23, 42, 0.6); + /* Deep dark blue tint */ + backdrop-filter: blur(8px); + /* Modern Glass blur effect */ + -webkit-backdrop-filter: blur(8px); + justify-content: center; + align-items: center; + opacity: 0; + visibility: hidden; + transition: opacity 0.4s ease, visibility 0.4s ease; +} + +.modal.show { + display: flex; + opacity: 1; + visibility: visible; +} + +/* ===== MODAL CONTENT (GLASSMORPHISM) ===== */ +.glass-modal { + background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 24px; + width: 90%; + max-width: 450px; + padding: 30px; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + transform: scale(0.9) translateY(20px); + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.modal.show .glass-modal { + transform: scale(1) translateY(0); +} + +/* ===== MODAL HEADER ===== */ +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 25px; + padding-bottom: 15px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.modal-header h3 { + margin: 0; + color: #fff; + font-size: 1.4rem; + font-family: var(--font-primary); +} + +.close { + color: #94a3b8; + font-size: 20px; + cursor: pointer; + background: rgba(255, 255, 255, 0.05); + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: all 0.3s ease; +} + +.close:hover { + background: rgba(239, 68, 68, 0.2); + color: #ef4444; + transform: rotate(90deg); +} + +/* ===== PROJECT TILES MENU ===== */ +.project-menu { + display: flex; + flex-direction: column; + gap: 15px; +} + +.project-tile { + display: flex; + align-items: center; + padding: 16px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 16px; + text-decoration: none; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +/* Hover Effect for Tiles */ +.project-tile:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.2); + transform: translateX(8px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.project-icon { + width: 45px; + height: 45px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + margin-right: 15px; + flex-shrink: 0; +} + +.project-details { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.project-title { + color: #fff; + font-weight: 600; + font-size: 1.1rem; + margin-bottom: 4px; +} + +.project-tech { + color: #94a3b8; + font-size: 0.85rem; + font-family: "Outfit", sans-serif; +} + +.project-arrow { + color: #94a3b8; + font-size: 1rem; + transition: transform 0.3s ease, color 0.3s ease; +} + +.project-tile:hover .project-arrow { + transform: translateX(5px); + color: #fff; +} + +/* ===== BUTTON UPGRADE ===== */ +.glow-btn { + position: relative; + overflow: hidden; + display: inline-flex; + align-items: center; + gap: 8px; + background: linear-gradient(135deg, #ff9800, #ff5722); + border: none; + color: #fff; +} + +.glow-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s ease; +} + +.glow-btn:hover::before { + left: 100%; +} \ No newline at end of file diff --git a/css/services.css b/css/services.css index 8b1d18b..09bceed 100644 --- a/css/services.css +++ b/css/services.css @@ -1,23 +1,17 @@ -/* Services.css */ -/* ===== HERO SECTION ===== */ +/* Services.css - Elegant & Modern Update */ + /* ===== HERO SECTION ===== */ .hero-services { - position: relative; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - text-align: center; overflow: hidden; - background: radial-gradient(circle at top right, #ff8c00, #ff5722); + /* Aligned with global elegant dark tech theme instead of bright orange */ + background: radial-gradient(circle at center, #1e293b, #020617); } body.dark .hero-services { - background: radial-gradient(circle at top right, #805922, #8d4630); - color: #fff; + background: radial-gradient(circle at center, #0f172a, #000000); } -/* Particles */ +/* Particles Overlay */ #particles-js { position: absolute; width: 100%; @@ -25,58 +19,18 @@ body.dark .hero-services { z-index: 0; } - - -/* Soft neon particle glow for dark mode */ body.dark #particles-js canvas { filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35)); - transition: filter 0.5s ease; -} - -/* Smooth background color transition */ -body { - transition: background-color 0.4s ease, color 0.4s ease; -} - -/* ===== Dynamic Gradient Overlay ===== */ -:root { - --overlay-gradient: linear-gradient(45deg, rgba(255, 87, 34, 0.3), rgba(255, 255, 255, 0.15), rgba(255, 152, 0, 0.25)); } -/* body.dark { - --overlay-gradient: linear-gradient(45deg, rgba(33, 150, 243, 0.25), rgba(0, 0, 0, 0.3), rgba(63, 81, 181, 0.3)); -} */ - -body.dark canvas { - filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.4)); -} - -/* Overlay */ .gradient-overlay { position: absolute; - width: 200%; - height: 200%; - background: linear-gradient(45deg, rgba(255, 87, 34, 0.3), rgba(255, 255, 255, 0.15)); - filter: blur(100px); + width: 100%; + height: 100%; + background: linear-gradient(45deg, rgba(56, 189, 248, 0.1), rgba(0, 0, 0, 0.5)); z-index: 1; } -/* Animation Keyframes */ -@keyframes waveMove { - 0% { - transform: translate(-20%, -20%) rotate(0deg); - } - - 50% { - transform: translate(10%, 10%) rotate(15deg); - } - - 100% { - transform: translate(-10%, 20%) rotate(-15deg); - } -} - -/* Hero content */ .hero-services .hero-content { position: relative; z-index: 2; @@ -84,74 +38,49 @@ body.dark canvas { padding: 20px; } - -.hero-services h1 { - font-size: 3rem; +/* ===== UTILITIES ===== */ +.section-header { + text-align: center; + font-size: 2rem; font-weight: 700; - line-height: 1.2; - margin-bottom: 15px; -} - -.hero-services .highlight { - color: #ffeb3b; + margin-bottom: 3rem; + margin-top: 1.5rem; } -.hero-services p { +.section-subtitle { font-size: 1.2rem; - margin: 1rem 0; - opacity: 0.9; - max-width: 650px; -} - -.hero-services .btn { - display: inline-block; - padding: 12px 25px; - border-radius: 30px; - background: #ff9800; - color: #fff; - text-decoration: none; - font-weight: bold; - transition: background 0.3s, transform 0.3s; + color: var(--color-muted); + max-width: 600px; + margin: 0 auto; } -.hero-services .btn:hover { - background: #e68900; - transform: translateY(-3px); +/* Background alternation for elegance */ +.alt-bg { + background: rgba(255, 255, 255, 0.4); + border-radius: 20px; + margin-bottom: 2rem; + padding: 3rem 2rem; } -/* Responsive */ -@media (max-width: 768px) { - .hero-services { - height: 100vh; - } - - .hero-services h1 { - font-size: 2.2rem; - } - - .hero-services p { - font-size: 1rem; - } +body.dark .alt-bg { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.05); } -/* Services Grid */ -/* ===== SERVICES GRID ===== */ +/* ===== SERVICES GRID (ACCORDION UPGRADE) ===== */ .services-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; - margin-top: 40px; } .service-card { - background: linear-gradient(145deg, #fff, #f9f9f9); + background: #ffffff; padding: 25px; - border-radius: 15px; - text-align: center; - - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); + border-radius: 16px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease; - opacity: 0; transform: translateY(30px); animation: fadeUp 0.8s forwards; @@ -159,194 +88,356 @@ body.dark canvas { } .service-card:hover { - transform: translateY(-8px); - box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); + transform: translateY(-5px); + border-color: var(--color-accent); } -.service-card i { - font-size: 2.5rem; - color: #ff9800; - margin-bottom: 10px; +.icon-wrapper { + background: rgba(56, 189, 248, 0.1); + width: 50px; + height: 50px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 15px; } -.service-card:hover i { - transform: scale(1.1); +.service-card i { + font-size: 1.5rem; + color: var(--color-accent); + animation: iconBounce 2s infinite; + display: inline-block; + transition: transform 0.3s, color 0.3s; } -.service-card h3 { - margin: 12px 0 8px; - transition: color 0.3s ease; -} +/* Icon Bounce Animation */ +@keyframes iconBounce { + + 0%, + 100% { + transform: translateY(0); + } -.service-card:hover h3 { - color: #d2691e; + 50% { + transform: translateY(-5px); + } } -/* ===== ACCORDION ===== */ .accordion-header { display: flex; - justify-content: space-between; + align-items: center; cursor: pointer; } +.accordion-header h3 { + flex: 1; + margin: 0; + font-size: 1.2rem; +} + +.accordion-icon { + font-size: 24px; + color: var(--color-muted); + transition: transform 0.3s ease; +} + .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; + padding-left: 65px; + /* Aligns with text */ } .accordion-item.active .accordion-body { - max-height: 1000px; - /* FIXED */ + max-height: 200px; + margin-top: 15px; } -/* =================================================== - ===== Dark Mode ===== -=================================================== */ -body.dark { - background: #181818; - color: #e0e0e0; +.accordion-item.active .accordion-icon { + transform: rotate(45deg); + color: var(--color-accent); } -body.dark .service-card { - background: #181818; - color: #e0e0e0; +/* ===== FEATURES LIST (WHY WORK WITH ME) ===== */ +.features-grid { + display: flex; + flex-wrap: wrap; + gap: 15px; + justify-content: center; + margin-top: 2rem; } -body.dark .service-card:hover { - transform: translateY(-10px) scale(1.05); - box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15); - background: linear-gradient(145deg, #ffecb3, #ffe0b2); +.feature-item { + background: #fff; + padding: 12px 25px; + border-radius: 30px; + font-weight: 500; + font-size: 1.05rem; + display: flex; + align-items: center; + gap: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); } -body.dark .service-card p { - transition: color 0.3s ease; +.feature-item i { + color: #22c55e; } -body.dark .service-card:hover p { - color: #000000; +/* ===== BENEFITS GRID (HOW IT HELPS) ===== */ +.benefits-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 25px; + margin-top: 2rem; } -/* CTA Section */ -.cta-section { +.benefit-card { + background: #fff; + padding: 30px; + border-radius: 16px; + border-top: 4px solid var(--color-primary); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); + transition: transform 0.3s; +} + +.benefit-card:hover { + transform: translateY(-5px); +} + +.benefit-card i { + font-size: 2rem; + color: var(--color-primary); + margin-bottom: 15px; +} + +/* ===== WORKING PROCESS TIMELINE ===== */ +.process-timeline { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + margin-top: 2rem; +} + +.process-step { + flex: 1; + min-width: 200px; + background: #fff; + padding: 30px 20px; + border-radius: 16px; text-align: center; - margin-top: 50px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); + position: relative; + transition: transform 0.3s; } -.cta-section a.btn { - background: #ff9800; +.process-step:hover { + transform: translateY(-5px); +} + +.step-number { + width: 45px; + height: 45px; + background: var(--color-primary); color: #fff; - padding: 14px 30px; - border-radius: 30px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; font-weight: bold; - text-decoration: none; - transition: all 0.3s ease; + margin: 0 auto 15px auto; + box-shadow: 0 4px 10px rgba(255, 152, 0, 0.3); +} + +.process-step h4 { + margin-bottom: 10px; + font-family: var(--font-primary); +} + +.process-step p { + font-size: 0.95rem; +} + +/* ===== ENGAGEMENT MODELS ===== */ +.engagement-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 30px; + margin-top: 2rem; +} + +.engagement-card { + background: #fff; + border: 1px solid #eaeaea; + padding: 40px 30px; + border-radius: 16px; + text-align: center; + transition: all 0.3s; +} + +.engagement-card:hover { + border-color: var(--color-accent); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); } -.cta-section a.btn:hover { - background: #ff5722; +.highlight-card { + border: 2px solid var(--color-primary); transform: scale(1.05); + box-shadow: 0 10px 25px rgba(255, 152, 0, 0.15); } -/* Fade-in Animation */ -@keyframes fadeUp { - to { - opacity: 1; - transform: translateY(0); - } +.engagement-card .card-icon i { + font-size: 2.5rem; + color: var(--color-muted); + margin-bottom: 20px; + transition: color 0.3s; } -.fade-in.visible { - opacity: 1 !important; - transform: translateY(0) !important; +.engagement-card:hover .card-icon i, +.highlight-card .card-icon i { + color: var(--color-primary); } -/* Icon Bounce Animation */ -@keyframes iconBounce { +/* ===== FAQ GRID ===== */ +.faq-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 25px; + margin-top: 2rem; +} - 0%, - 100% { - transform: translateY(0); - } +.faq-card { + background: #fff; + padding: 25px; + border-radius: 12px; + border-left: 3px solid var(--color-accent); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); +} - 50% { - transform: translateY(-5px); - } +.faq-card h4 { + margin-bottom: 10px; + font-size: 1.1rem; } -/* ===== SECTION COLORS ===== */ -#services-offer, -#services-help-business, -#lets-build { +/* ===== CTA & LIVE PROJECTS COMPONENT ===== */ +.elegant-card, +.cta-card { + background: linear-gradient(135deg, #0f172a, #1e293b); + color: #fff; + padding: 50px 30px; + border-radius: 24px; text-align: center; - background-color: #ced4da; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); } -body.dark #services-offer, -body.dark #services-help-business, -body.dark #lets-build { - background-color: #467db4; - color: #000; +.elegant-card h2, +.cta-card h2 { + color: #fff; + margin-bottom: 15px; } -/* Wrapper for centering card horizontally */ -.card-container { - display: flex; - justify-content: center; - width: 100%; - /* margin-top: 10px; */ +.elegant-card p { + color: #cbd5e1; + margin-bottom: 30px; } -body.dark .hamburger { - color: #000; +/* Theme Neon overrides to match global index.html */ +.theme-neon { + background: linear-gradient(135deg, #020617, #0f172a); + position: relative; + overflow: hidden; } -/* ===== ANIMATION ===== */ -@keyframes fadeUp { - to { - opacity: 1; - transform: translateY(0); - } +.theme-neon::before { + content: ''; + position: absolute; + top: -50%; + right: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 60%); + z-index: 0; } -/* ===== DARK MODE ===== */ -body.dark .service-card { - background: #181818; - color: #e0e0e0; +.theme-neon>* { + position: relative; + z-index: 1; } -/* Accordion Styles */ -.accordion-header { - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; +/* =================================================== + ===== DARK MODE OVERRIDES ===== +=================================================== */ +body.dark .service-card, +body.dark .feature-item, +body.dark .benefit-card, +body.dark .process-step, +body.dark .engagement-card, +body.dark .faq-card { + background: #1e293b; + border: 1px solid rgba(255, 255, 255, 0.05); + color: #e2e8f0; } -.accordion-header h3 { - flex: 1; - margin-left: 12px; +body.dark .service-card:hover, +body.dark .engagement-card:hover { + background: #27354f; + border-color: var(--color-accent); } -.accordion-icon { - font-size: 22px; - font-weight: bold; - transition: transform 0.3s ease; +body.dark .highlight-card { + border-color: var(--color-primary); + background: #27354f; } -.accordion-body { - max-height: 0; - overflow: hidden; - transition: max-height 0.4s ease; - margin-top: 10px; +body.dark .feature-item i { + color: #a3e635; } -.accordion-item.active .accordion-body { - max-height: 300px; - /* safe default */ +body.dark .step-number { + box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4); } -.accordion-item.active .accordion-icon { - transform: rotate(45deg); - /* + becomes Γ— */ +body.dark .accordion-icon { + color: #94a3b8; +} + +body.dark p { + color: #94a3b8; + /* slightly lighter muted color for dark mode reading */ +} + +/* Animations */ +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-in.visible { + opacity: 1 !important; + transform: translateY(0) !important; +} + +@media (max-width: 768px) { + .hero-services h1 { + font-size: 2.2rem; + } + + .hero-services p { + font-size: 1rem; + } + + .process-step { + min-width: 100%; + } + + .highlight-card { + transform: scale(1); + } } \ No newline at end of file diff --git a/expertise/index.html b/expertise/index.html index 59746a1..ac3ef8e 100644 --- a/expertise/index.html +++ b/expertise/index.html @@ -393,6 +393,7 @@

Quick Links

+ \ No newline at end of file diff --git a/index.html b/index.html index 32d31b8..9b71e34 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,6 @@ - @@ -71,6 +70,11 @@ + + + + - + \ No newline at end of file diff --git a/js/expertise.js b/js/expertise.js new file mode 100644 index 0000000..c9dcedb --- /dev/null +++ b/js/expertise.js @@ -0,0 +1,33 @@ +// ===== localStorage theme handling ===== +const darkModeToggle = document.getElementById("darkModeToggle"); +const body = document.body; + +// Apply saved theme on load +if (localStorage.getItem("theme") === "dark") { + document.documentElement.classList.add("dark"); + body.classList.add("dark"); + darkModeToggle.textContent = "β˜€οΈ"; // show sun icon if dark mode is active +} else { + darkModeToggle.textContent = "πŸŒ™"; // show moon icon if light mode is active +} + +// ===== Dark Mode Persist Across Pages ===== +darkModeToggle.addEventListener("click", () => { + const isDark = body.classList.toggle("dark"); + darkModeToggle.textContent = isDark ? "β˜€οΈ" : "πŸŒ™"; + localStorage.setItem("theme", isDark ? "dark" : "light"); + + // ===== Optional for Services Page ===== + if (typeof updateOverlayGradient === "function") updateOverlayGradient(); + + // Rebuild particles only if available + if (typeof initParticles === "function") { + setTimeout(() => { + if (window.pJSDom && pJSDom.length) { + pJSDom[0].pJS.fn.vendors.destroypJS(); + document.getElementById("particles-js").innerHTML = ""; + } + initParticles(); + }, 300); + } +}); \ No newline at end of file diff --git a/js/global.js b/js/global.js index 01f8a47..6e7eb43 100644 --- a/js/global.js +++ b/js/global.js @@ -187,37 +187,4 @@ document.addEventListener("DOMContentLoaded", () => { } }); - // ===== localStorage theme handling ===== - const darkModeToggle = document.getElementById("darkModeToggle"); - const body = document.body; - - // Apply saved theme on load - if (localStorage.getItem("theme") === "dark") { - document.documentElement.classList.add("dark"); - body.classList.add("dark"); - darkModeToggle.textContent = "β˜€οΈ"; // show sun icon if dark mode is active - } else { - darkModeToggle.textContent = "πŸŒ™"; // show moon icon if light mode is active - } - - // ===== Dark Mode Persist Across Pages ===== - darkModeToggle.addEventListener("click", () => { - const isDark = body.classList.toggle("dark"); - darkModeToggle.textContent = isDark ? "β˜€οΈ" : "πŸŒ™"; - localStorage.setItem("theme", isDark ? "dark" : "light"); - - // ===== Optional for Services Page ===== - if (typeof updateOverlayGradient === "function") updateOverlayGradient(); - - // Rebuild particles only if available - if (typeof initParticles === "function") { - setTimeout(() => { - if (window.pJSDom && pJSDom.length) { - pJSDom[0].pJS.fn.vendors.destroypJS(); - document.getElementById("particles-js").innerHTML = ""; - } - initParticles(); - }, 300); - } - }); }); diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..c9dcedb --- /dev/null +++ b/js/index.js @@ -0,0 +1,33 @@ +// ===== localStorage theme handling ===== +const darkModeToggle = document.getElementById("darkModeToggle"); +const body = document.body; + +// Apply saved theme on load +if (localStorage.getItem("theme") === "dark") { + document.documentElement.classList.add("dark"); + body.classList.add("dark"); + darkModeToggle.textContent = "β˜€οΈ"; // show sun icon if dark mode is active +} else { + darkModeToggle.textContent = "πŸŒ™"; // show moon icon if light mode is active +} + +// ===== Dark Mode Persist Across Pages ===== +darkModeToggle.addEventListener("click", () => { + const isDark = body.classList.toggle("dark"); + darkModeToggle.textContent = isDark ? "β˜€οΈ" : "πŸŒ™"; + localStorage.setItem("theme", isDark ? "dark" : "light"); + + // ===== Optional for Services Page ===== + if (typeof updateOverlayGradient === "function") updateOverlayGradient(); + + // Rebuild particles only if available + if (typeof initParticles === "function") { + setTimeout(() => { + if (window.pJSDom && pJSDom.length) { + pJSDom[0].pJS.fn.vendors.destroypJS(); + document.getElementById("particles-js").innerHTML = ""; + } + initParticles(); + }, 300); + } +}); \ No newline at end of file diff --git a/js/open-modal-btn.js b/js/open-modal-btn.js index fd75333..61565aa 100644 --- a/js/open-modal-btn.js +++ b/js/open-modal-btn.js @@ -7,6 +7,8 @@ const close = document.querySelector(".close"); if (btn && modal) { btn.addEventListener("click", () => { modal.classList.add("show"); + // Prevent background scrolling + document.body.style.overflow = "hidden"; }); } @@ -14,6 +16,8 @@ if (btn && modal) { if (close && modal) { close.addEventListener("click", () => { modal.classList.remove("show"); + // Restore background scrolling + document.body.style.overflow = "auto"; }); } @@ -22,6 +26,8 @@ if (modal) { window.addEventListener("click", (e) => { if (e.target === modal) { modal.classList.remove("show"); + // Restore background scrolling + document.body.style.overflow = "auto"; } }); -} +} \ No newline at end of file diff --git a/js/services.js b/js/services.js index b5bbaf3..9b3c60f 100644 --- a/js/services.js +++ b/js/services.js @@ -1,33 +1,16 @@ -// ===== Particles.js Hero Background (Dynamic for Dark Mode) ===== -// ===== Initialize Particles.js with Theme-Aware Colors ===== (Applied before) -// ===== Initialize Particles.js with Orange (Light) & Cyan (Dark) Themes ===== (Applied) +// =================================================== +// ===== 1. PARTICLES INITIALIZATION ===== +// =================================================== function initParticles() { const isDark = document.body.classList.contains("dark"); particlesJS("particles-js", { "particles": { - "number": { - "value": 70, - "density": { "enable": true, "value_area": 900 } - }, - // Theme-based particle colors + "number": { "value": 70, "density": { "enable": true, "value_area": 900 } }, "color": { "value": isDark ? "#00e5ff" : "#ff9800" }, "shape": { "type": "circle" }, - "opacity": { - "value": 0.6, - "random": true, - "anim": { - "enable": true, - "speed": 0.5, - "opacity_min": 0.1, - "sync": false - } - }, - "size": { - "value": 3, - "random": true - }, - // Theme-based connection lines + "opacity": { "value": 0.6, "random": true, "anim": { "enable": true, "speed": 0.5, "opacity_min": 0.1, "sync": false } }, + "size": { "value": 3, "random": true }, "line_linked": { "enable": true, "distance": 120, @@ -47,106 +30,200 @@ function initParticles() { "interactivity": { "detect_on": "canvas", "events": { - "onhover": { "enable": true, "mode": "repulse" }, - "onclick": { "enable": false } + "onhover": { "enable": true, "mode": "grab" }, + "onclick": { "enable": false }, + "resize": true }, "modes": { - "repulse": { "distance": 100, "duration": 0.4 } + "grab": { "distance": 200, "line_linked": { "opacity": 0.8 } } } }, "retina_detect": true }); } -// ===== Overlay Gradient Update (for Visual Harmony) ===== -function updateOverlayGradient() { - const overlay = document.querySelector(".gradient-overlay"); - if (!overlay) return; - - if (document.body.classList.contains("dark")) { - overlay.style.background = - "linear-gradient(45deg, rgba(0,150,255,0.25), rgba(0,0,0,0.3), rgba(0,200,255,0.25))"; - } else { - overlay.style.background = - "linear-gradient(45deg, rgba(255,140,0,0.25), rgba(255,255,255,0.15), rgba(255,215,64,0.25))"; +function reloadParticles() { + if (window.pJSDom && window.pJSDom.length > 0) { + window.pJSDom[0].pJS.fn.vendors.destroypJS(); + window.pJSDom = []; } + const container = document.getElementById("particles-js"); + if (container) container.innerHTML = ""; + initParticles(); } -// ===== localStorage theme handling ===== -if (localStorage.getItem("theme") === "dark") { - document.documentElement.classList.add("dark"); - document.body.classList.add("dark"); -} +// =================================================== +// ===== 2. CUSTOM PHYSICS (IDLE TIMER + EXPLOSION) == +// =================================================== +let mouseX = -9999; +let mouseY = -9999; +let isMousePresent = false; +let hasActuallyMoved = false; + +// THE FIX: Idle Timer variables +let isMouseActive = false; +let idleTimeout = null; +let initialX = null; +let initialY = null; + +document.addEventListener("mousemove", (e) => { + // 25-Pixel Deadzone Lock + if (!hasActuallyMoved) { + if (initialX === null && initialY === null) { + initialX = e.clientX; + initialY = e.clientY; + return; + } + const dx = e.clientX - initialX; + const dy = e.clientY - initialY; + if (Math.sqrt(dx * dx + dy * dy) < 25) return; + hasActuallyMoved = true; + } -// ===== Re-initialize on Dark Mode Toggle ===== -const darkModeToggle = document.getElementById("darkModeToggle"); + // Update coordinates + mouseX = e.clientX; + mouseY = e.clientY; + isMousePresent = true; -// ===== Initialize Dark Mode from Local Storage ===== -const savedTheme = localStorage.getItem("theme"); -if (savedTheme === "dark") { - document.body.classList.add("dark"); -} -updateOverlayGradient(); -updateToggleIcon(); + // Turn the magnet ON because the mouse is currently moving + isMouseActive = true; -// ===== Toggle Theme with Icon & Particles Reload ===== -if (darkModeToggle) { - darkModeToggle.addEventListener("click", () => { - const isDark = document.body.classList.toggle("dark"); - localStorage.setItem("theme", isDark ? "dark" : "light"); - updateOverlayGradient(); - updateToggleIcon(); + // Reset the Idle Timer every time the mouse moves + clearTimeout(idleTimeout); + idleTimeout = setTimeout(() => { + // If the mouse stops moving for 1 second, turn the magnet OFF + isMouseActive = false; + }, 1000); +}); - // Reinitialize particles with smooth reload - setTimeout(() => { - if (window.pJSDom && pJSDom.length) { - pJSDom[0].pJS.fn.vendors.destroypJS(); - document.getElementById("particles-js").innerHTML = ""; - } - initParticles(); - }, 300); +document.addEventListener("mouseleave", () => { + isMousePresent = false; + isMouseActive = false; // Turn off magnet if mouse leaves window +}); + +// Click to Explode (Now uses exact click coordinates) +document.addEventListener("click", (e) => { + if (!window.pJSDom || window.pJSDom.length === 0) return; + + const clickX = e.clientX; + const clickY = e.clientY; + const particles = window.pJSDom[0].pJS.particles.array; + + particles.forEach(p => { + const dx = p.x - clickX; + const dy = p.y - clickY; + const dist = Math.sqrt(dx * dx + dy * dy); + + if (dist < 400 && dist > 0) { + const force = (400 - dist) / 400; + p.vx += (dx / dist) * force * 35; + p.vy += (dy / dist) * force * 35; + } }); +}); + +// The Physics Engine Loop +function applyCustomPhysics() { + if (window.pJSDom && window.pJSDom.length > 0) { + const pJS = window.pJSDom[0].pJS; + const particles = pJS.particles.array; + + // Hide native library cursor tracking if idle or deadzone locked + if (!hasActuallyMoved || !isMouseActive) { + pJS.interactivity.mouse.pos_x = null; + pJS.interactivity.mouse.pos_y = null; + } else { + pJS.interactivity.mouse.pos_x = mouseX; + pJS.interactivity.mouse.pos_y = mouseY; + } + + particles.forEach(p => { + // Air Resistance (Slows them down after explosion) + if (Math.abs(p.vx) > 1.0 || Math.abs(p.vy) > 1.0) { + p.vx *= 0.88; + p.vy *= 0.88; + } + + // Magnetic Pull (ONLY runs if the mouse is actively moving) + if (isMouseActive && isMousePresent) { + const dx = mouseX - p.x; + const dy = mouseY - p.y; + const dist = Math.sqrt(dx * dx + dy * dy); + + if (dist < 250 && dist > 0) { + p.x += dx * 0.015; + p.y += dy * 0.015; + } + } + }); + } + requestAnimationFrame(applyCustomPhysics); +} + +applyCustomPhysics(); + +// =================================================== +// ===== 3. UI, THEME, AND ACCORDION LOGIC ===== +// =================================================== +function updateOverlayGradient() { + const overlay = document.querySelector(".gradient-overlay"); + if (!overlay) return; + if (document.body.classList.contains("dark")) { + overlay.style.background = "linear-gradient(45deg, rgba(0,150,255,0.25), rgba(0,0,0,0.3), rgba(0,200,255,0.25))"; + } else { + overlay.style.background = "linear-gradient(45deg, rgba(255,140,0,0.25), rgba(255,255,255,0.15), rgba(255,215,64,0.25))"; + } } -// ===== Update Toggle Icon Dynamically ===== function updateToggleIcon() { + const darkModeToggle = document.getElementById("darkModeToggle"); if (!darkModeToggle) return; - if (document.body.classList.contains("dark")) { - darkModeToggle.textContent = "β˜€οΈ"; // Light mode icon + darkModeToggle.textContent = "β˜€οΈ"; darkModeToggle.title = "Switch to light mode"; darkModeToggle.style.background = "#00bcd4"; darkModeToggle.style.color = "#000"; } else { - darkModeToggle.textContent = "πŸŒ™"; // Dark mode icon + darkModeToggle.textContent = "πŸŒ™"; darkModeToggle.title = "Switch to dark mode"; darkModeToggle.style.background = "#000000"; darkModeToggle.style.color = "#fff"; } } -// ===== Services Accordion Logic ===== +const darkModeToggle = document.getElementById("darkModeToggle"); +if (darkModeToggle) { + darkModeToggle.addEventListener("click", () => { + const isDark = document.body.classList.toggle("dark"); + localStorage.setItem("theme", isDark ? "dark" : "light"); + updateOverlayGradient(); + updateToggleIcon(); + reloadParticles(); + }); +} + +document.addEventListener("DOMContentLoaded", () => { + if (localStorage.getItem("theme") === "dark") { + document.body.classList.add("dark"); + document.documentElement.classList.add("dark"); + } + updateOverlayGradient(); + updateToggleIcon(); + initParticles(); +}); + document.addEventListener("DOMContentLoaded", function () { const accordionItems = document.querySelectorAll(".accordion-item"); - if (!accordionItems.length) return; accordionItems.forEach(item => { const header = item.querySelector(".accordion-header"); - if (!header) return; header.addEventListener("click", () => { const isActive = item.classList.contains("active"); - - // Close all accordionItems.forEach(i => i.classList.remove("active")); - - // Open clicked one if it was closed - if (!isActive) { - item.classList.add("active"); - } + if (!isActive) item.classList.add("active"); }); }); -}); - +}); \ No newline at end of file diff --git a/services/index.html b/services/index.html index f812874..fa01fa0 100644 --- a/services/index.html +++ b/services/index.html @@ -27,6 +27,37 @@ content="Backend development, microservices architecture, cloud deployment, and API engineering services."> + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + @@ -219,268 +224,322 @@ -
+
-

Our Professional Services

-

- We help startups and businesses build scalable, secure, and high-performance - software systems β€” from backend architecture to cloud-ready deployments. +

Our Professional Services + Handling Virtual Infrastructure + Software Architect +

+

+ We help startups and businesses build scalable, secure, and + high-performance + software systems β€” from backend architecture to cloud-ready deployments.

- View My Work β†’ +
+ Explore Services + View My Work +
-

Services We Offer

-

Explore our expertise to scale your projects efficiently:

+
+

Services We Offer

+

Explore our expertise to scale your projects efficiently.

+
-
-

- Design and development of scalable backend systems using Java, - Spring Boot, and Microservices. Ideal for APIs, SaaS platforms, - and enterprise-grade applications. -

+

Design and development of scalable backend systems using Java, Spring Boot, and Microservices. + Ideal for APIs, SaaS platforms, and enterprise-grade applications.

-

- Cloud-ready deployment, configuration, and scaling using AWS - and modern hosting platforms for reliability and performance. -

+

Cloud-ready deployment, configuration, and scaling using AWS and modern hosting platforms for + reliability and performance.

-

- Optimized relational and NoSQL database design, query tuning, - backups, and data integrity management. -

+

Optimized relational and NoSQL database design, query tuning, backups, and data integrity + management.

-

- System architecture planning, microservices strategy, - and technical guidance to reduce long-term technical debt. -

+

System architecture planning, microservices strategy, and technical guidance to reduce long-term + technical debt.

-

- Secure REST API development and third-party integrations - for web and mobile applications. -

+

Secure REST API development and third-party integrations for web and mobile applications.

-

- Performance tuning, security best practices, and maintainable - code standards for long-term system stability. -

+

Performance tuning, security best practices, and maintainable code standards for long-term system + stability.

-
-
-

Why Work With Me

-

- I focus on building software that is not only functional today, - but scalable, maintainable, and cost-effective in the long run. -

- -
    -
  • βœ” Clean, production-ready backend code
    • -
  • βœ” Scalable system & microservice architecture
    • -
  • βœ” Performance-optimized & secure applications
    • -
  • βœ” Clear communication & structured delivery
    • -
  • βœ” Long-term support and optimization
    • -
+
+
+

Why Work With Me

+

Building software that is scalable, maintainable, and cost-effective.

+
+ +
+
Clean, production-ready backend code
+
Scalable system & microservice architecture +
+
Performance-optimized & secure apps
+
Clear communication & structured delivery +
+
Long-term support and optimization
+
-

How These Services Help Your Business

- -
-

Backend Development

-

- Ideal for applications that require secure APIs, business logic, - and high traffic handling. I design backend systems that are - stable, scalable, and easy to extend. -

-

- -

Cloud Integration

-

- Suitable for growing products that need reliable deployment, - scalability, and cost-optimized infrastructure on cloud platforms. -

-

- -

Database Management

-

- Designed for data-driven applications that require fast queries, - reliable storage, and secure data handling. -

-

- -

API Development

-

- Enables seamless communication between web apps, mobile apps, - and third-party services using secure REST APIs. -

+

How These Services Help Your Business

+ +
+
+ +

Backend Development

+

Ideal for applications that require secure APIs, business logic, and high traffic handling. I design + systems that are stable and easy to extend.

+
+
+ +

Cloud Integration

+

Suitable for growing products that need reliable deployment, scalability, and cost-optimized + infrastructure on cloud platforms.

+
+
+ +

Database Management

+

Designed for data-driven applications that require fast queries, reliable storage, and secure data + handling.

+
+
+ +

API Development

+

Enables seamless communication between web apps, mobile apps, and third-party services using secure + REST APIs.

+
-
-

My Working Process

- -
    -
  1. Requirement Discussion – Understand business & technical goals
    2. -
  2. Architecture Planning – Design scalable system structure
    3. -
  3. Development – Clean, modular, and testable code
    4. -
  4. Testing & Deployment – Stability and performance validation
    5. -
  5. Support & Optimization – Continuous improvements
    6. -
+
+
+

My Working Process

+

A structured approach to bringing your vision to life.

+
+ +
+
+
1
+

Requirement Discussion

+

Understand business & technical goals

+
+
+
2
+

Architecture Planning

+

Design scalable system structure

+
+
+
3
+

Development

+

Clean, modular, and testable code

+
+
+
4
+

Testing & Deployment

+

Stability and performance validation

+
+
+
5
+

Support & Optimization

+

Continuous system improvements

+
+
-

Engagement Models

- -

- I offer flexible engagement options depending on your project needs: -

- -
    -
  • Project-Based – Fixed scope with clear deliverables
    • -
  • Hourly / Monthly Retainer – Ongoing development & support
    • -
  • Consulting – Architecture review, planning, and guidance
    • -
+
+

Engagement Models

+

Flexible engagement options depending on your project needs.

+
-

- Pricing depends on project complexity, timeline, and requirements. -

+
-
-

Live Websites

- -