成年在线网站免费观看无广告,99蜜桃在线观看免费视频网站 ,丰满的少妇邻居中文bd

Category-Based Filtering: Users can filter projects by categories like Web Design, Graphic Design, and Photography.
\nReal-Time Search: The search bar filters projects based on the input, enhancing user experience.
\nLightbox Modal:<\/p>\n\n

Image Enlargement: Clicking on a project opens a modal displaying a larger image and detailed description.
\nSeamless Navigation: Users can easily close the modal by clicking the close button or outside the content area.
\nDark\/Light Mode Toggle:<\/p>\n

User Preference: Users can switch between dark and light themes, with their preference saved in localStorage for persistence across sessions.
\nIcon Switching: The toggle button icon dynamically changes to reflect the current theme.
\nImplementing Dark\/Light Mode
\nDark mode not only provides a modern aesthetic but also enhances accessibility for users in low-light environments. Here's how to integrate a dark\/light mode toggle in your portfolio:<\/p>\n\n

CSS Variables: We've already defined variables for both light and dark themes.
\nJavaScript Toggle: The script.js handles the addition and removal of the dark-mode class, changing the theme accordingly.
\nPersisting User Preference: Using localStorage, the user's theme preference is saved and applied on subsequent visits.
\nEnhancing User Experience: Search and Filtering
\nDynamic Filtering and a Real-Time Search Bar empower users to navigate through your projects effortlessly.<\/p>\n\n

Filtering by Category: Users can click on filter buttons to view projects within specific categories.
\nReal-Time Search: As users type into the search bar, projects are filtered in real-time based on the input, providing instant feedback.
\nOptimizing for Responsiveness and Accessibility
\nAn elegant portfolio must be responsive and accessible to cater to all users.<\/p>\n\n

Flexible Layouts: Using CSS Grid and Flexbox ensures that the gallery adapts to various screen sizes.
\nMedia Queries: Adjust font sizes, padding, and layout based on device width for optimal viewing.
\nAccessibility:<\/p>\n\n

Alt Text for Images: Descriptive alt attributes improve accessibility for screen readers.
\nKeyboard Navigation: Ensure that all interactive elements are reachable via keyboard.
\nColor Contrast: Maintain high contrast ratios between text and background for readability.
\nDeploying Your Portfolio
\nOnce satisfied with your portfolio, it's time to deploy it for the world to see.<\/p>\n\n

GitHub Pages: Free hosting service for static websites.
\nNetlify: Offers continuous deployment and free hosting with custom domain support.
\nVercel: Provides seamless deployment for frontend projects.
\nCustom Domain:<\/p>\n\n

Purchase a custom domain to make your portfolio more professional and memorable.
\nSEO Optimization:<\/p>\n\n

Use meaningful meta tags, titles, and descriptions.
\nOptimize loading times by compressing images and minifying CSS\/JS files.
\nPromoting Your Portfolio
\nHaving a stunning portfolio is just the first step. Promoting it ensures it reaches your target audience.<\/p>\n\n

Share your portfolio on platforms like LinkedIn, Twitter, and Facebook.
\nUse relevant hashtags to increase visibility.
\nNetworking:<\/p>\n\n

Engage with communities on Reddit, Stack Overflow, or Dribbble.
\nAttend virtual or in-person networking events to showcase your work.
\nSEO and Content Marketing:<\/p>\n

Start a blog related to your field to drive organic traffic.
\nOptimize your portfolio for search engines with relevant keywords.
\nEmail Signature:<\/p>\n\n

Include a link to your portfolio in your email signature to promote it passively.
\nConclusion
\nCreating an Elegant Interactive Portfolio Gallery is a rewarding endeavor that showcases your skills and projects in a professional and engaging manner. By leveraging HTML5, CSS3, and JavaScript, you can build a responsive and dynamic portfolio that stands out in the digital landscape.<\/p>\n\n

