Skip to content

Updated portfolio design and added script.js #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kavin-666 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Updated portfolio design and added script.js #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5415dae
Updated portfolio design and added script.js
Kavin-666 Mar 9, 2026
6f8c784
Update plainWebDevProjects/Portfolio/index.html
Kavin-666 Mar 11, 2026
3b76844
Update plainWebDevProjects/Portfolio/script.js
Kavin-666 Mar 11, 2026
f0f1662
Improved navbar UI by adding emoji theme toggle and fixing its position
Kavin-666 Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 19 additions & 14 deletions plainWebDevProjects/Portfolio/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,32 @@
<header>
<nav class="container">
<h1 class="logo">Yash Virulkar</h1>
<button class="hamburger-menu" aria-label="Toggle navigation">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<ul class="nav-links">
<li><a href="#hero">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#hero">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<span id="themeToggle" class="theme-icon">🌙</span>
<button class="hamburger-menu" aria-label="Toggle navigation">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</nav>
</header>

<section id="hero">
<div class="container">
<!-- Consider replacing this with a locally hosted and optimized image for better performance and control. -->
<img src="https://github.com/Viscous106/Projects/blob/main/webdevProjects/Portfolio/1759158666193.jpg?raw=true" alt="Profile Picture" class="profile-img">
<img src="./1759158666193.jpg" alt="Profile Picture" class="profile-img">
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding explicit width and height attributes to the profile <img> (matching the rendered size) to reduce layout shift while CSS loads and improve perceived performance.

Suggested change
<img src="./1759158666193.jpg" alt="Profile Picture" class="profile-img">
<img src="./1759158666193.jpg" alt="Profile Picture" class="profile-img" width="300" height="300">

Copilot uses AI. Check for mistakes.
<div class="hero-text">
<h2>Hi, I'm Yash Virulkar</h2>
<h1>A Passionate Web Developer</h1>
<p>I create modern and responsive websites.</p>
<a href="#projects" class="btn" target="_blank" rel="noopener noreferrer">View My Work</a>
<a href="Yash_Virulkar_Resume.pdf" class="btn" download>Download Resume</a>
<button class="btn" id="viewWork">View My Work</button>
<a href="#contact" class="btn">Download Resume</a>
</div>
</div>
</section>
Expand Down Expand Up @@ -66,6 +67,9 @@ <h2>Skills</h2>
<div class="skill">Python</div>
<div class="skill">C++</div>
<div class="skill">Bash</div>
<div class="skill">GO</div>
<div class="skill">React</div>
<div class="skill">Django</div>
Copy link
Copy Markdown
Owner

@Viscous106 Viscous106 Mar 10, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add this too

Suggested change
<div class="skill">Django</div>
<div class="skill">Django</div>
<div class="skill">Docker</div>

<div class="skill"><a href="https://github.com/Viscous106/Arch.git" style="text-decoration: none; color: inherit;" target="_blank" rel="noopener noreferrer">Arch Linux</a></div>
<div class="skill"><a href="https://github.com/Viscous106/Hacking-Notes" style="text-decoration: none; color: inherit;" target="_blank" rel="noopener noreferrer">Hacking</a></div>
</div>
Expand Down Expand Up @@ -124,9 +128,10 @@ <h2>Contact Me</h2>
<a href="https://www.linkedin.com/in/yash-virulkar-338418329" target="_blank" rel="noopener noreferrer">LinkedIn</a>
<a href="https://x.com/yash_virulkar_" target="_blank" rel="noopener noreferrer">Twitter</a>
<a href="https://www.instagram.com/yash_virulkar_" target="_blank" rel="noopener noreferrer">Instagram</a>
<a href="yash.25bcs10613@sst.scaler.com" target="_blank" rel="noopener noreferrer">Gmail</a>
<a href="mailto:yash.25bcs10613@sst.scaler.com">Gmail</a>
Comment on lines -127 to +131
Copy link
Copy Markdown
Owner

@Viscous106 Viscous106 Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you sure that it is really neccesary have a thoght again

</div>
</div>
</footer>
<script src="./script.js" defer></script>
</body>
</html>
86 changes: 86 additions & 0 deletions plainWebDevProjects/Portfolio/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
});
Comment on lines +5 to +7
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When toggling the hamburger menu, the button’s accessibility state isn’t updated. Consider setting aria-expanded (and optionally aria-controls) on .hamburger-menu to reflect whether .nav-links is open, so screen readers get the correct state.

Copilot uses AI. Check for mistakes.

// 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";
}
});
Comment on lines +21 to +27
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The scroll handler writes inline boxShadow styles on every scroll event, which is harder to maintain and can cause extra style recalculations. Prefer toggling a CSS class on <header> and defining the shadow in CSS (optionally using a throttled/requestAnimationFrame update).

Suggested change
window.addEventListener("scroll", () => {
if (window.scrollY > 50) {
header.style.boxShadow = "0 2px 10px rgba(0,0,0,0.5)";
} else {
header.style.boxShadow = "none";
}
});
if (header) {
window.addEventListener("scroll", () => {
const scrolled = window.scrollY > 50;
header.classList.toggle("header--scrolled", scrolled);
});
}

Copilot uses AI. Check for mistakes.

// 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 = "🌙";
}

});
Loading