From 2217cf5247fd6bc7ad96d97d18e3ea6de35f6967 Mon Sep 17 00:00:00 2001 From: vimal-java-dev Date: Fri, 26 Sep 2025 07:13:27 +0530 Subject: [PATCH 01/31] Nav bar and hamburger menu created Signed-off-by: vimal-java-dev Signed-off-by: vimal-tech-dev --- index.html | 35 ++-- main.css | 436 ++++++++++++++++++++++++++++++++++++++++++ script.js | 73 ++++--- whatsapp-floating.css | 34 +--- 4 files changed, 508 insertions(+), 70 deletions(-) create mode 100644 main.css diff --git a/index.html b/index.html index e97f48b..61b1aa9 100644 --- a/index.html +++ b/index.html @@ -4,34 +4,39 @@ - Vimal Tech | Java Developer - + Java Developer Portfolio + + + - + -
+
+ + + +
+
☰
+
+

Hello, I'm Vimal

-

A Passionate Java Developer building scalable backend applications

+

A Passionate Java Developer building scalable backend applications.

View My Work
diff --git a/main.css b/main.css new file mode 100644 index 0000000..2613633 --- /dev/null +++ b/main.css @@ -0,0 +1,436 @@ +/* =================================================== + ===== Global Styles ===== +=================================================== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +body { + background: #f4f4f4; + color: #333; + line-height: 1.6; + transition: background-color 0.6s ease, color 0.6s ease; + scroll-behavior: smooth; +} + +/* Headings */ +h1, +h2, +h3 { + font-weight: 600; + margin-bottom: 1rem; +} + +/* =================================================== + ===== Navbar ===== +=================================================== */ +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #333; + padding: 10px 20px; + color: white; + position: fixed; + width: 100%; + top: 0; + z-index: 1000; +} + +.logo { + font-size: 24px; + font-weight: bold; +} + +.nav-links { + list-style: none; + display: flex; + gap: 20px; +} + +.nav-links li a { + text-decoration: none; + color: white; + transition: color 0.3s; +} + +.nav-links li a:hover, +.nav-links li a.active { + color: #ff6347; +} + +/* Hamburger menu */ +.hamburger { + display: none; + font-size: 28px; + cursor: pointer; +} + +@media (max-width: 768px) { + .nav-links { + position: absolute; + top: 60px; + right: 0; + background-color: #333; + flex-direction: column; + width: 200px; + display: none; + padding: 10px; + border-radius: 5px; + } + + .nav-links li { + margin: 10px 0; + } + + .hamburger { + display: block; + } + + .nav-links.active { + display: flex; + } +} + +/* =================================================== + ===== Hero Section ===== +=================================================== */ +.hero { + background: url('https://source.unsplash.com/1600x800/?technology,programming') no-repeat center/cover; + height: 70vh; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + color: #fff; + position: relative; +} + +.hero::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.55); +} + +.hero-content { + position: relative; + z-index: 1; + max-width: 800px; + padding: 20px; +} + +.hero h1 { + font-size: 3rem; +} + +.hero p { + font-size: 1.2rem; + margin: 1rem 0; +} + +.hero .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 .btn:hover { + background: #e68900; + transform: translateY(-3px); +} + +/* =================================================== + ===== Containers & Animations ===== +=================================================== */ +.container { + width: 85%; + margin: auto; + padding: 3rem 0; +} + +/* Fade-in animation */ +.fade-in { + opacity: 0; + transform: translateY(30px); + animation: fadeInUp 1s forwards; +} + +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +/* =================================================== + ===== About Section ===== +=================================================== */ +#about { + background: #fff; + padding: 3rem 2rem; + border-radius: 12px; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); +} + +/* =================================================== + ===== Skills Section ===== +=================================================== */ +.skills-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 1.2rem; +} + +.skill-card { + background: #fff; + padding: 1.5rem; + text-align: center; + border-radius: 12px; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s, box-shadow 0.3s; +} + +.skill-card i { + font-size: 2rem; + margin-bottom: 10px; + color: #ff9800; +} + +.skill-card:hover { + transform: translateY(-6px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); +} + +/* =================================================== + ===== Projects Section ===== +=================================================== */ +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; +} + +.project-card { + background: #fff; + padding: 1.5rem; + border-radius: 12px; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s, box-shadow 0.3s; +} + +.project-card:hover { + transform: translateY(-6px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); +} + +/* =================================================== + ===== Contact Section ===== +=================================================== */ +#contact { + text-align: center; +} + +.contact-links a { + display: inline-block; + margin: 10px; + padding: 12px 20px; + background: #ff9800; + color: #fff; + border-radius: 30px; + text-decoration: none; + font-weight: 500; + transition: background 0.3s, transform 0.3s; +} + +.contact-links a:hover { + background: #e68900; + transform: translateY(-3px); +} + +/* =================================================== + ===== Footer ===== +=================================================== */ +footer { + text-align: center; + padding: 1.2rem; + background: #222; + color: #fff; + margin-top: 2rem; + font-size: 0.9rem; +} + +/* =================================================== + ===== Dark Mode ===== +=================================================== */ +body.dark { + background: #181818; + color: #e0e0e0; +} + +body.dark header.navbar { + background: #111; +} + +body.dark nav ul li a { + color: #e0e0e0; +} + +body.dark nav ul li a:hover { + color: #ff9800; +} + +body.dark #about, +body.dark .skill-card, +body.dark .project-card { + background: #242424; + color: #e0e0e0; +} + +body.dark footer { + background: #111; +} + +body.dark .hero::after { + background: rgba(0, 0, 0, 0.7); +} + +/* ===== Dark Mode Override ===== */ +body.dark #scrollTopBtn { + background-color: #ff9800; + color: #fff; +} + +body.dark #scrollTopBtn:hover { + background-color: #e68900; +} + +/* =================================================== + ===== Floating Dark Mode Toggle ===== +=================================================== */ +#darkModeToggle { + position: fixed; + bottom: 20px; + right: 20px; + width: 55px; + height: 55px; + border-radius: 50%; + border: none; + background: #ff9800; + color: #fff; + font-size: 22px; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + transition: background 0.3s, transform 0.3s; + z-index: 1000; +} + +#darkModeToggle:hover { + background: #e68900; + transform: rotate(20deg) scale(1.1); +} + +/* Tooltip */ +.tooltip .tooltiptext { + visibility: hidden; + width: 130px; + background: #333; + color: #fff; + text-align: center; + padding: 6px; + border-radius: 6px; + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -65px; + opacity: 0; + transition: opacity 0.4s; + font-size: 0.8rem; +} + +.tooltip .tooltiptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #333 transparent transparent transparent; +} + +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} + +/* ===== Scroll to Top Button ===== */ +#scrollTopBtn { + position: fixed; + bottom: 20px; + left: 20px; + z-index: 2000; + width: 50px; + height: 50px; + border: none; + outline: none; + background-color: #ff9800; + color: white; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 22px; + box-shadow: 0 0 8px rgba(255, 152, 0, 0.5); + transition: opacity 0.4s, transform 0.3s, background 0.3s, box-shadow 0.3s; + opacity: 0; + pointer-events: none; + animation: pulse 2s infinite ease-in-out; +} + +/* Show when scrolling (with pulse glow) */ +#scrollTopBtn.show { + opacity: 1; + pointer-events: auto; + animation: pulse 2s infinite ease-in-out; +} + +/* Stop pulse on hover and add stronger glow */ +#scrollTopBtn:hover { + background-color: #e68900; + transform: scale(1.1); + animation: none; + /* stop pulsing */ + box-shadow: 0 0 18px rgba(255, 152, 0, 0.8); +} + +/* Pulse animation */ +@keyframes pulse { + 0% { + transform: scale(1); + box-shadow: 0 0 8px rgba(255, 152, 0, 0.4); + } + + 50% { + transform: scale(1.1); + box-shadow: 0 0 16px rgba(255, 152, 0, 0.6); + } + + 100% { + transform: scale(1); + box-shadow: 0 0 8px rgba(255, 152, 0, 0.4); + } +} \ No newline at end of file diff --git a/script.js b/script.js index 871518d..f21c1b1 100644 --- a/script.js +++ b/script.js @@ -1,16 +1,16 @@ -// JavaScript for Dark Mode +/* ===== Dark Mode Toggle ===== */ const toggleBtn = document.getElementById("darkModeToggle"); const body = document.body; -// Load saved theme from localStorage if (localStorage.getItem("theme") === "dark") { body.classList.add("dark"); toggleBtn.textContent = "☀️"; +} else { + toggleBtn.textContent = "🌙"; } toggleBtn.addEventListener("click", () => { body.classList.toggle("dark"); - if (body.classList.contains("dark")) { toggleBtn.textContent = "☀️"; localStorage.setItem("theme", "dark"); @@ -20,30 +20,7 @@ toggleBtn.addEventListener("click", () => { } }); -// ScrollSpy for active nav link -const sections = document.querySelectorAll("section"); -const navLinks = document.querySelectorAll("nav ul li a"); - -window.addEventListener("scroll", () => { - let current = ""; - - sections.forEach(section => { - const sectionTop = section.offsetTop - 100; // offset for header - const sectionHeight = section.clientHeight; - if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) { - current = section.getAttribute("id"); - } - }); - - navLinks.forEach(link => { - link.classList.remove("active"); - if (link.getAttribute("href") === `#${current}`) { - link.classList.add("active"); - } - }); -}); - -// Scroll-to-Top Button +/* ===== Scroll-to-Top Button ===== */ const scrollTopBtn = document.getElementById("scrollTopBtn"); window.addEventListener("scroll", () => { @@ -55,8 +32,44 @@ window.addEventListener("scroll", () => { }); scrollTopBtn.addEventListener("click", () => { - window.scrollTo({ - top: 0, - behavior: "smooth" + window.scrollTo({ top: 0, behavior: "smooth" }); +}); + +/* ===== Hamburger Menu & ScrollSpy ===== */ +document.addEventListener("DOMContentLoaded", () => { + const hamburger = document.getElementById('hamburger'); + const navLinks = document.getElementById('nav-links'); + const navItems = document.querySelectorAll("nav ul li a"); + const sections = document.querySelectorAll("section"); + + hamburger.addEventListener('click', () => { + navLinks.classList.toggle('active'); + }); + + navItems.forEach(link => { + link.addEventListener('click', () => { + if (navLinks.classList.contains('active')) { + navLinks.classList.remove('active'); + } + }); + }); + + 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 => { + link.classList.remove("active"); + if (link.getAttribute("href") === `#${current}`) { + link.classList.add("active"); + } + }); }); }); \ No newline at end of file diff --git a/whatsapp-floating.css b/whatsapp-floating.css index 89c89de..8dfed0a 100644 --- a/whatsapp-floating.css +++ b/whatsapp-floating.css @@ -1,8 +1,7 @@ -/* ===== Floating WhatsApp Button ===== */ +/* ===== WhatsApp Button ===== */ .whatsapp-float { position: fixed; - bottom: 100px; - /* slightly higher to avoid overlap */ + bottom: 90px; right: 20px; z-index: 1000; background-color: #25d366; @@ -19,7 +18,13 @@ animation: pulseWhatsApp 2.5s infinite ease-in-out; } -/* Pulse animation for WhatsApp */ +.whatsapp-float:hover { + transform: scale(1.15); + background-color: #1ebe57; + box-shadow: 0 0 20px rgba(37, 211, 102, 1); + animation: none; +} + @keyframes pulseWhatsApp { 0% { transform: scale(1); @@ -35,25 +40,4 @@ transform: scale(1); box-shadow: 0 0 8px rgba(37, 211, 102, 0.5); } -} - -/* Hover effect */ -.whatsapp-float:hover { - transform: scale(1.15); - background-color: #1ebe57; - box-shadow: 0 0 20px rgba(37, 211, 102, 1); - animation: none; - /* stop pulsing on hover */ -} - -/* ===== Responsive Adjustments ===== */ -@media (max-width: 600px) { - .whatsapp-float { - width: 50px; - height: 50px; - font-size: 24px; - bottom: 90px; - /* slightly higher on mobile */ - right: 15px; - } } \ No newline at end of file From a4d71ee845c94d41dcd47988711575054468b774 Mon Sep 17 00:00:00 2001 From: vimal-java-dev Date: Sat, 27 Sep 2025 07:38:49 +0530 Subject: [PATCH 02/31] Skill added and linked remove to put in another page Signed-off-by: vimal-java-dev Signed-off-by: vimal-tech-dev --- .vscode/settings.json | 3 ++ index.html | 65 +++++++++++++++++++++++++++++++++++++------ 2 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 61b1aa9..d04da1e 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,21 @@ +