Explore More of My Work:
\nLinkedIn: Pierre-Romain Lopez
\nGladiatorsBattle: gladiatorsbattle.com
\nDivWeb: divweb.fr
\nTwitter: @GladiatorsBT
\nJeanFernandsEtti: jeanfernandsetti.fr
\nXavierFlabat: xavier-flabat.com
\nFeel free to reach out through my social media channels or visit my websites to learn more about my projects and services. I'm always open to collaboration and new opportunities!<\/p>\n\n

About the Author
\nPierre-Romain Lopez is a passionate web developer and designer with a keen eye for detail and a commitment to creating engaging and user-friendly digital experiences. With a diverse portfolio spanning web design, graphic design, and photography, Pierre-Romain excels in bringing creative visions to life through code and design.<\/p>\n\n\n \n\n \n "}

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Home

Web Front-end

JS Tutorial

Building an Elegant Interactive Portfolio Gallery with HTMLCSSand JavaScript

Susan Sarandon

Nov 17, 2024 pm 09:25 PM

Building an Elegant Interactive Portfolio Gallery with HTMLCSSand JavaScript

In today's digital age, your portfolio serves as your professional calling card. Whether you're a web developer, graphic designer, photographer, or any creative professional, an elegant interactive portfolio can significantly enhance your online presence, showcase your skills, and attract potential clients or employers. In this tutorial, we'll walk you through creating a sophisticated and interactive portfolio using HTML5, CSS3, and JavaScript. By the end, you'll have a responsive gallery featuring dynamic filtering, a real-time search bar, dark/light mode toggle, and an intuitive lightbox modal to display your projects effectively.

Figure 1: Preview of the Elegant Interactive Portfolio Gallery

Table of Contents

Why an Interactive Portfolio?
Prerequisites
Setting Up the Project Structure
Creating the HTML Structure
Styling with CSS
Adding Interactivity with JavaScript
Implementing Dark/Light Mode
Enhancing User Experience: Search and Filtering
Optimizing for Responsiveness and Accessibility
Deploying Your Portfolio
Promoting Your Portfolio
Conclusion
Why an Interactive Portfolio?
An interactive portfolio does more than just list your projects; it engages visitors, highlights your skills, and demonstrates your ability to create user-friendly and aesthetically pleasing interfaces. Interactive elements like filtering, search bars, and dark/light mode not only enhance the user experience but also showcase your proficiency in modern web development techniques.

Prerequisites
Before diving into building your portfolio, ensure you have:

Basic Knowledge of HTML, CSS, and JavaScript: Understanding the fundamentals is crucial.
Code Editor: Tools like Visual Studio Code, Sublime Text, or Atom are recommended.
Web Browser: Modern browsers like Google Chrome or Mozilla Firefox with developer tools.
Images of Your Projects: High-quality visuals to showcase your work.
Setting Up the Project Structure
Organize your project files systematically for ease of management and scalability.

portfolio-gallery/
│
├── index.html
├── styles.css
├── script.js
└── assets/
└── images/
├── web-project1.jpg
├── graphic-project1.jpg
└── photography-project1.jpg
index.html: The main HTML file.
styles.css: Contains all CSS styles.
script.js: Holds JavaScript code for interactivity.
assets/images/: Directory for project images.
Creating the HTML Structure
Begin by crafting a semantic and accessible HTML structure. This foundation ensures your portfolio is both user-friendly and SEO-optimized.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Elegant Interactive Portfolio Gallery</title>
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- Google Fonts for Typography -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <!-- Stylesheet -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Header Section -->
  <header>
    <div>



<p>Key Components:<br>
Header:</p>

<p>Logo and Title: Incorporates a Font Awesome icon for a professional touch.<br>
Search Bar: Allows users to search through your projects in real-time.<br>
Theme Toggle: Enables users to switch between dark and light modes.<br>
Navigation Filters: Buttons to filter projects by category.<br>
Gallery:</p>

<p>Gallery Items: Each project is encapsulated within a gallery-item div, containing an image and an overlay with the project title and description.<br>
Lightbox Modal:</p>

