Updated portfolio design and added script.js by Kavin-666 · Pull Request #1 · Viscous106/Projects

Kavin-666 · 2026-03-09T17:45:25Z

Updated the portfolio by improving the HTML, CSS, and JavaScript structure. Added a profile photo section and implemented a navbar shadow effect on scroll for better UI. Fixed the View Work button functionality and resolved issues with the hamburger menu. Improved responsiveness and overall layout for a smoother user experience.

Copilot

Pull request overview

Updates the Portfolio page UI/UX by refining styling, improving navigation behavior on mobile/scroll, and adding client-side interactions via a new script.js.

Changes:

Refined CSS layout/styling (container sizing, button styling, hover effects, mobile nav behavior).
Added script.js for hamburger menu toggling, smooth scrolling, and header shadow on scroll.
Updated HTML assets/behavior (local profile image, “View My Work” button behavior, mailto link, script inclusion).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.

File	Description
`plainWebDevProjects/Portfolio/style.css`	Adds smooth scrolling, updates layout/button styles, enhances hover effects, and refines mobile nav styling.
`plainWebDevProjects/Portfolio/script.js`	Implements hamburger toggle, smooth scrolling, auto-close mobile menu, and scroll-based header shadow.
`plainWebDevProjects/Portfolio/index.html`	Switches profile image to local asset, changes “View My Work” to a JS-driven button, fixes Gmail link, and loads the new script.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-10T04:12:53Z

+.btn:focus{
+    outline:none;
 }


.btn:focus { outline: none; } removes the visible focus indicator for both <button> and <a> elements, which is an accessibility regression for keyboard users. Keep a visible focus style (e.g., use :focus-visible with an outline/box-shadow) instead of removing it entirely.

Suggested change

.btn:focus{

outline:none;

}

.btn:focus {

outline: 2px solid #fff;

outline-offset: 3px;

}

.btn:focus-visible {

outline: 3px solid #fff;

outline-offset: 3px;

}

Copilot · 2026-03-10T04:12:53Z

 .container {
+    max-width: 1200px;
    margin: auto;
-    overflow: hidden;
    padding: 0 2rem;


The .container max-width is hardcoded to 1200px while --container-width is still defined in :root (and appears unused). To avoid future inconsistencies, consider using the CSS variable for max-width (or remove the variable if it’s no longer needed).

Copilot · 2026-03-10T04:12:53Z

+hamburger.addEventListener("click", () => {
+    navLinks.classList.toggle("active");
+});


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 · 2026-03-10T04:12:53Z

+window.addEventListener("scroll", () => {
+    if (window.scrollY > 50) {
+        header.style.boxShadow = "0 2px 10px rgba(0,0,0,0.5)";
+    } else {
+        header.style.boxShadow = "none";
+    }
+});


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 · 2026-03-10T04:12:54Z

        <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">


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">

Viscous106 · 2026-03-10T04:13:45Z

                <div class="skill">Bash</div>
+                <div class="skill">GO</div>
+                <div class="skill">React</div>
+                <div class="skill">Django</div>


add this too

Suggested change

<div class="skill">Django</div>

<div class="skill">Django</div>

<div class="skill">Docker</div>

Viscous106 · 2026-03-10T04:17:24Z

-                <a href="yash.25bcs10613@sst.scaler.com" target="_blank" rel="noopener noreferrer">Gmail</a>
+                <a href="mailto:yash.25bcs10613@sst.scaler.com">Gmail</a>


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

Viscous106

@Kavin-666 LGTM, just have a look at the changes I asked and also try to solve the issues mentioned by copilot if they seem reasonable to you or if not reply to them that they are not required. Thanks

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Viscous106 · 2026-03-11T09:34:32Z

@Kavin-666 make sure to resolev the convo that you have done implementing also dont follow every request from copilot soem off them may be uselesss think wisely before makeing changes

Kavin-666 · 2026-03-11T12:38:38Z

Yeah , I have seeing the code and making change

…

On Wed, 11 Mar 2026, 3:04 pm Yash Nitin Virulkar, ***@***.***> wrote: *Viscous106* left a comment (Viscous106/Projects#1) <#1 (comment)> @Kavin-666 <https://github.com/Kavin-666> make sure to resolev the convo that you have done implementing also dont follow every request from copilot soem off them may be uselesss think wisely before makeing changes — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BVU6HVJJ6S2PE4V3VVS2JE34QEXL3AVCNFSM6AAAAACWMEY55CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DAMZXG44TINZYGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

Kavin-666 · 2026-03-12T04:58:49Z

@Viscous106 I have added the emoji theme toggle and fixed its position in the navbar. Please review if you are free.

Updated portfolio design and added script.js

5415dae

Viscous106 requested review from Viscous106 and Copilot March 10, 2026 04:08

Copilot started reviewing on behalf of Viscous106 March 10, 2026 04:09 View session

Copilot AI reviewed Mar 10, 2026

View reviewed changes

Viscous106 reviewed Mar 10, 2026

View reviewed changes

Viscous106 requested changes Mar 10, 2026

View reviewed changes

Kavin-666 and others added 2 commits March 11, 2026 15:01

Update plainWebDevProjects/Portfolio/index.html

6f8c784

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update plainWebDevProjects/Portfolio/script.js

3b76844

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Improved navbar UI by adding emoji theme toggle and fixing its position

f0f1662

-.btn:focus{
-    outline:none;
-}
+.btn:focus {
+    outline: 2px solid #fff;
+    outline-offset: 3px;
+}
+.btn:focus-visible {
+    outline: 3px solid #fff;
+    outline-offset: 3px;
+}

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

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

		<a href="yash.25bcs10613@sst.scaler.com" target="_blank" rel="noopener noreferrer">Gmail</a>
		<a href="mailto:yash.25bcs10613@sst.scaler.com">Gmail</a>

Conversation

Kavin-666 commented Mar 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Viscous106 Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Viscous106 Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Viscous106 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Viscous106 commented Mar 11, 2026

Uh oh!

Kavin-666 commented Mar 11, 2026 via email

Uh oh!

Kavin-666 commented Mar 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Viscous106 Mar 10, 2026 •

edited

Loading

Viscous106 left a comment •

edited

Loading