diff --git a/about.html b/about.html index 36e077a..380e2b7 100644 --- a/about.html +++ b/about.html @@ -115,15 +115,28 @@ +
-
- Home |  - Services |  - Expertise |  - Contact |  - About -
Vimal Patel +
diff --git a/contact.html b/contact.html index 1f201ec..60f46a0 100644 --- a/contact.html +++ b/contact.html @@ -115,15 +115,28 @@ +
-
- Home |  - Services |  - Expertise |  - Contact |  - About -
Vimal Patel +
diff --git a/css/contact.css b/css/contact.css index 3f75e53..73f34e8 100644 --- a/css/contact.css +++ b/css/contact.css @@ -25,6 +25,15 @@ body { height: 100%; } +/* Logo image */ +.logo { + height: 32px; + width: 32px; + object-fit: contain; + border-radius: 6px; + /* optional for a softer look */ +} + body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; @@ -46,7 +55,7 @@ body { .container { max-width: 1100px; - margin: 60px auto; + margin: 30px auto; padding: 0 20px; } @@ -530,4 +539,125 @@ section[aria-labelledby="contact-info-title"] .contact-item a:hover { #scrollTopBtn:active { transform: scale(.94); -} \ No newline at end of file +} + +/* ========================= + Responsive Navigation Bar +========================= */ + +.navbar { + position: sticky; + top: 0; + z-index: 1000; + margin-bottom: 24px; + backdrop-filter: blur(10px); +} + +.nav-inner { + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 18px; + border: 1px solid var(--border); + border-radius: var(--radius-xl); + background: linear-gradient(180deg, var(--panel), var(--panel-2)); + box-shadow: var(--shadow); +} + +.nav-brand { + font-weight: 700; + letter-spacing: .4px; + color: var(--brand); + text-decoration: none; + font-size: 25px; + line-height: 1.5; + font-family: var(--font-sans); + +} + +/* Desktop links */ +.nav-links { + display: flex; + gap: 22px; + list-style: none; + margin: 0; + padding: 0; +} + +.nav-links a { + text-decoration: none; + font-size: 14px; + color: var(--muted); + position: relative; +} + +.nav-links a:hover, +.nav-links a.active { + color: var(--text); +} + +.nav-links a.active::after { + content: ""; + position: absolute; + left: 0; + bottom: -6px; + width: 100%; + height: 2px; + background: linear-gradient(90deg, var(--brand), var(--ok)); + border-radius: 2px; +} + +/* Hamburger button */ +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: 0; + cursor: pointer; +} + +.nav-toggle span { + width: 22px; + height: 2px; + background: var(--text); + border-radius: 2px; + transition: transform .25s ease, opacity .25s ease; +} + +/* Mobile */ +@media (max-width: 760px) { + .nav-toggle { + display: flex; + } + + .nav-links { + position: absolute; + top: calc(100% + 10px); + left: 0; + right: 0; + flex-direction: column; + gap: 14px; + padding: 18px; + border-radius: var(--radius-lg); + border: 1px solid var(--border); + background: linear-gradient(180deg, var(--panel), var(--panel-2)); + box-shadow: var(--shadow); + display: none; + } + + .nav-links.open { + display: flex; + } +} + +/* Hamburger animation */ +.nav-toggle.open span:nth-child(1) { + transform: translateY(7px) rotate(45deg); +} +.nav-toggle.open span:nth-child(2) { + opacity: 0; +} +.nav-toggle.open span:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); +} diff --git a/css/services.css b/css/services.css index c2e29c0..e9da15f 100644 --- a/css/services.css +++ b/css/services.css @@ -56,7 +56,6 @@ body.dark canvas { filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.4)); } - .gradient-overlay { position: absolute; top: 0; @@ -70,7 +69,6 @@ body.dark canvas { opacity: 0.6; } - /* Animation Keyframes */ @keyframes waveMove { 0% { @@ -107,9 +105,25 @@ body.dark canvas { .hero-services p { font-size: 1.2rem; + margin: 1rem 0; opacity: 0.9; max-width: 650px; - margin: 0 auto; +} + +.hero-services .btn { + display: inline-block; + padding: 12px 25px; + border-radius: 30px; + background: #ff9800; + color: #fff; + text-decoration: none; + font-weight: bold; + transition: background 0.3s, transform 0.3s; +} + +.hero-services .btn:hover { + background: #e68900; + transform: translateY(-3px); } /* Responsive */ diff --git a/expertise.html b/expertise.html index 1d00878..0cfc1c6 100644 --- a/expertise.html +++ b/expertise.html @@ -66,7 +66,8 @@

Hello,
I'm Vimal

A Passionate Java Developer building scalable backend applications.

- Portfolio + Portfolio

+ Websites On Server
diff --git a/index.html b/index.html index 65d565e..a564750 100644 --- a/index.html +++ b/index.html @@ -73,7 +73,7 @@

Hello,
I'm Vimal

A Passionate Java Developer building scalable backend applications.

- View My Work + My Work
@@ -129,7 +129,7 @@

Project Consulting

Live Websites

- +
diff --git a/js/contact.js b/js/contact.js index 721c308..2e5d7b1 100644 --- a/js/contact.js +++ b/js/contact.js @@ -1,102 +1,126 @@ - // Year -document.getElementById('year').textContent = new Date().getFullYear(); +document.getElementById("year").textContent = new Date().getFullYear(); // Theme toggle with localStorage persistence const root = document.documentElement; -const themeToggle = document.getElementById('themeToggle'); -const sun = document.getElementById('sun'); -const moon = document.getElementById('moon'); +const themeToggle = document.getElementById("themeToggle"); +const sun = document.getElementById("sun"); +const moon = document.getElementById("moon"); const setTheme = (mode) => { - if (mode === 'light') { - root.classList.add('light'); - sun.style.display = 'none'; - moon.style.display = ''; - themeToggle.setAttribute('aria-pressed', 'true'); - } else { - root.classList.remove('light'); - sun.style.display = ''; - moon.style.display = 'none'; - themeToggle.setAttribute('aria-pressed', 'false'); - } - localStorage.setItem('prefers-theme', mode); + if (mode === "light") { + root.classList.add("light"); + sun.style.display = "none"; + moon.style.display = ""; + themeToggle.setAttribute("aria-pressed", "true"); + } else { + root.classList.remove("light"); + sun.style.display = ""; + moon.style.display = "none"; + themeToggle.setAttribute("aria-pressed", "false"); + } + localStorage.setItem("prefers-theme", mode); +}; + +const saved = localStorage.getItem("prefers-theme"); +if (saved) { + setTheme(saved); } - -const saved = localStorage.getItem('prefers-theme'); -if (saved) { setTheme(saved) } -themeToggle.addEventListener('click', () => { - const isLight = root.classList.contains('light'); - setTheme(isLight ? 'dark' : 'light'); +themeToggle.addEventListener("click", () => { + const isLight = root.classList.contains("light"); + setTheme(isLight ? "dark" : "light"); }); // Micro-interactions: gentle tilt on hover for cards -document.querySelectorAll('.card').forEach((card, i) => { - if (card.dataset.static === 'true') { return; } - card.style.setProperty('--delay', (i * 80) + 'ms'); - let rAF; - const onMove = (e) => { - const rect = card.getBoundingClientRect(); - const x = (e.clientX - rect.left) / rect.width - .5; - const y = (e.clientY - rect.top) / rect.height - .5; - cancelAnimationFrame(rAF); - rAF = requestAnimationFrame(() => { - card.style.transform = `rotateX(${-y * 3}deg) rotateY(${x * 3}deg) translateY(-3px)`; - }); - }; - const reset = () => { card.style.transform = '' }; - card.addEventListener('mousemove', onMove); - card.addEventListener('mouseleave', reset); +document.querySelectorAll(".card").forEach((card, i) => { + if (card.dataset.static === "true") { + return; + } + card.style.setProperty("--delay", i * 80 + "ms"); + let rAF; + const onMove = (e) => { + const rect = card.getBoundingClientRect(); + const x = (e.clientX - rect.left) / rect.width - 0.5; + const y = (e.clientY - rect.top) / rect.height - 0.5; + cancelAnimationFrame(rAF); + rAF = requestAnimationFrame(() => { + card.style.transform = `rotateX(${-y * 3}deg) rotateY(${ + x * 3 + }deg) translateY(-3px)`; + }); + }; + const reset = () => { + card.style.transform = ""; + }; + card.addEventListener("mousemove", onMove); + card.addEventListener("mouseleave", reset); }); // Reveal on scroll -const io = new IntersectionObserver((entries) => { - entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('in-view'); io.unobserve(entry.target); } }); -}, { threshold: .2 }); -document.querySelectorAll('.card').forEach(el => io.observe(el)); +const io = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("in-view"); + io.unobserve(entry.target); + } + }); + }, + { threshold: 0.2 } +); +document.querySelectorAll(".card").forEach((el) => io.observe(el)); /* ============================ Scroll-to-Top Button ============================ */ document.addEventListener("DOMContentLoaded", () => { - const scrollTopBtn = document.getElementById("scrollTopBtn"); + const scrollTopBtn = document.getElementById("scrollTopBtn"); - window.addEventListener("scroll", () => { - if (window.scrollY > 180) { - scrollTopBtn.classList.add("show"); - } else { - scrollTopBtn.classList.remove("show"); - } - }); - - scrollTopBtn.addEventListener("click", () => { - window.scrollTo({ top: 0, behavior: "smooth" }); - }); + window.addEventListener("scroll", () => { + if (window.scrollY > 180) { + scrollTopBtn.classList.add("show"); + } else { + scrollTopBtn.classList.remove("show"); + } + }); - function makeNoise() { - const el = document.querySelector('.noise'); - if (!el) return; + scrollTopBtn.addEventListener("click", () => { + window.scrollTo({ top: 0, behavior: "smooth" }); + }); - const size = 80; // texture tile size - const c = document.createElement('canvas'); - c.width = c.height = size; + function makeNoise() { + const el = document.querySelector(".noise"); + if (!el) return; - const ctx = c.getContext('2d', { willReadFrequently: false }); - const img = ctx.createImageData(size, size); - const data = img.data; + const size = 80; // texture tile size + const c = document.createElement("canvas"); + c.width = c.height = size; - // grayscale random pixels with low alpha - for (let i = 0; i < data.length; i += 4) { - const v = Math.random() * 255; - data[i] = data[i + 1] = data[i + 2] = v; // R,G,B - data[i + 3] = 12; // alpha (0–255) -> ~0.05 opacity per pixel - } - ctx.putImageData(img, 0, 0); + const ctx = c.getContext("2d", { willReadFrequently: false }); + const img = ctx.createImageData(size, size); + const data = img.data; - el.style.backgroundImage = `url(${c.toDataURL('image/png')})`; - el.style.backgroundRepeat = 'repeat'; - }; + // grayscale random pixels with low alpha + for (let i = 0; i < data.length; i += 4) { + const v = Math.random() * 255; + data[i] = data[i + 1] = data[i + 2] = v; // R,G,B + data[i + 3] = 12; // alpha (0–255) -> ~0.05 opacity per pixel + } + ctx.putImageData(img, 0, 0); + el.style.backgroundImage = `url(${c.toDataURL("image/png")})`; + el.style.backgroundRepeat = "repeat"; + } }); +/* ========================= + Mobile Navigation Toggle +========================= */ +const navToggle = document.getElementById("navToggle"); +const navMenu = document.getElementById("navMenu"); +navToggle.addEventListener("click", () => { + const isOpen = navMenu.classList.toggle("open"); + navToggle.classList.toggle("open", isOpen); + navToggle.setAttribute("aria-expanded", isOpen); +}); diff --git a/services.html b/services.html index 0a6d0a4..0d0df7b 100644 --- a/services.html +++ b/services.html @@ -72,6 +72,7 @@

Our Professional Services

Delivering scalable, secure, and modern efficient solutions for web, mobile, and enterprise systems.

+ My Work @@ -119,7 +120,7 @@

Security & Optimization

Live Websites

- +