New panel image and portfolio links

This commit is contained in:
Fraxle
2026-05-30 16:14:01 +01:00
parent c92b209867
commit da12910feb
4 changed files with 36 additions and 24 deletions
+12 -9
View File
@@ -485,17 +485,16 @@ ul { list-style: none; }
.about-image { position: relative; } .about-image { position: relative; }
.about-img-placeholder { .about-img-placeholder {
width: 100%; width: 100%;
aspect-ratio: 1 / 1; max-width: 480px;
max-width: 420px;
border-radius: 24px; border-radius: 24px;
background: linear-gradient(145deg, var(--purple-mid), var(--purple-bright)); overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 7rem;
color: rgba(255,255,255,0.25);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
} }
.about-img-placeholder img {
width: 100%;
height: auto;
display: block;
}
.about-badge { .about-badge {
position: absolute; position: absolute;
bottom: -16px; bottom: -16px;
@@ -648,6 +647,10 @@ ul { list-style: none; }
} }
.project-work i { color: #2DD4BF; } .project-work i { color: #2DD4BF; }
/* No-link row */
.project-row--no-link { cursor: default; }
.project-row--no-link::before { display: none; }
/* Arrow */ /* Arrow */
.project-row-arrow { .project-row-arrow {
width: 40px; width: 40px;
@@ -865,7 +868,7 @@ ul { list-style: none; }
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 40px; gap: 40px;
} }
.about-img-placeholder { max-width: 100%; aspect-ratio: 16/9; } .about-img-placeholder { max-width: 100%; }
.about-badge { right: 16px; } .about-badge { right: 16px; }
.contact-wrapper { .contact-wrapper {
grid-template-columns: 1fr; grid-template-columns: 1fr;
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 193 KiB

+12 -11
View File
@@ -124,7 +124,8 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
<div class="about-grid"> <div class="about-grid">
<div class="about-image reveal"> <div class="about-image reveal">
<div class="about-img-placeholder"> <div class="about-img-placeholder">
<i class="fas fa-hat-wizard"></i> <img src="img/wizfixer.webp" alt="Danny the tech-wizard" class="mascot-img">
<!-- <i class="fas fa-hat-wizard"></i> -->
</div> </div>
<div class="about-badge"> <div class="about-badge">
<i class="fas fa-location-dot"></i> Oxfordshire, UK <i class="fas fa-location-dot"></i> Oxfordshire, UK
@@ -164,7 +165,8 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
<p class="section-lead">A few recent projects from the spell book.</p> <p class="section-lead">A few recent projects from the spell book.</p>
</div> </div>
<div class="projects-list"> <div class="projects-list">
<article class="project-row reveal"> <!-- No link — James Norman has no website -->
<article class="project-row project-row--no-link reveal">
<div class="project-row-img"> <div class="project-row-img">
<div class="project-img-placeholder"><i class="fas fa-leaf"></i></div> <div class="project-img-placeholder"><i class="fas fa-leaf"></i></div>
</div> </div>
@@ -176,9 +178,8 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
<h3>James Norman</h3> <h3>James Norman</h3>
<p class="project-work"><i class="fas fa-network-wired"></i> Office Network Update</p> <p class="project-work"><i class="fas fa-network-wired"></i> Office Network Update</p>
</div> </div>
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
</article> </article>
<article class="project-row reveal"> <a href="https://organicgrowersgathering.org/" target="_blank" rel="noopener" class="project-row reveal">
<div class="project-row-img"> <div class="project-row-img">
<div class="project-img-placeholder"><i class="fas fa-tractor"></i></div> <div class="project-img-placeholder"><i class="fas fa-tractor"></i></div>
</div> </div>
@@ -191,8 +192,8 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
<p class="project-work"><i class="fas fa-video"></i> Video Recording &amp; Editing</p> <p class="project-work"><i class="fas fa-video"></i> Video Recording &amp; Editing</p>
</div> </div>
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div> <div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
</article> </a>
<article class="project-row reveal"> <a href="https://sunscope.net" target="_blank" rel="noopener" class="project-row reveal">
<div class="project-row-img"> <div class="project-row-img">
<div class="project-img-placeholder"><i class="fas fa-cloud-bolt"></i></div> <div class="project-img-placeholder"><i class="fas fa-cloud-bolt"></i></div>
</div> </div>
@@ -205,8 +206,8 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
<p class="project-work"><i class="fas fa-cloud-sun"></i> Advanced Weather App</p> <p class="project-work"><i class="fas fa-cloud-sun"></i> Advanced Weather App</p>
</div> </div>
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div> <div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
</article> </a>
<article class="project-row reveal"> <a href="https://camplight.co.uk/" target="_blank" rel="noopener" class="project-row reveal">
<div class="project-row-img"> <div class="project-row-img">
<div class="project-img-placeholder"><i class="fas fa-campground"></i></div> <div class="project-img-placeholder"><i class="fas fa-campground"></i></div>
</div> </div>
@@ -219,8 +220,8 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
<p class="project-work"><i class="fas fa-globe"></i> Website Design &amp; Build</p> <p class="project-work"><i class="fas fa-globe"></i> Website Design &amp; Build</p>
</div> </div>
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div> <div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
</article> </a>
<article class="project-row reveal"> <a href="https://www.hempen.co.uk/" target="_blank" rel="noopener" class="project-row reveal">
<div class="project-row-img"> <div class="project-row-img">
<div class="project-img-placeholder"><i class="fas fa-store"></i></div> <div class="project-img-placeholder"><i class="fas fa-store"></i></div>
</div> </div>
@@ -233,7 +234,7 @@ $form_error = isset($_GET['error']) && $_GET['error'] === '1';
<p class="project-work"><i class="fas fa-cart-shopping"></i> eCommerce Website</p> <p class="project-work"><i class="fas fa-cart-shopping"></i> eCommerce Website</p>
</div> </div>
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div> <div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
</article> </a>
</div> </div>
</div> </div>
</section> </section>
+12 -4
View File
@@ -18,10 +18,18 @@ unset($_SESSION['captcha_answer']);
// Validate // Validate
$valid = true; $valid = true;
if (empty($name) || strlen($name) > 200) $valid = false; if (empty($name) || strlen($name) > 200) {
if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) $valid = false; $valid = false;
if (empty($message) || strlen($message) > 5000) $valid = false; }
if ($captcha !== $expected || $expected === -1) $valid = false; if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
$valid = false;
}
if (empty($message) || strlen($message) > 5000) {
$valid = false;
}
if ($captcha !== $expected || $expected === -1) {
$valid = false;
}
if (!$valid) { if (!$valid) {
header('Location: index.php?error=1#contact'); header('Location: index.php?error=1#contact');