1. Create a safe working copy

Duplicate your project before editing. Confirm the original still works.

2. Add polished hover states

Use a transition to animate cards or links. Match the selector to the class names in your site.

<code>.project-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,.15);
}
.project-card:focus-within {
  outline: 3px solid #226b9e;
}</code>

3. Improve in-page navigation

Use matching href and id values. Add smooth scrolling, with a reduced-motion fallback.

<code><!-- HTML -->
<nav aria-label="On-page navigation">
  <a href="#projects">Projects</a>
  <a href="#about">About</a>
</nav>
<section id="projects"><h2>Projects</h2></section>
<section id="about"><h2>About</h2></section>

/* CSS */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}</code>

4. Add a responsive layout

Use Grid to adapt your project cards to different screen sizes.

<code>.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 700px) {
  .projects-grid { grid-template-columns: 1fr; }
}</code>

5. Optional: add a mobile menu

This is an implementation example, not a JavaScript-writing exercise. Paste the HTML, CSS, and JavaScript in their respective files or CodePen panels.

<code><!-- HTML -->
<button class="menu-toggle" type="button" aria-expanded="false"
  aria-controls="site-links">Menu</button>
<nav id="site-links" class="site-links" aria-label="Main">
  <a href="#projects">Projects</a><a href="#about">About</a>
</nav>

/* CSS */
.menu-toggle { display: none; }
.site-links { display: flex; gap: 1rem; }
@media (max-width: 700px) {
  .menu-toggle { display: inline-block; }
  .site-links { display: none; flex-direction: column; }
  .site-links.is-open { display: flex; }
}

// JavaScript
const toggle = document.querySelector('.menu-toggle');
const links = document.querySelector('#site-links');
toggle.addEventListener('click', () => {
  const isOpen = links.classList.toggle('is-open');
  toggle.setAttribute('aria-expanded', String(isOpen));
});</code>

6. Optional: add a forgiving image lightbox

This example uses the native dialog element. The image opens on click and closes with the button or Escape key.

<code><!-- HTML -->
<button class="image-open" type="button" aria-label="Enlarge project image">
  <img src="your-photo.jpg" alt="Describe the project image">
</button>
<dialog id="image-dialog">
  <button class="image-close" type="button">Close image</button>
  <img src="your-photo.jpg" alt="Describe the project image">
</dialog>

/* CSS */
#image-dialog { max-width: min(90vw, 900px); border: 0; border-radius: 12px; }
#image-dialog img { max-width: 100%; height: auto; }
#image-dialog::backdrop { background: rgba(0,0,0,.75); }

// JavaScript
const dialog = document.querySelector('#image-dialog');
document.querySelector('.image-open').addEventListener('click', () => dialog.showModal());
document.querySelector('.image-close').addEventListener('click', () => dialog.close());</code>

7. Test and explain your choices

Test desktop and mobile widths, keyboard navigation, all links, and your selected features. Write 3–5 sentences about what you changed.