Suite Landing Page

Dies ist eine Lösung für die Suite Landing Page Challenge auf Frontend Mentor.

Anforderungen

Benutzer*innen sollten in der Lage sein:

• Das optimale Layout abhängig von der Bildschirmgröße ihres Geräts anzusehen
• Hover-Zustände für interaktive Elemente zu sehen

Gebaut mit

Code-Qualität mit

Implementierungszeit

Diese Challenge wurde innerhalb von 3 Stunden abgeschlossen.

Projekt-Highlights

Dieses Projekt bot mir eine hervorragende Gelegenheit, meine Layout-Expertise unter Beweis zu stellen, insbesondere darin, verschiedene Elemente auf ästhetisch ansprechende und responsive Weise anzuordnen.

Ein bemerkenswerter Aspekt dieses Vorhabens war die Optimierung visueller Elemente; ich implementierte die Verwendung von acht unterschiedlichen Bildvarianten für einen einzigen visuellen Inhalt. Durch den Einsatz des picture-Elements und von next/image ermöglichte ich es dem Browser, selektiv das am besten geeignete Bild basierend auf den Anzeige-Kriterien auszuliefern, um ein optimales Gleichgewicht zwischen Bildqualität und Leistung sicherzustellen. Zum Beispiel:

<picture>
  {/* Zeige die großen Bilder für Desktops */}
  <source
    media="(min-width: 640px)"
    srcSet="/image-jeremy-large.png 1x, /image-jeremy-large@2x.png 2x"
    type="image/png"
  />
  <source
    media="(min-width: 640px)"
    srcSet="/image-jeremy-large.webp 1x, /image-jeremy-large@2x.webp 2x"
    type="image/webp"
  />

  {/* Zeige die kleinen Bilder für mobile Geräte */}
  <source
    media="(max-width: 639px)"
    srcSet="/image-jeremy-small.png 1x, /image-jeremy-small@2x.png 2x"
    type="image/png"
  />
  <source
    media="(max-width: 639px)"
    srcSet="/image-jeremy-small.webp 1x, /image-jeremy-small@2x.webp 2x"
    type="image/webp"
  />

  {/* Fallback-Bild */}
  <Image
    src="/image-jeremy-small.png" // Standardbild
    alt="Portrait von Jeremy"
    layout="responsive"
    width={300}
    height={500}
    className="max-h-[25.125rem] lg:max-h-[37.5rem]"
  />
</picture>