<p>Lightbox Structure: Displays an enlarged view of the project image along with detailed information when a gallery item is clicked.<br>
Footer:</p>

<p>Social Links: Provides links to your social media profiles and websites with corresponding icons.<br>
Styling with CSS<br>
To achieve a modern and elegant look, we'll utilize CSS Grid for the gallery layout, flexbox for the header and navigation, and CSS variables for easy theming. We'll also implement responsive design to ensure the portfolio looks great on all devices.<br>
</p>

<pre class="brush:php;toolbar:false">/* =====================================================================
   1. CSS Variables for Theme Management
   ===================================================================== */

/* Light Theme Colors */
:root {
  --color-bg-light: #f0f2f5;
  --color-text-light: #333333;
  --color-header-bg-light: #ffffff;
  --color-header-text-light: #333333;
  --color-overlay-light: rgba(0, 0, 0, 0.7);
  --color-footer-bg-light: #ffffff;
  --color-footer-text-light: #333333;
  --color-button-bg-light: #e0e0e0;
  --color-button-hover-light: #333333;
  --color-button-text-light: #333333;
  --color-button-hover-text-light: #ffffff;

  /* Font Sizes */
  --font-size-base: 16px;
  --font-size-large: 2.5rem;
  --font-size-medium: 1.2rem;
  --font-size-small: 0.9rem;

  /* Transition Duration */
  --transition-duration: 0.3s;
}

/* Dark Theme Colors */
body.dark-mode {
  --color-bg-dark: #121212;
  --color-text-dark: #e0e0e0;
  --color-header-bg-dark: #1e1e1e;
  --color-header-text-dark: #e0e0e0;
  --color-overlay-dark: rgba(0, 0, 0, 0.85);
  --color-footer-bg-dark: #1e1e1e;
  --color-footer-text-dark: #e0e0e0;
  --color-button-bg-dark: #333333;
  --color-button-hover-dark: #ffffff;
  --color-button-text-dark: #ffffff;
  --color-button-hover-text-dark: #333333;
}

/* =====================================================================
   2. Reset and Base Styles
   ===================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--color-bg-light);
  color: var(--color-text-light);
  transition: background-color var(--transition-duration), color var(--transition-duration);
  line-height: 1.6;
}

/* Dark Mode Background and Text */
body.dark-mode {
  background-color: var(--color-bg-dark);
  color: var(--color-text-dark);
}

/* =====================================================================
   3. Header Styles
   ===================================================================== */

header {
  background-color: var(--color-header-bg-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
}

body.dark-mode header {
  background-color: var(--color-header-bg-dark);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header h1 {
  font-size: var(--font-size-large);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-header-text-light);
  transition: color var(--transition-duration);
}

body.dark-mode .header-container h1 {
  color: var(--color-header-text-dark);
}

.header-controls {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

#searchBar {
  padding: 0.6rem 1.2rem;
  border: 1px solid #ccc;
  border-radius: 30px;
  width: 250px;
  transition: border-color var(--transition-duration), background-color var(--transition-duration), color var(--transition-duration);
}

#searchBar:focus {
  border-color: #555;
  outline: none;
}

body.dark-mode #searchBar {
  background-color: #2c2c2c;
  color: #e0e0e0;
  border: 1px solid #555;
}

body.dark-mode #searchBar::placeholder {
  color: #aaa;
}

#themeToggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--color-button-text-light);
  transition: color var(--transition-duration);
}

body.dark-mode #themeToggle {
  color: var(--color-button-text-dark);
}

#themeToggle:hover {
  color: var(--color-button-hover-text-light);
}

body.dark-mode #themeToggle:hover {
  color: var(--color-button-hover-text-dark);
}

/* =====================================================================
   4. Navigation Styles
   ===================================================================== */

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

