Web-Frontend
js-Tutorial
Erstellen einer eleganten interaktiven Portfolio-Galerie mit HTMLCSS und JavaScript
Erstellen einer eleganten interaktiven Portfolio-Galerie mit HTMLCSS und JavaScript
Nov 17, 2024 pm 09:25 PM
Im heutigen digitalen Zeitalter dient Ihr Portfolio als Ihre berufliche Visitenkarte. Egal, ob Sie Webentwickler, Grafikdesigner, Fotograf oder ein kreativer Profi sind, ein elegantes interaktives Portfolio kann Ihre Online-Pr?senz erheblich verbessern, Ihre F?higkeiten pr?sentieren und potenzielle Kunden oder Arbeitgeber anziehen. In diesem Tutorial führen wir Sie durch die Erstellung eines anspruchsvollen und interaktiven Portfolios mit HTML5, CSS3 und JavaScript. Am Ende verfügen Sie über eine responsive Galerie mit dynamischer Filterung, einer Echtzeit-Suchleiste, Umschalten zwischen Dunkel- und Hellmodus und einem intuitiven Lightbox-Modal, um Ihre Projekte effektiv anzuzeigen.
Abbildung 1: Vorschau der eleganten interaktiven Portfolio-Galerie
Inhaltsverzeichnis
- Warum ein interaktives Portfolio?
- Voraussetzungen
- Einrichten der Projektstruktur
- Erstellen der HTML-Struktur
- Styling mit CSS
- Interaktivit?t mit JavaScript hinzufügen
- Dunkel-/Hellmodus implementieren
- Verbesserung der Benutzererfahrung: Suchen und Filtern
- Optimierung für Reaktionsf?higkeit und Zug?nglichkeit
- Bereitstellen Ihres Portfolios
- Werbung für Ihr Portfolio
- Fazit
- Warum ein interaktives Portfolio?
- Ein interaktives Portfolio bietet mehr als nur eine Auflistung Ihrer Projekte; Es bindet Besucher ein, hebt Ihre F?higkeiten hervor und demonstriert Ihre F?higkeit, benutzerfreundliche und ?sthetisch ansprechende Schnittstellen zu erstellen. Interaktive Elemente wie Filterung, Suchleisten und Dunkel-/Hellmodus verbessern nicht nur das Benutzererlebnis, sondern zeigen auch Ihre Kenntnisse in modernen Webentwicklungstechniken.
Voraussetzungen
Bevor Sie mit dem Aufbau Ihres Portfolios beginnen, stellen Sie sicher, dass Sie Folgendes haben:
Grundkenntnisse in HTML, CSS und JavaScript: Das Verst?ndnis der Grundlagen ist entscheidend.
Code-Editor: Tools wie Visual Studio Code, Sublime Text oder Atom werden empfohlen.
Webbrowser: Moderne Browser wie Google Chrome oder Mozilla Firefox mit Entwicklertools.
Bilder Ihrer Projekte: Hochwertige Bilder zur Pr?sentation Ihrer Arbeit.
Einrichten der Projektstruktur
Organisieren Sie Ihre Projektdateien systematisch, um die Verwaltung und Skalierbarkeit zu vereinfachen.
Portfolio-Galerie/
│
├── index.html
├──styles.css
├── script.js
└── Verm?genswerte/
└── Bilder/
├── web-project1.jpg
├──graphic-project1.jpg
└── Photography-Project1.jpg
index.html: Die Haupt-HTML-Datei.
styles.css: Enth?lt alle CSS-Stile.
script.js: Enth?lt JavaScript-Code für Interaktivit?t.
asset/images/: Verzeichnis für Projektbilder.
Erstellen der HTML-Struktur
Beginnen Sie mit der Erstellung einer semantischen und zug?nglichen HTML-Struktur. Diese Grundlage stellt sicher, dass Ihr Portfolio sowohl benutzerfreundlich als auch SEO-optimiert ist.
<!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; }
}
Erkl?rte Verbesserungen:
CSS-Variablen für die Theme-Verwaltung:
Helle und dunkle Designvariablen: Die Verwendung von CSS-Variablen erm?glicht eine einfache Themengestaltung und konsistente Farbverwaltung im gesamten Stylesheet.
Moderne Typografie und Layout:
Schriftgr??en und Zeilenh?hen: Definierte Variablen für verschiedene Schriftgr??en sorgen für Konsistenz und Skalierbarkeit.
Box-Schatten und überg?nge: Zus?tzliche Tiefe und reibungslose Interaktionen verbessern die visuelle Attraktivit?t.
Responsives Design:
Medienabfragen: Stellen Sie sicher, dass sich das Portfolio nahtlos an verschiedene Bildschirmgr??en anpasst und ein optimales Seherlebnis auf Mobilger?ten, Tablets und Desktops bietet.
Interaktive Elemente:
Hover-Effekte: Dezente Skalierung und Schattenverbesserungen sorgen dafür, dass sich Interaktionen dynamischer und ansprechender anfühlen.
Reibungslose überg?nge: Stellt sicher, dass sich ?nderungen wie das Umschalten von Themen und Lightbox-Animationen natürlich und flüssig anfühlen.
überlegungen zur Barrierefreiheit:
Farbkontrast: Ausreichender Kontrast zwischen Text und Hintergrund für bessere Lesbarkeit beibehalten.
Gr??e interaktiver Elemente: Schaltfl?chen und interaktive Elemente haben die richtige Gr??e für eine einfache Interaktion auf allen Ger?ten.
Hinzufügen von Interaktivit?t mit JavaScript
JavaScript erweckt Ihr Portfolio zum Leben, indem es Benutzerinteraktionen wie das Filtern von Projekten, das ?ffnen der Lightbox und das Umschalten zwischen dunklem und hellem Modus übernimmt.
// =====================================================================
// 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');
}
});
Hauptfunktionen:
Projekte filtern:
Kategoriebasierte Filterung: Benutzer k?nnen Projekte nach Kategorien wie Webdesign, Grafikdesign und Fotografie filtern.
Echtzeitsuche: Die Suchleiste filtert Projekte basierend auf der Eingabe und verbessert so die Benutzererfahrung.
Lightbox-Modal:
Bildvergr??erung: Durch Klicken auf ein Projekt wird ein Modal ge?ffnet, das ein gr??eres Bild und eine detaillierte Beschreibung anzeigt.
Nahtlose Navigation: Benutzer k?nnen das Modal einfach schlie?en, indem sie auf die Schaltfl?che ?Schlie?en“ oder au?erhalb des Inhaltsbereichs klicken.
Umschalten zwischen Dunkel- und Hellmodus:
Benutzerpr?ferenz: Benutzer k?nnen zwischen dunklen und hellen Themen wechseln, wobei ihre Pr?ferenz in localStorage gespeichert wird, um sie sitzungsübergreifend beizubehalten.
Symbolwechsel: Das Symbol der Umschalttaste ?ndert sich dynamisch, um das aktuelle Thema widerzuspiegeln.
Implementierung des Dunkel-/Hellmodus
Der Dunkelmodus sorgt nicht nur für eine moderne ?sthetik, sondern verbessert auch die Zug?nglichkeit für Benutzer in Umgebungen mit wenig Licht. So integrieren Sie einen Dunkel-/Hellmodus-Umschalter in Ihr Portfolio:
CSS-Variablen: Wir haben bereits Variablen für helle und dunkle Themen definiert.
JavaScript-Umschaltung: Die Datei script.js übernimmt das Hinzufügen und Entfernen der Dark-Mode-Klasse und ?ndert das Thema entsprechend.
Bestehende Benutzerpr?ferenz: Mithilfe von localStorage wird die Designpr?ferenz des Benutzers gespeichert und bei nachfolgenden Besuchen angewendet.
Verbesserung der Benutzererfahrung: Suchen und Filtern
Dynamische Filterung und eine Echtzeit-Suchleiste erm?glichen Benutzern die mühelose Navigation durch Ihre Projekte.
Filtern nach Kategorie: Benutzer k?nnen auf Filterschaltfl?chen klicken, um Projekte innerhalb bestimmter Kategorien anzuzeigen.
Echtzeitsuche: W?hrend Benutzer etwas in die Suchleiste eingeben, werden Projekte in Echtzeit basierend auf der Eingabe gefiltert und bieten so sofortiges Feedback.
Optimierung für Reaktionsf?higkeit und Zug?nglichkeit
Ein elegantes Portfolio muss reaktionsschnell und zug?nglich sein, um allen Benutzern gerecht zu werden.
Responsives Design:
Flexible Layouts: Durch die Verwendung von CSS Grid und Flexbox wird sichergestellt, dass sich die Galerie an verschiedene Bildschirmgr??en anpasst.
Medienabfragen: Passen Sie Schriftgr??en, Abst?nde und Layout basierend auf der Ger?tebreite an, um eine optimale Anzeige zu gew?hrleisten.
Zug?nglichkeit:
Alt-Text für Bilder: Beschreibende Alt-Attribute verbessern die Zug?nglichkeit für Screenreader.
Tastaturnavigation: Stellen Sie sicher, dass alle interaktiven Elemente über die Tastatur erreichbar sind.
Farbkontrast: Behalten Sie zur besseren Lesbarkeit ein hohes Kontrastverh?ltnis zwischen Text und Hintergrund bei.
Bereitstellung Ihres Portfolios
Sobald Sie mit Ihrem Portfolio zufrieden sind, ist es an der Zeit, es für die ganze Welt sichtbar zu machen.
Hosting-Plattformen:
GitHub Pages: Kostenloser Hosting-Service für statische Websites.
Netlify: Bietet kontinuierliche Bereitstellung und kostenloses Hosting mit benutzerdefinierter Domain-Unterstützung.
Vercel: Bietet eine nahtlose Bereitstellung für Frontend-Projekte.
Benutzerdefinierte Dom?ne:
Erwerben Sie eine benutzerdefinierte Domain, um Ihr Portfolio professioneller und einpr?gsamer zu gestalten.
SEO-Optimierung:
Verwenden Sie aussagekr?ftige Meta-Tags, Titel und Beschreibungen.
Optimieren Sie die Ladezeiten, indem Sie Bilder komprimieren und CSS/JS-Dateien verkleinern.
Werbung für Ihr Portfolio
Ein beeindruckendes Portfolio ist nur der erste Schritt. Durch die Werbung stellen Sie sicher, dass es Ihre Zielgruppe erreicht.
Soziale Medien:
Teilen Sie Ihr Portfolio auf Plattformen wie LinkedIn, Twitter und Facebook.
Verwenden Sie relevante Hashtags, um die Sichtbarkeit zu erh?hen.
Netzwerken:
Interagieren Sie mit Communities auf Reddit, Stack Overflow oder Dribbble.
Nehmen Sie an virtuellen oder pers?nlichen Networking-Veranstaltungen teil, um Ihre Arbeit zu pr?sentieren.
SEO und Content-Marketing:
Starten Sie einen Blog mit Bezug zu Ihrem Fachgebiet, um den organischen Traffic zu steigern.
Optimieren Sie Ihr Portfolio für Suchmaschinen mit relevanten Schlüsselw?rtern.
E-Mail-Signatur:
Fügen Sie einen Link zu Ihrem Portfolio in Ihre E-Mail-Signatur ein, um es passiv zu bewerben.
Fazit
Die Erstellung einer eleganten interaktiven Portfolio-Galerie ist ein lohnendes Unterfangen, das Ihre F?higkeiten und Projekte auf professionelle und ansprechende Weise pr?sentiert. Durch die Nutzung von HTML5, CSS3 und JavaScript k?nnen Sie ein reaktionsf?higes und dynamisches Portfolio erstellen, das in der digitalen Landschaft hervorsticht.
Entdecken Sie mehr von meiner Arbeit:
LinkedIn: Pierre-Romain Lopez
GladiatorsBattle: Gladiatorsbattle.com
DivWeb: divweb.fr
Twitter: @GladiatorsBT
JeanFernandsEtti: jeanfernandsetti.fr
XavierFlabat: xavier-flabat.com
Kontaktieren Sie mich gerne über meine Social-Media-Kan?le oder besuchen Sie meine Websites, um mehr über meine Projekte und Dienstleistungen zu erfahren. Ich bin immer offen für Zusammenarbeit und neue M?glichkeiten!
Viel Spa? beim Programmieren und viel Glück mit Ihrem Portfolio! ??
über den Autor
Pierre-Romain Lopez ist ein leidenschaftlicher Webentwickler und -designer mit einem scharfen Auge für Details und einem Engagement für die Schaffung ansprechender und benutzerfreundlicher digitaler Erlebnisse. Mit einem vielf?ltigen Portfolio, das Webdesign, Grafikdesign und Fotografie umfasst, zeichnet sich Pierre-Romain dadurch aus, dass er kreative Visionen durch Code und Design zum Leben erweckt.
Das obige ist der detaillierte Inhalt vonErstellen einer eleganten interaktiven Portfolio-Galerie mit HTMLCSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Hei?e Themen
Wie arbeite man mit Daten und Zeiten in JS?
Jul 01, 2025 am 01:27 AM
Die folgenden Punkte sollten bei der Verarbeitung von Daten und Zeiten in JavaScript festgestellt werden: 1. Es gibt viele M?glichkeiten, Datumsobjekte zu erstellen. Es wird empfohlen, ISO -Format -Zeichenfolgen zu verwenden, um die Kompatibilit?t sicherzustellen. 2. Die Zeitinformationen erhalten und festlegen k?nnen und setzen Sie Methoden fest, und beachten Sie, dass der Monat mit 0 beginnt. 3. Die manuell formatierende Daten sind Zeichenfolgen erforderlich, und auch Bibliotheken von Drittanbietern k?nnen verwendet werden. 4. Es wird empfohlen, Bibliotheken zu verwenden, die Zeitzonen wie Luxon unterstützen. Das Beherrschen dieser wichtigen Punkte kann h?ufige Fehler effektiv vermeiden.
Warum sollten Sie Tags am Ende des platzieren?
Jul 02, 2025 am 01:22 AM
PlatztagsattheBottomofabogpostorwebpageServeSpracticalPurposesforseo, Usexperience und design.1ithelpswithseobyallowingEnginestoaccessKeyword-relevantTagswithoutClutteringHemainContent.2.
Was sprudelt und f?ngt Ereignis im Dom?
Jul 02, 2025 am 01:19 AM
Ereigniserfassung und Blase sind zwei Phasen der Ereignisausbreitung in DOM. Die Erfassung erfolgt von der oberen Schicht bis zum Zielelement, und die Blase ist vom Zielelement bis zur oberen Schicht. 1. Die Ereigniserfassung wird implementiert, indem der UseCapture -Parameter von AddEventListener auf true festgelegt wird. 2. Ereignisblase ist das Standardverhalten, Uscapture ist auf false oder weggelassen. 3. Die Ereignisausbreitung kann verwendet werden, um die Ereignisausbreitung zu verhindern. 4. Event Bubbling unterstützt die Ereignisdelegation, um die Effizienz der dynamischen Inhaltsverarbeitung zu verbessern. 5. Capture kann verwendet werden, um Ereignisse im Voraus abzufangen, wie z. B. Protokollierung oder Fehlerverarbeitung. Das Verst?ndnis dieser beiden Phasen hilft dabei, das Timing und die Reaktion von JavaScript auf Benutzeroperationen genau zu steuern.
Wie k?nnen Sie die Nutzlastgr??e einer JavaScript -Anwendung reduzieren?
Jun 26, 2025 am 12:54 AM
Wenn JavaScript -Anwendungen langsam geladen werden und eine schlechte Leistung haben, ist das Problem, dass die Nutzlast zu gro? ist. Zu den L?sungen geh?ren: 1. Verwenden Sie die Codespaltung (codessplitting), teilen Sie das gro?e Bündel über React.lazy () in mehrere kleine Dateien auf und laden Sie es nach Bedarf, um den ersten Download zu reduzieren. 2. Entfernen Sie den unbenutzten Code (Treeshaker), verwenden Sie den ES6 -Modulmechanismus, um "toten Code" zu l?schen, um sicherzustellen, dass die eingeführten Bibliotheken diese Funktion unterstützen. 3.. Ressourcendateien komprimieren und verschmelzen, GZIP/Brotli und Terser aktivieren, JS zu komprimieren, Dateien vernünftig zusammenzufassen und statische Ressourcen zu optimieren. V.
Eine endgültige JS -Zusammenfassung auf JavaScript -Modulen: ES -Module gegen CommonJs
Jul 02, 2025 am 01:28 AM
Der Hauptunterschied zwischen ES -Modul und CommonJs ist das Lademethode und das Nutzungsszenario. 1.Kommonjs ist synchron geladen und für die node.js server-Seite-Umgebung geeignet. 2. Das Modul ist asynchron geladen und für Netzwerkumgebungen wie Browser geeignet. A. 4.Commonjs wird in alten Versionen von Node.js und Bibliotheken, die auf IT wie Express angewiesen sind, h?ufig verwendet, w?hrend ES-Module für moderne Front-End-Frameworks und Node.jsv14 geeignet sind; 5. Obwohl es gemischt werden kann, kann es leicht zu Problemen führen.
Wie stelle ich eine HTTP -Anforderung in node.js?
Jul 13, 2025 am 02:18 AM
Es gibt drei g?ngige M?glichkeiten, HTTP-Anforderungen in Node.js zu initiieren: Verwenden Sie integrierte Module, Axios und Knotenfetch. 1. Verwenden Sie das integrierte HTTP/HTTPS-Modul ohne Abh?ngigkeiten, das für grundlegende Szenarien geeignet ist, jedoch eine manuelle Verarbeitung von Datengen?hten und Fehlerüberwachung erfordert, z. 2.Axios ist eine auf Versprechen basierende Bibliothek von Drittanbietern. Es verfügt über eine kurze Syntax und leistungsstarke Funktionen, unterstützt Async/Auseait, automatische JSON -Konvertierung, Interceptor usw. Es wird empfohlen, asynchrone Anforderungsvorg?nge zu vereinfachen. 3.Node-Fetch bietet einen Stil ?hnlich dem Browser-Abruf, basierend auf Versprechen und einfacher Syntax
Wie funktioniert die Müllsammlung in JavaScript?
Jul 04, 2025 am 12:42 AM
Der Müllsammlung von JavaScript verwaltet den Speicher automatisch über einen Tag-Clearing-Algorithmus, um das Risiko eines Speicherlecks zu verringern. Der Motor durchquert und markiert das aktive Objekt aus dem Wurzelobjekt, und nicht markiert wird als Müll behandelt und gel?scht. Wenn das Objekt beispielsweise nicht mehr referenziert wird (z. B. die Variable nach NULL), wird es in der n?chsten Runde des Recyclings freigegeben. Zu den h?ufigen Ursachen für Speicherlecks geh?ren: ① Unger?te Timer oder Event -H?rer; ② Verweise auf externe Variablen in Schlie?ungen; ③ Globale Variablen halten weiterhin eine gro?e Datenmenge. Der V8 -Motor optimiert die Recyclingeffizienz durch Strategien wie Recycling von Generationen, inkrementelle Markierung, paralleles/gleichzeitiges Recycling und verkürzt die Hauptblockierungszeit. W?hrend der Entwicklung sollten unn?tige globale Referenzen vermieden und Objektverb?nde umgehend dekoriert werden, um die Leistung und Stabilit?t zu verbessern.
var vs let vs const: ein kurzer JS -Roundup Explarer
Jul 02, 2025 am 01:18 AM
Der Unterschied zwischen VaR, LET und CONT ist Geltungsbereich, Werbung und wiederholte Erkl?rungen. 1.VAR ist das Funktionsbereich mit variabler Werbung, die wiederholte Deklarationen erm?glicht. 2. Das Glied ist der Umfang auf Blockebene mit vorübergehenden toten Zonen, und wiederholte Erkl?rungen sind nicht zul?ssig. 3.Konst ist auch der Umfang auf Blockebene und muss sofort zugewiesen werden und kann nicht neu zugewiesen werden, aber der interne Wert des Referenztyps kann ge?ndert werden. Verwenden Sie zuerst const, verwenden Sie LET, wenn Sie Variablen ?ndern, und vermeiden Sie die Verwendung von VAR.
