From 3845528cee0892daf8a2a3517d77b0dc4416279c Mon Sep 17 00:00:00 2001 From: Muskankr Date: Sat, 16 May 2026 00:34:39 +0530 Subject: [PATCH 1/5] fix(navbar): improve responsive navigation layout --- revati-kadam-portfolio/css/style.css | 223 ++++++++++++++++++++++++ revati-kadam-portfolio/js/navigation.js | 5 + 2 files changed, 228 insertions(+) diff --git a/revati-kadam-portfolio/css/style.css b/revati-kadam-portfolio/css/style.css index 5b8d5d3..393e2a3 100644 --- a/revati-kadam-portfolio/css/style.css +++ b/revati-kadam-portfolio/css/style.css @@ -44,6 +44,103 @@ body { transform: translateX(5px); } +/* ================= NAVBAR ================= */ + +.navbar { + width: 100%; + padding: 18px 40px; + display: flex; + justify-content: space-between; + align-items: center; + + background: rgba(15, 23, 42, 0.85); + backdrop-filter: blur(10px); + + position: sticky; + top: 0; + z-index: 1000; + + border-bottom: 1px solid rgba(255,255,255,0.08); +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary); +} + +/* Desktop Navigation */ + +.nav-links { + display: flex; + align-items: center; + gap: 28px; + + list-style: none; +} + +.nav-links li { + cursor: pointer; + font-weight: 500; + transition: 0.3s ease; + + padding: 6px 10px; + border-radius: 8px; +} + +.nav-links li:hover { + color: var(--primary); + background: rgba(255,255,255,0.05); +} + +/* Hamburger Hidden on Desktop */ + +.hamburger { + display: none; + font-size: 2rem; + cursor: pointer; +} + +/* ================= MOBILE NAVBAR ================= */ + +@media (max-width: 768px) { + + .navbar { + padding: 16px 20px; + } + + .hamburger { + display: block; + } + + .nav-links { + position: absolute; + top: 75px; + right: 20px; + + width: 220px; + + flex-direction: column; + align-items: flex-start; + + padding: 20px; + + gap: 18px; + + background: rgba(15, 23, 42, 0.95); + + border-radius: 16px; + + box-shadow: 0 10px 25px rgba(0,0,0,0.35); + + display: none; + } + + .nav-links.active { + display: flex; + } +} + /* ================= SOCIAL ================= */ .social { position: absolute; @@ -488,3 +585,129 @@ form button:hover { } } + +/* ================= NAVBAR ================= */ + +.navbar { + width: 100%; + padding: 18px 40px; + display: flex; + justify-content: space-between; + align-items: center; + + background: rgba(15, 23, 42, 0.85); + backdrop-filter: blur(10px); + + position: sticky; + top: 0; + z-index: 1000; + + border-bottom: 1px solid rgba(255,255,255,0.08); +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary); +} + +/* Desktop Navigation */ + +.nav-links { + display: flex; + align-items: center; + gap: 28px; + + list-style: none; +} + +.nav-links li { + cursor: pointer; + font-weight: 500; + transition: all 0.3s ease; + + padding: 6px 10px; + border-radius: 8px; +} + +.nav-links li:hover { + color: #3b82f6; + background: rgba(255,255,255,0.05); + transform: translateY(-2px); +} + +/* Hamburger Hidden on Desktop */ + +.hamburger { + display: none; + font-size: 2rem; + cursor: pointer; +} + +/* ================= MOBILE NAVBAR ================= */ + +@media (max-width: 768px) { + + .navbar { + padding: 20px 40px; + } + + .hamburger { + display: block; + } + + .nav-links { + position: absolute; + top: 75px; + right: 20px; + + width: 220px; + + flex-direction: column; + align-items: flex-start; + + padding: 20px; + + gap: 30px; + + background: rgba(15, 23, 42, 0.95); + + border-radius: 16px; + + box-shadow: 0 10px 25px rgba(0,0,0,0.35); + + display: none; + } + + .nav-links.active { + display: flex; + } +} + +/* ===== FORCE HORIZONTAL NAVBAR ON DESKTOP ===== */ + +@media screen and (min-width: 769px) { + + .nav-links { + display: flex !important; + flex-direction: row !important; + align-items: center; + justify-content: center; + gap: 24px; + + position: static !important; + width: auto !important; + background: transparent !important; + + padding: 0 !important; + margin: 0 !important; + } + + .nav-links li { + display: inline-block; + } + + .hamburger { + display: none !important; + } +} diff --git a/revati-kadam-portfolio/js/navigation.js b/revati-kadam-portfolio/js/navigation.js index 0dbcc09..c75ff6a 100644 --- a/revati-kadam-portfolio/js/navigation.js +++ b/revati-kadam-portfolio/js/navigation.js @@ -4,4 +4,9 @@ function showSection(id) { }); document.getElementById(id).classList.add("active"); +} + +function toggleNavbar() { + const navLinks = document.getElementById("navLinks"); + navLinks.classList.toggle("active"); } \ No newline at end of file From b822cf66ad8a1da6c1c6f48916fc3fe666480f66 Mon Sep 17 00:00:00 2001 From: Muskankr Date: Sat, 16 May 2026 17:47:48 +0530 Subject: [PATCH 2/5] fix: blank screen problem --- revati-kadam-portfolio/js/script.js | 90 +++++++++++++++++------------ 1 file changed, 52 insertions(+), 38 deletions(-) diff --git a/revati-kadam-portfolio/js/script.js b/revati-kadam-portfolio/js/script.js index f55d9d8..a08ca91 100644 --- a/revati-kadam-portfolio/js/script.js +++ b/revati-kadam-portfolio/js/script.js @@ -12,7 +12,11 @@ function type(){ let text=roles[i]; j=del?j-1:j+1; - document.getElementById("typing").innerText=text.substring(0,j); +const typingEl = document.getElementById("typing"); + +if (typingEl) { + typingEl.innerText = text.substring(0, j); +} if(!del && j===text.length){ del=true; @@ -52,8 +56,9 @@ function toggleSettings(){ } document.addEventListener("click", function(e){ - const settings=document.querySelector(".settings"); - if(!settings.contains(e.target)){ + const settings = document.querySelector(".settings"); + if (!settings) return; + if (!settings.contains(e.target)) { document.getElementById("settingsMenu").classList.remove("show"); } }); @@ -68,6 +73,24 @@ document.addEventListener("mousemove", e=>{ setTimeout(()=>s.remove(),100); }); +const skillIcons = { + "React": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", + "Node.js": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", + "MongoDB": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", + "JavaScript": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg", + "HTML": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg", + "CSS": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg", + "Java": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", + "Express.js": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg", + "Bootstrap": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg", + "Tailwind CSS": "https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg", + "SQL": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg", + "Object-Oriented Programming": "https://img.icons8.com/ios-filled/50/code.png", + "Operating Systems": "https://img.icons8.com/ios-filled/50/windows-10.png", + "Database Management Systems": "https://img.icons8.com/ios-filled/50/database.png", + "Computer Networks": "https://img.icons8.com/ios-filled/50/network.png" +}; + // Skills fetch("data/skills.json") .then(res => res.json()) @@ -87,49 +110,40 @@ fetch("data/skills.json") container.appendChild(card); }); }); -const skillIcons = { - "React": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", - "Node.js": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", - "MongoDB": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", - "JavaScript": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg", - "HTML": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg", - "CSS": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg", - "Java": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", - "Express.js": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg", - "Bootstrap": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg", - "Tailwind CSS": "https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg", - "SQL": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg", - "Object-Oriented Programming": "https://img.icons8.com/ios-filled/50/code.png", - "Operating Systems": "https://img.icons8.com/ios-filled/50/windows-10.png", - "Database Management Systems": "https://img.icons8.com/ios-filled/50/database.png", - "Computer Networks": "https://img.icons8.com/ios-filled/50/network.png" -}; + // Projects fetch("data/projects.json") -.then(res => res.json()) -.then(data => { - const c = document.getElementById("projects-container"); + .then(res => res.json()) + .then(data => { - c.innerHTML = ""; // clear first + if (!Array.isArray(data)) { + console.error("Projects data is not an array:", data); + return; + } - data.forEach(p => { - let d = document.createElement("div"); + const c = document.getElementById("projects-container"); - d.innerHTML = ` -

${p.name}

- -
- Live | - GitHub - `; + c.innerHTML = ""; - c.appendChild(d); + data.forEach(p => { + let d = document.createElement("div"); + + d.innerHTML = ` +

${p.name || "Untitled Project"}

+ +
+ Live | + GitHub + `; + + c.appendChild(d); + }); + + }) + .catch(err => { + document.getElementById("projects-container").innerHTML = "Error loading projects"; }); -}) -.catch(err => { - document.getElementById("projects-container").innerHTML = "Error loading projects"; -}); // Initialize EmailJS (function(){ From d4884e5c69a64b15a3ffac6103e46501a220dacf Mon Sep 17 00:00:00 2001 From: Muskankr Date: Sat, 16 May 2026 22:31:42 +0530 Subject: [PATCH 3/5] fix:text and animation problem --- revati-kadam-portfolio/css/style.css | 1175 ++++++----------------- revati-kadam-portfolio/index.html | 178 ++-- revati-kadam-portfolio/js/navigation.js | 8 +- revati-kadam-portfolio/js/script.js | 190 ++-- 4 files changed, 446 insertions(+), 1105 deletions(-) diff --git a/revati-kadam-portfolio/css/style.css b/revati-kadam-portfolio/css/style.css index 25402bc..8907014 100644 --- a/revati-kadam-portfolio/css/style.css +++ b/revati-kadam-portfolio/css/style.css @@ -1,1052 +1,472 @@ -/* ================= CSS VARIABLES ================= */ :root { --bg: #0f172a; - --text: #e2e8f0; + --text: #fff; --primary: #3b82f6; --card: #1e293b; - --section-alt: #0d1b2e; - --border: rgba(255,255,255,0.08); - --shadow: rgba(0,0,0,0.4); - --text-muted-1: rgba(226,232,240,0.7); - --text-muted-2: rgba(226,232,240,0.6); - --text-muted-3: rgba(226,232,240,0.55); - --text-muted-4: rgba(226,232,240,0.45); + --sidebar: #020617; } -*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -html { scroll-behavior: smooth; } - +/* ================= GLOBAL ================= */ body { + margin: 0; font-family: 'Segoe UI', sans-serif; - background: var(--bg); + background: linear-gradient(135deg, var(--bg), #020617); color: var(--text); - line-height: 1.7; - overflow-x: hidden; -} - -/* ── SCROLL PROGRESS ── */ -#scroll-progress { - position: fixed; - top: 0; left: 0; - height: 3px; - width: 0%; - background: var(--primary); - z-index: 9999; - transition: width 0.1s linear; - border-radius: 0 2px 2px 0; + scroll-behavior: smooth; } -/* ── NAVBAR ── */ -.navbar { +/* ================= SIDEBAR ================= */ +.sidebar { + width: 250px; + height: 100vh; + background: rgba(15, 23, 42, 0.7); + backdrop-filter: blur(10px); + padding: 20px; position: fixed; - top: 0; left: 0; - width: 100%; - height: 64px; - background: rgba(10, 17, 32, 0.9); - backdrop-filter: blur(14px); - border-bottom: 1px solid var(--border); - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 40px; - z-index: 1000; + border-right: 1px solid rgba(255,255,255,0.1); } -.logo { - font-size: 20px; - font-weight: 700; +.sidebar h2 { color: var(--primary); } -.hamburger { - font-size: 26px; - cursor: pointer; - color: var(--text); - display: none; - transition: color 0.2s; -} -.hamburger:hover { color: var(--primary); } - -.nav-links { +.sidebar li { list-style: none; - display: flex; - flex-direction: row; - gap: 4px; - padding: 0; - margin: 0; -} - -.nav-links li { + padding: 10px; cursor: pointer; - color: var(--text); - font-size: 15px; - padding: 7px 16px; border-radius: 8px; - transition: background 0.2s, color 0.2s; - white-space: nowrap; -} -.nav-links li a { - color: var(--text); - text-decoration: none; - display: block; - width: 100%; - height: 100%; -} -.nav-links li:hover, -.nav-links li:hover a { - background: var(--primary); - color: #fff; -} - -/* ── SECTION BASE ── */ -.section { - padding: 100px 80px; - opacity: 0; - transform: translateY(30px); - transition: opacity 0.6s ease, transform 0.6s ease; -} - -.section.section-visible { - opacity: 1; - transform: translateY(0); -} - -.section:nth-child(even) { background: var(--section-alt); } - -.section h2 { - font-size: clamp(26px, 3vw, 36px); - font-weight: 700; - color: var(--text); - margin-bottom: 48px; - position: relative; - display: inline-block; + transition: 0.3s; } -.section h2::after { - content: ""; - position: absolute; - bottom: -8px; left: 0; - width: 50px; height: 3px; +.sidebar li:hover { background: var(--primary); - border-radius: 2px; -} - -/* ================= NAVBAR ================= */ - -.navbar { - width: 100%; - padding: 18px 40px; - display: flex; - justify-content: space-between; - align-items: center; - - background: rgba(15, 23, 42, 0.85); - backdrop-filter: blur(10px); - - position: sticky; - top: 0; - z-index: 1000; - - border-bottom: 1px solid rgba(255,255,255,0.08); -} - -.logo { - font-size: 1.5rem; - font-weight: 700; - color: var(--primary); -} - -/* Desktop Navigation */ - -.nav-links { - display: flex; - align-items: center; - gap: 28px; - - list-style: none; -} - -.nav-links li { - cursor: pointer; - font-weight: 500; - transition: 0.3s ease; - - padding: 6px 10px; - border-radius: 8px; -} - -.nav-links li:hover { - color: var(--primary); - background: rgba(255,255,255,0.05); -} - -/* Hamburger Hidden on Desktop */ - -.hamburger { - display: none; - font-size: 2rem; - cursor: pointer; -} - -/* ================= MOBILE NAVBAR ================= */ - -@media (max-width: 768px) { - - .navbar { - padding: 16px 20px; - } - - .hamburger { - display: block; - } - - .nav-links { - position: absolute; - top: 75px; - right: 20px; - - width: 220px; - - flex-direction: column; - align-items: flex-start; - - padding: 20px; - - gap: 18px; - - background: rgba(15, 23, 42, 0.95); - - border-radius: 16px; - - box-shadow: 0 10px 25px rgba(0,0,0,0.35); - - display: none; - } - - .nav-links.active { - display: flex; - } + color: white; + transform: translateX(5px); } /* ================= SOCIAL ================= */ .social { -/* ── HERO ── */ -#home { - min-height: 100vh; - display: flex; - align-items: center; - padding: 100px 80px 60px; - background: linear-gradient(135deg, var(--bg) 0%, var(--section-alt) 60%, var(--bg) 100%); - position: relative; - overflow: hidden; -} - -#home::before { - content: ""; position: absolute; - inset: 0; - background-image: - linear-gradient(var(--border) 1px, transparent 1px), - linear-gradient(90deg, var(--border) 1px, transparent 1px); - background-size: 60px 60px; - opacity: 0.4; - pointer-events: none; + bottom: 60px; } -.hero-content { +.social a { display: flex; align-items: center; - justify-content: space-between; - gap: 48px; - width: 100%; - position: relative; - z-index: 1; -} - -.hero-text { flex: 1; } - -.hello-tag { - color: var(--primary); - font-size: 13px; - font-weight: 600; - letter-spacing: 3px; - text-transform: uppercase; - margin-bottom: 16px; -} - -.hero-text h1 { - font-size: clamp(36px, 5vw, 60px); - font-weight: 800; - color: var(--text); - line-height: 1.1; - margin-bottom: 16px; -} - -.hero-text h2 { - font-size: clamp(20px, 2.5vw, 28px); - font-weight: 400; + gap: 10px; color: var(--text); - margin-bottom: 20px; -} - -/* remove underline bar on hero h2 */ -.hero-text h2::after { display: none; } - -#typing { - color: var(--primary); - font-weight: 600; - border-right: 2px solid var(--primary); - padding-right: 4px; - animation: blink 0.75s step-end infinite; -} - -@keyframes blink { 50% { border-color: transparent; } } - -.hero-desc { - font-size: 15px; - color: var(--text-muted-3); - max-width: 420px; - line-height: 1.8; - margin-bottom: 32px; -} - -.hero-btns { - display: flex; - gap: 14px; - flex-wrap: wrap; - margin-bottom: 32px; -} - -.btn-primary { - background: var(--primary); - color: #fff; - padding: 12px 28px; - border-radius: 8px; text-decoration: none; - font-weight: 600; - font-size: 15px; - transition: 0.3s; - box-shadow: 0 4px 15px rgba(59,130,246,0.35); -} - -.btn-primary:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(59,130,246,0.5); -} - -.btn-outline { - background: transparent; - color: var(--primary); - border: 1.5px solid var(--primary); - padding: 11px 28px; - border-radius: 8px; - text-decoration: none; - font-weight: 600; - font-size: 15px; - transition: 0.3s; -} - -.btn-outline:hover { - background: var(--primary); - color: #fff; - transform: translateY(-2px); -} - -.hero-social { - display: flex; - gap: 14px; -} - -.hero-social a { - width: 42px; height: 42px; - border-radius: 50%; - border: 1px solid var(--border); - background: var(--card); - display: flex; - align-items: center; - justify-content: center; - transition: 0.3s; -} - -.hero-social a:hover { - background: var(--primary); - border-color: var(--primary); - transform: translateY(-3px); -} - -.hero-social img { - width: 20px; height: 20px; - filter: brightness(10); -} - -.hero-image { flex-shrink: 0; } - -.hero-img-circle { - width: 220px; height: 220px; - border-radius: 50%; - background: linear-gradient(135deg, #1e3a5f, #2563eb); - border: 4px solid rgba(59,130,246,0.5); - display: flex; - align-items: center; - justify-content: center; - font-size: 52px; - font-weight: 700; - color: #fff; - letter-spacing: 2px; - box-shadow: 0 0 60px rgba(59,130,246,0.25), 0 0 0 8px rgba(59,130,246,0.08); - overflow: hidden; -} - -.hero-img-circle img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 50%; - display: block; + margin: 5px 0; } -/* ── ABOUT ── */ -.about-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 60px; - align-items: start; -} - -.about-left p { - font-size: 15px; - color: var(--text-muted-1); - line-height: 1.9; - margin-bottom: 24px; - max-width: 520px; +.social img { + width: 20px; } -.about-tags { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-bottom: 28px; +/* ================= MAIN ================= */ +.main { + + padding: 100px 60px 40px; } -.about-tag { - background: rgba(59,130,246,0.12); - color: var(--primary); - font-size: 13px; - padding: 6px 14px; - border-radius: 20px; - border: 1px solid rgba(59,130,246,0.25); +/* ================= HEADINGS ================= */ +.section h2 { + font-size: 28px; + position: relative; + margin-bottom: 20px; } -.resume-btn { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 12px 28px; +.section h2::after { + content: ""; + width: 60px; + height: 3px; background: var(--primary); - color: #fff; - text-decoration: none; - border-radius: 8px; - font-weight: 600; - font-size: 15px; - transition: 0.3s; - box-shadow: 0 4px 15px rgba(59,130,246,0.35); -} - -.resume-btn:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(59,130,246,0.5); -} - -.about-right { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 16px; -} - -.stat-card { - background: var(--card); - border: 1px solid var(--border); - border-radius: 14px; - padding: 24px 16px; - text-align: center; - transition: 0.3s; -} - -.stat-card:hover { - border-color: var(--primary); - transform: translateY(-4px); + position: absolute; + bottom: -5px; + left: 0; } -.stat-num { - font-size: 32px; - font-weight: 700; +h2, #typing, a { color: var(--primary); } -.stat-lbl { - font-size: 13px; - color: var(--text-muted-4); - margin-top: 6px; -} - -/* ── SKILLS ── */ +/* ================= SKILLS ================= */ #skills-container { display: grid; - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; + margin-top: 20px; } .skill-card { - aspect-ratio: 1; - background: var(--card); - border: 1px solid var(--border); - border-radius: 16px; + width: 120px; + height: 120px; + background: rgba(30, 41, 59, 0.7); + backdrop-filter: blur(10px); + border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 10px; + transition: 0.3s; cursor: pointer; - transition: transform 0.3s, box-shadow 0.3s, background 0.3s; + border: 1px solid rgba(255,255,255,0.1); } .skill-card img { - width: 40px; height: 40px; - object-fit: contain; + width: 40px; + height: 40px; + margin-bottom: 10px; } .skill-card p { - font-size: 12px; - color: var(--text); - text-align: center; + font-size: 14px; margin: 0; - padding: 0 6px; -} - -.skill-card:hover { - transform: translateY(-6px) scale(1.05); - background: var(--primary); - border-color: var(--primary); - box-shadow: 0 12px 30px rgba(59,130,246,0.35); -} - -.skill-card:hover p { color: #fff; } - -/* ── PROJECTS ── */ -#projects-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 28px; -} - -.project-card { - background: var(--card); - border: 1px solid var(--border); - border-radius: 16px; - overflow: hidden; - display: flex; - flex-direction: column; - transition: transform 0.3s, box-shadow 0.3s; -} - -.project-card:hover { - transform: translateY(-6px); - box-shadow: 0 16px 40px var(--shadow); - border-color: rgba(59,130,246,0.3); -} - -.project-thumb { - width: 100%; - height: 180px; - background: var(--section-alt); - overflow: hidden; - border-bottom: 1px solid var(--border); -} - -.project-thumb img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} - -.project-info { - padding: 18px; - display: flex; - flex-direction: column; - flex: 1; -} - -.project-info h3 { - font-size: 17px; - font-weight: 600; color: var(--text); - margin-bottom: 8px; } -.project-info p { - font-size: 13px; - color: var(--text-muted-3); - line-height: 1.7; - margin-bottom: 14px; - flex: 1; -} - -.tech-tags { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-bottom: 16px; -} - -.tech-tag { - background: rgba(59,130,246,0.12); - color: var(--primary); - font-size: 12px; - padding: 4px 10px; - border-radius: 20px; - border: 1px solid rgba(59,130,246,0.2); -} - -.project-links { - display: flex; - gap: 10px; -} - -.project-links a { - padding: 8px 18px; - border-radius: 6px; - font-size: 13px; - font-weight: 600; - text-decoration: none; - transition: 0.2s; -} - -.project-links a:first-child { +.skill-card:hover { + transform: translateY(-5px) scale(1.05); + box-shadow: 0 10px 25px rgba(0,0,0,0.4); background: var(--primary); - color: #fff; -} - -.project-links a:last-child { - background: transparent; - border: 1px solid var(--border); - color: var(--text); -} - -.project-links a:hover { - opacity: 0.85; - transform: translateY(-1px); -} - -/* ── CONTACT ── */ -#contact { - background: linear-gradient(135deg, var(--bg), var(--section-alt)); -} - -.contact-grid { - display: grid; - grid-template-columns: 1fr 1.5fr; - gap: 60px; - align-items: start; } -.contact-info p { - font-size: 15px; - color: var(--text-muted-2); - line-height: 1.8; - margin-bottom: 28px; +.skill-card:hover p { + color: white; } -.contact-links { - display: flex; - flex-direction: column; - gap: 12px; +/* ================= PROJECTS ================= */ +#projects-container div { + background: rgba(30, 41, 59, 0.7); + backdrop-filter: blur(10px); + padding: 15px; + margin: 15px 0; + border-radius: 12px; + transition: 0.3s; + border: 1px solid rgba(255,255,255,0.1); } -.contact-links a { - color: var(--primary); - text-decoration: none; - font-size: 15px; - font-weight: 500; - transition: 0.2s; +#projects-container div:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(0,0,0,0.5); } -.contact-links a:hover { opacity: 0.75; } - -#contact-form { - display: flex; - flex-direction: column; - gap: 14px; -} - -form input, -form textarea { +/* ================= CONTACT FORM ================= */ +form input, form textarea { width: 100%; - padding: 14px 16px; - border-radius: 10px; - border: 1px solid var(--border); + padding: 12px; + margin: 10px 0; + border-radius: 8px; + border: none; outline: none; - background: var(--card); + background: rgba(30, 41, 59, 0.7); color: var(--text); - font-size: 15px; - font-family: inherit; - transition: border 0.2s; } -form textarea { - min-height: 140px; - resize: vertical; -} - -form input:focus, -form textarea:focus { - border-color: var(--primary); - box-shadow: 0 0 0 3px rgba(59,130,246,0.15); +form input:focus, form textarea:focus { + border: 1px solid var(--primary); } form button { - padding: 14px; + width: 100%; + padding: 12px; background: var(--primary); border: none; - border-radius: 10px; + border-radius: 8px; color: white; - font-size: 16px; - font-weight: 600; - cursor: pointer; transition: 0.3s; - box-shadow: 0 4px 15px rgba(59,130,246,0.35); } form button:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(59,130,246,0.5); -} - -form button:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; + transform: scale(1.03); } -/* ── SETTINGS ── */ +/* ================= SETTINGS BUTTON ================= */ .settings { position: fixed; - bottom: 25px; right: 25px; + bottom: 25px; + right: 25px; cursor: pointer; - font-size: 26px; + font-size: 28px; background: var(--card); padding: 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; - /* NO transform transition here — prevents menu tilt */ - transition: background 0.3s, border-color 0.3s; - z-index: 2000; - border: 1px solid var(--border); + transition: 0.3s; + z-index: 2000; /* important */ } .settings:hover { + transform: scale(1.1); background: var(--primary); } -/* Only the icon spins, not the whole button */ -.settings-icon { - display: inline-block; - transition: transform 0.4s ease; - pointer-events: none; -} - -.settings:hover .settings-icon { - transform: rotate(60deg); -} - +/* Settings dropdown */ .menu { display: none; position: absolute; - bottom: 64px; right: 0; - background: var(--card); - backdrop-filter: blur(12px); - padding: 18px; - border-radius: 14px; - width: 190px; - z-index: 9999; - border: 1px solid var(--border); - box-shadow: 0 10px 40px var(--shadow); -} - -.menu.show { display: block; } - -.menu p { - font-size: 12px; - text-transform: uppercase; - letter-spacing: 1px; - color: var(--text-muted-4); - margin-bottom: 10px; - margin-top: 10px; + bottom: 60px; + right: 0; + background: rgba(30, 41, 59, 0.95); + backdrop-filter: blur(10px); + padding: 15px; + border-radius: 12px; + width: 180px; + z-index: 9999; /* makes color options visible */ } -.menu p:first-child { margin-top: 0; } - -.menu button { - background: var(--bg); - border: 1px solid var(--border); - color: var(--text); - border-radius: 8px; - padding: 6px 12px; - cursor: pointer; - margin-right: 6px; - font-size: 16px; - transition: 0.2s; +.menu.show { + display: block; } - -.menu button:hover { background: var(--primary); color: #fff; } - +/* ================= COLOR OPTIONS ================= */ .color-options { display: flex; gap: 10px; flex-wrap: wrap; - margin-top: 8px; + margin-top: 10px; } .color-options span { - width: 24px; height: 24px; + width: 22px; + height: 22px; border-radius: 50%; cursor: pointer; display: inline-block; - border: 2px solid transparent; - transition: 0.2s; } -.color-options span:hover { - transform: scale(1.2); - border-color: var(--text); -} - -/* ── SPARK ── */ +/* ================= HEART SPARK ================= */ .spark { position: absolute; - width: 6px; height: 6px; + width: 6px; + height: 6px; background: var(--primary); transform: rotate(45deg); pointer-events: none; opacity: 0.9; - z-index: 9998; } -.spark::before, .spark::after { +.spark::before, +.spark::after { content: ""; position: absolute; - width: 6px; height: 6px; + width: 6px; + height: 6px; background: var(--primary); border-radius: 50%; } -.spark::before { top: -3px; left: 0; } -.spark::after { left: -3px; top: 0; } - -/* ── REDUCED MOTION ── */ -@media (prefers-reduced-motion: reduce) { - .section { opacity: 1; transform: none; transition: none; } +.spark::before { + top: -3px; + left: 0; } -/* ── MOBILE ── */ -@media (max-width: 768px) { - .navbar { padding: 0 20px; } - .hamburger { display: block; } +.spark::after { + left: -3px; + top: 0; +} - .nav-links { - position: absolute; - top: 64px; right: 20px; - background: var(--card); - backdrop-filter: blur(12px); - border: 1px solid var(--border); - border-radius: 12px; - flex-direction: column; - padding: 16px; - width: 180px; - box-shadow: 0 10px 30px var(--shadow); - display: none; - } +/* ================= RESUME BUTTON ================= */ +.resume-btn { + display: inline-block; + margin-top: 20px; + padding: 12px 18px; + background: var(--primary); + color: white; + text-decoration: none; + border-radius: 8px; + transition: 0.3s; +} - .nav-links.show { display: flex; } +.resume-btn:hover { + transform: scale(1.05); + opacity: 0.9; +} - #home { padding: 100px 24px 60px; } - .section { padding: 70px 24px; } +/* ================= ANIMATION ================= */ +.section { + animation: fadeIn 1s ease; +} - .hero-content { flex-direction: column-reverse; text-align: center; } - .hero-desc { max-width: 100%; } - .hero-btns { justify-content: center; } - .hero-social { justify-content: center; } - .hero-img-circle { width: 160px; height: 160px; font-size: 36px; } +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} - .about-grid { grid-template-columns: 1fr; gap: 32px; } - .about-right { grid-template-columns: 1fr 1fr; } +/* ================= MOBILE ================= */ +@media (max-width: 768px) { - #skills-container { grid-template-columns: repeat(3, 1fr); } - #projects-container { grid-template-columns: 1fr; } + body { + flex-direction: column; + } - .contact-grid { grid-template-columns: 1fr; gap: 32px; } + .sidebar { + width: 100%; + height: auto; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + } - .settings { bottom: 16px; right: 16px; } -} + .sidebar ul { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 0; + } -@media (min-width: 769px) { - .hamburger { display: none; } - .nav-links { display: flex !important; } -} -/* ══════════════════════════════════════════ - LIGHT THEME OVERRIDES - Applied via body.light-theme class - ══════════════════════════════════════════ */ -body.light-theme { - --bg: #f8fafc; - --text: #0f172a; - --card: #e2e8f0; - --section-alt: #f1f5f9; - --border: rgba(0,0,0,0.1); - --shadow: rgba(0,0,0,0.12); - --text-muted-1: rgba(15,23,42,0.75); - --text-muted-2: rgba(15,23,42,0.65); - --text-muted-3: rgba(15,23,42,0.6); - --text-muted-4: rgba(15,23,42,0.5); -} + .sidebar li { + margin: 5px 10px; + } -/* Navbar stays light-background-aware */ -body.light-theme .navbar { - background: rgba(248,250,252,0.95); - border-bottom: 1px solid rgba(0,0,0,0.1); -} + .social { + position: relative; + bottom: 0; + margin-top: 10px; + } -/* Nav links: dark text on light bg, white on hover/active */ -body.light-theme .nav-links li { - color: #0f172a; -} -body.light-theme .nav-links li:hover, -body.light-theme .nav-links li.nav-active { - background: var(--primary); - color: #fff; -} -body.light-theme .hamburger { - color: #0f172a; -} + .main { + margin-left: 0; + padding: 20px; + } -/* Mobile dropdown bg */ -body.light-theme .nav-links { - background: #f1f5f9; - border-color: rgba(0,0,0,0.1); -} + .section { + padding: 30px 0; + } -/* Section headings (About, Projects, etc.) stay dark, not pure black */ -body.light-theme .section h2 { - color: #1e293b; -} + h1 { + font-size: 26px; + } -/* Hero text */ -body.light-theme .hero-text h1, -body.light-theme .hero-text h2 { - color: #0f172a; -} + h2 { + font-size: 20px; + } -/* Stat cards */ -body.light-theme .stat-card { - background: #e2e8f0; - border-color: rgba(0,0,0,0.1); -} -body.light-theme .stat-lbl { - color: rgba(15,23,42,0.55); -} + #skills-container { + grid-template-columns: repeat(2, 1fr); + justify-items: center; + } -/* Skill cards */ -body.light-theme .skill-card { - background: #e2e8f0; - border-color: rgba(0,0,0,0.1); -} -body.light-theme .skill-card p { - color: #0f172a; -} + .skill-card { + width: 100px; + height: 100px; + } -/* Project cards */ -body.light-theme .project-card { - background: #e2e8f0; - border-color: rgba(0,0,0,0.1); -} -body.light-theme .project-info h3 { color: #0f172a; } -body.light-theme .project-info p { color: rgba(15,23,42,0.6); } -body.light-theme .project-links a:last-child { - color: #0f172a; - border-color: rgba(0,0,0,0.2); -} + .skill-card img { + width: 30px; + height: 30px; + } -/* Form inputs */ -body.light-theme form input, -body.light-theme form textarea { - background: #e2e8f0; - color: #0f172a; - border-color: rgba(0,0,0,0.15); -} -body.light-theme form input::placeholder, -body.light-theme form textarea::placeholder { - color: rgba(15,23,42,0.4); -} + #projects-container img { + width: 100%; + } + form input, + form textarea { + width: 100%; + } + .settings { + bottom: 15px; + right: 15px; + } +} /* ================= NAVBAR ================= */ .navbar { width: 100%; - padding: 18px 40px; + height: 80px; + display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; - background: rgba(15, 23, 42, 0.85); - backdrop-filter: blur(10px); + padding: 0 60px; - position: sticky; + position: fixed; top: 0; + left: 0; + z-index: 1000; - border-bottom: 1px solid rgba(255,255,255,0.08); + background: rgba(15, 23, 42, 0.95); + backdrop-filter: blur(10px); } .logo { font-size: 1.5rem; font-weight: 700; - color: var(--primary); + color: white; } -/* Desktop Navigation */ - +/* Desktop Navbar */ .nav-links { display: flex; align-items: center; - gap: 28px; + gap: 12px; list-style: none; + + margin-right: 90px; } .nav-links li { cursor: pointer; - font-weight: 500; - transition: all 0.3s ease; + transition: 0.3s ease; - padding: 6px 10px; + padding: 10px 12px; border-radius: 8px; + + font-size: 15px; + + color: white; } .nav-links li:hover { - color: #3b82f6; - background: rgba(255,255,255,0.05); - transform: translateY(-2px); + background: rgba(255,255,255,0.08); + color: #3b82f6; } -/* Hamburger Hidden on Desktop */ - +/* Hamburger hidden on desktop */ .hamburger { display: none; font-size: 2rem; + color: white; cursor: pointer; + padding: 6px 10px; + + z-index: 1200; +} + +/* ================= SOCIAL ICONS ================= */ + +/* Social icons */ +.social-top { + position: fixed; + top: 85px; + right: 30px; + + display: flex; + gap: 15px; +} + +.social-top img { + width: 24px; + height: 24px; +} + +/* ================= MAIN ================= */ + +.main { + padding-top: 100px; } /* ================= MOBILE NAVBAR ================= */ @@ -1054,79 +474,56 @@ body.light-theme form textarea::placeholder { @media (max-width: 768px) { .navbar { - padding: 20px 40px; + padding: 0 20px; } .hamburger { display: block; + margin-left: auto; } .nav-links { + display: none; + + flex-direction: column; + align-items: flex-start; + position: absolute; - top: 75px; + top: 80px; right: 20px; width: 220px; - flex-direction: column; - align-items: flex-start; + background: #0f172a; padding: 20px; - gap: 30px; - - background: rgba(15, 23, 42, 0.95); - - border-radius: 16px; + border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.35); - - display: none; } - .nav-links.active { + .nav-links.show { display: flex; } + + .social-top { + top: 90px; + right: 20px; + } } -/* ===== FORCE HORIZONTAL NAVBAR ON DESKTOP ===== */ +/* ================= FORCE DESKTOP NAVBAR ================= */ -@media screen and (min-width: 769px) { +@media (min-width: 769px) { .nav-links { display: flex !important; flex-direction: row !important; - align-items: center; - justify-content: center; - gap: 24px; - - position: static !important; - width: auto !important; - background: transparent !important; - - padding: 0 !important; - margin: 0 !important; - } - - .nav-links li { - display: inline-block; } .hamburger { display: none !important; } } -/* Settings menu */ -body.light-theme .settings { - background: #e2e8f0; - border-color: rgba(0,0,0,0.12); -} -body.light-theme .menu { - background: #f1f5f9; - border-color: rgba(0,0,0,0.1); -} -body.light-theme .menu button { - background: #e2e8f0; - color: #0f172a; - border-color: rgba(0,0,0,0.15); -} + diff --git a/revati-kadam-portfolio/index.html b/revati-kadam-portfolio/index.html index d36b201..0ba576f 100644 --- a/revati-kadam-portfolio/index.html +++ b/revati-kadam-portfolio/index.html @@ -2,19 +2,28 @@ + + + Revati Kadam Portfolio + - + + - -
+ + + + +
-
-
-
-

HELLO!

-

I am Revati Kadam

-

I am a

-

- A passionate Computer Science student who loves building clean, - responsive web apps and solving real-world problems through code. -

-
- View Projects - Download Resume -
-
- - GitHub - - - LinkedIn - - - LeetCode - -
-
-
-
-
- Rkimg -
-
-
-
-
- -
-
-
-

About

-

- I'm a passionate and driven Computer Science student with a strong interest - in Web Development, Software Engineering, and problem-solving. I enjoy building - clean, responsive, and user-friendly web applications while continuously improving - my skills in technologies like HTML, CSS, JavaScript, and backend development. - Alongside development, I actively practice Data Structures and Algorithms to - strengthen my logical thinking and coding abilities. -

-
- Web Development - Problem Solving - DSA - Open Source -
- - ↓ Download Resume - -
-
-
15+
Skills Learned
-
5+
Projects Built
-
2+
Years Coding
-
100+
DSA Problems
-
-
-
- -
-

Skills

-
-
- -
-

Projects

-
-
- -
-

Contact Me

-
-
-

Feel free to reach out — I'm always open to new opportunities and collaborations.

-
- GitHub ↗ - LinkedIn ↗ - LeetCode ↗ -
-
-
- - - - - -
-
-
+
+

Hello!

+

I am Revati Kadam

+

I am a

+
+ +
+

About

+

+ I’m a passionate and driven Computer Science student with a strong interest in Web Development, Software Engineering, and problem-solving. + I enjoy building clean, responsive, and user-friendly web applications while continuously improving my skills in technologies like HTML, CSS, JavaScript, and backend development. + Alongside development, I actively practice Data Structures and Algorithms to strengthen my logical thinking and coding abilities. + I enjoy learning new technologies, working on real-world projects, and turning ideas into practical solutions. +

+ + + Download Resume + +
+ +
+

Skills

+
+
+ +
+

Projects

+
+
+ +
+

Contact Me

+
+ + + + + +
+
+
- ⚙️ + ⚙️
+ - + \ No newline at end of file diff --git a/revati-kadam-portfolio/js/navigation.js b/revati-kadam-portfolio/js/navigation.js index 882382a..ef320dd 100644 --- a/revati-kadam-portfolio/js/navigation.js +++ b/revati-kadam-portfolio/js/navigation.js @@ -5,14 +5,16 @@ function showSection(id) { }); document.getElementById(id).classList.add("active"); + + updateActiveNav(id); } function toggleNavbar() { const navLinks = document.getElementById("navLinks"); - navLinks.classList.toggle("active"); -} - updateActiveNav(id); + navLinks.classList.toggle("show"); } + + // ── Active nav link highlight ────────────────────────────────────────────── function updateActiveNav(activeId) { diff --git a/revati-kadam-portfolio/js/script.js b/revati-kadam-portfolio/js/script.js index 0a44427..aad1e0f 100644 --- a/revati-kadam-portfolio/js/script.js +++ b/revati-kadam-portfolio/js/script.js @@ -1,84 +1,77 @@ function showSection(id) { - document.getElementById(id).scrollIntoView({ behavior: "smooth" }); + document.getElementById(id).scrollIntoView({ + behavior: "smooth" + }); } -const roles = ["Web Developer", "Programmer", "Problem Solver", "Website Designer", "Tech Enthusiast"]; -let i = 0, j = 0, del = false; - -function type() { - let text = roles[i]; - const typingEl = document.getElementById("typing"); +// Typing +const roles=["Programmer", "Student","Web Developer","Website Designer","Problem Solver","Tech Enthusiast"]; +let i=0,j=0,del=false; - j = del ? j - 1 : j + 1; +function type(){ + let text=roles[i]; + j=del?j-1:j+1; - if (typingEl) { - typingEl.innerText = text.substring(0, j); - } + document.getElementById("typing").innerText=text.substring(0,j); - if (!del && j === text.length) { - del = true; - return setTimeout(type, 1500); + if(!del && j===text.length){ + del=true; + return setTimeout(type,1500); } - if (del && j === 0) { - del = false; - i = (i + 1) % roles.length; + if(del && j===0){ + del=false; + i=(i+1)%roles.length; } - setTimeout(type, del ? 80 : 180); + setTimeout(type,del?80:180); } - type(); -(function() { - const saved = localStorage.getItem("theme"); - if (saved === "light") document.body.classList.add("light-theme"); -})(); - -function setTheme(mode) { - if (mode === "light") { - document.body.classList.add("light-theme"); +// Theme +function setTheme(mode){ + if(mode==="light"){ + document.documentElement.style.setProperty('--bg','#f8fafc'); + document.documentElement.style.setProperty('--text','#000'); // BLACK text + document.documentElement.style.setProperty('--card','#e2e8f0'); } else { - document.body.classList.remove("light-theme"); + document.documentElement.style.setProperty('--bg','#0f172a'); + document.documentElement.style.setProperty('--text','#fff'); // WHITE text + document.documentElement.style.setProperty('--card','#1e293b'); } - localStorage.setItem("theme", mode); } -function setColor(color) { - document.documentElement.style.setProperty('--primary', color); +// Color +function setColor(color){ + document.documentElement.style.setProperty('--primary',color); } -function toggleSettings() { +// Settings +function toggleSettings(){ document.getElementById("settingsMenu").classList.toggle("show"); } -document.addEventListener("click", function (e) { - const settings = document.querySelector(".settings"); - if (!settings.contains(e.target)) { document.addEventListener("click", function(e){ const settings = document.querySelector(".settings"); + if (!settings) return; + if (!settings.contains(e.target)) { document.getElementById("settingsMenu").classList.remove("show"); } }); -document.addEventListener("mousemove", e => { - const s = document.createElement("div"); - s.className = "spark"; - s.style.left = e.pageX + "px"; - s.style.top = e.pageY + "px"; +// ❤️ Spark +document.addEventListener("mousemove", e=>{ + const s=document.createElement("div"); + s.className="spark"; + s.style.left=e.pageX+"px"; + s.style.top=e.pageY+"px"; document.body.appendChild(s); - setTimeout(() => s.remove(), 100); + setTimeout(()=>s.remove(),100); }); -// Hamburger toggle -function toggleNavbar() { - const links = document.getElementById("navLinks"); - if (window.innerWidth <= 768) { - links.classList.toggle("show"); - } -} +// Skills const skillIcons = { "React": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", "Node.js": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", @@ -97,26 +90,6 @@ const skillIcons = { "Computer Networks": "https://img.icons8.com/ios-filled/50/network.png" }; -fetch("data/skills.json") - .then(res => res.json()) - .then(data => { - const container = document.getElementById("skills-container"); - container.innerHTML = ""; - data.forEach(skill => { - const card = document.createElement("div"); - card.className = "skill-card"; - card.innerHTML = ` - ${skill} -

${skill}

- `; - container.appendChild(card); - }); - }) - .catch(() => { - document.getElementById("skills-container").innerHTML = "

Could not load skills.

"; - }); - -// Skills fetch("data/skills.json") .then(res => res.json()) .then(data => { @@ -135,56 +108,53 @@ fetch("data/skills.json") container.appendChild(card); }); }); - - -// Projects -const roles = ["Web Developer", "Programmer", "Problem Solver", "Website Designer", "Tech Enthusiast"]; -let i = 0, j = 0, del = false; -function type() { - let text = roles[i]; - const typingEl = document.getElementById("typing"); - j = del ? j - 1 : j + 1; - - if (typingEl) { - typingEl.innerText = text.substring(0, j); - } +// Projects +fetch("data/projects.json") +.then(res => res.json()) +.then(data => { + const c = document.getElementById("projects-container"); - if (!del && j === text.length) { - del = true; - return setTimeout(type, 1500); - } + c.innerHTML = ""; // clear first - if (del && j === 0) { - del = false; - i = (i + 1) % roles.length; - } + data.forEach(p => { + let d = document.createElement("div"); - setTimeout(type, del ? 80 : 180); -} + d.innerHTML = ` +

${p.name}

+ +
+ Live | + GitHub + `; -type(); + c.appendChild(d); + }); +}) +.catch(err => { + document.getElementById("projects-container").innerHTML = "Error loading projects"; +}); -// ── EMAILJS ── -(function () { +// Initialize EmailJS +(function(){ emailjs.init("kqnCcPYqtdwl_Oaqt"); })(); -document.getElementById("contact-form").addEventListener("submit", function (e) { +// Send form +document.getElementById("contact-form").addEventListener("submit", function(e){ e.preventDefault(); - const btn = this.querySelector("button"); - btn.textContent = "Sending..."; - btn.disabled = true; - -emailjs.sendForm("service_08nkbcb", "template_2yrnipb", this) - .then(() => { - alert("Message sent successfully!"); - this.reset(); - btn.textContent = "Send Message"; - btn.disabled = false; - }, () => { - alert("Failed to send. Please try again."); - btn.textContent = "Send Message"; - btn.disabled = false; -}); \ No newline at end of file + + emailjs.sendForm("service_08nkbcb", "template_2yrnipb", this) + .then(function(){ + alert("Message sent successfully!"); + }, function(error){ + alert("Failed to send message."); + }); +}); + +function toggleNavbar() { + document.getElementById("navLinks").classList.toggle("show"); +} + + From 8f22400894101ab1cc4c9232fc9a40b003715cf0 Mon Sep 17 00:00:00 2001 From: Muskankr Date: Sat, 16 May 2026 23:07:36 +0530 Subject: [PATCH 4/5] fix:navbar display in laptop --- revati-kadam-portfolio/css/style.css | 8 ++++---- revati-kadam-portfolio/index.html | 12 +++++++----- revati-kadam-portfolio/js/script.js | 19 ++++++++++++------- 3 files changed, 23 insertions(+), 16 deletions(-) diff --git a/revati-kadam-portfolio/css/style.css b/revati-kadam-portfolio/css/style.css index 8907014..ea92b2f 100644 --- a/revati-kadam-portfolio/css/style.css +++ b/revati-kadam-portfolio/css/style.css @@ -379,8 +379,8 @@ form button:hover { right: 15px; } } -/* ================= NAVBAR ================= */ +/* ================= NAVBAR ================= */ .navbar { width: 100%; height: 80px; @@ -389,7 +389,7 @@ form button:hover { align-items: center; justify-content: space-between; - padding: 0 60px; + padding: 0 90px; position: fixed; top: 0; @@ -422,10 +422,10 @@ form button:hover { cursor: pointer; transition: 0.3s ease; - padding: 10px 12px; + padding: 20px 22px; border-radius: 8px; - font-size: 15px; + font-size: 18px; color: white; } diff --git a/revati-kadam-portfolio/index.html b/revati-kadam-portfolio/index.html index 0ba576f..88e0a9b 100644 --- a/revati-kadam-portfolio/index.html +++ b/revati-kadam-portfolio/index.html @@ -18,6 +18,7 @@