Membina Galeri Portfolio Interaktif Elegan dengan HTMLCSSand JavaScript-tutorial js-php.cn

Building an Elegant Interactive Portfolio Gallery with HTMLCSSand JavaScript

Dalam era digital hari ini, portfolio anda berfungsi sebagai kad panggilan profesional anda. Sama ada anda seorang pembangun web, pereka grafik, jurugambar atau mana-mana profesional kreatif, portfolio interaktif yang elegan boleh meningkatkan kehadiran dalam talian anda dengan ketara, mempamerkan kemahiran anda dan menarik bakal pelanggan atau majikan. Dalam tutorial ini, kami akan membimbing anda membuat portfolio yang canggih dan interaktif menggunakan HTML5, CSS3 dan JavaScript. Pada akhirnya, anda akan mempunyai galeri responsif yang menampilkan penapisan dinamik, bar carian masa nyata, togol mod gelap/cahaya dan mod peti cahaya intuitif untuk memaparkan projek anda dengan berkesan.

Rajah 1: Pratonton Galeri Portfolio Interaktif Elegan

Jadual Kandungan

Mengapa Portfolio Interaktif?
Prasyarat
Menyediakan Struktur Projek
Membuat Struktur HTML
Menggayakan dengan CSS
Menambah Interaktiviti dengan JavaScript
Melaksanakan Mod Gelap/Terang
Meningkatkan Pengalaman Pengguna: Carian dan Penapisan
Mengoptimumkan Responsif dan Kebolehcapaian
Menggunakan Portfolio Anda
Mempromosikan Portfolio Anda
Kesimpulan
Mengapa Portfolio Interaktif?
Portfolio interaktif melakukan lebih daripada sekadar menyenaraikan projek anda; ia melibatkan pelawat, menyerlahkan kemahiran anda dan menunjukkan keupayaan anda untuk mencipta antara muka yang mesra pengguna dan menyenangkan dari segi estetika. Elemen interaktif seperti penapisan, bar carian dan mod gelap/cahaya bukan sahaja meningkatkan pengalaman pengguna tetapi juga mempamerkan kemahiran anda dalam teknik pembangunan web moden.

Prasyarat
Sebelum terjun ke dalam membina portfolio anda, pastikan anda mempunyai:

Pengetahuan Asas HTML, CSS dan JavaScript: Memahami asas adalah penting.
Editor Kod: Alat seperti Kod Visual Studio, Teks Sublime atau Atom disyorkan.
Pelayar Web: Penyemak imbas moden seperti Google Chrome atau Mozilla Firefox dengan alatan pembangun.
Imej Projek Anda: Visual berkualiti tinggi untuk mempamerkan hasil kerja anda.
Sediakan Struktur Projek
Susun fail projek anda secara sistematik untuk memudahkan pengurusan dan kebolehskalaan.

galeri-portfolio/
│
├── index.html
├── gaya.css
├── script.js
└── aset/
└── imej/
├── web-project1.jpg
├── graphic-project1.jpg
└── photography-project1.jpg
index.html: Fail HTML utama.
styles.css: Mengandungi semua gaya CSS.
script.js: Memegang kod JavaScript untuk interaktiviti.
aset/imej/: Direktori untuk imej projek.
Mencipta Struktur HTML
Mulakan dengan mencipta struktur HTML yang semantik dan boleh diakses. Asas ini memastikan portfolio anda mesra pengguna dan dioptimumkan SEO.

<!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; }
}

Salin selepas log masuk

Peningkatan Diterangkan:
Pembolehubah CSS untuk Pengurusan Tema:

Pembolehubah Tema Cerah dan Gelap: Menggunakan pembolehubah CSS membolehkan pengurusan tema mudah dan warna yang konsisten merentas keseluruhan helaian gaya.
Tipografi dan Reka Letak Moden:

