diff --git a/plainWebDevProjects/Portfolio/index.html b/plainWebDevProjects/Portfolio/index.html index 8312f1d..a141b2d 100644 --- a/plainWebDevProjects/Portfolio/index.html +++ b/plainWebDevProjects/Portfolio/index.html @@ -11,31 +11,32 @@
- Profile Picture + Profile Picture

Hi, I'm Yash Virulkar

A Passionate Web Developer

I create modern and responsive websites.

- View My Work - Download Resume + + Download Resume
@@ -66,6 +67,9 @@

Skills

Python
C++
Bash
+
GO
+
React
+
Django
Arch Linux
Hacking
@@ -124,9 +128,10 @@

Contact Me

LinkedIn Twitter Instagram - Gmail + Gmail + diff --git a/plainWebDevProjects/Portfolio/script.js b/plainWebDevProjects/Portfolio/script.js new file mode 100644 index 0000000..3cb7c61 --- /dev/null +++ b/plainWebDevProjects/Portfolio/script.js @@ -0,0 +1,86 @@ +// Hamburger Menu +const hamburger = document.querySelector(".hamburger-menu"); +const navLinks = document.querySelector(".nav-links"); + +hamburger.addEventListener("click", () => { + navLinks.classList.toggle("active"); +}); + +// Close menu after clicking link +const navItems = document.querySelectorAll(".nav-links a"); + +navItems.forEach(item => { + item.addEventListener("click", () => { + navLinks.classList.remove("active"); + }); +}); + +// Navbar shadow on scroll +const header = document.querySelector("header"); + +window.addEventListener("scroll", () => { + if (window.scrollY > 50) { + header.style.boxShadow = "0 2px 10px rgba(0,0,0,0.5)"; + } else { + header.style.boxShadow = "none"; + } +}); + +// View Work button scroll +const viewWorkBtn = document.getElementById("viewWork"); + +if (viewWorkBtn) { + viewWorkBtn.addEventListener("click", function () { + document.getElementById("projects").scrollIntoView({ + behavior: "smooth" + }); + }); +} +//Added scroll animation +const sections = document.querySelectorAll("section"); +const observer = new IntersectionObserver(entries=>{ + entries.forEach(entry=>{ + if(entry.isIntersecting){ + entry.target.classList.add("show"); + } + }); +}); + +sections.forEach(sec=>{ + sec.classList.add("hidden"); + observer.observe(sec); +}); + +//Improved Contact Form +const form = document.querySelector("form"); + +form.addEventListener("submit", function(e){ + e.preventDefault(); + alert("Message sent successfully!"); +}); + + +//Add Smooth Scroll for Navbar Links +document.querySelectorAll('a[href^="#"]').forEach(anchor=>{ + anchor.addEventListener("click",function(e){ + e.preventDefault(); + document.querySelector(this.getAttribute("href")).scrollIntoView({ + behavior:"smooth" + }); + }); +}); + +//Added Dark / Light Theme Toggle +const themeToggle = document.getElementById("themeToggle"); + +themeToggle.addEventListener("click", () => { + + document.body.classList.toggle("light-theme"); + + if(document.body.classList.contains("light-theme")){ + themeToggle.textContent = "☀️"; + }else{ + themeToggle.textContent = "🌙"; + } + +}); \ No newline at end of file diff --git a/plainWebDevProjects/Portfolio/style.css b/plainWebDevProjects/Portfolio/style.css index 531772a..5d35081 100644 --- a/plainWebDevProjects/Portfolio/style.css +++ b/plainWebDevProjects/Portfolio/style.css @@ -12,6 +12,10 @@ padding: 0; } +html{ + scroll-behavior: smooth; +} + body { font-family: 'Poppins', sans-serif; line-height: 1.6; @@ -19,12 +23,16 @@ body { color: var(--text-color); } +/* Container */ + .container { + max-width: 1200px; margin: auto; - overflow: hidden; padding: 0 2rem; } +/* Header */ + header { background: #333; color: #fff; @@ -48,6 +56,7 @@ header .logo { header ul { display: flex; list-style: none; + margin-left: auto; } header ul li a { @@ -62,6 +71,8 @@ header ul li a:hover { border-radius: 5px; } +/* Hero Section */ + #hero { background: var(--light-color); padding: 10rem 0 4rem; @@ -86,20 +97,40 @@ header ul li a:hover { color: var(--primary-color); } -.btn { - display: inline-block; - background: var(--primary-color); - color: #fff; - padding: 0.8rem 1.5rem; - text-decoration: none; - border-radius: 5px; - margin-top: 1rem; - transition: background 0.3s ease; +/* Button */ + +.btn{ + display:inline-flex; + align-items:center; + justify-content:center; + + background:var(--primary-color); + color:#fff; + + width:200px; /* makes both buttons same width */ + height:45px; + + border:none; + border-radius:6px; + + font-size:1rem; + font-family:'Poppins', sans-serif; + + text-decoration:none; + cursor:pointer; + + transition:background 0.3s ease, transform 0.2s ease; +} + +.btn:hover{ + background:#2980b9; + transform:translateY(-2px); } -.btn:hover { - background: #2980b9; +.btn:focus{ + outline:none; } +/* Sections */ section { padding: 4rem 0; @@ -111,6 +142,8 @@ section h2 { margin-bottom: 2rem; } +/* About */ + #about ul { list-style: none; margin-top: 1rem; @@ -120,6 +153,8 @@ section h2 { margin-bottom: 0.5rem; } +/* Skills */ + #skills .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); @@ -132,8 +167,15 @@ section h2 { padding: 1rem; border-radius: 5px; font-weight: 600; + transition: transform 0.3s ease; } +#skills .skill:hover{ + transform: scale(1.05); +} + +/* Projects */ + #projects .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); @@ -145,14 +187,17 @@ section h2 { padding: 2rem; border-radius: 5px; text-align: center; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); - transition: transform 0.3s ease; + box-shadow: 0 2px 5px rgba(0,0,0,0.2); + transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card:hover { - transform: translateY(-5px); + transform: translateY(-8px); + box-shadow: 0 10px 25px rgba(0,0,0,0.4); } +/* Contact */ + #contact form { max-width: 600px; margin: auto; @@ -160,15 +205,18 @@ section h2 { flex-direction: column; } -#contact input, #contact textarea { +#contact input, +#contact textarea { padding: 1rem; margin-bottom: 1rem; - border: 1px solid #ccc; + border: 1px solid #444; border-radius: 5px; background: var(--light-color); color: var(--text-color); } +/* Footer */ + footer { background: #333; color: #fff; @@ -182,9 +230,10 @@ footer .social-links a { margin: 0 0.5rem; } -/* Hamburger menu styles */ +/* Hamburger Menu */ + .hamburger-menu { - display: none; /* Hidden by default, shown on small screens */ + display: none; flex-direction: column; justify-content: space-around; width: 30px; @@ -204,37 +253,39 @@ footer .social-links a { transition: all 0.3s ease; } -/* Navigation links on small screens */ +/* Mobile Responsive */ + @media(max-width: 768px) { + header nav { - flex-wrap: wrap; /* Allow items to wrap */ - justify-content: space-between; /* Keep logo and hamburger separate */ + flex-wrap: wrap; + justify-content: space-between; align-items: center; } header .logo { - margin-bottom: 0; /* Reset margin */ + margin-bottom: 0; } .hamburger-menu { - display: flex; /* Show hamburger on small screens */ + display: flex; } header ul.nav-links { - display: none; /* Hide nav links by default */ + display: none; flex-direction: column; width: 100%; text-align: center; - background: #333; /* Same as header background */ + background: #333; padding: 1rem 0; position: absolute; - top: 60px; /* Adjust based on header height */ + top: 60px; left: 0; right: 0; } - header ul.nav-links.active { /* Class to be toggled by JS */ - display: flex; /* Show nav links when active */ + header ul.nav-links.active { + display: flex; } header ul.nav-links li { @@ -244,4 +295,25 @@ footer .social-links a { #hero .hero-text h1 { font-size: 2.5rem; } +} +.hidden{ + opacity:0; + transform:translateY(30px); + transition:all 0.6s ease; +} + +.show{ + opacity:1; + transform:translateY(0); +} +.light-theme{ + --dark-color:#ffffff; + --light-color:#f4f4f4; + --text-color:#111; +} +.theme-icon{ + font-size:22px; + cursor:pointer; + margin-left:15px; + user-select:none; } \ No newline at end of file