255 lines
13 KiB
PHP
255 lines
13 KiB
PHP
<?php
|
|
$message_sent = false;
|
|
$error_message = '';
|
|
|
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
|
$name = filter_var(trim($_POST["name"])), FILTER_SANITIZE_STRING);
|
|
$email = filter_var(trim($_POST["email"])), FILTER_SANITIZE_EMAIL);
|
|
$message = filter_var(trim($_POST["message"])), FILTER_SANITIZE_STRING);
|
|
|
|
if (empty($name) || !filter_var($email, FILTER_VALIDATE_EMAIL) || empty($message)) {
|
|
$error_message = "Please fill out all fields correctly.";
|
|
} else {
|
|
// IMPORTANT: Replace with your real email address
|
|
$to = "your-email@example.com";
|
|
$subject = "New Contact Form Submission from " . $name;
|
|
$body = "You have received a new message from your website contact form.\n\n";
|
|
$body .= "Here are the details:\n";
|
|
$body .= "Name: $name\n";
|
|
$body .= "Email: $email\n";
|
|
$body .= "Message:\n$message\n";
|
|
|
|
$headers = "From: noreply@yourdomain.com\r\n"; // Replace with a valid sender email
|
|
$headers .= "Reply-To: $email\r\n";
|
|
|
|
if (mail($to, $subject, $body, $headers)) {
|
|
$message_sent = true;
|
|
} else {
|
|
$error_message = "Sorry, there was an error sending your message. Please try again later.";
|
|
}
|
|
}
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ava Reed | Creative Developer & Designer</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
<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=Inter:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="#">Ava Reed</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">
|
|
<li class="nav-item"><a class="nav-link" href="#work">Work</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="hero text-center">
|
|
<div class="container">
|
|
<h1 class="display-4 fw-bold">Creative Developer & Designer.</h1>
|
|
<p class="lead my-4">Ava Reed builds beautiful, functional, and modern web experiences.</p>
|
|
<a href="#contact" class="btn btn-primary btn-lg mx-1">Contact Me</a>
|
|
<a href="#work" class="btn btn-secondary btn-lg mx-1">See My Work</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Work Gallery -->
|
|
<section id="work" class="py-5">
|
|
<div class="container">
|
|
<h2 class="text-center section-title">My Work</h2>
|
|
<div class="row g-4">
|
|
<!-- Project 1 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<img src="https://picsum.photos/600/400?random=1" class="card-img-top" alt="Placeholder for project showcase">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Project One</h5>
|
|
<p class="card-text">A brief description of the project, its goals, and the technology used.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Project 2 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<img src="https://picsum.photos/600/400?random=2" class="card-img-top" alt="Placeholder for project showcase">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Project Two</h5>
|
|
<p class="card-text">A brief description of the project, its goals, and the technology used.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Project 3 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<img src="https://picsum.photos/600/400?random=3" class="card-img-top" alt="Placeholder for project showcase">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Project Three</h5>
|
|
<p class="card-text">A brief description of the project, its goals, and the technology used.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Project 4 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<img src="https://picsum.photos/600/400?random=4" class="card-img-top" alt="Placeholder for project showcase">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Project Four</h5>
|
|
<p class="card-text">A brief description of the project, its goals, and the technology used.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Project 5 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<img src="https://picsum.photos/600/400?random=5" class="card-img-top" alt="Placeholder for project showcase">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Project Five</h5>
|
|
<p class="card-text">A brief description of the project, its goals, and the technology used.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Project 6 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<img src="https://picsum.photos/600/400?random=6" class="card-img-top" alt="Placeholder for project showcase">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Project Six</h5>
|
|
<p class="card-text">A brief description of the project, its goals, and the technology used.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="py-5 bg-light">
|
|
<div class="container">
|
|
<h2 class="text-center section-title">Services</h2>
|
|
<div class="row text-center g-4">
|
|
<div class="col-md-4">
|
|
<div class="card p-3">
|
|
<div class="card-body">
|
|
<i class="bi bi-gem fs-1 text-primary"></i>
|
|
<h3 class="h4 my-3">Web Design</h3>
|
|
<p>Creating stunning, user-friendly interfaces that are both beautiful and intuitive.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card p-3">
|
|
<div class="card-body">
|
|
<i class="bi bi-code-slash fs-1 text-primary"></i>
|
|
<h3 class="h4 my-3">Web Development</h3>
|
|
<p>Building responsive, high-performance websites from the ground up.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card p-3">
|
|
<div class="card-body">
|
|
<i class="bi bi-palette fs-1 text-primary"></i>
|
|
<h3 class="h4 my-3">Branding</h3>
|
|
<p>Developing a strong brand identity that resonates with your target audience.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-5">
|
|
<div class="container">
|
|
<h2 class="text-center section-title">About Me</h2>
|
|
<div class="row align-items-center">
|
|
<div class="col-md-4 text-center">
|
|
<img src="https://picsum.photos/256/256" class="img-fluid rounded-circle mb-4" alt="Headshot of Ava Reed">
|
|
</div>
|
|
<div class="col-md-8">
|
|
<p class="lead">I'm Ava Reed, a passionate developer and designer with a knack for creating engaging digital experiences. With a background in both art and computer science, I bring a unique perspective to every project.</p>
|
|
<p>My goal is to build products that are not only visually appealing but also highly functional and accessible to everyone. I love collaborating with clients to bring their visions to life.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="py-5 bg-light">
|
|
<div class="container">
|
|
<h2 class="text-center section-title">Get In Touch</h2>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<?php if ($message_sent): ?>
|
|
<div class="alert alert-success" role="alert">
|
|
Thank you for your message! I will get back to you shortly.
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php if ($error_message): ?>
|
|
<div class="alert alert-danger" role="alert">
|
|
<?php echo $error_message; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
<form id="contactForm" class="needs-validation" novalidate method="POST" action="index.php#contact">
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="name" name="name" required>
|
|
<div class="invalid-feedback">Please enter your name.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="email" name="email" required>
|
|
<div class="invalid-feedback">Please enter a valid email address.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="message" class="form-label">Message</label>
|
|
<textarea class="form-control" id="message" name="message" rows="5" required></textarea>
|
|
<div class="invalid-feedback">Please enter a message.</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary btn-lg">Send Message</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-4 text-center">
|
|
<div class="container">
|
|
<div class="mb-3">
|
|
<a href="#" class="text-white mx-2" aria-label="GitHub"><i class="bi bi-github fs-4"></i></a>
|
|
<a href="#" class="text-white mx-2" aria-label="LinkedIn"><i class="bi bi-linkedin fs-4"></i></a>
|
|
<a href="#" class="text-white mx-2" aria-label="Dribbble"><i class="bi bi-dribbble fs-4"></i></a>
|
|
</div>
|
|
<p>© 2025 Ava Reed. All Rights Reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
</html>
|