Saiz Fon dan Ketinggian Garis: Pembolehubah yang ditentukan untuk pelbagai saiz fon memastikan konsistensi dan kebolehskalaan.
Bayang-bayang Kotak dan Peralihan: Kedalaman tambahan dan interaksi lancar meningkatkan daya tarikan visual.
Reka Bentuk Responsif:

Pertanyaan Media: Pastikan portfolio menyesuaikan dengan lancar pada saiz skrin yang berbeza, memberikan pengalaman tontonan yang optimum pada peranti mudah alih, tablet dan desktop.
Elemen Interaktif:

Kesan Tuding: Penskalaan halus dan peningkatan bayang-bayang menjadikan interaksi terasa lebih dinamik dan menarik.
Peralihan Lancar: Memastikan perubahan seperti togol tema dan animasi peti cahaya terasa semula jadi dan cair.
Pertimbangan Kebolehcapaian:

Kontras Warna: Mengekalkan kontras yang mencukupi antara teks dan latar belakang untuk kebolehbacaan.
Saiz Elemen Interaktif: Butang dan elemen interaktif bersaiz sesuai untuk interaksi mudah pada semua peranti.
Menambah Interaktiviti dengan JavaScript
JavaScript menghidupkan portfolio anda dengan mengendalikan interaksi pengguna seperti menapis projek, membuka peti cahaya dan menogol antara mod gelap dan terang.

// =====================================================================
// 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');
  }
});

Salin selepas log masuk

Fungsi Utama:
Projek Penapisan:

Penapisan Berdasarkan Kategori: Pengguna boleh menapis projek mengikut kategori seperti Reka Bentuk Web, Reka Bentuk Grafik dan Fotografi.
Carian Masa Nyata: Bar carian menapis projek berdasarkan input, meningkatkan pengalaman pengguna.
Modal Peti Cahaya:

Pembesaran Imej: Mengklik pada projek membuka modal yang memaparkan imej yang lebih besar dan penerangan terperinci.
Navigasi Lancar: Pengguna boleh menutup mod dengan mudah dengan mengklik butang tutup atau di luar kawasan kandungan.
Togol Mod Gelap/Cahaya:

Keutamaan Pengguna: Pengguna boleh bertukar antara tema gelap dan terang, dengan pilihan mereka disimpan dalam localStorage untuk kegigihan merentas sesi.
Penukaran Ikon: Ikon butang togol berubah secara dinamik untuk mencerminkan tema semasa.
Melaksanakan Mod Gelap/Terang
Mod gelap bukan sahaja menyediakan estetik moden tetapi juga meningkatkan kebolehcapaian untuk pengguna dalam persekitaran cahaya malap. Berikut ialah cara untuk menyepadukan togol mod gelap/cahaya dalam portfolio anda:

Pembolehubah CSS: Kami telah pun menentukan pembolehubah untuk kedua-dua tema terang dan gelap.
Togol JavaScript: The script.js mengendalikan penambahan dan pengalihan keluar kelas mod gelap, menukar tema dengan sewajarnya.
Keutamaan Pengguna Berterusan: Menggunakan localStorage, pilihan tema pengguna disimpan dan digunakan pada lawatan berikutnya.
Meningkatkan Pengalaman Pengguna: Cari dan Penapisan
Penapisan Dinamik dan Bar Carian Masa Nyata memperkasakan pengguna untuk menavigasi projek anda dengan mudah.

Menapis mengikut Kategori: Pengguna boleh mengklik butang penapis untuk melihat projek dalam kategori tertentu.
Carian Masa Nyata: Semasa pengguna menaip ke dalam bar carian, projek ditapis dalam masa nyata berdasarkan input, memberikan maklum balas segera.
Mengoptimumkan Responsif dan Kebolehcapaian
Portfolio yang elegan mestilah responsif dan boleh diakses untuk memenuhi keperluan semua pengguna.

Reka Bentuk Responsif:

