froxxxy/playground
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refocus f12-rocks onepager on Instagram with real photos

Browse Source 
Replace AI-generated hero with f12.rocks gallery images and shift copy
from blog/website to @f12.rocks as primary destination.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cursor
2026-07-05 15:42:33 +00:00
parent fd84c66fcd
commit 17759badf7
2 changed files with 146 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/f12-rocks/f12-rocks-hero.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 MiB

public/f12-rocks/index.html
+144 -106
View File
@@ -3,8 +3,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="f12.rocks — Fotografie mit Geschichten. Festivals, Football, Konzerte. Auf Instagram und im Blog.">
<title>f12.rocks — Fotografie mit Geschichten</title>
<meta name="description" content="@f12.rocks auf Instagram — Konzerte, Football, Festivals. Fotografie von Frank Schwenk.">
<title>@f12.rocks — Instagram</title>
<style>
:root {
--bg: #0a0908;
@@ -12,9 +12,8 @@
--border: #2a221c;
--text: #f5efe8;
--muted: #a89888;
--amber: #e8a045;
--magenta: #c44b7a;
--rust: #8b3a2a;
--insta: #f12f12;
--insta-soft: rgba(241, 47, 18, 0.15);
--max: 44rem;
}
@@ -30,7 +29,7 @@
.hero {
position: relative;
padding: 3rem 1.5rem 2.75rem;
padding: 2.5rem 1.5rem 2rem;
text-align: center;
overflow: hidden;
}
@@ -40,58 +39,85 @@
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 160, 69, 0.18), transparent),
radial-gradient(ellipse 50% 40% at 85% 70%, rgba(196, 75, 122, 0.12), transparent),
radial-gradient(ellipse 70% 50% at 50% 0%, var(--insta-soft), transparent),
var(--bg);
z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.logo-mark {
display: inline-block;
.insta-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.22em;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 1.25rem;
padding: 0.35rem 0.75rem;
border: 1px solid rgba(232, 160, 69, 0.35);
color: var(--insta);
margin-bottom: 1rem;
padding: 0.35rem 0.85rem;
border: 1px solid rgba(241, 47, 18, 0.35);
border-radius: 2rem;
}
.hero-image {
display: block;
width: min(100%, 32rem);
.insta-badge svg {
width: 1rem;
height: 1rem;
stroke: var(--insta);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.35rem;
max-width: 28rem;
margin: 0 auto 1.75rem;
border-radius: 0.5rem;
border-radius: 0.65rem;
overflow: hidden;
border: 1px solid var(--border);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.55),
0 0 80px rgba(232, 160, 69, 0.08);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.photo-grid img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
background: var(--surface);
}
.photo-grid img:first-child {
grid-column: span 2;
grid-row: span 2;
aspect-ratio: auto;
}
.hero h1 {
font-size: clamp(2.2rem, 6vw, 3.2rem);
font-size: clamp(2rem, 7vw, 3rem);
font-weight: 800;
letter-spacing: -0.04em;
margin-bottom: 0.5rem;
letter-spacing: -0.03em;
margin-bottom: 0.4rem;
line-height: 1.1;
}
.hero h1 span {
background: linear-gradient(135deg, var(--amber), var(--magenta));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
.hero h1 span { color: var(--insta); }
.handle {
color: var(--muted);
font-size: 1rem;
margin-bottom: 0.75rem;
}
.tagline {
color: var(--muted);
font-size: 1.15rem;
max-width: 28rem;
margin: 0 auto 1.75rem;
font-size: 1.1rem;
max-width: 26rem;
margin: 0 auto 1.5rem;
}
.cta-row {
@@ -113,14 +139,12 @@
transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover {
transform: translateY(-2px);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
background: linear-gradient(135deg, var(--amber), #c47a2a);
color: #1a1208;
box-shadow: 0 4px 20px rgba(232, 160, 69, 0.3);
background: var(--insta);
color: #fff;
box-shadow: 0 4px 20px rgba(241, 47, 18, 0.35);
}
.btn-secondary {
@@ -130,8 +154,8 @@
}
.btn-secondary:hover {
border-color: var(--magenta);
box-shadow: 0 4px 20px rgba(196, 75, 122, 0.15);
border-color: var(--insta);
box-shadow: 0 4px 16px rgba(241, 47, 18, 0.12);
}
main {
@@ -146,7 +170,7 @@
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--amber);
color: var(--insta);
margin-bottom: 0.75rem;
}
@@ -185,30 +209,11 @@
font-size: 0.95rem;
}
.quote {
background: linear-gradient(135deg, rgba(139, 58, 42, 0.2), rgba(196, 75, 122, 0.08));
border: 1px solid var(--border);
border-left: 4px solid var(--magenta);
border-radius: 0.75rem;
padding: 1.35rem 1.5rem;
font-size: 1.1rem;
font-style: italic;
color: var(--text);
}
.quote cite {
display: block;
margin-top: 0.75rem;
font-style: normal;
font-size: 0.85rem;
color: var(--muted);
}
.callout {
text-align: center;
padding: 2rem 1.5rem;
background:
radial-gradient(ellipse 60% 80% at 50% 100%, rgba(232, 160, 69, 0.1), transparent),
radial-gradient(ellipse 60% 80% at 50% 100%, var(--insta-soft), transparent),
var(--surface);
border: 1px solid var(--border);
border-radius: 1rem;
@@ -237,96 +242,129 @@
text-align: center;
}
footer a { color: var(--amber); }
footer a { color: var(--insta); }
</style>
</head>
<body>
<header class="hero">
<p class="logo-mark">Fotografie · Blog · Insta</p>
<p class="insta-badge">
<svg viewBox="0 0 24 24" aria-hidden="true">
<rect x="2" y="2" width="20" height="20" rx="5"/>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
</svg>
Instagram
</p>
<div class="photo-grid" aria-label="Auswahl aus dem @f12.rocks Feed">
<img
class="hero-image"
src="f12-rocks-hero.png"
alt="Konzertfotografie: Silhouetten in warmem Bühnenlicht, Blick aus dem Publikum"
width="512"
height="512"
src="https://f12.rocks/images/20260703_Hellraisers_TheShape_Schlossplatz/640/20260704_0001.webp"
alt="Konzertfoto: Hellraisers & The Shape am Schlossplatz"
width="640"
height="958"
loading="eager"
>
<h1><span>f12.rocks</span></h1>
<p class="tagline">Geschichten hinter den Fotos — nicht nur Pixel, sondern was davor und danach passiert ist.</p>
<img
src="https://f12.rocks/images/20260620_ALB_MFF/640/20260620_5045.webp"
alt="Football: Crusaders an der Sideline"
width="640"
height="427"
loading="lazy"
>
<img
src="https://f12.rocks/images/20260526_Baxxter_Shooting/640/20260525_0343.webp"
alt="Band-Shooting: Baxxter Boys"
width="640"
height="428"
loading="lazy"
>
<img
src="https://f12.rocks/images/20260516_Hischaboggl_MieV/640/20260517_1611.webp"
alt="Live-Konzert im MieV"
width="640"
height="427"
loading="lazy"
>
<img
src="https://f12.rocks/images/20260517_ALB_BIB/640/20260517_AHC-BIB_07_Schwenk.webp"
alt="American Football: Crusaders Game Day"
width="640"
height="427"
loading="lazy"
>
</div>
<h1>Folge <span>@f12.rocks</span></h1>
<p class="handle">instagram.com/f12.rocks</p>
<p class="tagline">
Konzerte, Football, Festivals — echte Fotos von Frank Schwenk,
direkt im Feed. Kein Stock, kein KI-Bildschirm: was du siehst, ist passiert.
</p>
<div class="cta-row">
<a class="btn btn-primary" href="https://www.instagram.com/f12.rocks" rel="noopener">@f12.rocks auf Instagram</a>
<a class="btn btn-secondary" href="https://f12.rocks" rel="noopener">Galerie &amp; Blog</a>
<a class="btn btn-primary" href="https://www.instagram.com/f12.rocks" rel="noopener">Auf Instagram folgen</a>
<a class="btn btn-secondary" href="https://f12.rocks" rel="noopener">Alle Fotos auf f12.rocks</a>
</div>
</header>
<main>
<section>
<h2>Was ist das?</h2>
<h2>Was im Feed landet</h2>
<p>
<strong>f12.rocks</strong> ist die Fotografie-Ecke von Frank Schwenk: Konzerte, Festivals,
Football an der Sideline, Bands in freier Wildbahn — und der Blog dazu,
der erklärt, <em>warum</em> ein Bild entstanden ist und was beim Shooting schiefging
(oder glorreich funktioniert hat).
<strong>@f12.rocks</strong> ist Frank Schwenks Instagram für Event-Fotografie:
Rock und Punk auf der Bühne, Crusaders an der Sideline, Festivals mit Licht,
das man liebt oder flucht — alles aus der ersten Reihe oder hinterm Zaun.
</p>
<p>
Kein Stock-Foto-Universum. Kein „Lifestyle inspiriert"-Blabla.
Echte Orte, echtes Licht, echte Geschichten — von der Haustür bis zum Schlossplatz.
Neue Bilder kommen regelmäßig rein. Wer folgt, bekommt die Momente,
bevor sie in der Galerie oder im Archiv verschwinden.
</p>
</section>
<section>
<h2>Wo du f12.rocks triffst</h2>
<h2>Typische Motive</h2>
<ul class="topics">
<li>
<span class="icon" aria-hidden="true">🎸</span>
<div>
<strong>Konzerte &amp; Festivals</strong>
<span>Rock, Punk, schwäbisch-laut — von der Chapel bis zur Unterführung. Licht, das Fotografen lieben oder fluchen lassen.</span>
<span>Chapel, Schlossplatz, MieV — Bands, Bühnenlicht, Publikum aus Fotografensicht.</span>
</div>
</li>
<li>
<span class="icon" aria-hidden="true">🏈</span>
<div>
<strong>Football an der Sideline</strong>
<span>Crusaders Game Days: GFL-Pflicht, zwei Kameras, Respekt vor der Geschwindigkeit auf dem Feld.</span>
</div>
</li>
<li>
<span class="icon" aria-hidden="true">📝</span>
<div>
<strong>Blog: Geschichten hinter den Fotos</strong>
<span>Autopilot für Faule — die Imagepipeline arbeitet, du liest, was dahintersteckt. darktable, Hitze, Panikmodus inklusive.</span>
<span>Crusaders Game Days: Geschwindigkeit, Kontakt, zwei Kameras wenn's brennt.</span>
</div>
</li>
<li>
<span class="icon" aria-hidden="true">📷</span>
<div>
<strong>Instagram @f12.rocks</strong>
<span>Neue Bilder, kurze Einblicke, Drag-to-scroll-Galerie auf der Website — alles aus einer Hand.</span>
<strong>Shootings &amp; Making-of</strong>
<span>Bands in freier Wildbahn, Hitze, Unterführungen — der Feed zeigt auch das Drumherum.</span>
</div>
</li>
<li>
<span class="icon" aria-hidden="true">✨</span>
<div>
<strong>Neue Posts, kein Algorithmus-Gefühl</strong>
<span>Ein Account, ein Fotograf — du siehst, woran er gerade hängt.</span>
</div>
</li>
</ul>
</section>
<section>
<blockquote class="quote">
„350 Meter vom Wohnzimmer zum Schlossplatz — Konzert, alte Bekannte,
und ein Abend, der mehr Familientreffen als Fotoshooting war."
<cite>— aus dem f12.rocks Blog</cite>
</blockquote>
</section>
<section>
<div class="callout">
<h2>Lust auf mehr als nur Likes?</h2>
<h2>Feed öffnen, folgen, fertig.</h2>
<p>
Folge <strong>@f12.rocks</strong> für neue Bilder — oder tauch im Blog ein,
wenn du wissen willst, was hinter dem Auslöser passiert.
Der schnellste Weg zu neuen Bildern: <strong>@f12.rocks</strong> auf Instagram.
Die Galerie auf f12.rocks ist das Archiv — der Feed ist der Live-Kanal.
</p>
<div class="cta-row">
<a class="btn btn-primary" href="https://www.instagram.com/f12.rocks" rel="noopener">Instagram folgen</a>
<a class="btn btn-secondary" href="https://f12.rocks/blog/" rel="noopener">Zum Blog</a>
<a class="btn btn-primary" href="https://www.instagram.com/f12.rocks" rel="noopener">@f12.rocks folgen</a>
</div>
</div>
</section>
@@ -336,7 +374,7 @@
<footer>
Erstellt von @cursor · Gitea Issue #5 ·
<a href="https://gitea.schwenk.online/froxxxy/playground/issues/5">froxxxy/playground</a>
· Bild: KI-generiert (Cursor), lokal im Repo
· Fotos: <a href="https://f12.rocks">f12.rocks</a> / Frank Schwenk
</footer>
</body>