Bild-Lightbox-Komponente
Eine Retro-/Vintage-Bild-Lightbox-Komponente mit lebendigen Farben, responsivem Design und Unterstützung für dunkle Themen, die für Portfolios geeignet ist.
HTML-Code
<div class="p-8 bg-gradient-to-br from-purple-700 via-pink-500 to-red-500 dark:from-gray-900 dark:via-purple-900 dark:to-black min-h-screen">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-8 text-center drop-shadow-lg font-mono">My Rad Portfolio</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Image 1 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/vintage1/600/400" alt="Portfolio Image 1" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-xl font-bold font-mono">Project Alpha</p>
</div>
</div>
<!-- Image 2 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/retro2/600/400" alt="Portfolio Image 2" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-xl font-bold font-mono">Cyberpunk City</p>
</div>
</div>
<!-- Image 3 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/80sglitch/600/400" alt="Portfolio Image 3" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-xl font-bold font-mono">Neon Dreams</p>
</div>
</div>
<!-- Image 4 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/vaporwave/600/400" alt="Portfolio Image 4" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-xl font-bold font-mono">Synthwave Sunset</p>
</div>
</div>
<!-- Image 5 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/gridscape/600/400" alt="Portfolio Image 5" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-xl font-bold font-mono">Pixel Paradise</p>
</div>
</div>
<!-- Image 6 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/datascape/600/400" alt="Portfolio Image 6" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
<p class="text-white text-xl font-bold font-mono">Binary Bliss</p>
</div>
</div>
</div>
<!-- Retro Footer -->
<footer class="mt-16 text-center text-white text-lg font-mono drop-shadow-md">
<p>© 2023 My Rad Portfolio. All Rights Reserved, Dude.</p>
</footer>
</div>Verwandte Komponenten
Bild-Lightbox-Komponente
Eine reaktionsschnelle Bild-Lightbox-Komponente mit Unterstützung für den Dunkelmodus. Diese Komponente zeigt eine Bildergalerie an, und wenn Sie auf ein Bild klicken, wird ein Vollbildmodal mit Navigationspfeilen zum Durchsuchen der Bilder geöffnet. Es verfügt über eine Schließen-Schaltfläche und verwendet lebendige Farben, um interaktive Elemente hervorzuheben. Das Design ist auf den Geschäfts-/Unternehmenskontext zugeschnitten und gewährleistet eine professionelle und dennoch ansprechende Benutzererfahrung.
Bild-Lightbox-Komponente
Eine komplexe Bild-Lightbox-Komponente, die im brutalistischen Stil gestaltet ist und sich für Social-Media-Schnittstellen eignet, mit einem Graustufen-Farbschema und hohem Kontrast für die Unterstützung des Dunkelmodus.
Bild-Lightbox-Komponente
Eine reaktionsschnelle Bild-Lightbox-Komponente, die im Material Design-Stil entworfen wurde und ein triadisches Farbschema und Unterstützung für den Dunkelmodus bietet. Es eignet sich für Portfolios, in denen Arbeiten oder Produkte präsentiert werden.