diff --git a/aboutUs/index.html b/aboutUs/index.html index d39a872..1b3af43 100644 --- a/aboutUs/index.html +++ b/aboutUs/index.html @@ -81,7 +81,7 @@ "@id": "https://vimaltech.dev/#organization", "name": "Vimal Tech", "url": "https://vimaltech.dev", - "logo": "https://vimaltech.dev/images/logo-white.png", + "logo": "https://vimaltech.dev/images/logo-black.png", "founder": { "@type": "Person", "@id": "https://vimaltech.dev/#person", @@ -136,30 +136,9 @@ - + + +
@@ -205,7 +184,7 @@

-
+

What We Do

We bridge the gap between complex technical requirements and seamless user @@ -241,7 +220,7 @@

Digital Transformation

-
+

Why Partner With Us?

@@ -282,7 +261,7 @@

Local Roots, Global Standards

-
+

Our Mission

Our Mission

- - + + + - + + + \ No newline at end of file diff --git a/components/footer.html b/components/footer.html new file mode 100644 index 0000000..9f80d9b --- /dev/null +++ b/components/footer.html @@ -0,0 +1,186 @@ + + \ No newline at end of file diff --git a/components/header.html b/components/header.html new file mode 100644 index 0000000..852c7d6 --- /dev/null +++ b/components/header.html @@ -0,0 +1,88 @@ + + + + \ No newline at end of file diff --git a/components/load-footer.js b/components/load-footer.js new file mode 100644 index 0000000..f1ce13c --- /dev/null +++ b/components/load-footer.js @@ -0,0 +1,13 @@ +// load-footer.js +// Add the folder name to the fetch path +fetch('/components/footer.html') + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.text(); + }) + .then(data => { + document.getElementById('footer-placeholder').innerHTML = data; + }) + .catch(error => console.error('Error loading the footer:', error)); \ No newline at end of file diff --git a/components/load-header.js b/components/load-header.js new file mode 100644 index 0000000..b22487a --- /dev/null +++ b/components/load-header.js @@ -0,0 +1,246 @@ +/* ===== load-header.js ===== */ +fetch("/components/header.html") + .then((response) => { + if (!response.ok) throw new Error("Header not found"); + return response.text(); + }) + .then((data) => { + // 1. Inject Header HTML + document.getElementById("header-placeholder").innerHTML = data; + + // 2. Contextual Dropdown & Main Tab Active Color + const currentPath = window.location.pathname.toLowerCase(); + let cleanCurrent = currentPath + .replace(/\/index\.html$/, "") + .replace(/\/$/, ""); + + const navListItems = document.querySelectorAll(".nav-links > li"); + + navListItems.forEach((li) => { + const link = li.querySelector("a"); + if (!link) return; + + const href = link.getAttribute("href"); + if (!href || href.includes("#")) return; + + let cleanHref = href + .toLowerCase() + .replace(/\/index\.html$/, "") + .replace(/\/$/, ""); + let isCurrentPage = false; + + if (cleanHref === "") { + if ( + !cleanCurrent.includes("services") && + !cleanCurrent.includes("portfolio") && + !cleanCurrent.includes("expertise") && + !cleanCurrent.includes("aboutus") && + !cleanCurrent.includes("contactus") + ) { + isCurrentPage = true; + } + } else { + if (cleanCurrent.includes(cleanHref)) { + isCurrentPage = true; + } + } + + if (isCurrentPage) { + link.classList.add("active"); + } else { + link.classList.remove("active"); + + // Delete dropdowns for pages you are not currently on + if (li.classList.contains("dropdown")) { + li.classList.remove("dropdown"); + link.classList.remove("dropdown-toggle"); + const menu = li.querySelector(".dropdown-menu"); + if (menu) menu.remove(); + } + } + }); + + // 3. Re-query Elements + const hamburger = document.getElementById("hamburger"); + const navLinks = document.getElementById("nav-links"); + const dropdowns = document.querySelectorAll(".dropdown"); + + /* ========================================== + DROPDOWN MENU BEHAVIOR + ========================================== */ + dropdowns.forEach((dropdown) => { + const toggle = dropdown.querySelector(".dropdown-toggle"); + const menu = dropdown.querySelector(".dropdown-menu"); + + if (!toggle || !menu) return; + + // CLICK: Opens menu and stops navigation + toggle.addEventListener("click", (e) => { + e.preventDefault(); + e.stopPropagation(); + + dropdowns.forEach((d) => { + if (d !== dropdown) { + d.classList.remove("open"); + const m = d.querySelector(".dropdown-menu"); + if (m) m.style.display = "none"; + } + }); + + const isOpen = dropdown.classList.toggle("open"); + menu.style.display = isOpen ? "block" : "none"; + }); + + // DESKTOP HOVER + dropdown.addEventListener("mouseenter", () => { + if (window.innerWidth > 768) { + menu.style.display = "block"; + setTimeout(() => { + menu.style.opacity = "1"; + menu.style.visibility = "visible"; + menu.style.transform = "translateY(0)"; + }, 10); + } + }); + + dropdown.addEventListener("mouseleave", () => { + if (window.innerWidth > 768) { + menu.style.opacity = "0"; + menu.style.visibility = "hidden"; + menu.style.transform = "translateY(10px)"; + setTimeout(() => { + if (menu.style.opacity === "0") { + menu.style.display = "none"; + } + }, 300); + } + }); + }); + + document.addEventListener("click", (e) => { + if (!e.target.closest(".dropdown")) { + dropdowns.forEach((d) => { + d.classList.remove("open"); + const menu = d.querySelector(".dropdown-menu"); + if (menu) menu.style.display = "none"; + }); + } + }); + + /* ========================================== + HAMBURGER MENU (MOBILE FIXES APPLIED) + ========================================== */ + if (hamburger && navLinks) { + // 1. Toggle menu on click + hamburger.addEventListener("click", () => { + navLinks.classList.toggle("active"); + hamburger.classList.toggle("active"); + navLinks.classList.toggle("open"); + hamburger.textContent = navLinks.classList.contains("active") + ? "✕" + : "☰"; + }); + + // 2. NEW FIX: Close menu when clicking outside + document.addEventListener("click", (e) => { + const isClickInsideNav = navLinks.contains(e.target); + const isClickOnHamburger = hamburger.contains(e.target); + + if ( + navLinks.classList.contains("active") && + !isClickInsideNav && + !isClickOnHamburger + ) { + navLinks.classList.remove("active"); + navLinks.classList.remove("open"); + hamburger.classList.remove("active"); + hamburger.textContent = "☰"; + } + }); + + // 3. NEW FIX: Close menu when any anchor link (like a #link) is clicked + const allNavAnchors = document.querySelectorAll(".nav-links a"); + allNavAnchors.forEach((link) => { + link.addEventListener("click", (e) => { + // If they clicked the dropdown toggle on mobile, ignore it so the submenu can open + if ( + e.target.classList.contains("dropdown-toggle") && + window.innerWidth <= 768 + ) { + return; + } + + // Otherwise, close the main menu + if (navLinks.classList.contains("active")) { + navLinks.classList.remove("active"); + navLinks.classList.remove("open"); + hamburger.classList.remove("active"); + hamburger.textContent = "☰"; + } + }); + }); + } + + /* ========================================== + SCROLL SPY & DROPDOWN ACTIVE LINKS + ========================================== */ + const sections = document.querySelectorAll("section[id]"); + const dropdownLinks = document.querySelectorAll(".dropdown-menu a"); + + // A. INSTANT CLICK + dropdownLinks.forEach((link) => { + link.addEventListener("click", function () { + dropdownLinks.forEach((l) => l.classList.remove("active")); + this.classList.add("active"); + }); + }); + + // B. SCROLL SPY + if (sections.length > 0) { + window.addEventListener("scroll", () => { + let current = ""; + sections.forEach((section) => { + const sectionTop = section.offsetTop - 150; + const sectionHeight = section.clientHeight; + if ( + window.pageYOffset >= sectionTop && + window.pageYOffset < sectionTop + sectionHeight + ) { + current = section.getAttribute("id"); + } + }); + + dropdownLinks.forEach((link) => { + const href = link.getAttribute("href"); + if (href && href.includes("#")) { + link.classList.remove("active"); + if (current && href.endsWith(`#${current}`)) { + link.classList.add("active"); + } + } + }); + }); + + const navObserver = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const id = entry.target.getAttribute("id"); + dropdownLinks.forEach((link) => { + link.classList.remove("active"); + if (link.getAttribute("href").endsWith(`#${id}`)) { + link.classList.add("active"); + } + }); + } + }); + }, + { threshold: 0.6 } + ); + + sections.forEach((section) => { + navObserver.observe(section); + }); + } + }) + .catch((error) => console.error("Error loading header:", error)); diff --git a/contactUs/index.html b/contactUs/index.html index 4d8d44a..a791cb5 100644 --- a/contactUs/index.html +++ b/contactUs/index.html @@ -122,30 +122,9 @@ - + + +
@@ -219,7 +198,7 @@

Vimal Tech

-
+

Official Registration

@@ -243,7 +222,7 @@

Official Registration

-
+

Start a Conversation

@@ -308,7 +287,7 @@

Start a Conve

-
+
Virtual Office · Valsad, Gujarat - India
@@ -326,194 +305,9 @@

Start a Conve

- - + + + - + + + \ No newline at end of file diff --git a/css/infinite-carousel.css b/css/infinite-carousel.css new file mode 100644 index 0000000..a0f9393 --- /dev/null +++ b/css/infinite-carousel.css @@ -0,0 +1,288 @@ +/* =================================================== + VIMALTECH LIVE WEBSITE SHOWCASE +=================================================== */ +/* WEBSITE SECTION */ +.vt-websites-section { + width: 100%; + overflow: hidden; + padding: 4rem 0; + margin-top: 20px; + background: + rgba(255, 255, 255, 0.15); +} + +/* =================================================== + CAROUSEL +=================================================== */ +.vt-carousel { + width: 100%; + overflow: hidden; + position: relative; + margin: 30px 0; +} + +/* =================================================== + TRACK +=================================================== */ +.vt-carousel-track { + display: flex; + width: max-content; + flex-wrap: nowrap; + will-change: transform; +} + +/* GROUP 1 + RIGHT → LEFT */ +.vt-scroll-left { + animation: + vt-scroll-left 35s linear infinite; +} + +/* GROUP 2 + LEFT → RIGHT */ +.vt-scroll-right { + animation: + vt-scroll-right 35s linear infinite; +} + +/* =================================================== + WEBSITE GROUP +=================================================== */ +.vt-carousel-group { + display: flex; + flex-shrink: 0; + gap: 25px; + padding-right: 25px; +} + +/* =================================================== + WEBSITE CARD +=================================================== */ +.vt-carousel-card { + display: block; + width: 300px; + min-width: 300px; + overflow: hidden; + border-radius: 20px; + text-decoration: none; + background: + rgba(255, 255, 255, 0.9); + border: + 1px solid rgba(255, 255, 255, 0.8); + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.12); + transition: + transform 0.3s ease, + box-shadow 0.3s ease; + cursor: pointer; +} + +/* =================================================== + WEBSITE INFORMATION +=================================================== */ +.vt-carousel-info { + padding: + 18px 18px 15px; + text-align: left; +} + +/* TITLE */ +.vt-carousel-info h3 { + margin: 0 0 8px; + color: #1e293b; + font-size: 1.2rem; + font-family: + "Montserrat", + sans-serif; +} + +/* WEBSITE URL */ +/* .vt-website-url { + display: block; + color: + var(--color-primary); + font-size: 0.75rem; + font-family: + var(--font-primary); + font-weight: 600; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} */ + +/* =================================================== + IMAGE CONTAINER +=================================================== */ +.vt-carousel-image { + width: 100%; + height: 350px; + overflow: hidden; + background: #e5e7eb; + border-top: + 1px solid rgba(0, 0, 0, 0.05); +} + +/* WEBSITE IMAGE */ +.vt-carousel-image img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + object-position: + top center; + transition: + transform 0.5s ease; +} + + +/* =================================================== + HOVER EFFECT +=================================================== */ +.vt-carousel-card:hover { + transform: + translateY(-8px); + box-shadow: + 0 20px 45px rgba(0, 0, 0, 0.2); +} + +.vt-carousel-card:hover img { + transform: + scale(1.04); +} + +/* =================================================== + GROUP 1 + RIGHT → LEFT +=================================================== */ +@keyframes vt-scroll-left { + from { + transform: + translateX(0); + } + + to { + transform: + translateX(-50%); + } +} + +/* =================================================== + GROUP 2 + LEFT → RIGHT +=================================================== */ +@keyframes vt-scroll-right { + from { + transform: + translateX(-50%); + } + + to { + transform: + translateX(0); + } +} + +/* =================================================== + PAUSE ON HOVER +=================================================== */ +.vt-carousel:hover .vt-carousel-track { + animation-play-state: + paused; +} + +/* =================================================== + DARK MODE +=================================================== */ +body.dark .vt-websites-section { + background: + rgba(15, 23, 42, 0.4); +} + +body.dark .vt-carousel-card { + background: + #1e293b; + border-color: + rgba(255, 255, 255, 0.08); +} + +body.dark .vt-carousel-info h3 { + color: #ffffff; +} + +body.dark .vt-website-url { + color: + #38bdf8; +} + +/* =================================================== + TABLET +=================================================== */ +@media (max-width: 768px) { + .vt-websites-section { + padding: + 3rem 0; + } + + .vt-carousel { + margin: + 20px 0; + } + + .vt-carousel-card { + width: 260px; + min-width: 260px; + } + + .vt-carousel-image { + height: 430px; + } + + .vt-carousel-group { + gap: 15px; + padding-right: 15px; + } + + .vt-scroll-left, + .vt-scroll-right { + animation-duration: + 28s; + } +} + +/* =================================================== + MOBILE +=================================================== */ +@media (max-width: 480px) { + .vt-carousel-card { + width: 230px; + min-width: 230px; + } + + .vt-carousel-image { + height: 250px; + } + + .vt-carousel-info { + padding: 15px; + } + + .vt-carousel-info h3 { + font-size: 1rem; + } + + .vt-website-url { + font-size: 0.7rem; + } +} + +/* =================================================== + REDUCED MOTION +=================================================== */ +@media (prefers-reduced-motion: reduce) { + + .vt-scroll-left, + .vt-scroll-right { + animation: + none; + } +} \ No newline at end of file diff --git a/css/latest-works.css b/css/latest-works.css index 7159818..3d534d7 100644 --- a/css/latest-works.css +++ b/css/latest-works.css @@ -109,7 +109,7 @@ body.dark .project-card a:hover { /* STATIC GLOSS + SHIMMER OVERLAY */ .card-thumbnail { - height: 180px; + /* height: 180px; */ /* was 240px – shorter = more text fits */ overflow: hidden; position: relative; @@ -133,9 +133,9 @@ body.dark .project-card a:hover { content: ''; position: absolute; inset: 0; - background: linear-gradient(to bottom, + /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), - rgba(0, 0, 0, 0.5)); + rgba(0, 0, 0, 0.2)); */ pointer-events: none; } @@ -157,10 +157,9 @@ body.dark .project-card a:hover { left: -200%; width: 200%; height: 100%; - background: linear-gradient(90deg, - transparent 30%, - rgba(255, 255, 255, 0.4) 50%, - transparent 70%); + background: linear-gradient(to bottom, + rgba(0, 0, 0, 0.2), + rgba(0, 0, 0, 0.5)); opacity: 0.5; animation: shimmer 4.5s infinite; z-index: 2; @@ -192,39 +191,6 @@ body.dark .project-card a:hover { transform: scale(1.15); } -.card-content { - padding: 1.8rem; -} - -.card-content h3 { - margin: 0 0 0.5rem 0; - color: #5c85ad; - font-size: 1.35rem; - font-weight: 600; -} - -.card-content p { - line-height: 1.6; - margin-bottom: 1rem; - font-size: 0.95rem; - color: #64748b; -} - -.tech-stack { - gap: 0.5rem; - margin-bottom: 1rem; -} - -.tech-badge { - background: rgba(102, 126, 234, 0.15); - color: #4f46e5; - padding: 0.35rem 0.75rem; - border-radius: 999px; - font-size: 0.75rem; - font-weight: 500; - border: 1px solid rgba(102, 126, 234, 0.2); -} - .card-links { display: flex; gap: 0.75rem; diff --git a/css/portfolio.css b/css/portfolio.css index 71c035b..0bc746d 100644 --- a/css/portfolio.css +++ b/css/portfolio.css @@ -1,3 +1,33 @@ +/* ===== UTILITIES & SECTIONS ===== */ +.section-header { + text-align: center; + margin-bottom: 3rem; +} + +.section-subtitle { + font-size: 1.2rem; + color: var(--color-muted); + max-width: 700px; + margin: 0 auto; + line-height: 1.6; +} + +/* .alt-bg { + background: rgba(255, 255, 255, 0.4); + border-radius: 20px; + margin-bottom: 2rem; + padding: 4rem 2rem; +} */ + +/* body.dark .alt-bg { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.05); +} */ + +.text-center { + text-align: center; +} + /* ========================================================================== Portfolio / Case Studies Styles ========================================================================== */ diff --git a/expertise/index.html b/expertise/index.html index 7af4344..e76d63b 100644 --- a/expertise/index.html +++ b/expertise/index.html @@ -137,39 +137,8 @@ - + +
@@ -440,194 +409,9 @@

Explore My Professional Details

- - + + + - + + + \ No newline at end of file diff --git a/images/alex-food-corner.png b/images/alex-food-corner.png deleted file mode 100644 index 20eaf66..0000000 Binary files a/images/alex-food-corner.png and /dev/null differ diff --git a/images/chai-makers.png b/images/chai-makers.png deleted file mode 100644 index c2cce53..0000000 Binary files a/images/chai-makers.png and /dev/null differ diff --git a/images/desktop-view/crimson-cobalt-tailors-demo.png b/images/desktop-view/crimson-cobalt-tailors-demo.png new file mode 100644 index 0000000..3f6adf9 Binary files /dev/null and b/images/desktop-view/crimson-cobalt-tailors-demo.png differ diff --git a/images/desktop-view/hotel-inn-demo.png b/images/desktop-view/hotel-inn-demo.png new file mode 100644 index 0000000..40d4510 Binary files /dev/null and b/images/desktop-view/hotel-inn-demo.png differ diff --git a/images/desktop-view/nutrition-demo.png b/images/desktop-view/nutrition-demo.png new file mode 100644 index 0000000..2b1f8c0 Binary files /dev/null and b/images/desktop-view/nutrition-demo.png differ diff --git a/images/desktop-view/sports-club-demo.png b/images/desktop-view/sports-club-demo.png new file mode 100644 index 0000000..d04f2c3 Binary files /dev/null and b/images/desktop-view/sports-club-demo.png differ diff --git a/images/desktop-view/swarnim-jewellers-demo.png b/images/desktop-view/swarnim-jewellers-demo.png new file mode 100644 index 0000000..1adebd8 Binary files /dev/null and b/images/desktop-view/swarnim-jewellers-demo.png differ diff --git a/images/foodaholic-mobile.png b/images/foodaholic-mobile.png deleted file mode 100644 index 59c6bb5..0000000 Binary files a/images/foodaholic-mobile.png and /dev/null differ diff --git a/images/foodaholic-preview.png b/images/foodaholic-preview.png deleted file mode 100644 index 548b12c..0000000 Binary files a/images/foodaholic-preview.png and /dev/null differ diff --git a/images/golden-planet-mobile.png b/images/golden-planet-mobile.png deleted file mode 100644 index a1add08..0000000 Binary files a/images/golden-planet-mobile.png and /dev/null differ diff --git a/images/golden-planet-preview.png b/images/golden-planet-preview.png deleted file mode 100644 index 019af97..0000000 Binary files a/images/golden-planet-preview.png and /dev/null differ diff --git a/images/hotel-best-inn-mobile.png b/images/hotel-best-inn-mobile.png deleted file mode 100644 index ada80e5..0000000 Binary files a/images/hotel-best-inn-mobile.png and /dev/null differ diff --git a/images/hotel-best-inn-preview.png b/images/hotel-best-inn-preview.png deleted file mode 100644 index 31331ea..0000000 Binary files a/images/hotel-best-inn-preview.png and /dev/null differ diff --git a/images/jay-ambe-mobile.png b/images/jay-ambe-mobile.png deleted file mode 100644 index 4c316ef..0000000 Binary files a/images/jay-ambe-mobile.png and /dev/null differ diff --git a/images/jay-ambe-preview.png b/images/jay-ambe-preview.png deleted file mode 100644 index 22a0694..0000000 Binary files a/images/jay-ambe-preview.png and /dev/null differ diff --git a/images/mobile-view/clinic-demo.png b/images/mobile-view/clinic-demo.png new file mode 100644 index 0000000..ef8b5a1 Binary files /dev/null and b/images/mobile-view/clinic-demo.png differ diff --git a/images/mobile-view/crimson-cobalt-tailors-demo.png b/images/mobile-view/crimson-cobalt-tailors-demo.png new file mode 100644 index 0000000..1555248 Binary files /dev/null and b/images/mobile-view/crimson-cobalt-tailors-demo.png differ diff --git a/images/mobile-view/fitness-freak-demo.png b/images/mobile-view/fitness-freak-demo.png new file mode 100644 index 0000000..422c295 Binary files /dev/null and b/images/mobile-view/fitness-freak-demo.png differ diff --git a/images/mobile-view/foodaholic-bistro-demo.png b/images/mobile-view/foodaholic-bistro-demo.png new file mode 100644 index 0000000..32dec2c Binary files /dev/null and b/images/mobile-view/foodaholic-bistro-demo.png differ diff --git a/images/mobile-view/hotel-inn-demo.png b/images/mobile-view/hotel-inn-demo.png new file mode 100644 index 0000000..ad7cd73 Binary files /dev/null and b/images/mobile-view/hotel-inn-demo.png differ diff --git a/images/mobile-view/nutrition-demo.png b/images/mobile-view/nutrition-demo.png new file mode 100644 index 0000000..907ae21 Binary files /dev/null and b/images/mobile-view/nutrition-demo.png differ diff --git a/images/mobile-view/sports-club-demo.png b/images/mobile-view/sports-club-demo.png new file mode 100644 index 0000000..725c7ee Binary files /dev/null and b/images/mobile-view/sports-club-demo.png differ diff --git a/images/mobile-view/swarnim-jewellers-demo.png b/images/mobile-view/swarnim-jewellers-demo.png new file mode 100644 index 0000000..6942a17 Binary files /dev/null and b/images/mobile-view/swarnim-jewellers-demo.png differ diff --git a/images/red-n-blue-mobile.png b/images/red-n-blue-mobile.png deleted file mode 100644 index 98faf7c..0000000 Binary files a/images/red-n-blue-mobile.png and /dev/null differ diff --git a/images/red-n-blue-preview.png b/images/red-n-blue-preview.png deleted file mode 100644 index 3ddc962..0000000 Binary files a/images/red-n-blue-preview.png and /dev/null differ diff --git a/images/suman-enterprise.png b/images/suman-enterprise.png deleted file mode 100644 index 53cb2ec..0000000 Binary files a/images/suman-enterprise.png and /dev/null differ diff --git a/index.html b/index.html index 519e706..d11e19f 100644 --- a/index.html +++ b/index.html @@ -1,672 +1,882 @@ - + - - - - - - - - - - - Vimal Tech | Java Backend Developer | Spring Boot & Microservices - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-

- Building Scalable - Backend Systems -

-

- I'm Vimal Patel provides Software as a Service - (SaaS) as a Java Backend Developer specializing in - Spring Boot, - Docker and - Microservices. -

-
- Live Works - Let's Connect + + + + + + + + + + + Vimal Tech | Java Backend Developer | Spring Boot & Microservices + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+

+ Building Scalable + Backend Systems +

+

+ I'm + Vimal Patel + provides Software as a Service + (SaaS) as a + Java Backend Developer specializing in + Spring Boot, + Docker and + Microservices. +

+
-
-
- - -
-
-
-

- Competency & Proficiency -

-

- I have deep exposure to Java Technologies with hands-on experience building robust backend systems, REST APIs, - and enterprise applications. - Highly skilled in Java, Spring Boot, Hibernate, Java Persistence API, Spring Framework, SQL, - NoSQL, and Cloud Technologies. - Passionate about writing clean, maintainable, and efficient code. -

-
-
- - -
-
-

Professional | Services | Preview

-

Explore solutions tailored to build and scale your projects efficiently.

-
-
-
-
-

Backend Development

-

Scalable backend apps using Java, Spring Boot, and Microservices.

+
+ + +
+
+
+

Competency & Proficiency

+

+ I have deep exposure to Java Technologies with hands-on experience + building robust backend systems, REST APIs, and enterprise + applications. Highly skilled in + Java, Spring Boot, Hibernate, Java Persistence API, Spring + Framework, SQL, NoSQL, and Cloud Technologies. Passionate about writing + clean, maintainable, and efficient code. +

-
-
-

Database Management

-

Relational and NoSQL management (Oracle, MySQL, PostgreSQL, MongoDB, Cassandra).

+
+ + +
+
+

Professional | Services | Preview

+

+ Explore solutions tailored to build and scale your projects + efficiently. +

-
-
-

Cloud Integration

-

Deploy and manage applications efficiently on AWS infrastructure.

+
+
+
+

Backend Development

+

+ Scalable backend apps using Java, Spring Boot, and Microservices. +

+
+
+
+

Database Management

+

+ Relational and NoSQL management (Oracle, MySQL, PostgreSQL, MongoDB, + Cassandra). +

+
+
+
+

Cloud Integration

+

+ Deploy and manage applications efficiently on AWS infrastructure. +

+
+
+
+

Project Consulting

+

+ Architecture guidance and microservices design for enterprise + projects. +

+
+
+ + -
-
-

Project Consulting

-

Architecture guidance and microservices design for enterprise projects.

+
+ + +
+
+

Live Works

+

A selection of live frontend interfaces click to view

- - - -
- - -
-
-

Live Works

-

A selection of live frontend interfaces

-
-
- - - - -
-
- -
-
- -
-
- Alex Food Corner Website UI +
+ + + + +
+
+ +
+
+ +
+
+ Clinic Demo Website UI +
-
-

Alex Food Corner

- Responsive • Clean UI • Fast + +
+

🏥 Smarter Healthcare

- Modern and responsive restaurant website with interactive menu display, - clean UI, and seamless user experience built using React and Tailwind CSS. + ClinoraCare was founded with a singular mission: to eliminate + the friction between modern medical technology and + compassionate, human-centered patient care.

-
- React - Tailwind CSS - Vite -
- -
-

🍽️ Restaurant Website UI

-

- Fully responsive frontend project featuring dynamic menu filtering, - WhatsApp ordering integration, Google Maps embed, and a smooth, - user-focused interface built with modern frontend tools. -

- -
-
- -
-
- -
-
- Suman Enterprise Dashboard + +
+
+ +
+
+ Foodaholic Bistro Demo UI +
-
-

Suman Enterprise

- Responsive • Clean UI • Fast + +
+

🍽 FOOD THAT HITS DIFFERENT.

- Modern enterprise product lists interface featuring organized data layouts, - smooth navigation, and responsive UI built with Vue.js and Vuetify. + Foodaholic Bistro was born from an obsession with bold, + unapologetic late-night eating. We believe fast dining shouldn’t + taste generic, look sterile, or cut corners on premium + ingredients.

-
- Vue.js - Vue-Router - Vuetify -
- -
-

📊 Product Lists UI

-

- Frontend project showcasing product lists structured UI data presentation, - component-based architecture, and responsive design using Vue.js, - Vue Router, and Vuetify. -

- -
-
- -
-
-
-
- Chai Makers App + +
+
+
+
+ Fitness Freak App +
-
-

Chai Makers

- Responsive • Clean UI • Fast + +
+

🏋️ THE PERFORMANCE PLATFORM

- Frontend chai ordering interface featuring dynamic menu rendering, reusable components, - and smooth user interaction built with Angular. + YOUR TRANSFORMATION. The unified operating system for + high-performance training, dynamic nutrition logging, client + analytics, and local browser persistence.

-
- Angular - Components - Services -
- -
-

☕ Chai Café App

-

- Angular-based web app showcasing menu interaction, component-driven structure, - and service-based data handling for a smooth user experience. -

- -
-
- -
- - -
- -
-

LATEST BLOG POSTS

-

Explore the latest insights, ideas, and technical articles from Vimal Tech.

-
- -
- - -
-
-
- TECHNICAL JOURNEYS -

Technical Journeys

+ +
+ + +
+
+

Live Website Showcase

+ +

+ Explore live website projects and interactive demos. +

+
+ + - -
+ + +
+
+

LATEST BLOG POSTS

+

+ Explore the latest insights, ideas, and technical articles from Vimal Tech. +

+
-
-
Loading latest posts...
-
- +
+ +
+
+
+ TECHNICAL JOURNEYS +

Technical Journeys

+
+ + View All + +
- -
-
-
- DATA STRUCTURES & ALGORITHMS -

Data Structures & Algorithms

+
+
Loading latest posts...
+
+ + +
-
-
Loading latest posts...
-
- - - - -
- - -
-
-

- Thanks for visiting 👋 -

-

- Ready to turn your idea into reality? -

-

- Helping businesses thrive in the Digital Era. Whether it's a - local business website - or a complex enterprise backend system, - I am ready to code your vision. -

- - Let's Build Together - -
-
- - -
+ + +
+
+

Thanks for visiting 👋

+

+ Ready to turn your idea into reality? +

+

+ Helping businesses thrive in the Digital Era. Whether it's a + local business website + or a complex enterprise backend system, I am ready to + code your vision. +

+ + Let's Build Together + +
- - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/dropdown.js b/js/dropdown.js deleted file mode 100644 index 3f3c2f4..0000000 --- a/js/dropdown.js +++ /dev/null @@ -1,119 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - const hamburger = document.getElementById("hamburger"); - const navLinks = document.getElementById("nav-links"); - const dropdowns = document.querySelectorAll(".dropdown"); - - if (!dropdowns.length) return; - - // ========================================== - // 1. DESKTOP HOVER OVERRIDE (The Sledgehammer) - // ========================================== - dropdowns.forEach((dropdown) => { - const menu = dropdown.querySelector(".dropdown-menu"); - if (!menu) return; - - // Force SHOW menu when mouse enters - dropdown.addEventListener("mouseenter", () => { - if (window.innerWidth > 768) { - menu.style.setProperty("opacity", "1", "important"); - menu.style.setProperty("visibility", "visible", "important"); - menu.style.setProperty("pointer-events", "auto", "important"); - menu.style.setProperty("transform", "translateY(0)", "important"); - menu.style.setProperty("display", "block", "important"); - } - }); - - // Force HIDE menu when mouse leaves - dropdown.addEventListener("mouseleave", () => { - if (window.innerWidth > 768) { - menu.style.setProperty("opacity", "0", "important"); - menu.style.setProperty("visibility", "hidden", "important"); - menu.style.setProperty("pointer-events", "none", "important"); - menu.style.setProperty("transform", "translateY(10px)", "important"); - - // Short timeout to remove display:block so transitions can play - setTimeout(() => { - if (menu.style.opacity === "0") { - menu.style.setProperty("display", "none", "important"); - } - }, 300); - } - }); - }); - - // ========================================== - // 2. MOBILE DROPDOWN & HAMBURGER CONNECTION - // ========================================== - dropdowns.forEach((dropdown) => { - let toggle = dropdown.querySelector(".dropdown-toggle"); - const menu = dropdown.querySelector(".dropdown-menu"); - - if (!toggle || !menu) return; - - // CRITICAL FIX: Clone the node to strip away the conflicting click - // event listener coming from global.js, saving us from duplicate triggers! - toggle.replaceWith(toggle.cloneNode(true)); - toggle = dropdown.querySelector(".dropdown-toggle"); // Re-select the new clone - - // Handle Mobile Clicks - toggle.addEventListener("click", (e) => { - if (window.innerWidth > 768) return; // Desktop uses hover, ignore clicks - - e.preventDefault(); - e.stopPropagation(); - - // Close other dropdowns - dropdowns.forEach((d) => { - if (d !== dropdown) { - d.classList.remove("open"); - const m = d.querySelector(".dropdown-menu"); - if (m) m.style.display = "none"; - } - }); - - // Toggle the clicked dropdown - const isOpen = dropdown.classList.toggle("open"); - menu.style.display = isOpen ? "block" : "none"; - }); - }); - - // Click outside to close (Mobile) - document.addEventListener("click", (e) => { - if (window.innerWidth <= 768 && !e.target.closest(".dropdown")) { - dropdowns.forEach((d) => { - d.classList.remove("open"); - const menu = d.querySelector(".dropdown-menu"); - if (menu) menu.style.display = "none"; - }); - } - }); - - // Hamburger reset connection - if (hamburger && navLinks) { - hamburger.addEventListener("click", () => { - setTimeout(() => { - // global.js toggles the "active" class. If it's closed, reset dropdowns. - if (!navLinks.classList.contains("active")) { - dropdowns.forEach((d) => { - d.classList.remove("open"); - const menu = d.querySelector(".dropdown-menu"); - if (menu) menu.style.display = "none"; - }); - } - }, 10); - }); - } - - // Cleanup on resize (Preventing mobile logic from sticking on desktop screens) - window.addEventListener("resize", () => { - if (window.innerWidth > 768) { - dropdowns.forEach((d) => { - d.classList.remove("open"); - const menu = d.querySelector(".dropdown-menu"); - if (menu) { - menu.style.display = ""; // Reset inline styles so CSS handles it - } - }); - } - }); -}); diff --git a/js/global.js b/js/global.js index 4037c93..bacb71c 100644 --- a/js/global.js +++ b/js/global.js @@ -1,45 +1,5 @@ -/* ===== common.js ===== */ +/* ===== global.js ===== */ document.addEventListener("DOMContentLoaded", () => { - /* ============================ - Hamburger Menu (☰ / ✖) - ============================ */ - const hamburger = document.getElementById("hamburger"); - const navLinks = document.getElementById("nav-links"); - const navItems = document.querySelectorAll("nav ul li a"); - - if (hamburger && navLinks) { - hamburger.addEventListener("click", () => { - navLinks.classList.toggle("active"); - // This toggles the 'active' class on the hamburger for the rotation - hamburger.classList.toggle("active"); - // This opens your actual menu - navLinks.classList.toggle("open"); - hamburger.textContent = navLinks.classList.contains("active") ? "✕" : "☰"; - }); - - // Close the menu when any nav link is clicked - navItems.forEach((link) => { - link.addEventListener("click", () => { - if (navLinks.classList.contains("active")) { - navLinks.classList.remove("active"); - hamburger.classList.remove("active"); - hamburger.textContent = "☰"; - } - }); - }); - - /* ✅ NEW: Close the menu when clicking outside */ - document.addEventListener("click", (event) => { - const isClickInside = - navLinks.contains(event.target) || hamburger.contains(event.target); - if (!isClickInside && navLinks.classList.contains("active")) { - navLinks.classList.remove("active"); - hamburger.classList.remove("active"); - hamburger.textContent = "☰"; - } - }); - } - /* ============================ Scroll-to-Top Button ============================ */ @@ -52,16 +12,16 @@ document.addEventListener("DOMContentLoaded", () => { } else { scrollTopBtn.classList.remove("show"); } - }); + }); // scrollTopBtn.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" }); - }); + }); // } - // ============================ - // Fade-In Animation on Scroll with Perfect Cascade & Staggered Delay - // ============================ + /* ============================ + Fade-In Animation on Scroll with Perfect Cascade & Staggered Delay + ============================ */ const faders = document.querySelectorAll(".fade-in"); if (faders.length) { @@ -80,7 +40,7 @@ document.addEventListener("DOMContentLoaded", () => { // Set animation delay dynamically for cascading effect entry.target.style.animationDelay = `${i * 150}ms`; entry.target.classList.add("visible"); - + observer.unobserve(entry.target); // stop observing once visible }); }, appearOptions); @@ -88,135 +48,4 @@ document.addEventListener("DOMContentLoaded", () => { // Observe each .fade-in element faders.forEach((fader) => appearOnScroll.observe(fader)); } - - /* ============================ - ScrollSpy: Highlight Active Nav Link - ============================ */ - const sections = document.querySelectorAll("section"); - - if (sections.length && navItems.length) { - window.addEventListener("scroll", () => { - let current = ""; - - sections.forEach((section) => { - const sectionTop = section.offsetTop - 100; - const sectionHeight = section.clientHeight; - if ( - pageYOffset >= sectionTop && - pageYOffset < sectionTop + sectionHeight - ) { - current = section.getAttribute("id"); - } - }); - - navItems.forEach((link) => { - const href = link.getAttribute("href"); - - // Only apply scroll spy to section links (#) - if (href.startsWith("#")) { - link.classList.remove("active"); - - if (href === `#${current}`) { - link.classList.add("active"); - } - } - }); - }); - } - - // Dropdown toggle for Desktop - const dropdownToggles = document.querySelectorAll(".dropdown-toggle"); - - dropdownToggles.forEach((toggle) => { - toggle.addEventListener("click", (e) => { - e.preventDefault(); - const parent = toggle.parentElement; - parent.classList.toggle("open"); - - const menu = parent.querySelector(".dropdown-menu"); - if (menu) { - menu.style.display = menu.style.display === "block" ? "none" : "block"; - } - }); - }); - - // Ensure all dropdowns are closed on page load (prevents an open menu after refresh) - function resetDropdowns() { - const dropdowns = document.querySelectorAll(".dropdown"); - dropdowns.forEach((drop) => { - drop.classList.remove("open"); - const menu = drop.querySelector(".dropdown-menu"); - if (menu) menu.style.display = "none"; - }); - } - - // Close dropdown when clicking outside - document.addEventListener("click", (e) => { - const isDropdownToggle = e.target.matches(".dropdown-toggle"); - const dropdown = e.target.closest(".dropdown"); - - document.querySelectorAll(".dropdown").forEach((drop) => { - const menu = drop.querySelector(".dropdown-menu"); - - // If clicked outside this dropdown, close it - if (drop !== dropdown && menu) { - drop.classList.remove("open"); - menu.style.display = "none"; - } - }); - }); - - /* ============================ - Active Navbar Link per Page - ============================ */ - const currentPage = window.location.pathname.split("/").pop(); - - navItems.forEach((link) => { - const linkPage = link.getAttribute("href"); - - if (linkPage === currentPage) { - link.classList.add("active"); - } - - // Special case: homepage - if ( - (currentPage === "" || currentPage === "/") && - linkPage === "index.html" - ) { - link.classList.add("active"); - } - }); - - // targeting your anchor tags with href starting - // 1. Grab all the sections you want to track - const sectionDM = document.querySelectorAll("section[id]"); - - // 2. The function that handles the class switching - const navObserver = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - // Get the ID of the section currently in view - const id = entry.target.getAttribute("id"); - - // Remove 'active' class from ALL links - document.querySelectorAll(".dropdown-menu a").forEach((link) => { - link.classList.remove("active"); - }); - - // Add 'active' class to the link that matches the current section ID - const activeLink = document.querySelector(`a[href="#${id}"]`); - if (activeLink) { - activeLink.classList.add("active"); - } - } - }); - }, - { threshold: 0.7 } - ); // 70% of section visible triggers the change - - // 3. Start watching the sections - sectionDM.forEach((section) => { - navObserver.observe(section); - }); -}); +}); \ No newline at end of file diff --git a/portfolio/index.html b/portfolio/index.html index d574fca..67788ab 100644 --- a/portfolio/index.html +++ b/portfolio/index.html @@ -1,629 +1,622 @@ - + - - - - - - - - - - - Vimal Tech | Portfolio & Case Studies - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-

My Portfolio & Case Studies

-

- Bridging the gap between complex backend - architecture and responsive user - interfaces. -

- -
-
- - -
-
-

Live Frontend Interfaces

-

Interactive web applications built with modern frontend frameworks.

-
- -
+ + +
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file +
+ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/services/index.html b/services/index.html index d1d1d1f..10eba6c 100644 --- a/services/index.html +++ b/services/index.html @@ -71,7 +71,7 @@ "@id": "https://vimaltech.dev/#organization", "name": "Vimal Tech", "url": "https://vimaltech.dev", - "logo": "https://vimaltech.dev/images/logo-white.png", + "logo": "https://vimaltech.dev/images/logo-black.png", "email": "vimal.patel@vimaltech.dev", "telephone": "+91-9638474047", "address": { @@ -197,39 +197,9 @@ - - + + +
@@ -419,7 +389,7 @@

Support & Optimization

-
+

Engagement Models

Flexible engagement options depending on your project needs.

@@ -506,11 +476,14 @@

Select a Project

+
+ More → +
-
+

Frequently Asked Questions

@@ -546,194 +519,9 @@

Let’s Build Something Solid

- - + + + - + + + \ No newline at end of file