nav .filter-btn {
  padding: 0.6rem 1.2rem;
  border: none;
  background-color: var(--color-button-bg-light);
  cursor: pointer;
  transition: background-color var(--transition-duration), color var(--transition-duration), transform var(--transition-duration);
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-medium);
}

nav .filter-btn:hover {
  background-color: var(--color-button-hover-light);
  color: var(--color-button-hover-text-light);
  transform: translateY(-3px);
}

nav .filter-btn.active {
  background-color: #333333;
  color: #ffffff;
}

body.dark-mode nav .filter-btn {
  background-color: var(--color-button-bg-dark);
  color: var(--color-button-text-dark);
}

body.dark-mode nav .filter-btn:hover {
  background-color: var(--color-button-hover-dark);
  color: var(--color-button-hover-text-dark);
}

body.dark-mode nav .filter-btn.active {
  background-color: #ffffff;
  color: #333333;
}

/* =====================================================================
   5. Gallery Styles
   ===================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 3rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.gallery-item:hover {
  transform: translateY(-15px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-duration);
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.overlay {
  position: absolute;
  bottom: 0;
  background: var(--color-overlay-light);
  color: #ffffff;
  width: 100%;
  transform: translateY(100%);
  transition: transform var(--transition-duration), background-color var(--transition-duration);
  padding: 1.2rem;
  text-align: center;
}

.gallery-item:hover .overlay {
  transform: translateY(0);
}

body.dark-mode .overlay {
  background: var(--color-overlay-dark);
}

.overlay h3 {
  margin-bottom: 0.6rem;
  font-size: var(--font-size-medium);
  font-weight: 700;
}

.overlay p {
  font-size: var(--font-size-small);
  line-height: 1.4;
}

/* =====================================================================
   6. Lightbox Styles
   ===================================================================== */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  animation: slideDown 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

body.dark-mode .lightbox-content {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.lightbox img {
  width: 100%;
  height: auto;
  display: block;
}

.lightbox-caption {
  padding: 1.5rem;
  background-color: #f9f9f9;
  transition: background-color var(--transition-duration), color var(--transition-duration);
}

body.dark-mode .lightbox-caption {
  background-color: #2c2c2c;
}

.lightbox-caption h3 {
  margin-bottom: 0.8rem;
  font-size: var(--font-size-medium);
}

.lightbox-caption p {
  font-size: var(--font-size-small);
  line-height: 1.5;
}

/* Close Button Styles */
.close {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  transition: color var(--transition-duration), transform var(--transition-duration);
}

.close:hover {
  color: #cccccc;
  transform: scale(1.1);
}

body.dark-mode .close {
  color: #e0e0e0;
}

body.dark-mode .close:hover {
  color: #ffffff;
}

/* =====================================================================
   7. Footer Styles
   ===================================================================== */

footer {
  text-align: center;
  padding: 2rem 1rem;
  background-color: var(--color-footer-bg-light);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 3rem;
  transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
}

body.dark-mode footer {
  background-color: var(--color-footer-bg-dark);
  box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.1);
}

footer p {
  font-size: var(--font-size-small);
  color: var(--color-footer-text-light);
  transition: color var(--transition-duration);
}

body.dark-mode footer p {
  color: var(--color-footer-text-dark);
}

footer a {
  color: inherit;
  text-decoration: none;
  margin: 0 0.5rem;
  transition: color var(--transition-duration), transform var(--transition-duration);
}

footer a:hover {
  color: #0073e6;
  transform: scale(1.05);
}

body.dark-mode footer a:hover {
  color: #1e90ff;
}

/* =====================================================================
   8. Responsive Design Adjustments
   ===================================================================== */

