430 lines
21 KiB
PHP
430 lines
21 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
@date_default_timezone_set('UTC');
|
||
|
||
$projectName = $_SERVER['PROJECT_NAME'] ?? "Arnold Schwarzenegger Career";
|
||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? "A public landing page tracing Arnold Schwarzenegger's rise from bodybuilding icon to movie star and governor.";
|
||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||
$assetVersion = (string) max(
|
||
@filemtime(__DIR__ . '/assets/css/custom.css') ?: time(),
|
||
@filemtime(__DIR__ . '/assets/js/main.js') ?: time()
|
||
);
|
||
$currentYear = date('Y');
|
||
$galleryItems = [
|
||
[
|
||
'era' => 'bodybuilding',
|
||
'year' => '1974',
|
||
'title' => "Prime competition form",
|
||
'caption' => "A defining bodybuilding-era image from the run that made him one of the sport's most recognizable figures.",
|
||
'image' => 'https://upload.wikimedia.org/wikipedia/commons/0/05/Arnold_Schwarzenegger_1974.jpg',
|
||
'alt' => 'Arnold Schwarzenegger posing during his bodybuilding career in 1974.'
|
||
],
|
||
[
|
||
'era' => 'acting',
|
||
'year' => '2003',
|
||
'title' => "Cannes red carpet presence",
|
||
'caption' => 'An image from Cannes that reflects the global star power he carried well beyond action cinema.',
|
||
'image' => 'https://upload.wikimedia.org/wikipedia/commons/e/ed/Arnold_Schwarzenegger_2003.jpg',
|
||
'alt' => 'Arnold Schwarzenegger at the 2003 Cannes Film Festival.'
|
||
],
|
||
[
|
||
'era' => 'politics',
|
||
'year' => '2004',
|
||
'title' => "Governor-era portrait",
|
||
'caption' => "A formal public image from the period when he served as California's 38th governor.",
|
||
'image' => 'https://upload.wikimedia.org/wikipedia/commons/b/bb/Arnold_Schwarzenegger_2004-01-30.jpg',
|
||
'alt' => 'Arnold Schwarzenegger during his time as governor of California.'
|
||
],
|
||
[
|
||
'era' => 'acting',
|
||
'year' => '2017',
|
||
'title' => "Festival circuit return",
|
||
'caption' => "A later public appearance that reinforces how durable his public image remained decades after the first breakthrough.",
|
||
'image' => 'https://upload.wikimedia.org/wikipedia/commons/c/cc/Arnold_Schwarzenegger_2012.jpg',
|
||
'alt' => 'Arnold Schwarzenegger at a public appearance in 2012.'
|
||
],
|
||
[
|
||
'era' => 'legacy',
|
||
'year' => '2019',
|
||
'title' => "Public figure, decades later",
|
||
'caption' => "A contemporary portrait that captures the elder-statesman phase of his public life.",
|
||
'image' => 'https://upload.wikimedia.org/wikipedia/commons/6/6e/Arnold_Schwarzenegger-2019.jpg',
|
||
'alt' => 'Arnold Schwarzenegger in 2019.'
|
||
],
|
||
[
|
||
'era' => 'politics',
|
||
'year' => '2003',
|
||
'title' => "Service and visibility",
|
||
'caption' => "An image from a military support context, reflecting the civic and ceremonial side of his public role.",
|
||
'image' => 'https://upload.wikimedia.org/wikipedia/commons/b/b3/Arnold_Schwarzenegger_Enduring_Freedom.jpg',
|
||
'alt' => 'Arnold Schwarzenegger visiting service members during a public service event.'
|
||
],
|
||
];
|
||
?>
|
||
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title><?= htmlspecialchars($projectName) ?></title>
|
||
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>">
|
||
<meta name="theme-color" content="#111315">
|
||
<meta property="og:title" content="<?= htmlspecialchars($projectName) ?>">
|
||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>">
|
||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>">
|
||
<?php if ($projectImageUrl): ?>
|
||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>">
|
||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>">
|
||
<?php endif; ?>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="/assets/css/custom.css?v=<?= rawurlencode($assetVersion) ?>">
|
||
</head>
|
||
<body class="page-cinematic" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-root-margin="0px 0px -40%" tabindex="0">
|
||
<header class="site-header sticky-top border-bottom border-secondary-subtle">
|
||
<nav id="mainNav" class="navbar navbar-expand-lg navbar-dark">
|
||
<div class="container">
|
||
<a class="navbar-brand d-flex align-items-center gap-2" href="#top">
|
||
<span class="brand-mark">AS</span>
|
||
<span>
|
||
<span class="brand-title d-block">Arnold Schwarzenegger</span>
|
||
<span class="brand-subtitle d-block">Career landing page</span>
|
||
</span>
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
|
||
<li class="nav-item"><a class="nav-link" href="#story">Story</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#timeline">Timeline</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#moments">Moments</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#quotes">Quotes</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main id="top">
|
||
<section class="hero-section hero-stage section-shell">
|
||
<div class="container">
|
||
<div class="row align-items-center g-4 g-xl-5">
|
||
<div class="col-lg-7">
|
||
<div class="hero-copy reveal" data-parallax="copy">
|
||
<div class="scene-label">Cinematic profile</div>
|
||
<div class="eyebrow">Public editorial landing page</div>
|
||
<h1 class="display-hero">A career built in three unmistakable acts.</h1>
|
||
<p class="hero-lead">From elite bodybuilding to blockbuster cinema to the governor's office, Arnold Schwarzenegger's career stands out because each chapter felt larger than the one before it.</p>
|
||
<div class="hero-roles" aria-label="Career roles">
|
||
<span>Athlete</span>
|
||
<span>Actor</span>
|
||
<span>Governor</span>
|
||
</div>
|
||
<div class="hero-actions d-flex flex-wrap gap-2">
|
||
<a class="btn btn-accent" href="#timeline" data-toast-message="Jumped to the career timeline.">Explore the timeline</a>
|
||
<a class="btn btn-outline-light" href="#gallery" data-toast-message="Opening the photo-rich section next.">Browse the gallery</a>
|
||
</div>
|
||
<div class="hero-meta row row-cols-1 row-cols-sm-3 g-3 mt-1">
|
||
<div class="col">
|
||
<div class="stat-card">
|
||
<span class="stat-value">7</span>
|
||
<span class="stat-label">Mr. Olympia titles</span>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="stat-card">
|
||
<span class="stat-value">3</span>
|
||
<span class="stat-label">Career eras</span>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="stat-card">
|
||
<span class="stat-value">2003–2011</span>
|
||
<span class="stat-label">Governor of California</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-marquee" aria-hidden="true">
|
||
<span>Discipline</span>
|
||
<span>Reinvention</span>
|
||
<span>Screen myth</span>
|
||
<span>Executive power</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5">
|
||
<div class="hero-media reveal reveal-delay-1" data-parallax="media">
|
||
<div class="media-frame">
|
||
<div class="media-frame-badge">Featured portrait</div>
|
||
<img
|
||
src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Arnold_Schwarzenegger-2019.jpg"
|
||
class="img-fluid"
|
||
alt="Arnold Schwarzenegger in a contemporary portrait."
|
||
width="900"
|
||
height="1200"
|
||
loading="eager"
|
||
>
|
||
</div>
|
||
<div class="image-caption">Later-career portrait — steady, recognizable, and still unmistakably cinematic.</div>
|
||
<div class="hero-floating-note">
|
||
<span class="floating-kicker">Three acts</span>
|
||
<strong>Bodybuilding → Hollywood → California statehouse</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="story" class="section-shell section-border-top">
|
||
<div class="container">
|
||
<div class="section-heading reveal">
|
||
<div class="eyebrow">Overview</div>
|
||
<h2>Why this career arc still feels singular.</h2>
|
||
<p>Arnold Schwarzenegger's public image works because it never stayed fixed. He emerged as a bodybuilding phenomenon, crossed into Hollywood at full scale, then converted celebrity into an executive political role.</p>
|
||
</div>
|
||
<div class="row g-4 align-items-stretch">
|
||
<div class="col-lg-7 reveal">
|
||
<article class="content-panel h-100">
|
||
<h3>Three chapters, one through-line</h3>
|
||
<p>The through-line is discipline. In bodybuilding, it meant obsessive repetition and visual presence. In film, it became physical charisma and instantly readable screen identity. In politics, it turned into a different kind of public performance: broad messaging, visibility, and executive symbolism.</p>
|
||
<p class="mb-0">This landing page is designed as a clean, scroll-first story: fewer distractions, stronger typography, restrained color, and image-led pacing.</p>
|
||
</article>
|
||
</div>
|
||
<div class="col-lg-5 reveal reveal-delay-1">
|
||
<aside class="content-panel h-100">
|
||
<div class="list-label">Fast read</div>
|
||
<ul class="detail-list list-unstyled mb-0">
|
||
<li><span>Bodybuilding</span><strong>Mr. Universe at 20, then seven Olympia titles</strong></li>
|
||
<li><span>Acting</span><strong>From cult appearances to action-star permanence</strong></li>
|
||
<li><span>Politics</span><strong>California governor with a highly visible public brand</strong></li>
|
||
<li><span>Legacy</span><strong>Still active in media, fitness, and civic advocacy</strong></li>
|
||
</ul>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="timeline" class="section-shell section-border-top">
|
||
<div class="container">
|
||
<div class="section-heading reveal">
|
||
<div class="eyebrow">Timeline</div>
|
||
<h2>A compressed career timeline.</h2>
|
||
<p>The page highlights the milestones most visitors care about first: arrival, breakthrough, cultural dominance, and reinvention.</p>
|
||
</div>
|
||
<div class="timeline-grid">
|
||
<article class="timeline-card reveal">
|
||
<div class="timeline-year">1968–1975</div>
|
||
<h3>Bodybuilding dominance</h3>
|
||
<p>He moved from Austria to the United States, became the youngest Mr. Universe at age 20, and built a run that culminated in seven Mr. Olympia victories.</p>
|
||
<ul>
|
||
<li>Rapid rise through international competition</li>
|
||
<li>Visual identity tied to discipline and spectacle</li>
|
||
<li><em>Pumping Iron</em> helped widen his audience</li>
|
||
</ul>
|
||
</article>
|
||
<article class="timeline-card reveal reveal-delay-1">
|
||
<div class="timeline-year">1976–2002</div>
|
||
<h3>Hollywood scale</h3>
|
||
<p>He converted physique into screen presence, then screen presence into a durable action-movie persona that became global pop culture.</p>
|
||
<ul>
|
||
<li><em>Conan the Barbarian</em> announced him as a leading man</li>
|
||
<li><em>The Terminator</em> made the persona unforgettable</li>
|
||
<li>Comedy and family films broadened the image</li>
|
||
</ul>
|
||
</article>
|
||
<article class="timeline-card reveal reveal-delay-2">
|
||
<div class="timeline-year">2003–today</div>
|
||
<h3>Politics, advocacy, and legacy</h3>
|
||
<p>His election as California's 38th governor marked a rare shift from entertainment fame to statewide executive power, later followed by a return to media and public advocacy.</p>
|
||
<ul>
|
||
<li>Governor of California from 2003 to 2011</li>
|
||
<li>Fitness, climate, and civic messaging remain part of the brand</li>
|
||
<li>Public legacy now spans sport, entertainment, and politics</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="moments" class="section-shell section-border-top">
|
||
<div class="container">
|
||
<div class="section-heading reveal">
|
||
<div class="eyebrow">Signature moments</div>
|
||
<h2>Milestones that define the public narrative.</h2>
|
||
<p>Rather than listing everything, this section isolates the moments that best explain why the career still reads as unusually expansive.</p>
|
||
</div>
|
||
<div class="row g-3 g-lg-4">
|
||
<div class="col-md-6 col-xl-3 reveal">
|
||
<article class="moment-card h-100">
|
||
<div class="moment-kicker">Sport</div>
|
||
<h3>Mr. Universe at 20</h3>
|
||
<p>Early proof of exceptional ambition and stage presence.</p>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-6 col-xl-3 reveal reveal-delay-1">
|
||
<article class="moment-card h-100">
|
||
<div class="moment-kicker">Film</div>
|
||
<h3>Action-star permanence</h3>
|
||
<p>Blockbuster roles turned a niche celebrity into a mass-market icon.</p>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-6 col-xl-3 reveal reveal-delay-2">
|
||
<article class="moment-card h-100">
|
||
<div class="moment-kicker">Award</div>
|
||
<h3>Golden Globe win</h3>
|
||
<p><em>Stay Hungry</em> signaled early crossover potential in film.</p>
|
||
</article>
|
||
</div>
|
||
<div class="col-md-6 col-xl-3 reveal reveal-delay-3">
|
||
<article class="moment-card h-100">
|
||
<div class="moment-kicker">Public office</div>
|
||
<h3>Governor of California</h3>
|
||
<p>A rare leap from celebrity scale to executive political office.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="gallery" class="section-shell section-border-top">
|
||
<div class="container">
|
||
<div class="section-heading reveal">
|
||
<div class="eyebrow">Gallery</div>
|
||
<h2>Browse the career through images.</h2>
|
||
<p>Use the filters to move between bodybuilding, acting, politics, and the broader legacy chapter. Each card opens a larger image view.</p>
|
||
</div>
|
||
|
||
<div class="gallery-toolbar reveal">
|
||
<div class="btn-group flex-wrap" role="group" aria-label="Filter gallery by era">
|
||
<button type="button" class="btn btn-filter active" data-filter="all">All</button>
|
||
<button type="button" class="btn btn-filter" data-filter="bodybuilding">Bodybuilding</button>
|
||
<button type="button" class="btn btn-filter" data-filter="acting">Acting</button>
|
||
<button type="button" class="btn btn-filter" data-filter="politics">Politics</button>
|
||
<button type="button" class="btn btn-filter" data-filter="legacy">Legacy</button>
|
||
</div>
|
||
<div class="filter-status" id="filterStatus" aria-live="polite">Showing all 6 images.</div>
|
||
</div>
|
||
|
||
<div class="row g-3 g-lg-4" id="galleryGrid">
|
||
<?php foreach ($galleryItems as $item): ?>
|
||
<div class="col-sm-6 col-xl-4 gallery-item reveal" data-era="<?= htmlspecialchars($item['era']) ?>">
|
||
<button
|
||
type="button"
|
||
class="gallery-card text-start"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#galleryModal"
|
||
data-title="<?= htmlspecialchars($item['title']) ?>"
|
||
data-era-label="<?= htmlspecialchars(ucfirst($item['era'])) ?>"
|
||
data-year="<?= htmlspecialchars($item['year']) ?>"
|
||
data-caption="<?= htmlspecialchars($item['caption']) ?>"
|
||
data-image="<?= htmlspecialchars($item['image']) ?>"
|
||
data-alt="<?= htmlspecialchars($item['alt']) ?>"
|
||
>
|
||
<div class="gallery-image-wrap">
|
||
<img
|
||
src="<?= htmlspecialchars($item['image']) ?>"
|
||
alt="<?= htmlspecialchars($item['alt']) ?>"
|
||
class="gallery-image"
|
||
width="900"
|
||
height="1100"
|
||
loading="lazy"
|
||
>
|
||
</div>
|
||
<div class="gallery-body">
|
||
<div class="gallery-meta">
|
||
<span><?= htmlspecialchars(ucfirst($item['era'])) ?></span>
|
||
<span><?= htmlspecialchars($item['year']) ?></span>
|
||
</div>
|
||
<h3><?= htmlspecialchars($item['title']) ?></h3>
|
||
<p><?= htmlspecialchars($item['caption']) ?></p>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="quotes" class="section-shell section-border-top">
|
||
<div class="container">
|
||
<div class="section-heading reveal">
|
||
<div class="eyebrow">Notable quotes</div>
|
||
<h2>Lines people still associate with the persona.</h2>
|
||
<p>Some lines became larger than the films themselves, helping cement the screen character and public mythology.</p>
|
||
</div>
|
||
<div class="row g-3 g-lg-4">
|
||
<div class="col-lg-4 reveal">
|
||
<blockquote class="quote-card h-100">
|
||
<p>“I'll be back.”</p>
|
||
<footer>— Screen line that became part of pop culture shorthand</footer>
|
||
</blockquote>
|
||
</div>
|
||
<div class="col-lg-4 reveal reveal-delay-1">
|
||
<blockquote class="quote-card h-100">
|
||
<p>“Strength does not come from winning.”</p>
|
||
<footer>— A line often linked to his discipline-first public image</footer>
|
||
</blockquote>
|
||
</div>
|
||
<div class="col-lg-4 reveal reveal-delay-2">
|
||
<blockquote class="quote-card h-100">
|
||
<p>“What is the point of being on this Earth if you are going to be like everyone else?”</p>
|
||
<footer>— A quote that mirrors the scale of his career ambitions</footer>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer section-border-top">
|
||
<div class="container d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-center">
|
||
<div>
|
||
<div class="footer-title">Arnold Schwarzenegger — career landing page</div>
|
||
<p class="footer-copy mb-0">A clean, image-forward one-page experience designed for quick scrolling and clear storytelling.</p>
|
||
</div>
|
||
<a class="btn btn-sm btn-outline-light" href="#top" data-toast-message="Returned to the top of the page.">Back to top</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="modal fade" id="galleryModal" tabindex="-1" aria-labelledby="galleryModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
|
||
<div class="modal-content gallery-modal-content">
|
||
<div class="modal-header border-secondary-subtle">
|
||
<div>
|
||
<div class="modal-eyebrow" id="galleryModalMeta">Image detail</div>
|
||
<h2 class="modal-title fs-4" id="galleryModalLabel">Gallery image</h2>
|
||
</div>
|
||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row g-4 align-items-start">
|
||
<div class="col-lg-7">
|
||
<div class="modal-image-frame">
|
||
<img id="galleryModalImage" src="" alt="" class="img-fluid" width="1200" height="1400">
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5">
|
||
<div class="modal-copy">
|
||
<p id="galleryModalCaption" class="mb-0"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||
<div id="pageToast" class="toast text-bg-dark border border-secondary-subtle" role="status" aria-live="polite" aria-atomic="true">
|
||
<div class="toast-body" id="pageToastBody">Section updated.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="/assets/js/main.js?v=<?= rawurlencode($assetVersion) ?>" defer></script>
|
||
</body>
|
||
</html>
|