Reka Letak Fleksibel: Menggunakan Grid CSS dan Flexbox memastikan galeri menyesuaikan diri dengan pelbagai saiz skrin.
Pertanyaan Media: Laraskan saiz fon, padding dan reka letak berdasarkan lebar peranti untuk tontonan optimum.
Kebolehcapaian:

Teks Alt untuk Imej: Atribut alt deskriptif meningkatkan kebolehcapaian untuk pembaca skrin.
Navigasi Papan Kekunci: Pastikan semua elemen interaktif boleh dicapai melalui papan kekunci.
Kontras Warna: Kekalkan nisbah kontras yang tinggi antara teks dan latar belakang untuk kebolehbacaan.
Meletakkan Portfolio Anda
Setelah berpuas hati dengan portfolio anda, tiba masanya untuk menggunakan portfolio tersebut untuk tatapan dunia.

Platform Pengehosan:

Halaman GitHub: Perkhidmatan pengehosan percuma untuk tapak web statik.
Netlify: Menawarkan penggunaan berterusan dan pengehosan percuma dengan sokongan domain tersuai.
Vercel: Menyediakan penggunaan yang lancar untuk projek bahagian hadapan.
Domain Tersuai:

Beli domain tersuai untuk menjadikan portfolio anda lebih profesional dan mudah diingati.
Pengoptimuman SEO:

Gunakan teg meta, tajuk dan penerangan yang bermakna.
Optimumkan masa pemuatan dengan memampatkan imej dan mengecilkan fail CSS/JS.
Mempromosikan Portfolio Anda
Mempunyai portfolio yang menakjubkan hanyalah langkah pertama. Mempromosikannya memastikan ia menjangkau khalayak sasaran anda.

Media Sosial:

Kongsi portfolio anda pada platform seperti LinkedIn, Twitter dan Facebook.
Gunakan hashtag yang berkaitan untuk meningkatkan keterlihatan.
Rangkaian:

Berinteraksi dengan komuniti di Reddit, Stack Overflow atau Dribbble.
Hadiri acara rangkaian maya atau bersemuka untuk mempamerkan hasil kerja anda.
SEO dan Pemasaran Kandungan:

Mulakan blog yang berkaitan dengan bidang anda untuk memacu trafik organik.
Optimumkan portfolio anda untuk enjin carian dengan kata kunci yang berkaitan.
Tandatangan E-mel:

Sertakan pautan ke portfolio anda dalam tandatangan e-mel anda untuk mempromosikannya secara pasif.
Kesimpulan
Mencipta Galeri Portfolio Interaktif yang Elegan ialah usaha yang bermanfaat yang mempamerkan kemahiran dan projek anda secara profesional dan menarik. Dengan memanfaatkan HTML5, CSS3 dan JavaScript, anda boleh membina portfolio responsif dan dinamik yang menonjol dalam landskap digital.

Teroka Lebih Banyak Kerja Saya:
LinkedIn: Pierre-Romain Lopez
GladiatorsBattle: gladiatorsbattle.com
DivWeb: divweb.fr
Twitter: @GladiatorsBT
JeanFernandsEtti: jeanfernandsetti.fr
XavierFlabat: xavier-flabat.com
Sila hubungi melalui saluran media sosial saya atau lawati tapak web saya untuk mengetahui lebih lanjut tentang projek dan perkhidmatan saya. Saya sentiasa terbuka kepada kerjasama dan peluang baharu!

Selamat Pengekodan dan Semoga Berjaya dengan Portfolio Anda! ?✨

Mengenai Pengarang
Pierre-Romain Lopez ialah pembangun dan pereka web yang bersemangat dengan pandangan yang tajam terhadap perincian dan komitmen untuk mencipta pengalaman digital yang menarik dan mesra pengguna. Dengan portfolio yang pelbagai merangkumi reka bentuk web, reka bentuk grafik dan fotografi, Pierre-Romain cemerlang dalam menghidupkan visi kreatif melalui kod dan reka bentuk.

Atas ialah kandungan terperinci Membina Galeri Portfolio Interaktif Elegan dengan HTMLCSSand JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!