@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
  }

  .header-controls {
    flex-direction: column;
    gap: 0.5rem;
  }

  #searchBar {
    width: 200px;
  }

  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  .gallery {
    padding: 2rem 1rem;
    gap: 1.5rem;
  }

  .lightbox-content {
    max-width: 90%;
    max-height: 90%;
  }
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.8rem;
  }

  #searchBar {
    width: 180px;
  }

  .gallery-item {
    border-radius: 10px;
  }

  .overlay h3 {
    font-size: 1rem;
  }

  .overlay p {
    font-size: 0.8rem;
  }

  .lightbox-caption {
    padding: 1rem;
  }

  .lightbox-caption h3 {
    font-size: 1rem;
  }

  .lightbox-caption p {
    font-size: 0.8rem;
  }

  footer p {
    font-size: 0.8rem;
  }
}

/* =====================================================================
   9. Keyframe Animations
   ===================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

Enhancements Explained:
CSS Variables for Theme Management:

Light and Dark Theme Variables: Utilizing CSS variables allows for easy theming and consistent color management across the entire stylesheet.
Modern Typography and Layout:

Font Sizes and Line Heights: Defined variables for various font sizes ensure consistency and scalability.
Box Shadows and Transitions: Added depth and smooth interactions enhance the visual appeal.
Responsive Design:

Media Queries: Ensure the portfolio adapts seamlessly to different screen sizes, providing an optimal viewing experience on mobile devices, tablets, and desktops.
Interactive Elements:

Hover Effects: Subtle scaling and shadow enhancements make interactions feel more dynamic and engaging.
Smooth Transitions: Ensures that changes like theme toggling and lightbox animations feel natural and fluid.
Accessibility Considerations:

Color Contrast: Maintained sufficient contrast between text and background for readability.
Interactive Element Sizing: Buttons and interactive elements are sized appropriately for easy interaction on all devices.
Adding Interactivity with JavaScript
JavaScript brings your portfolio to life by handling user interactions such as filtering projects, opening the lightbox, and toggling between dark and light modes.

// =====================================================================
// 1. Selecting Elements
// =====================================================================

const filterButtons = document.querySelectorAll('.filter-btn');
const galleryItems = document.querySelectorAll('.gallery-item');
const searchBar = document.getElementById('searchBar');

const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxTitle = document.getElementById('lightbox-title');
const lightboxDescription = document.getElementById('lightbox-description');
const closeBtn = document.querySelector('.close');

const themeToggleBtn = document.getElementById('themeToggle');
const body = document.body;
const header = document.querySelector('header');
const galleryItemsArray = Array.from(galleryItems);
const lightboxContent = document.querySelector('.lightbox-content');
const overlayElements = document.querySelectorAll('.overlay');
const filterBtns = document.querySelectorAll('.filter-btn');

// =====================================================================
// 2. Filtering Functionality
// =====================================================================

function filterGallery() {
  const activeFilter = document.querySelector('.filter-btn.active').getAttribute('data-filter');
  const searchQuery = searchBar.value.toLowerCase();

  galleryItems.forEach(item => {
    const itemCategory = item.getAttribute('data-category');
    const itemTitle = item.querySelector('.overlay h3').textContent.toLowerCase();

    if (
      (activeFilter === 'all' || itemCategory === activeFilter) &&
      itemTitle.includes(searchQuery)
    ) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
}

// Event Listeners for Filter Buttons
filterButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Remove 'active' class from all buttons
    filterButtons.forEach(btn => btn.classList.remove('active'));
    // Add 'active' class to the clicked button
    button.classList.add('active');

    // Filter the gallery based on the selected category
    filterGallery();
  });
});

// Event Listener for Search Bar
searchBar.addEventListener('input', () => {
  filterGallery();
});

// =====================================================================
// 3. Lightbox Functionality
// =====================================================================

// Function to Open Lightbox
function openLightbox(item) {
  const imgSrc = item.querySelector('img').src;
  const title = item.querySelector('.overlay h3').textContent;
  const description = item.querySelector('.overlay p').textContent;

  lightboxImg.src = imgSrc;
  lightboxTitle.textContent = title;
  lightboxDescription.textContent = description;

  lightbox.classList.add('active');
  body.style.overflow = 'hidden'; // Prevent background scrolling
}

// Event Listeners for Gallery Items
galleryItems.forEach(item => {
  item.addEventListener('click', () => {
    openLightbox(item);
  });
});

// Function to Close Lightbox
function closeLightbox() {
  lightbox.classList.remove('active');
  body.style.overflow = 'auto'; // Restore background scrolling
}

// Event Listener for Close Button
closeBtn.addEventListener('click', () => {
  closeLightbox();
});

// Event Listener for Clicking Outside Lightbox Content
window.addEventListener('click', (e) => {
  if (e.target === lightbox) {
    closeLightbox();
  }
});

// =====================================================================
// 4. Theme Toggle Functionality
// =====================================================================

// Retrieve Saved Theme from Local Storage
const savedTheme = localStorage.getItem('theme') || 'light-mode';

// Function to Apply Theme
function applyTheme(theme) {
  if (theme === 'dark-mode') {
    body.classList.add('dark-mode');
    header.classList.add('dark-mode');
    lightbox.classList.add('dark-mode');
    lightboxContent.classList.add('dark-mode');
    overlayElements.forEach(el => el.classList.add('dark-mode'));
    galleryItemsArray.forEach(item => item.classList.add('dark-mode'));
    filterBtns.forEach(btn => btn.classList.add('dark-mode'));

    // Change Icon to Sun
    themeToggleBtn.querySelector('i').classList.remove('fa-moon');
    themeToggleBtn.querySelector('i').classList.add('fa-sun');
  } else {
    body.classList.remove('dark-mode');
    header.classList.remove('dark-mode');
    lightbox.classList.remove('dark-mode');
    lightboxContent.classList.remove('dark-mode');
    overlayElements.forEach(el => el.classList.remove('dark-mode'));
    galleryItemsArray.forEach(item => item.classList.remove('dark-mode'));
    filterBtns.forEach(btn => btn.classList.remove('dark-mode'));

    // Change Icon to Moon
    themeToggleBtn.querySelector('i').classList.remove('fa-sun');
    themeToggleBtn.querySelector('i').classList.add('fa-moon');
  }
}

// Apply Saved Theme on Page Load
applyTheme(savedTheme);

// Event Listener for Theme Toggle Button
themeToggleBtn.addEventListener('click', () => {
  if (body.classList.contains('dark-mode')) {
    applyTheme('light-mode');
    localStorage.setItem('theme', 'light-mode');
  } else {
    applyTheme('dark-mode');
    localStorage.setItem('theme', 'dark-mode');
  }
});

Key Functionalities:
Filtering Projects:

Category-Based Filtering: Users can filter projects by categories like Web Design, Graphic Design, and Photography.
Real-Time Search: The search bar filters projects based on the input, enhancing user experience.
Lightbox Modal:

Image Enlargement: Clicking on a project opens a modal displaying a larger image and detailed description.
Seamless Navigation: Users can easily close the modal by clicking the close button or outside the content area.
Dark/Light Mode Toggle:

User Preference: Users can switch between dark and light themes, with their preference saved in localStorage for persistence across sessions.
Icon Switching: The toggle button icon dynamically changes to reflect the current theme.
Implementing Dark/Light Mode
Dark mode not only provides a modern aesthetic but also enhances accessibility for users in low-light environments. Here's how to integrate a dark/light mode toggle in your portfolio:

CSS Variables: We've already defined variables for both light and dark themes.
JavaScript Toggle: The script.js handles the addition and removal of the dark-mode class, changing the theme accordingly.
Persisting User Preference: Using localStorage, the user's theme preference is saved and applied on subsequent visits.
Enhancing User Experience: Search and Filtering
Dynamic Filtering and a Real-Time Search Bar empower users to navigate through your projects effortlessly.

Filtering by Category: Users can click on filter buttons to view projects within specific categories.
Real-Time Search: As users type into the search bar, projects are filtered in real-time based on the input, providing instant feedback.
Optimizing for Responsiveness and Accessibility
An elegant portfolio must be responsive and accessible to cater to all users.

Responsive Design:

Flexible Layouts: Using CSS Grid and Flexbox ensures that the gallery adapts to various screen sizes.
Media Queries: Adjust font sizes, padding, and layout based on device width for optimal viewing.
Accessibility:

Alt Text for Images: Descriptive alt attributes improve accessibility for screen readers.
Keyboard Navigation: Ensure that all interactive elements are reachable via keyboard.
Color Contrast: Maintain high contrast ratios between text and background for readability.
Deploying Your Portfolio
Once satisfied with your portfolio, it's time to deploy it for the world to see.

Hosting Platforms:

GitHub Pages: Free hosting service for static websites.
Netlify: Offers continuous deployment and free hosting with custom domain support.
Vercel: Provides seamless deployment for frontend projects.
Custom Domain:

Purchase a custom domain to make your portfolio more professional and memorable.
SEO Optimization:

Use meaningful meta tags, titles, and descriptions.
Optimize loading times by compressing images and minifying CSS/JS files.
Promoting Your Portfolio
Having a stunning portfolio is just the first step. Promoting it ensures it reaches your target audience.

Social Media:

Share your portfolio on platforms like LinkedIn, Twitter, and Facebook.
Use relevant hashtags to increase visibility.
Networking:

Engage with communities on Reddit, Stack Overflow, or Dribbble.
Attend virtual or in-person networking events to showcase your work.
SEO and Content Marketing:

Start a blog related to your field to drive organic traffic.
Optimize your portfolio for search engines with relevant keywords.
Email Signature:

Include a link to your portfolio in your email signature to promote it passively.
Conclusion
Creating an Elegant Interactive Portfolio Gallery is a rewarding endeavor that showcases your skills and projects in a professional and engaging manner. By leveraging HTML5, CSS3, and JavaScript, you can build a responsive and dynamic portfolio that stands out in the digital landscape.

Explore More of My Work:
LinkedIn: Pierre-Romain Lopez
GladiatorsBattle: gladiatorsbattle.com
DivWeb: divweb.fr
Twitter: @GladiatorsBT
JeanFernandsEtti: jeanfernandsetti.fr
XavierFlabat: xavier-flabat.com
Feel free to reach out through my social media channels or visit my websites to learn more about my projects and services. I'm always open to collaboration and new opportunities!

Happy Coding and Best of Luck with Your Portfolio! ??

About the Author
Pierre-Romain Lopez is a passionate web developer and designer with a keen eye for detail and a commitment to creating engaging and user-friendly digital experiences. With a diverse portfolio spanning web design, graphic design, and photography, Pierre-Romain excels in bringing creative visions to life through code and design.

The above is the detailed content of Building an Elegant Interactive Portfolio Gallery with HTMLCSSand JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress images for free

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Oguri Cap Build Guide | A Pretty Derby Musume

3 weeks ago By Jack chen

Agnes Tachyon Build Guide | A Pretty Derby Musume

3 weeks ago By Jack chen

Grass Wonder Build Guide | Uma Musume Pretty Derby

2 weeks ago By Jack chen

PEAK How to Emote

1 months ago By Jack chen

How to Fix KB5060829 Not Installing & Other Reported Bugs

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1793

CakePHP Tutorial

1735

Laravel Tutorial

1587

nyt mini crossword answers

267

587

nyt connections hints and answers

120

836

Related knowledge

How to work with dates and times in js? Jul 01, 2025 am 01:27 AM

The following points should be noted when processing dates and time in JavaScript: 1. There are many ways to create Date objects. It is recommended to use ISO format strings to ensure compatibility; 2. Get and set time information can be obtained and set methods, and note that the month starts from 0; 3. Manually formatting dates requires strings, and third-party libraries can also be used; 4. It is recommended to use libraries that support time zones, such as Luxon. Mastering these key points can effectively avoid common mistakes.

Why should you place tags at the bottom of the ? Jul 02, 2025 am 01:22 AM

PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl

What is event bubbling and capturing in the DOM? Jul 02, 2025 am 01:19 AM

Event capture and bubble are two stages of event propagation in DOM. Capture is from the top layer to the target element, and bubble is from the target element to the top layer. 1. Event capture is implemented by setting the useCapture parameter of addEventListener to true; 2. Event bubble is the default behavior, useCapture is set to false or omitted; 3. Event propagation can be used to prevent event propagation; 4. Event bubbling supports event delegation to improve dynamic content processing efficiency; 5. Capture can be used to intercept events in advance, such as logging or error processing. Understanding these two phases helps to accurately control the timing and how JavaScript responds to user operations.

How can you reduce the payload size of a JavaScript application? Jun 26, 2025 am 12:54 AM

If JavaScript applications load slowly and have poor performance, the problem is that the payload is too large. Solutions include: 1. Use code splitting (CodeSplitting), split the large bundle into multiple small files through React.lazy() or build tools, and load it as needed to reduce the first download; 2. Remove unused code (TreeShaking), use the ES6 module mechanism to clear "dead code" to ensure that the introduced libraries support this feature; 3. Compress and merge resource files, enable Gzip/Brotli and Terser to compress JS, reasonably merge files and optimize static resources; 4. Replace heavy-duty dependencies and choose lightweight libraries such as day.js and fetch

A definitive JS roundup on JavaScript modules: ES Modules vs CommonJS Jul 02, 2025 am 01:28 AM

The main difference between ES module and CommonJS is the loading method and usage scenario. 1.CommonJS is synchronously loaded, suitable for Node.js server-side environment; 2.ES module is asynchronously loaded, suitable for network environments such as browsers; 3. Syntax, ES module uses import/export and must be located in the top-level scope, while CommonJS uses require/module.exports, which can be called dynamically at runtime; 4.CommonJS is widely used in old versions of Node.js and libraries that rely on it such as Express, while ES modules are suitable for modern front-end frameworks and Node.jsv14; 5. Although it can be mixed, it can easily cause problems.

How to make an HTTP request in Node.js? Jul 13, 2025 am 02:18 AM

There are three common ways to initiate HTTP requests in Node.js: use built-in modules, axios, and node-fetch. 1. Use the built-in http/https module without dependencies, which is suitable for basic scenarios, but requires manual processing of data stitching and error monitoring, such as using https.get() to obtain data or send POST requests through .write(); 2.axios is a third-party library based on Promise. It has concise syntax and powerful functions, supports async/await, automatic JSON conversion, interceptor, etc. It is recommended to simplify asynchronous request operations; 3.node-fetch provides a style similar to browser fetch, based on Promise and simple syntax

How does garbage collection work in JavaScript? Jul 04, 2025 am 12:42 AM

JavaScript's garbage collection mechanism automatically manages memory through a tag-clearing algorithm to reduce the risk of memory leakage. The engine traverses and marks the active object from the root object, and unmarked is treated as garbage and cleared. For example, when the object is no longer referenced (such as setting the variable to null), it will be released in the next round of recycling. Common causes of memory leaks include: ① Uncleared timers or event listeners; ② References to external variables in closures; ③ Global variables continue to hold a large amount of data. The V8 engine optimizes recycling efficiency through strategies such as generational recycling, incremental marking, parallel/concurrent recycling, and reduces the main thread blocking time. During development, unnecessary global references should be avoided and object associations should be promptly decorated to improve performance and stability.

var vs let vs const: a quick JS roundup explainer Jul 02, 2025 am 01:18 AM

The difference between var, let and const is scope, promotion and repeated declarations. 1.var is the function scope, with variable promotion, allowing repeated declarations; 2.let is the block-level scope, with temporary dead zones, and repeated declarations are not allowed; 3.const is also the block-level scope, and must be assigned immediately, and cannot be reassigned, but the internal value of the reference type can be modified. Use const first, use let when changing variables, and avoid using var.

See all articles