Add modern UX features: smooth scroll, active nav, scroll-to-top, SEO enhancements

[Copilot]

Enhanced portfolio with modern web features following industry best practices. Reference link was blocked, implemented standard portfolio UX patterns.

Changes

Navigation & Scrolling

• Smooth CSS scroll behavior for anchor navigation
• Active nav state tracking via scroll position (Intersection Observer)
• Floating scroll-to-top button (appears at 300px threshold)

Performance & Animation

• Scroll-triggered skill bar animations (Intersection Observer API)
• Page fade-in on load
• Staggered section reveals with delay offsets

SEO & Discoverability

• Descriptive page title: "MD. Mosfiqur Rahman - Portfolio | CSE Student & Researcher"
• Open Graph + Twitter Card meta tags for social sharing
• Custom SVG favicon

Responsive Design

• Enhanced mobile breakpoints: 980px, 768px, 640px, 480px
• Centered header layout on tablets
• Single-column skill grid on mobile

Accessibility

• prefers-reduced-motion support (disables animations, smooth scroll)
• ARIA labels on interactive elements
• Keyboard navigation support

Implementation

// Active nav highlighting on scroll
function setActiveNav() {
  let current = '';
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    if (window.scrollY >= sectionTop - 100) {
      current = section.getAttribute('id');
    }
  });
  navLinks.forEach(link => {
    link.classList.toggle('active', link.getAttribute('href') === '#' + current);
  });
}

/* Smooth scroll + scroll-to-top button */
html{scroll-behavior:smooth}
.scroll-top{position:fixed;bottom:24px;right:24px;opacity:0;transition:opacity 240ms}
.scroll-top.visible{opacity:1}

Screenshots

Desktop - Dark Theme

Desktop - Light Theme

Mobile View (375px)

---

Stats: 4 files changed, 113 insertions, 10 deletions | CodeQL: 0 alerts

Original prompt

i give you a portfolio link and you follow this. link: https://meetmehedi.github.io/portfollio_mehedi/#about

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.