From bd903b49a7a884b1abe77e6142582bdd86b094a4 Mon Sep 17 00:00:00 2001 From: Dipanita45 <132455672+Dipanita45@users.noreply.github.com> Date: Sun, 31 May 2026 10:38:42 +0530 Subject: [PATCH] Improve --- revati-kadam-portfolio/css/style.css | 183 +++++++++++++++++++++++++++ revati-kadam-portfolio/index.html | 123 +++++++++++++++--- revati-kadam-portfolio/js/script.js | 34 +++++ 3 files changed, 325 insertions(+), 15 deletions(-) diff --git a/revati-kadam-portfolio/css/style.css b/revati-kadam-portfolio/css/style.css index fb90165..8bfc5aa 100644 --- a/revati-kadam-portfolio/css/style.css +++ b/revati-kadam-portfolio/css/style.css @@ -1307,4 +1307,187 @@ body.light-theme .hero-social a { } body.light-theme .hero-social a:hover .social-icon { color: #ffffff; +} + +/* ========================= + CONTACT SECTION +========================= */ + +.contact-container { + max-width: 1200px; + margin: auto; +} + +.contact-header { + text-align: center; + margin-bottom: 60px; +} + +.section-badge { + display: inline-block; + padding: 8px 16px; + border-radius: 50px; + background: rgba(59,130,246,.15); + color: var(--primary-color,#3b82f6); + font-size: .9rem; + font-weight: 600; + margin-bottom: 12px; +} + +.contact-header h2 { + font-size: 2.8rem; + margin-bottom: 15px; +} + +.contact-header p { + max-width: 700px; + margin: auto; + opacity: .8; +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1.4fr; + gap: 40px; +} + +.contact-info { + display: flex; + flex-direction: column; + gap: 20px; +} + +.contact-card { + display: flex; + gap: 16px; + align-items: center; + padding: 20px; + border-radius: 18px; + background: rgba(255,255,255,.03); + border: 1px solid rgba(255,255,255,.08); + transition: .3s; +} + +.contact-card:hover { + transform: translateY(-5px); + border-color: rgba(59,130,246,.5); +} + +.contact-icon { + width: 55px; + height: 55px; + border-radius: 14px; + display: grid; + place-items: center; + font-size: 1.4rem; + background: rgba(59,130,246,.15); +} + +.contact-card h4 { + margin-bottom: 4px; +} + +.contact-card p { + opacity: .7; + font-size: .9rem; +} + +.contact-socials { + display: flex; + flex-direction: column; + gap: 12px; + margin-top: 10px; +} + +.contact-socials a { + text-decoration: none; + color: inherit; + transition: .3s; +} + +.contact-socials a:hover { + color: #3b82f6; + transform: translateX(6px); +} + +.contact-form { + padding: 30px; + border-radius: 24px; + background: rgba(255,255,255,.03); + border: 1px solid rgba(255,255,255,.08); + display: flex; + flex-direction: column; + gap: 20px; +} + +.input-group { + display: flex; + flex-direction: column; + gap: 8px; +} + +.input-group label { + font-size: .95rem; + font-weight: 500; +} + +.contact-form input, +.contact-form textarea { + width: 100%; + padding: 15px 18px; + border-radius: 14px; + border: 1px solid rgba(255,255,255,.08); + background: rgba(255,255,255,.02); + color: inherit; + transition: .3s; +} + +.contact-form input:focus, +.contact-form textarea:focus { + outline: none; + border-color: #3b82f6; + box-shadow: 0 0 0 4px rgba(59,130,246,.15); +} + +.contact-form button { + padding: 16px; + border: none; + border-radius: 14px; + cursor: pointer; + font-size: 1rem; + font-weight: 600; + color: white; + background: linear-gradient( + 135deg, + #3b82f6, + #2563eb + ); + transition: .3s; +} + +.contact-form button:hover { + transform: translateY(-3px); +} + +.contact-form button:disabled { + opacity: .7; + cursor: not-allowed; +} + +#form-status { + text-align: center; + font-size: .95rem; + margin-top: 5px; +} + +/* Mobile */ + +@media (max-width: 900px) { + .contact-grid { + grid-template-columns: 1fr; + } + + .contact-header h2 { + font-size: 2.2rem; + } } \ No newline at end of file diff --git a/revati-kadam-portfolio/index.html b/revati-kadam-portfolio/index.html index 1618e50..cc81a34 100644 --- a/revati-kadam-portfolio/index.html +++ b/revati-kadam-portfolio/index.html @@ -179,28 +179,121 @@

Projects

-
-

Contact Me

+
+
+ +
+ Get In Touch +

Let's Work Together

+

+ Have a project idea, internship opportunity, or collaboration in mind? + I'd love to hear from you. +

+
+
+ +
-

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

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

Email

+

Available for professional inquiries

+
+
+ +
+
💼
+
+

LinkedIn

+

Let's connect professionally

+
+
+ +
+
💻
+
+

GitHub

+

Explore my projects and repositories

+
+
+ +
+ + GitHub ↗ + + + + LinkedIn ↗ + + + + LeetCode ↗ +
+
-
- - - - - + + + + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+
+
-
- + +
⚙️ diff --git a/revati-kadam-portfolio/js/script.js b/revati-kadam-portfolio/js/script.js index 598994a..8e78a75 100644 --- a/revati-kadam-portfolio/js/script.js +++ b/revati-kadam-portfolio/js/script.js @@ -203,6 +203,12 @@ fetch("data/skills.json") } ); +emailInput.addEventListener("input", () => { + if (!emailInput.validity.valid) { + emailError.textContent = "Enter a valid email address"; + } +}); + fetch("data/projects.json") .then(res => res.json()) .then(data => { @@ -255,4 +261,32 @@ document.getElementById("contact-form").addEventListener("submit", function (e) btn.textContent = "Send Message"; btn.disabled = false; }); +}); +submitBtn.innerHTML = "Sending..."; +submitBtn.disabled = true; + +const form = document.getElementById("contact-form"); +const status = document.getElementById("form-status"); +const submitBtn = document.getElementById("submitBtn"); + +form.addEventListener("submit", async (e) => { + e.preventDefault(); + + submitBtn.disabled = true; + submitBtn.innerHTML = "Sending..."; + + try { + // EmailJS logic here + + status.textContent = "✅ Message sent successfully!"; + status.style.color = "#22c55e"; + + form.reset(); + } catch (error) { + status.textContent = "❌ Failed to send message."; + status.style.color = "#ef4444"; + } + + submitBtn.disabled = false; + submitBtn.innerHTML = "Send Message"; }); \ No newline at end of file