152 lines
4.4 KiB
PHP
152 lines
4.4 KiB
PHP
<?php
|
|
|
|
require __DIR__ . '/data/projects.php';
|
|
|
|
$slug = isset($_GET['slug']) ? preg_replace('/[^a-z0-9\-]/', '', strtolower($_GET['slug'])) : '';
|
|
|
|
if (!$slug || !isset($projects[$slug])) {
|
|
http_response_code(404);
|
|
require __DIR__ . '/404.php';
|
|
exit;
|
|
}
|
|
|
|
$p = $projects[$slug];
|
|
|
|
$title = htmlspecialchars($p['page_title']);
|
|
$description = htmlspecialchars($p['page_desc']);
|
|
$extra_css = '/css/portfolio.css';
|
|
|
|
$nav_back = ['url' => '/portfolio', 'label' => '← Portfolio'];
|
|
//if (!empty($p['domain'])) {
|
|
// $nav_cta = ['url' => 'https://' . $p['domain'], 'label' => 'Visit Site →'];
|
|
//}
|
|
|
|
require __DIR__ . '/includes/header.php';
|
|
?>
|
|
|
|
<header class="hero hero--cs">
|
|
<div class="hero-content">
|
|
<div class="hero-divider"></div>
|
|
<div class="hero-meta-row">
|
|
<div class="hero-meta">
|
|
<span><?= htmlspecialchars($p['num']) ?> / <?= htmlspecialchars($p['code']) ?> · <?= htmlspecialchars($p['year']) ?></span>
|
|
<span><?= htmlspecialchars($p['location']) ?></span>
|
|
<span><?= htmlspecialchars($p['sub']) ?></span>
|
|
</div>
|
|
</div>
|
|
<h1 class="hero-headline">
|
|
<span class="line1"><?= htmlspecialchars($p['h1'][0]) ?></span>
|
|
<span class="line2"><?= htmlspecialchars($p['h1'][1]) ?></span>
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<!-- Project Meta Bar -->
|
|
<div class="meta-bar">
|
|
<div class="meta-col">
|
|
<span class="meta-col-label">Client</span>
|
|
<span class="meta-col-value"><?= htmlspecialchars($p['title']) ?></span>
|
|
</div>
|
|
<div class="meta-col">
|
|
<span class="meta-col-label">Year</span>
|
|
<span class="meta-col-value"><?= htmlspecialchars($p['year']) ?></span>
|
|
</div>
|
|
<div class="meta-col">
|
|
<span class="meta-col-label">Stack</span>
|
|
<span class="meta-col-value"><?= htmlspecialchars($p['stack']) ?></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Overview -->
|
|
<section class="cs-overview">
|
|
<div class="cs-overview-label">
|
|
<span class="section-label">Project Overview</span>
|
|
</div>
|
|
<div class="cs-overview-body">
|
|
<p class="cs-overview-text"><?= htmlspecialchars($p['overview']) ?></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Screenshots Category Divider -->
|
|
<div class="category-divider">
|
|
<h2>Screenshots</h2>
|
|
</div>
|
|
|
|
<!-- Screenshots -->
|
|
<section class="screenshots-section">
|
|
|
|
<!-- Full-width hero screenshot -->
|
|
<div class="screenshot-hero">
|
|
<div class="browser-frame">
|
|
<div class="browser-bar">
|
|
<div class="browser-dots">
|
|
<span class="browser-dot browser-dot--red"></span>
|
|
<span class="browser-dot browser-dot--beige"></span>
|
|
<span class="browser-dot browser-dot--green"></span>
|
|
</div>
|
|
<span class="browser-url"><?= htmlspecialchars($p['domain']) ?></span>
|
|
</div>
|
|
<div class="browser-scroll-wrap">
|
|
<div class="browser-scroll">
|
|
<img src="<?= htmlspecialchars($p['hero_img']) ?>" alt="<?= htmlspecialchars($p['title']) ?> — Homepage">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php foreach ($p['screenshots'] as $group): ?>
|
|
|
|
<div class="screenshots-label">
|
|
<span class="section-label"><?= htmlspecialchars($group['label']) ?></span>
|
|
</div>
|
|
|
|
<div class="screenshot-grid">
|
|
<?php foreach ($group['items'] as $shot): ?>
|
|
<div>
|
|
<span class="screenshot-card-label"><?= htmlspecialchars($shot['label']) ?></span>
|
|
<p class="screenshot-card-desc"><?= htmlspecialchars($shot['desc']) ?></p>
|
|
<div class="browser-frame">
|
|
<div class="browser-bar">
|
|
<div class="browser-dots">
|
|
<span class="browser-dot browser-dot--red"></span>
|
|
<span class="browser-dot browser-dot--beige"></span>
|
|
<span class="browser-dot browser-dot--green"></span>
|
|
</div>
|
|
<span class="browser-url"><?= htmlspecialchars($p['domain'] . $shot['url_suffix']) ?></span>
|
|
</div>
|
|
<img src="<?= htmlspecialchars($shot['img']) ?>" alt="<?= htmlspecialchars($shot['alt']) ?>">
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<?php endforeach; ?>
|
|
|
|
</section>
|
|
|
|
<!-- Execution Category Divider -->
|
|
<div class="category-divider">
|
|
<h2>Execution</h2>
|
|
</div>
|
|
|
|
<!-- Craft & Execution -->
|
|
<section class="cs-overview">
|
|
<div class="cs-overview-label">
|
|
<span class="section-label">Craft & Execution</span>
|
|
</div>
|
|
<div class="cs-overview-body">
|
|
<p class="cs-overview-text"><?= htmlspecialchars($p['execution']) ?></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Project Navigation -->
|
|
<div class="project-nav">
|
|
<a href="/portfolio" class="project-nav-link">← Back to Portfolio</a>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<?php require __DIR__ . '/includes/footer.php'; ?>
|