diff --git a/aboutUs/index.html b/aboutUs/index.html index 1b3af43..c948937 100644 --- a/aboutUs/index.html +++ b/aboutUs/index.html @@ -101,10 +101,10 @@ "addressCountry": "IN" }, "sameAs": [ - "https://www.linkedin.com/in/vimaltech", - "https://github.com/vimal-tech-dev", - "https://x.com/vimal_tech_dev", - "https://www.facebook.com/vimaltech.dev/" + "https://www.linkedin.com/company/vimaltech-dev", + "https://github.com/vimaltech-dev", + "https://x.com/vimaltech_dev", + "https://www.facebook.com/vimaltech.info/" ] } ] @@ -157,7 +157,7 @@

About Vimal Tech

-
+

diff --git a/components/footer.html b/components/footer.html index 98c7adf..ff30b27 100644 --- a/components/footer.html +++ b/components/footer.html @@ -1,187 +1,220 @@ \ No newline at end of file +

+ +
+

+ © 2026 Registered By + + Vimal + Tech. + + All rights reserved. +

+
+ diff --git a/components/header.html b/components/header.html index 3890509..d811815 100644 --- a/components/header.html +++ b/components/header.html @@ -13,27 +13,18 @@ - -
  • - Expertise - -
    • -
  • About Us
      +
    • We-Are
    • We-Do
    • With-Us
    • Our-Mission
      • diff --git a/components/load-header.js b/components/load-header.js index 30c49b2..16617c9 100644 --- a/components/load-header.js +++ b/components/load-header.js @@ -34,7 +34,6 @@ fetch("/components/header.html") if ( !cleanCurrent.includes("services") && !cleanCurrent.includes("portfolio") && - !cleanCurrent.includes("expertise") && !cleanCurrent.includes("aboutus") && !cleanCurrent.includes("contactus") ) { diff --git a/contactUs/index.html b/contactUs/index.html index a791cb5..37d2b8a 100644 --- a/contactUs/index.html +++ b/contactUs/index.html @@ -1,308 +1,474 @@ - + - - + - + - - + + Vimal Tech | Contact - Software Development Services - - - - - - - + + + + + + + - + - - - - - + + + + + - - - - - + + + + + - - - - + + + + - - - - + + + + + { + "@context": "https://schema.org", + "@graph": [ + { + "@type": "ContactPage", + "@id": "https://vimaltech.dev/contactUs/#webpage", + "url": "https://vimaltech.dev/contactUs", + "name": "Contact Vimal Tech | Software Development Services", + "description": "Get in touch with Vimal Tech. We are an MSME-registered software development studio in Valsad, Gujarat." + }, + { + "@type": "Person", + "@id": "https://vimaltech.dev/#person", + "name": "Vimal Patel", + "url": "https://vimaltech.dev", + "email": "vimal.patel@vimaltech.dev", + "telephone": "+91-9638474047", + "jobTitle": "Java Backend Developer", + "address": { + "@type": "PostalAddress", + "addressLocality": "Valsad", + "addressRegion": "Gujarat", + "postalCode": "396001", + "addressCountry": "IN" + }, + "sameAs": [ + "https://github.com/vimaltech-dev", + "https://www.linkedin.com/company/vimaltech-dev", + "https://x.com/vimaltech_dev" + ] + } + ] + } + - + - - + + + href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&display=swap" + rel="stylesheet" + /> + href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&display=swap" + rel="stylesheet" + /> + href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" + rel="stylesheet" + /> - + - + - + - +
      -
      -
      -
      -

      Contact Vimal Tech

      -

      - Get in touch to fulfill your desired requirements. - - Expert Software Solutions. -

      -

      - Have a project in your - mind or need - technical support? Reach out to us directly. We are ready - to engineer your next big idea. -

      -
      - - Actively accepting project requirements - -
      - - - Click to contact form - - +
      +
      +
      +

      Contact Vimal Tech

      +

      + Get in touch to fulfill your desired requirements. + + Expert Software Solutions. +

      +

      + Have a project in your + mind or need + technical support? Reach out to us + directly. We are ready + to engineer your next big idea. +

      +
      + + Actively accepting project requirements +
      -
      - -
      -
      -
      + + Click to contact form + + +
      +
      -
      -
      -
      -

      Vimal Patel

      -

      Founder & Software Developer

      -
      -
      - - vimal.patel@vimaltech.dev - +91 9638 474047 - Valsad, Gujarat, India - 396001 -
      - -
      -
      +
      +
      +
      +
      +
      +
      +

      Vimal Patel

      +

      Founder & Software Developer

      +
      +
      + + vimal.patel@vimaltech.dev + +91 9638 474047 + Valsad, Gujarat, + India - 396001 +
      + -
      -
      -
      -

      Vimal Tech

      -

      Independent Software Development Studio

      -
      -

      - Providing freelance software development services, robust backend architectures, and - cloud - integrations. -

      -
      - Open 24 Hours (Mon - Sun) -
      -
      -
      +
      +
      +
      +
      +
      +
      +

      Vimal Tech

      +

      Independent Software Development Studio

      +
      +

      + Providing freelance software development services, robust + backend architectures, and cloud integrations. +

      + -
      -
      -
      -

      Official Registration

      -
      -

      MSME Registered - Micro - Enterprise

      -

      - Under the Ministry of Micro, Small, and Medium Enterprises
      - Government of India -

      -
      - Udyam Number: UDYAM-GJ-25-0089795 -
      - - ✓ Verify MSME Registration - -
      -
      +
      + Open 24 Hours (Mon - Sun)
      +
      +
      +
      +
      +
      +

      Official Registration

      +
      +

      + MSME Registered Micro Enterprise +

      +

      + Under the Ministry of Micro, Small, and Medium Enterprises
      + Government of India +

      +
      + Udyam Number: UDYAM-GJ-25-0089795 +
      + + ✓ Verify MSME Registration + +
      +
      +
      +
      -
      -

      Start a Conversation

      - -
      - -
      - - - -
      - -
      - - - -
      - -
      - - - -
      +
      +

      + Start a Conversation +

      + + +
      + + + +
      -
      - - -
      - - 0 / 1000 -
      -
      +
      + + + +
      - +
      + + + +
      -
      - Your message has been sent. I’ll - get back to you soon. -
      +
      + + +
      + + 0 / 1000 +
      +
      -

      - Having trouble? Please use the provided email, phone, or WhatsApp to reach out directly. -

      -

      - I typically respond within 24 hours. -

      - + + +
      + Your + message has been sent. I’ll get back to you soon.
      + +

      + Having trouble? Please use the provided email, phone, or WhatsApp + to reach out directly. +

      +

      + I typically respond within 24 hours. +

      +
      +
      -
      -
      - Virtual Office · Valsad, Gujarat - India -
      - - -
      - - Open Location in Google Maps - -
      +
      +
      + Virtual Office · Valsad, Gujarat - India +
      + + +
      + + Open Location in Google Maps + +
      @@ -310,9 +476,12 @@

      Start a Conve - - + + @@ -320,7 +489,7 @@

      Start a Conve @@ -330,6 +499,5 @@

      Start a Conve - - - \ No newline at end of file + + diff --git a/css/aboutUs.css b/css/aboutUs.css index b57dfe5..d20da39 100644 --- a/css/aboutUs.css +++ b/css/aboutUs.css @@ -65,7 +65,7 @@ body.dark .story-content p { .founder-icon { font-size: 1.5rem; - color: var(--color-accent); + color: var(--color-primary); margin-right: 15px; } @@ -183,7 +183,7 @@ body.dark .about-card:hover { .partner-icon { font-size: 2rem; - color: var(--color-accent); + color: var(--color-primary); margin-right: 25px; margin-top: 5px; } diff --git a/css/blogger.css b/css/blogger.css deleted file mode 100644 index 82821ea..0000000 --- a/css/blogger.css +++ /dev/null @@ -1,418 +0,0 @@ -/* ========================================================= - LATEST BLOG POSTS - ========================================================= */ - -.latest-blog-section { - width: 100%; - padding: 60px 6%; - box-sizing: border-box; -} - -.latest-blog-section .section-header { - text-align: center; - margin-bottom: 55px; -} - -.latest-blog-section .section-header h2 { - margin: 0; - /* font-size: 2.2rem; */ - font-weight: 700; - letter-spacing: 1px; -} - -.latest-blog-section .section-header h2 span { - font-weight: 400; -} - -.latest-blog-section .section-header p { - margin-top: 12px; - /* font-size: 1rem; */ - opacity: 0.75; -} - -/* ========================================================= - CATEGORY NAVIGATION - Desktop Hidden - ========================================================= */ - -.blog-category-navigation { - display: none; -} - -/* ========================================================= - CATEGORY CONTAINER - ========================================================= */ - -.blog-categories { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 25px; - width: 100%; -} - -/* ========================================================= - CATEGORY CARD - ========================================================= */ - -.blog-category { - min-width: 0; - padding: 28px; - border: 1px solid rgba(128, 128, 128, 0.25); - border-radius: 14px; - background: rgba(172, 3, 3, 0.04); - box-sizing: border-box; - transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; -} - -/* ========================================================= - DESKTOP HOVER EFFECT - ========================================================= */ - -@media (min-width: 1025px) and (hover: hover) and (pointer: fine) { - .blog-category:hover { - transform: translateY(-5px); - border-color: rgba(128, 128, 128, 0.45); - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); - } -} - -/* ========================================================= - CATEGORY HEADER - ========================================================= */ - -.blog-category-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 15px; - padding-bottom: 20px; - margin-bottom: 10px; - border-bottom: 1px solid rgba(128, 128, 128, 0.2); -} - -.blog-category-label { - display: block; - margin-bottom: 7px; - font-size: 0.7rem; - font-weight: 700; - letter-spacing: 1.4px; - opacity: 0.6; -} - -.blog-category h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 700; -} - -/* ========================================================= - VIEW ALL - ========================================================= */ - -.blog-view-all { - flex-shrink: 0; - display: inline-flex; - align-items: center; - gap: 6px; - font-size: 0.8rem; - font-weight: 600; - text-decoration: none; - white-space: nowrap; - transition: opacity 0.2s ease; -} - -.blog-view-all:hover { - opacity: 0.65; -} - -/* ========================================================= - POSTS - ========================================================= */ - -.blog-posts { - display: flex; - flex-direction: column; -} - -/* ========================================================= - INDIVIDUAL POST - ========================================================= */ - -.blog-post { - padding: 17px 0; - border-bottom: 1px solid rgba(128, 128, 128, 0.16); -} - -.blog-post:last-child { - border-bottom: none; -} - -.blog-post a { - display: block; - color: inherit; - text-decoration: none; -} - -.blog-post-title { - margin: 0 0 7px; - font-size: 0.98rem; - line-height: 1.45; - font-weight: 600; - transition: opacity 0.2s ease; -} - -.blog-post a:hover .blog-post-title { - opacity: 0.65; -} - -.blog-post-date { - font-size: 0.75rem; - opacity: 0.55; -} - -/* ========================================================= - LOADING / ERROR - ========================================================= */ - -.blog-loading, -.blog-error { - padding: 25px 0; - font-size: 0.85rem; - opacity: 0.6; -} - -/* ========================================================= - TABLET - 769px - 1024px - ========================================================= */ - -@media (min-width: 769px) and (max-width: 1024px) { - .latest-blog-section { - padding: 75px 5%; - } - - .latest-blog-section .section-header { - margin-bottom: 35px; - } - - /* ------------------------------------------------------- - CATEGORY NAVIGATION - ------------------------------------------------------- */ - - .blog-category-navigation { - display: flex; - align-items: center; - justify-content: center; - gap: 35px; - margin-bottom: 28px; - padding-bottom: 2px; - border-bottom: 1px solid rgba(128, 128, 128, 0.18); - } - - .blog-category-button { - position: relative; - padding: 10px 0; - border: none; - background: transparent; - color: inherit; - font: inherit; - font-size: 0.82rem; - font-weight: 700; - letter-spacing: 0.5px; - opacity: 0.5; - white-space: nowrap; - cursor: pointer; - transition: opacity 0.25s ease, color 0.25s ease; - } - - .blog-category-button::after { - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: -3px; - height: 2px; - transform: scaleX(0); - transform-origin: center; - background: currentColor; - transition: transform 0.25s ease; - } - - .blog-category-button:hover, - .blog-category-button.active { - opacity: 1; - } - - .blog-category-button.active::after { - transform: scaleX(1); - } - - /* ------------------------------------------------------- - HORIZONTAL SLIDER - ------------------------------------------------------- */ - - .blog-categories { - display: flex; - width: 100%; - gap: 0; - padding: 12px 0 18px; - overflow-x: auto; - overflow-y: auto; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - scrollbar-width: none; - -ms-overflow-style: none; - } - - .blog-categories::-webkit-scrollbar { - display: none; - } - - .blog-category { - flex: 0 0 100%; - width: 100%; - scroll-snap-align: start; - scroll-snap-stop: always; - padding: 28px; - } -} - -/* ========================================================= - MOBILE - 768px and Below - ========================================================= */ - -@media (max-width: 768px) { - .latest-blog-section { - padding: 65px 5%; - } - - .latest-blog-section .section-header { - margin-bottom: 30px; - } - - .latest-blog-section .section-header h2 { - font-size: 1.7rem; - } - - .latest-blog-section .section-header p { - font-size: 0.9rem; - line-height: 1.6; - } - - /* ------------------------------------------------------- - CATEGORY NAVIGATION - ------------------------------------------------------- */ - - .blog-category-navigation { - display: flex; - width: 100%; - gap: 24px; - margin-bottom: 22px; - padding-bottom: 2px; - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - border-bottom: 1px solid rgba(128, 128, 128, 0.18); - scrollbar-width: none; - -ms-overflow-style: none; - } - - .blog-category-navigation::-webkit-scrollbar { - display: none; - } - - .blog-category-button { - position: relative; - flex-shrink: 0; - padding: 9px 0; - border: none; - background: transparent; - color: inherit; - font: inherit; - font-size: 0.72rem; - font-weight: 700; - letter-spacing: 0.4px; - opacity: 0.5; - white-space: nowrap; - cursor: pointer; - transition: opacity 0.25s ease, color 0.25s ease; - } - - .blog-category-button::after { - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: -3px; - height: 2px; - transform: scaleX(0); - transform-origin: center; - background: currentColor; - transition: transform 0.25s ease; - } - - .blog-category-button.active { - opacity: 1; - } - - .blog-category-button.active::after { - transform: scaleX(1); - } - - /* ------------------------------------------------------- - HORIZONTAL SLIDER - ------------------------------------------------------- */ - - .blog-categories { - display: flex; - width: 100%; - gap: 0; - padding: 12px 0 18px; - overflow-x: auto; - overflow-y: auto; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - scrollbar-width: none; - -ms-overflow-style: none; - } - - .blog-categories::-webkit-scrollbar { - display: none; - } - - .blog-category { - flex: 0 0 100%; - width: 100%; - scroll-snap-align: start; - scroll-snap-stop: always; - padding: 22px; - border-radius: 12px; - } - - .blog-category-header { - align-items: center; - } - - .blog-category h3 { - font-size: 1.1rem; - } - - .blog-view-all { - font-size: 0.72rem; - } - - .blog-post-title { - font-size: 0.9rem; - } -} - -/* ========================================================= - BLOG CARD INTERACTION - ========================================================= */ - -.blog-category:active { - transform: translateY(-3px); - border-color: rgba(128, 128, 128, 0.45); - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10); -} \ No newline at end of file diff --git a/css/contactUs.css b/css/contactUs.css index 82da4e1..782f155 100644 --- a/css/contactUs.css +++ b/css/contactUs.css @@ -338,7 +338,7 @@ body.dark .udyam-box { .contact-form { display: flex; flex-direction: column; - gap: 1.2rem; + gap: 1.7rem; } /* Base Input Styling - Unifies all fields to Dark Navy */ diff --git a/css/expertise.css b/css/expertise.css deleted file mode 100644 index d416f25..0000000 --- a/css/expertise.css +++ /dev/null @@ -1,407 +0,0 @@ -/* expertise.css - Elegant & Modern Update (Matches services.css style) */ -.hero p { - font-size: 1.2rem; - margin: 1rem 0; - opacity: 0.9; - max-width: 650px; -} - -/* ===== UTILITIES ===== */ -.section-header { - text-align: center; - margin-bottom: 3rem; -} - -.section-subtitle { - font-size: 1.2rem; - color: var(--color-muted); - max-width: 700px; - margin: 0 auto; -} - -.alt-bg { - background: rgba(255, 255, 255, 0.4); - border-radius: 20px; - margin-bottom: 2rem; - padding: 3rem 2rem; -} - -body.dark .alt-bg { - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.05); -} - -.category-title { - font-size: 1.5rem; - margin-bottom: 1.5rem; - text-align: center; - color: var(--color-text); -} - -body.dark .category-title { - color: #fff; -} - -/* ===== INFO BANNERS (For PoC & Shadowing) ===== */ -.info-banner-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; -} - -.info-banner { - display: flex; - align-items: flex-start; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.4); - padding: 25px; - border-radius: 16px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); -} - -.banner-icon { - font-size: 1.8rem; - color: var(--color-primary); - margin-right: 15px; - margin-top: 5px; -} - -.banner-text h4 { - margin-bottom: 8px; - font-family: var(--font-primary); - font-size: 1.1rem; - color: var(--color-text); -} - -.banner-text p { - font-size: 0.95rem; - line-height: 1.6; - margin: 0; -} - -/* =================================================== - ===== Skills Section ===== -=================================================== */ -/* ===== SKILLS GRID ===== */ -.skills-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); - gap: 20px; - margin-top: 2rem; -} - -.skill-card { - background: #ffffff; - padding: 25px 15px; - text-align: center; - border-radius: 16px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); - border: 1px solid rgba(0, 0, 0, 0.05); - transition: all 0.3s ease; -} - -.skill-card i { - font-size: 2.5rem; - margin-bottom: 15px; - transition: transform 0.3s ease; -} - -.skill-card h3 { - margin: 0; - font-size: 1rem; - font-family: var(--font-primary); -} - -.skill-card:hover { - transform: translateY(-8px); - box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); - border-color: var(--color-accent); -} - -.skill-card:hover i { - transform: scale(1.15); -} - -.icon-yaml-custom { - display: inline-block; - width: 1em; /* Matches the size of your other icons automatically */ - height: 1em; - vertical-align: middle; - /* Ensure the filename below matches exactly what you saved on your computer */ - background-image: url('/assets/yaml_icon.png'); - background-size: contain; - background-repeat: no-repeat; - background-position: center; -} - -/* This targets all icons in your skill cards to keep them uniform */ -.skill-card i { - font-size: 2.5rem; /* Adjust this to match your existing portfolio size */ - margin-bottom: 15px; - transition: transform 0.3s ease; -} - -/* =================================================== - ===== Projects Section ===== -=================================================== */ -/* ===== PROJECTS GRID ===== */ -.projects-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 25px; -} - -.project-card { - display: flex; - flex-direction: column; - background: #fff; - padding: 25px; - 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, box-shadow 0.3s; - text-decoration: none; - color: var(--color-text); -} - -.project-card:hover { - transform: translateY(-5px); - box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); -} - -.project-card.static-card:hover { - transform: translateY(-3px); - border-top-color: var(--color-accent); -} - -.project-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; -} - -.project-header h4 { - margin: 0; - font-size: 1.2rem; - color: var(--color-text); - transition: color 0.3s ease; -} - -.project-header i { - color: var(--color-muted); - font-size: 0.9rem; -} - -.project-card:hover .project-header h4, -.project-card:hover .project-header i { - color: var(--color-primary); -} - -.project-card p { - font-size: 0.95rem; - line-height: 1.6; - margin-bottom: 15px; - flex-grow: 1; -} - -/* Tech Tags inside projects */ -.tech-tags { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-top: 10px; -} - -.tech-tags span { - background: rgba(56, 189, 248, 0.1); - color: var(--color-accent); - padding: 4px 10px; - border-radius: 6px; - font-size: 0.8rem; - font-weight: 600; -} - -/* ===== PORTFOLIO & CTA (NEON STYLE) ===== */ -.cta-card { - background: linear-gradient(135deg, #0f172a, #1e293b); - color: #fff; - padding: 50px 30px; - border-radius: 24px; - text-align: center; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.theme-neon { - background: linear-gradient(135deg, #020617, #0f172a); - position: relative; - overflow: hidden; -} - -.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; -} - -.theme-neon>* { - position: relative; - z-index: 1; -} - -.cta-card h2 { - color: #fff; - margin-bottom: 15px; -} - -.cta-card p { - color: #cbd5e1; - margin-bottom: 30px; -} - -/* =================================================== - ===== Portfolio Section ===== -=================================================== */ -#portfolio { - text-align: center; - /* height: 20vh; */ -} - -.portfolio .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; -} - -.portfolio .btn:hover { - background: #e68900; - transform: translateY(-3px); -} - -.portfolio-card { - background: rgba(179, 105, 105, 0.3); - backdrop-filter: blur(10px); - border-radius: 20px; - padding: 60px; - margin: 20px 0; - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); -} - -/* Underline Animation Example */ -/* (For Services link at bottom of page) */ -.underline-hover { - text-decoration: none; - position: relative; -} - -.underline-hover::after { - content: ''; - position: absolute; - width: 100%; - transform: scaleX(0); - height: 2px; - bottom: 0; - left: 0; - background-color: #333; - transform-origin: bottom right; - transition: transform 0.25s ease-out; -} - -.underline-hover:hover::after { - transform: scaleX(1); - transform-origin: bottom left; -} - -/* Keep the color the same even after the link is clicked */ -.underline-hover:visited { - color: #333; -} - -/* Ensure the underline still triggers on visited links */ -.underline-hover:visited:hover::after { - transform: scaleX(1); -} - -/* =================================================== - ===== DARK MODE OVERRIDES ===== -=================================================== */ -body.dark .info-banner { - background: rgba(30, 41, 59, 0.8); - border-color: rgba(255, 255, 255, 0.05); -} - -body.dark .info-banner h4 { - color: #fff; -} - -body.dark .skill-card, -body.dark .project-card { - background: #1e293b; - border: 1px solid rgba(255, 255, 255, 0.05); - color: #e2e8f0; -} - -body.dark .project-card:hover { - background: #27354f; - border-color: var(--color-accent); -} - -body.dark .skill-card:hover { - background: #27354f; -} - -body.dark .project-header h4 { - color: #fff; -} - -body.dark .tech-tags span { - background: rgba(255, 152, 0, 0.15); - color: #ff9800; -} - -body.dark .underline-hover { - color: #ff9800; -} - -body.dark .underline-hover::after { - background-color: #ff9800; -} - -/* Animations */ -@keyframes fadeUp { - to { - opacity: 1; - transform: translateY(0); - } -} - -.fade-in.visible { - opacity: 1 !important; - transform: translateY(0) !important; -} - -@media (max-width: 768px) { - .service-card-link { - margin-bottom: 10px; - } - - .service-card-link p { - white-space: pre-line; - } - - .break-mobile { - display: block; - } -} \ No newline at end of file diff --git a/css/global.css b/css/global.css index 11f9582..33be478 100644 --- a/css/global.css +++ b/css/global.css @@ -1016,7 +1016,6 @@ body.dark .section-title { .footer-vimal-tech, .footer-vimal-patel, .footer-quick-links, -.footer-resources, .footer-more-info { border-left: 1px solid rgba(255, 255, 255, 0.08); padding: 0 30px; @@ -1206,6 +1205,11 @@ body.dark .section-title { opacity: 0.7; } +.footer-bottom a:hover { + color: var(--color-accent); + font-weight: 600; +} + /* ===== Mobile Responsive ===== */ @media (max-width: 900px) { .footer-container { @@ -1237,8 +1241,7 @@ body.dark .section-title { width: 100%; } - .footer-quick-links, - .footer-resources { + .footer-quick-links { padding: 20px 20px; width: 100%; } @@ -1259,7 +1262,8 @@ body.dark .section-title { /* Bottom Bar */ .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); - margin-top: 40px; + margin-top: 20px; + margin-bottom: -20px; padding-top: 20px; text-align: center; font-size: 0.9rem; @@ -1271,7 +1275,7 @@ body.dark .section-title { /* Forces the two divs to sit side-by-side (50% width each) */ .footer-links-row { display: grid; - grid-template-columns: 1fr 1fr; + /* grid-template-columns: 1fr 1fr; */ } /* Optional: If you want them to stack on EXTREMELY small screens (like old foldables under 320px) */ @@ -1282,20 +1286,75 @@ body.dark .section-title { } } +/* =================================================== + ===== MOBILE FOOTER LINKS LAYOUT ===== + ===== Up to 768px ===== +=================================================== */ @media (max-width: 768px) { + + /* Footer content becomes a two-column grid */ + .footer-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0; + align-items: start; + } + + /* Keep main footer sections full width */ + .footer-vimal-tech, + .footer-vimal-patel { + grid-column: 1 / -1; + } + + /* Quick Links - left column */ + .footer-links-row { + grid-column: 1; + display: block; + width: 100%; + padding: 20px 15px 0 20px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + } + + .footer-quick-links { + width: 100%; + padding: 0; + } + + /* More Info - right column */ + .footer-more-info { + grid-column: 2; + width: 100%; + padding: 20px 10px 0 15px; + border-left: 1px solid rgba(255, 255, 255, 0.08); + border-top: 1px solid rgba(255, 255, 255, 0.08); + } + + /* More Info links */ .footer-more-info .quick-links-list { display: flex; - flex-wrap: wrap; - /* Allows links to wrap to the next line when space runs out */ - gap: 10px; - /* Adds space between the links */ + flex-direction: column; + gap: 0; } - /* Reset any 100% width on the list items */ .footer-more-info .quick-links-list li { width: auto; - margin-bottom: 0; - /* Removes bottom margin if your default list has it */ + margin-bottom: 8px; + } + + /* Link typography */ + .quick-links-list a { + font-size: 0.9rem; + } + + /* Footer social stays full width */ + .footer-social { + grid-column: 1 / -1; + } + + /* Footer bottom stays full width */ + .footer-bottom { + grid-column: 1 / -1; + margin-bottom: -4px; } } @@ -1413,42 +1472,39 @@ body.dark .section-title { border-bottom: none; } - /* Quick Links + Resources */ + /* Quick Links Column */ .footer-links-row { - grid-column: 1 / -1; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 30px; + grid-column: 1; + display: block; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.08); - padding-top: 25px; + padding: 25px 20px 0 0; } - .footer-quick-links, - .footer-resources { + .footer-quick-links { width: 100%; - padding: 0 20px; + padding: 0; border-left: none; } - /* More Info */ + /* More Info Column */ .footer-more-info { - grid-column: 1 / -1; + grid-column: 2; width: 100%; - padding: 25px 20px 0; - border-left: none; + padding: 25px 0 0 20px; + border-left: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.08); } - /* More Info Links in Rows */ + /* More Info Links */ .footer-more-info .quick-links-list { display: flex; - flex-wrap: wrap; - gap: 8px 25px; + flex-direction: column; + gap: 0; } .footer-more-info .quick-links-list li { - margin-bottom: 5px; + margin-bottom: 8px; } /* Typography */ @@ -1497,9 +1553,10 @@ body.dark .section-title { /* Footer Bottom */ .footer-bottom { - margin-top: 30px; - margin-bottom: 0; - padding: 15px 10px; + grid-column: 1 / -1; + margin-top: 20px; + margin-bottom: 10px !important; + padding: 0px 10px; } } diff --git a/css/index.css b/css/index.css deleted file mode 100644 index ba28e4c..0000000 --- a/css/index.css +++ /dev/null @@ -1,166 +0,0 @@ -/* =================================================== - ===== Experience Section ===== -=================================================== */ -#experience { - margin-top: 20px; - position: relative; - z-index: 10; -} - -#experience p { - line-height: 1.6; - /* max-width: 800px; */ - margin: 0 auto; -} - -/* ===== GLASS PANEL (For Experience Section) ===== */ -.glass-panel { - background: rgba(255, 255, 255, 0.4); - backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.5); - border-radius: 24px; - padding: 20px 40px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); -} - -body.dark .glass-panel { - background: rgba(30, 41, 59, 0.85); - border-color: rgba(255, 255, 255, 0.08); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); -} - -body.dark .glass-panel p { - color: #cbd5e1 !important; -} - -.card-icon { - margin: 0 auto 15px auto; - width: 60px; - height: 60px; - background: rgba(56, 189, 248, 0.1); - color: var(--color-accent); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.5rem; -} - -/* ===== SERVICES PREVIEW GRID ===== */ -.services-preview-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 25px; -} - -.preview-card { - background: #fff; - padding: 30px 20px; - border-radius: 16px; - text-align: center; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04); - border-bottom: 4px solid transparent; - transition: all 0.3s ease; -} - -.preview-card:hover { - transform: translateY(-8px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); - border-bottom-color: var(--color-primary); -} - -.preview-card .card-icon { - width: 60px; - height: 60px; - background: rgba(255, 152, 0, 0.1); - color: var(--color-primary); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.8rem; - margin: 0 auto 15px auto; - transition: transform 0.3s ease; -} - -.preview-card:hover .card-icon { - transform: scale(1.1); - background: var(--color-primary); - color: #fff; -} - -.preview-card h3 { - margin-bottom: 10px; -} - -.preview-card p { - font-size: 0.95rem; - line-height: 1.5; -} - -body.dark .preview-card { - background: #1e293b; - border: 1px solid rgba(255, 255, 255, 0.05); - border-bottom: 4px solid transparent; -} - -body.dark .preview-card h3 { - color: #fff; -} - -body.dark .preview-card:hover { - border-bottom-color: var(--color-primary); -} - -/* =================================================== - ===== Dark Mode ===== -=================================================== */ - -body.dark #services-preview .service-card { - background: #242424; - color: #e0e0e0; -} - -body.dark #projects { - background: #242424; - color: #ffffff; -} - -body.dark .project-card { - background: #242424; - color: #e0e0e0; -} - -/* CTA Section */ -/* ===== CTA SECTION (NEON STYLE) ===== */ -.cta-card { - background: linear-gradient(135deg, #0f172a, #1e293b); - color: #fff; - padding: 60px 40px; - border-radius: 24px; - text-align: center; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.theme-neon { - background: linear-gradient(135deg, #020617, #0f172a); - position: relative; - overflow: hidden; -} - -.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; -} - -.theme-neon>* { - position: relative; - z-index: 1; -} \ No newline at end of file diff --git a/css/infinite-carousel.css b/css/infinite-carousel.css deleted file mode 100644 index a0f9393..0000000 --- a/css/infinite-carousel.css +++ /dev/null @@ -1,288 +0,0 @@ -/* =================================================== - 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 deleted file mode 100644 index 7718315..0000000 --- a/css/latest-works.css +++ /dev/null @@ -1,518 +0,0 @@ -/* =================================================== - ===== Projects Section ===== -=================================================== */ - -#projects { - text-align: center; - background: rgba(255, 255, 255, 0.4); - margin-top: 20px; - margin-bottom: 10px; - border-radius: 16px; -} - -.projects-wrap { - padding: 4rem 2rem; - max-width: 1200px; - margin: 0 auto; -} - -.section-title { - text-align: center; - font-size: 2.5rem; - margin-bottom: 3rem; - color: #333; -} - -.projects-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 350px)); - justify-content: center; - gap: 2rem; -} - -/* DRIBBBLE-STYLE INTERACTIVE CARDS */ -.project-card { - perspective: 1000px; - height: 480px; - border-radius: 20px; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.08), - 0 6px 6px rgba(0, 0, 0, 0.05); - /* transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); */ - transition: - opacity 0.4s ease, - transform 0.4s ease, - visibility 0.4s; - background: white; - overflow: hidden; - width: 100%; - max-width: 350px; - margin: 0 auto; -} - -.project-card:hover { - transform: translateY(-12px) scale(1.01); - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); -} - -.project-card a { - text-decoration: none; - color: black; -} - -.project-card a:hover { - color: blue; -} - -body.dark .project-card a { - color: white; -} - -body.dark .project-card a:hover { - color: #467db4; -} - -.card-inner { - position: relative; - width: 100%; - height: 100%; - transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); - transform-style: preserve-3d; -} - -.project-card:hover .card-inner { - transform: rotateY(180deg); -} - -.card-front, -.card-back { - position: absolute; - width: 100%; - height: 100%; - backface-visibility: hidden; -} - -.card-front { - border-radius: 20px; -} - -.card-back { - transform: rotateY(180deg); - background: #1e293b; - color: white; - padding: 2.5rem; - display: flex; - flex-direction: column; - justify-content: center; - gap: 1rem; -} - -/* STATIC GLOSS + SHIMMER OVERLAY */ -.card-thumbnail { - /* height: 180px; */ - /* was 240px – shorter = more text fits */ - overflow: hidden; - position: relative; -} - -/* .card-thumbnail::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, - rgba(255, 255, 255, 0.15) 0%, - rgba(255, 255, 255, 0.05) 50%, - rgba(0, 0, 0, 0.1) 100%); - z-index: 1; -} */ - -.card-thumbnail::before { - content: ''; - position: absolute; - inset: 0; - /* background: linear-gradient(to bottom, - rgba(0, 0, 0, 0.2), - rgba(0, 0, 0, 0.2)); */ - pointer-events: none; -} - -/* SHIMMER ANIMATION (subtle loop) */ -@keyframes shimmer { - 0% { - background-position: -200% 0; - } - - 100% { - background-position: 200% 0; - } -} - -.card-thumbnail::after { - content: ''; - position: absolute; - top: 0; - left: -200%; - width: 200%; - height: 100%; - 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; -} - -/* HOVER: Remove shimmer, enhance gradient */ -.project-card:hover .card-thumbnail::after { - animation: none; - opacity: 0; -} - -.project-card:hover .card-thumbnail::before { - background: linear-gradient(135deg, - rgba(255, 255, 255, 0.3) 0%, - transparent 50%, - rgba(0, 0, 0, 0.2) 100%); -} - -.card-thumbnail img { - width: 100%; - height: 100%; - /* object-fit: cover; */ - /* focus on center of text, not the top empty area */ - object-position: center center; - transition: transform 0.6s ease; -} - -.project-card:hover .card-thumbnail img { - transform: scale(1.15); -} - -.card-links { - display: flex; - gap: 0.75rem; -} - -.btn-live, -.btn-github { - flex: 1; - padding: 0.7rem 1.2rem; - border-radius: 8px; - text-align: center; - text-decoration: none; - font-weight: 600; - font-size: 0.9rem; - transition: all 0.3s ease; - font-size: 0.85rem; - border-radius: 10px; -} - -.btn-live { - background: linear-gradient(135deg, #6366f1, #4f46e5); - color: white; -} - -.btn-live:hover { - transform: translateY(-1px); - box-shadow: 0 6px 12px rgba(99, 102, 241, 0.3); -} - -.btn-github { - background: rgba(255, 255, 255, 0.2); - color: white; - border: 1px solid rgba(255, 255, 255, 0.3); -} - -.btn-github:hover { - background: rgba(255, 255, 255, 0.3); -} - -.project-tagline { - display: block; - font-size: 0.75rem; - color: #94a3b8; - letter-spacing: 0.5px; - margin-bottom: 0.6rem; - text-transform: uppercase; -} - -/* ========================================= -======= Filter UI + Animation =========== -========================================== */ -/* FILTER BUTTONS */ -.project-filters { - display: flex; - justify-content: center; - gap: 10px; - margin-bottom: 30px; - flex-wrap: wrap; -} - -.filter-btn { - padding: 8px 20px; - border-radius: 30px; - border: 1px solid rgba(0, 0, 0, 0.1); - background: #fff; - cursor: pointer; - font-weight: 600; - font-family: var(--font-primary); - transition: all 0.3s ease; -} - -/* .filter-btn:hover { - background: #d1d5db; -} - -.filter-btn.active { - background: #6366f1; - color: white; -} */ - -body.dark .filter-btn { - background: #1e293b; - border-color: rgba(255, 255, 255, 0.1); - color: #ffffff; -} - -.filter-btn.active, -.filter-btn:hover { - background: var(--color-primary); - color: #fff; - border-color: var(--color-primary); -} - -body.dark .filter-btn.active, -body.dark .filter-btn:hover { - background: var(--color-primary); - color: #fff; - border-color: var(--color-primary); -} - -body.dark #projects { - background: rgba(30, 41, 59, 0.85); - border-color: rgba(255, 255, 255, 0.08); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); -} - -/* CARD ANIMATION */ - -.project-card.hide { - display: none; - opacity: 0; - transform: scale(0.9); - pointer-events: none; - position: absolute; - visibility: hidden; -} - -.projects-grid { - position: relative; - min-height: 500px; - /* prevents jump */ -} - -.projects-navigation { - display: flex; - justify-content: center; - align-items: center; - gap: 15px; - margin-top: 20px; - margin-bottom: -40px; -} - -.project-nav-btn { - display: none; - align-items: center; - justify-content: center; - padding: 12px 20px; - border-radius: 25px; - border: 1px solid rgba(255, 255, 255, 0.2); - background: rgba(30, 41, 59, 0.85); - color: #ffffff; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; -} - -.project-nav-btn:hover { - transform: translateY(-2px); -} - -/* ========================================== - TABLET — LIVE WORKS SECTION - 769px to 1024px -========================================== */ -@media (min-width: 769px) and (max-width: 1024px) { - - /* ====================================== - PROJECT FILTERS - ====================================== */ - - .project-filters { - display: flex; - justify-content: center; - align-items: center; - gap: 10px; - } - - - /* Hide ALL button on tablet */ - .filter-btn[data-filter="all"] { - display: none; - } - - - /* Tablet buttons are indicators */ - .filter-btn { - pointer-events: auto; - cursor: pointer; - } - - /* ====================================== - PROJECT GRID - ====================================== */ - - .projects-grid { - grid-template-columns: repeat(2, minmax(280px, 350px)); - justify-content: center; - align-items: start; - gap: 2rem; - min-height: auto; - } - - - /* ====================================== - SINGLE CARD — CENTER - ====================================== */ - - .projects-grid.tablet-single { - grid-template-columns: minmax(280px, 350px); - justify-content: center; - } - - - /* ====================================== - PROJECT CARD - ====================================== */ - - .project-card { - width: 100%; - max-width: 350px; - height: 420px; - margin: 0 auto; - } - - - /* ====================================== - NAVIGATION - ====================================== */ - - .projects-navigation { - display: flex; - justify-content: center; - align-items: center; - gap: 12px; - margin-top: 25px; - margin-bottom: 0; - } - - - .project-nav-btn { - display: inline-flex; - justify-content: center; - align-items: center; - } - -} - -/* ========================================== - MOBILE — LIVE WORKS -========================================== */ - -@media (max-width: 768px) { - - /* ====================================== - FILTER BUTTONS - ====================================== */ - - .project-filters { - display: flex; - justify-content: center; - align-items: center; - gap: 8px; - flex-wrap: nowrap; - } - - - /* Hide ALL button on mobile */ - .filter-btn[data-filter="all"] { - display: none; - } - - - /* Buttons are visual indicators only */ - .filter-btn { - pointer-events: auto; - cursor: pointer; - } - - /* ====================================== - PROJECT GRID - ====================================== */ - - .projects-grid { - grid-template-columns: 1fr; - justify-content: center; - align-items: start; - gap: 2rem; - min-height: auto; - } - - - /* ====================================== - SINGLE MOBILE CARD - ====================================== */ - - .projects-grid.mobile-single { - grid-template-columns: minmax(0, 350px); - justify-content: center; - } - - - /* ====================================== - PROJECT CARD - ====================================== */ - - .project-card { - width: 100%; - max-width: 350px; - height: 480px; - margin: 0 auto; - } - - - /* ====================================== - NAVIGATION - ====================================== */ - - .projects-navigation { - display: flex; - justify-content: center; - align-items: center; - gap: 8px; - margin-top: 20px; - margin-bottom: 0; - } - - - .project-nav-btn { - display: inline-flex; - justify-content: center; - align-items: center; - } - -} \ No newline at end of file diff --git a/css/services.css b/css/services.css index 4219823..1512136 100644 --- a/css/services.css +++ b/css/services.css @@ -67,7 +67,7 @@ body.dark .alt-bg { .service-card i { font-size: 1.5rem; - color: var(--color-accent); + color: var(--color-primary); animation: iconBounce 2s infinite; display: inline-block; transition: transform 0.3s, color 0.3s; @@ -119,7 +119,7 @@ body.dark .alt-bg { .accordion-item.active .accordion-icon { transform: rotate(45deg); - color: var(--color-accent); + color: var(--color-primary); } /* ===== FEATURES LIST (WHY WORK WITH ME) ===== */ diff --git a/expertise/index.html b/expertise/index.html deleted file mode 100644 index e76d63b..0000000 --- a/expertise/index.html +++ /dev/null @@ -1,438 +0,0 @@ - - - - - - - - - - - - - Vimal Tech | Java Developer Skills | Spring Boot, Microservices & Cloud Expertise - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - -
      -
      -
      -
      -

      Java Developer Expertise

      -

      - Backend Systems • REST APIs • - Microservices • Cloud Computing - • Virtualization -

      -

      - Having made API - and eventually gained experience on - Web Services (Enterprise Rest API, SOAP) and Standard REST APIs, - I specialize in bringing Proof of Concepts to production. -

      -
      - View Skills - View Projects -
      -
      -
      - -
      -
      -
      - - -
      -
      - - -
      -
      -
      - - -
      -
      -

      Technical Skills

      -

      - Explore my skills, projects, and portfolio to see how I can help you build modern, efficient solutions - for web, mobile, and enterprise systems. -

      -
      -
      -
      -

      Java

      -
      -
      -

      Spring Boot

      -
      -
      -

      Spring Cloud

      -
      -
      -

      Hibernate

      -
      -
      -

      REST API

      -
      -
      -

      Microservices

      -
      -
      -

      Docker

      -
      -
      - -

      Swagger

      -
      -
      - -

      Postman

      -
      -
      - -

      Prometheus

      -
      -
      - -

      Grafana

      -
      -
      -

      YAML

      -
      -
      -

      GitHub

      -
      -
      -

      Bitbucket

      -
      -
      -

      Ubuntu

      -
      -
      -

      VPS

      -
      -
      -

      Oracle / SQL

      -
      -
      -

      AWS

      -
      -
      -

      MongoDB

      -
      -
      -

      PostgreSQL

      -
      -
      -

      Firebase

      -
      -
      -

      Node.js

      -
      -
      -

      Yarn

      -
      -
      -

      Angular

      -
      -
      -

      React

      -
      -
      -

      HTML5

      -
      -
      -

      CSS3

      -
      -
      -

      JavaScript

      -
      -
      -

      Bootstrap

      -
      -
      -

      Slack

      -
      -
      -

      Jenkins

      -
      -
      -

      Jira

      -
      -
      -
      - - -
      -
      -

      Full Stack Projects

      -

      - - Frontend Live Websites -

      -

      - Hi Geeks and Nerds 👋 Explore my live frontend interfaces and robust backend systems.

      -
      - -
      -

      Alex Food Corner

      - -
      -

      Restaurant UI with modern hooks and fast rendering.

      -
      - ReactTailwindCSSVite -
      -       - -
      -

      Suman Enterprise

      - -
      -

      Modern enterprise products lists UI built with Vue.js.

      -
      - Vue.jsVuetifyVitePinia -
      -       - -
      -

      Chai Makers Café

      - -
      -

      Component-driven web app featuring routing and dynamic menus.

      -
      - AngularRxJSServices -
      -       -
      - -

      - Backend & Enterprise Systems -

      -

      - I have also worked on Microservices architecture and Docker for containerization. I have experience with - AWS for cloud deployment and services. -

      -
      -
      -

      PTC Windchill (Java Product)

      -

      Customised Java Client for PTC Windchill PDMLink as Shadow Resource.

      -

      Oracle SQL Developer, JSOUP, XML

      -
      -
      -

      Parking System (POC)

      -

      Scalable architecture using REST API, Microservices, and Docker.

      -

      Docker + Swagger-UI, Postman.

      -
      -
      -

      Data Streaming Data Streaming & Fleet Management (POC)

      -

      Real-Time Data Processing with Spring Boot, Kafka, Spark, and Docker.

      -
      -
      -

      Health Care Center Management

      -

      Enterprise system built on Core Java, Spring Framework, Hibernate, JSP and Oracle.

      -
      -
      -

      Consultant ROI

      -

      Core Java, JDBC, DAO Design Pattern, Struts 2.0 Framework and Oracle.

      -
      -
      -

      E-commerce Backend-Best Practices

      -

      REST API backend utilizing Java, Spring Boot, Hibernate, Maven, and MySQL.

      -
      -
      -

      Chat Application

      -

      Real-Time Chat implemented with Java WebSocket & Spring Boot.

      -
      -
      -

      Desktop Chat (LAN)

      -

      Java RMI, Stubs, Skeletons, and Swing Framework for desktop networks.

      -
      -
      -
      -

      - See more details for - - Java Development Services → - -

      -
      -
      -
      - - -
      -
      -

      Explore My Professional Details

      -

      - Dive deeper into case studies, architecture diagrams, and comprehensive project overviews.

      - - View Profile Overview - - -
      -
      - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/index.html b/index.html index 0c35efb..78001cb 100644 --- a/index.html +++ b/index.html @@ -1,908 +1,546 @@ - + - + + - + + + + + + Vimal Tech | Backend Development & Cloud Services - - - - - - Vimal Tech | Java Backend Developer | Spring Boot & Microservices - - - - - - - - + + + + + + - + - - - - - - + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - + + + + + + + + + + }, + { + "@type": "Question", + "name": "Do you provide post-deployment support?", + "acceptedAnswer": { + "@type": "Answer", + "text": "Yes, ongoing maintenance, optimization, and feature enhancements are available." + } + }, + { + "@type": "Question", + "name": "Can you work with existing codebases?", + "acceptedAnswer": { + "@type": "Answer", + "text": "Yes, existing systems can be extended, refactored, or optimized." + } + }, + { + "@type": "Question", + "name": "Do you help with MVP development?", + "acceptedAnswer": { + "@type": "Answer", + "text": "Yes, MVPs are built with scalable architecture to support future growth." + } + } + ] +} + - + - - + + + href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&display=swap" + rel="stylesheet"> + href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&display=swap" + rel="stylesheet"> - + - - - - - - + + + + + +
      - +
      -
      -
      -
      -

      - 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 +
      +
      +
      +

      Our Professional Services + Handling Virtual Infrastructure +

      +

      + Empowering startups and businesses as a + Software Architect, + build scalable, secure, and high-performance software systems — from + Backend Code to + DB with + Cloud-Ready — + DevOps Practices and + AI Integration using + Software Deployment Strategies. +

      +
      + Explore Services + View My Work +
      -
      -
      - - -
      -
      -
      -

      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. -

      + +
      +
      +

      Services We Offer

      +

      Explore our expertise to scale your projects efficiently.

      -
      -
      -

      Database Management

      -

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

      -
      -
      -
      -

      Cloud Integration

      -

      - Deploy and manage applications efficiently on AWS infrastructure. -

      + +
      +
      + +
      +

      Design and development of user-friendly interfaces and seamless user experiences using modern frameworks like React, Angular, and Vue.js.

      +
      +
      + +
      + +
      +

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

      +
      +
      + +
      + +
      +

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

      +
      +
      + +
      + +
      +

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

      +
      +
      + +
      + +
      +

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

      +
      +
      + +
      + +
      +

      AI-driven solutions for data analysis, predictive modeling, and intelligent automation.

      +
      +
      + +
      + +
      +

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

      +
      +
      + +
      + +
      +

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

      +
      +
      +
      -
      -
      -

      Project Consulting

      -

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

      +
      + +
      +
      +

      Why Work With Us

      +

      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
      +
      - -
      -
      -

      Live Works

      -

      - A selection of live frontend interfaces click to view -

      -
      -
      - - - - -
      -
      - -
      -
      - -
      -
      - Clinic Demo Website UI -
      +
      +

      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.

      - -
      -

      🏥 Smarter Healthcare

      -

      - ClinoraCare was founded with a singular mission: to eliminate - the friction between modern medical technology and - compassionate, human-centered patient care. -

      -
      - - → Live Site - -
      +
      + +

      API Development

      +

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

      -
      +
      + +

      Database Management

      +

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

      +
      +
      + +

      Cloud Integration

      +

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

      +
      +
      +
      + +
      +
      +

      Our Working Process

      +

      A structured approach to bringing your vision to life.

      - -
      -
      - -
      -
      - Foodaholic Bistro Demo UI -
      +
      +
      +
      1
      +

      Requirement Discussion

      +

      Understand business & technical goals

      - -
      -

      🍽 FOOD THAT HITS DIFFERENT.

      -

      - 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. -

      -
      - → Live Site -
      +
      +
      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

      -
      +
      - -
      -
      -
      -
      - Fitness Freak App -
      +
      +
      +

      Engagement Models

      +

      Flexible engagement options depending on your project needs.

      +
      + + -
      -
      - - - - Portfolio → - - - -
      - - - - - -
      -
      -

      LATEST BLOG POSTS

      - -

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

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

      Technical Journeys

      + +
      - - - - - -
      -
      -
      - - DATA STRUCTURES & ALGORITHMS - - -

      Data Structures & Algorithms

      +
      +
      + +
      +

      Frequently Asked Questions

      +
      +
      +

      How long does a project take?

      +

      Small projects usually take 2–4 weeks. Larger enterprise systems vary based on the specific scope and + integrations needed.

      - - - View All - -
      - -
      -
      Loading latest posts...
      -
      -
      -
      +
      +

      Do you provide post-deployment support?

      +

      Yes. I offer maintenance, performance optimization, and continuous feature enhancements to keep your + app running smoothly.

      +
      +
      +

      Can you work with existing codebases?

      +

      Absolutely. I can extend, refactor, or optimize existing legacy systems and migrate them to modern + architectures.

      +
      +
      +

      Do you help with MVP development?

      +

      Yes. I specialize in building MVPs with an underlying scalable architecture so you don't have to + rewrite everything when you grow.

      +
      +

    • - -
    -
    -

    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 - - -
    +
    +
    +

    Let’s Build Something Solid

    +

    Have an idea or an existing system that + needs improvement?

    + Get in Touch +
    @@ -910,12 +548,9 @@

    Thanks for visiting 👋

    - - + + @@ -923,17 +558,18 @@

    Thanks for visiting 👋

    - - - + + + - - + + + \ No newline at end of file diff --git a/portfolio/index.html b/portfolio/index.html index 67788ab..a4923c6 100644 --- a/portfolio/index.html +++ b/portfolio/index.html @@ -22,11 +22,11 @@ Vimal Tech | Portfolio & Case Studies diff --git a/services/index.html b/services/index.html deleted file mode 100644 index 10eba6c..0000000 --- a/services/index.html +++ /dev/null @@ -1,551 +0,0 @@ - - - - - - - - - - - - Vimal Tech | Backend Development & Cloud Services - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - -
    -
    -
    -
    -

    Our Professional Services - Handling Virtual Infrastructure -

    -

    - Empowering startups and businesses as a - Software Architect, - build scalable, secure, and high-performance software systems — from - backend architecture to - cloud-ready with - Software Deployment Strategies. -

    -
    - Explore Services - View My Work -
    -
    -
    - - -
    -
    -

    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.

    -
    -
    - -
    - -
    -

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

    -
    -
    - -
    - -
    -

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

    -
    -
    - -
    - -
    -

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

    -
    -
    - -
    - -
    -

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

    -
    -
    - -
    - -
    -

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

    -
    -
    - -
    -
    - -
    -
    -

    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 - systems that are stable and easy to extend.

    -
    -
    - -

    API Development

    -

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

    -
    -
    - -

    Database Management

    -

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

    -
    -
    - -

    Cloud Integration

    -

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

    -
    -
    -
    - -
    -
    -

    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

    -

    Flexible engagement options depending on your project needs.

    -
    - - -
    - - -
    -
    -

    Live UI Frameworks

    -

    Check out some of the UI frameworks currently running in production.

    - -
    -
    - - - - -
    -

    Frequently Asked Questions

    -
    -
    -

    How long does a project take?

    -

    Small projects usually take 2–4 weeks. Larger enterprise systems vary based on the specific scope and - integrations needed.

    -
    -
    -

    Do you provide post-deployment support?

    -

    Yes. I offer maintenance, performance optimization, and continuous feature enhancements to keep your - app running smoothly.

    -
    -
    -

    Can you work with existing codebases?

    -

    Absolutely. I can extend, refactor, or optimize existing legacy systems and migrate them to modern - architectures.

    -
    -
    -

    Do you help with MVP development?

    -

    Yes. I specialize in building MVPs with an underlying scalable architecture so you don't have to - rewrite everything when you grow.

    -
    -
    -
    - -
    -
    -

    Let’s Build Something Solid

    -

    Have an idea or an existing system that - needs improvement?

    - Get in Touch -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index b8b1cdf..3c26e5f 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -2,22 +2,14 @@ - + https://vimaltech.dev/ - 2026-08-06 + 2026-10-05 weekly 1.0 - - - https://vimaltech.dev/services - 2026-08-06 - monthly - 0.9 - - https://vimaltech.dev/portfolio @@ -26,20 +18,12 @@ 0.9 - - - https://vimaltech.dev/expertise - 2026-08-06 - monthly - 0.8 - - https://vimaltech.dev/aboutUs 2026-08-06 yearly - 0.7 + 0.8 @@ -47,7 +31,7 @@ https://vimaltech.dev/contactUs 2026-08-06 yearly - 0.7 + 0.8