318 lines
16 KiB
PHP
318 lines
16 KiB
PHP
<?php
|
||
session_start();
|
||
$a = rand(2, 12);
|
||
$b = rand(2, 12);
|
||
$_SESSION['captcha_answer'] = $a + $b;
|
||
$captcha_q = "$a + $b";
|
||
$form_sent = isset($_GET['sent']) && $_GET['sent'] === '1';
|
||
$form_error = isset($_GET['error']) && $_GET['error'] === '1';
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Fraxle.net – Web & Tech for Small Businesses</title>
|
||
<meta name="description" content="Friendly website design, technology support and gadget wizardry for small businesses in Oxfordshire and beyond.">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ===================== NAV ===================== -->
|
||
<header class="site-header" id="site-header">
|
||
<nav class="nav-container">
|
||
<a href="#hero" class="nav-logo">
|
||
<span class="logo-icon">🧙</span>
|
||
<span class="logo-text">Fraxle<span class="logo-dot">.net</span></span>
|
||
</a>
|
||
<ul class="nav-links" id="nav-links">
|
||
<li><a href="#services">Services</a></li>
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#projects">Projects</a></li>
|
||
<li><a href="#contact" class="btn nav-cta">Get in Touch</a></li>
|
||
</ul>
|
||
<button class="nav-hamburger" id="nav-hamburger" aria-label="Toggle menu" aria-expanded="false">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- ===================== HERO ===================== -->
|
||
<section id="hero" class="hero">
|
||
<div class="hero-stars" id="hero-stars"></div>
|
||
<div class="hero-orbs">
|
||
<div class="orb orb-1"></div>
|
||
<div class="orb orb-2"></div>
|
||
<div class="orb orb-3"></div>
|
||
</div>
|
||
<div class="hero-content">
|
||
<div class="hero-text">
|
||
<p class="hero-eyebrow">✦ Magical Digital Services ✦</p>
|
||
<h1 class="hero-title">
|
||
Web & Tech<br>
|
||
<span class="hero-title-accent">for Small Business</span>
|
||
</h1>
|
||
<div class="hero-mascots-mobile">
|
||
<img src="img/wizcat4.webp" alt="Danny the tech-wizard and Astro the cosmic cat" class="mascot-img">
|
||
<p class="hero-caption">Danny the tech-wizard & Astro the cosmic cat</p>
|
||
</div>
|
||
<p class="hero-subtitle">Friendly website design, technology support and gadget wizardry — with a touch of enchantment. Based in Oxfordshire.</p>
|
||
<div class="hero-actions">
|
||
<a href="mailto:wizard@fraxle.net" class="btn btn-primary">
|
||
<i class="fas fa-envelope"></i> wizard@fraxle.net
|
||
</a>
|
||
<a href="#services" class="btn btn-ghost">
|
||
Explore the magic <i class="fas fa-arrow-down"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-mascots">
|
||
<div class="mascot-ring">
|
||
<img src="img/wizcat4.webp" alt="Danny the tech-wizard and Astro the cosmic cat" class="mascot-img">
|
||
</div>
|
||
<p class="hero-caption">Danny the tech-wizard & Astro the cosmic cat</p>
|
||
</div>
|
||
</div>
|
||
<div class="hero-wave">
|
||
<svg viewBox="0 0 1440 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
|
||
<path d="M0,50 C300,100 900,0 1440,60 L1440,100 L0,100 Z" fill="#251D70"/>
|
||
</svg>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== SERVICES ===================== -->
|
||
<section id="services" class="services section-pad">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<p class="section-eyebrow">What I do</p>
|
||
<h2 class="section-title">Spells I Cast</h2>
|
||
<p class="section-lead">From conjuring websites to taming rogue gadgets — here's how I can help your business.</p>
|
||
</div>
|
||
<div class="services-grid">
|
||
<div class="service-card reveal">
|
||
<div class="service-icon service-icon--orange">
|
||
<i class="fas fa-wand-magic-sparkles"></i>
|
||
</div>
|
||
<h3>Web Design with a Touch of Alchemy</h3>
|
||
<p>I conjure websites that don't just look good — they work like magic. Whether you need a simple landing page or an online store, I'll craft a site that's fast, secure, and aligned with your brand.</p>
|
||
</div>
|
||
<div class="service-card reveal">
|
||
<div class="service-icon service-icon--purple">
|
||
<i class="fas fa-mobile-screen-button"></i>
|
||
</div>
|
||
<h3>Tech Support & Digital Sorcery</h3>
|
||
<p>Need help taming your magical devices? Whether it's setting up your smartphone, syncing your tablet, connecting smart gadgets, or rescuing a misbehaving laptop — I'll help you make the most of your tech.</p>
|
||
</div>
|
||
<div class="service-card reveal">
|
||
<div class="service-icon service-icon--teal">
|
||
<i class="fas fa-seedling"></i>
|
||
</div>
|
||
<h3>Empowering Ethical, Independent Business</h3>
|
||
<p>I work especially with small businesses, not-for-profits, charities and farmers who want to grow sustainably in the digital age. Affordable, human-centred, and as easy to use as possible.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== ABOUT ===================== -->
|
||
<section id="about" class="about section-pad">
|
||
<div class="container">
|
||
<div class="about-grid">
|
||
<div class="about-image reveal">
|
||
<div class="about-img-placeholder">
|
||
<img src="img/wizfixer.webp" alt="Danny the tech-wizard" class="mascot-img">
|
||
<!-- <i class="fas fa-hat-wizard"></i> -->
|
||
</div>
|
||
<div class="about-badge">
|
||
<i class="fas fa-location-dot"></i> Oxfordshire, UK
|
||
</div>
|
||
</div>
|
||
<div class="about-text reveal">
|
||
<p class="section-eyebrow">About Fraxle.net</p>
|
||
<h2 class="section-title">Conjuring Digital Magic for Small Businesses</h2>
|
||
<p>Welcome to the realm where technology meets wizardry! Whether you're planting the seeds of a new venture or looking to level up your digital presence, I blend design, functionality, and futuristic tools to help your business flourish.</p>
|
||
<p>Based primarily in <strong>Oxfordshire</strong>, I can bring these skills directly to your local organisation — and work remotely with anyone, anywhere.</p>
|
||
<div class="about-bullets">
|
||
<div class="about-bullet">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span>Friendly, jargon-free support</span>
|
||
</div>
|
||
<div class="about-bullet">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span>Affordable packages for small budgets</span>
|
||
</div>
|
||
<div class="about-bullet">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span>Ethical, independent & community-focused</span>
|
||
</div>
|
||
</div>
|
||
<a href="#contact" class="btn btn-primary">Start a Conversation</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== PROJECTS ===================== -->
|
||
<section id="projects" class="projects section-pad">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<p class="section-eyebrow">Portfolio</p>
|
||
<h2 class="section-title">Recent Enchantments</h2>
|
||
<p class="section-lead">A few recent projects from the spell book.</p>
|
||
</div>
|
||
<div class="projects-list">
|
||
<!-- No link — James Norman has no website -->
|
||
<article class="project-row project-row--no-link reveal">
|
||
<div class="project-row-img">
|
||
<div class="project-img-placeholder"><i class="fas fa-leaf"></i></div>
|
||
</div>
|
||
<div class="project-row-info">
|
||
<div class="project-row-meta">
|
||
<span class="project-number">01</span>
|
||
<span class="project-type">Organic Farmer</span>
|
||
</div>
|
||
<h3>James Norman</h3>
|
||
<p class="project-work"><i class="fas fa-network-wired"></i> Office Network Update</p>
|
||
</div>
|
||
</article>
|
||
<a href="https://organicgrowersgathering.org/" target="_blank" rel="noopener" class="project-row reveal">
|
||
<div class="project-row-img">
|
||
<div class="project-img-placeholder"><i class="fas fa-tractor"></i></div>
|
||
</div>
|
||
<div class="project-row-info">
|
||
<div class="project-row-meta">
|
||
<span class="project-number">02</span>
|
||
<span class="project-type">Organic Farming Event</span>
|
||
</div>
|
||
<h3>The Organic Growers Gathering</h3>
|
||
<p class="project-work"><i class="fas fa-video"></i> Video Recording & Editing</p>
|
||
</div>
|
||
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
|
||
</a>
|
||
<a href="https://sunscope.net" target="_blank" rel="noopener" class="project-row reveal">
|
||
<div class="project-row-img">
|
||
<div class="project-img-placeholder"><i class="fas fa-cloud-bolt"></i></div>
|
||
</div>
|
||
<div class="project-row-info">
|
||
<div class="project-row-meta">
|
||
<span class="project-number">03</span>
|
||
<span class="project-type">Weather Application</span>
|
||
</div>
|
||
<h3>Sunscope.net</h3>
|
||
<p class="project-work"><i class="fas fa-cloud-sun"></i> Advanced Weather App</p>
|
||
</div>
|
||
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
|
||
</a>
|
||
<a href="https://camplight.co.uk/" target="_blank" rel="noopener" class="project-row reveal">
|
||
<div class="project-row-img">
|
||
<div class="project-img-placeholder"><i class="fas fa-campground"></i></div>
|
||
</div>
|
||
<div class="project-row-info">
|
||
<div class="project-row-meta">
|
||
<span class="project-number">04</span>
|
||
<span class="project-type">Camping & Outdoors</span>
|
||
</div>
|
||
<h3>Camplight</h3>
|
||
<p class="project-work"><i class="fas fa-globe"></i> Website Design & Build</p>
|
||
</div>
|
||
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
|
||
</a>
|
||
<a href="https://www.hempen.co.uk/" target="_blank" rel="noopener" class="project-row reveal">
|
||
<div class="project-row-img">
|
||
<div class="project-img-placeholder"><i class="fas fa-store"></i></div>
|
||
</div>
|
||
<div class="project-row-info">
|
||
<div class="project-row-meta">
|
||
<span class="project-number">05</span>
|
||
<span class="project-type">Hemp & CBD Products</span>
|
||
</div>
|
||
<h3>Hempen Organic</h3>
|
||
<p class="project-work"><i class="fas fa-cart-shopping"></i> eCommerce Website</p>
|
||
</div>
|
||
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== CONTACT ===================== -->
|
||
<section id="contact" class="contact section-pad">
|
||
<div class="container">
|
||
<div class="contact-wrapper">
|
||
<div class="contact-intro reveal">
|
||
<p class="section-eyebrow section-eyebrow--light">Say Hello</p>
|
||
<h2 class="section-title section-title--light">Get in Touch</h2>
|
||
<p>Have a project in mind? Need some tech support? Drop me a message and I'll get back to you as soon as the stars align.</p>
|
||
<ul class="contact-details">
|
||
<li>
|
||
<i class="fas fa-envelope"></i>
|
||
<a href="mailto:wizard@fraxle.net">wizard@fraxle.net</a>
|
||
</li>
|
||
<li>
|
||
<i class="fas fa-location-dot"></i>
|
||
Oxfordshire, UK
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="contact-form-wrap reveal">
|
||
<?php if ($form_sent): ?>
|
||
<div class="form-success">
|
||
<div class="form-success-icon"><i class="fas fa-check"></i></div>
|
||
<h3>Incantation sent!</h3>
|
||
<p>Thanks for getting in touch. I'll reply as soon as I can.</p>
|
||
</div>
|
||
<?php else: ?>
|
||
<?php if ($form_error): ?>
|
||
<div class="form-error-msg">
|
||
<i class="fas fa-triangle-exclamation"></i>
|
||
<p>Something went wrong — please check your details (including the maths answer) and try again.</p>
|
||
</div>
|
||
<?php endif; ?>
|
||
<form class="contact-form" action="send.php" method="POST" novalidate>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="name">Your Name</label>
|
||
<input type="text" id="name" name="name" placeholder="e.g. Merlin" required autocomplete="name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">Email Address</label>
|
||
<input type="email" id="email" name="email" placeholder="you@example.com" required autocomplete="email">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="message">Your Message</label>
|
||
<textarea id="message" name="message" rows="5" placeholder="Tell me about your project or what you need help with..." required></textarea>
|
||
</div>
|
||
<div class="form-captcha">
|
||
<label for="captcha">
|
||
Quick check — what is <strong><?= htmlspecialchars($captcha_q) ?></strong>?
|
||
</label>
|
||
<input type="number" id="captcha" name="captcha" placeholder="Answer" required min="1">
|
||
</div>
|
||
<button type="submit" class="btn btn-accent">
|
||
<i class="fas fa-paper-plane"></i> Send Incantation
|
||
</button>
|
||
</form>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== FOOTER ===================== -->
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<p class="footer-logo">Fraxle<span>.net</span></p>
|
||
<p class="footer-tagline">Friendly web & tech for small businesses</p>
|
||
<p class="footer-copy">© <?= date('Y') ?> Fraxle.net. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|