157 lines
7.7 KiB
PHP
157 lines
7.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'Personal Portfolio'); ?></title>
|
|
<meta name="description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'A personal portfolio website.'); ?>">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#"><?php echo htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'Portfolio'); ?></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="#intro">Intro</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Intro Section -->
|
|
<header id="intro" class="hero text-center py-5">
|
|
<div class="container">
|
|
<h1 class="display-4">Welcome to My Portfolio</h1>
|
|
<p class="lead">I build beautiful and functional websites.</p>
|
|
<a href="#portfolio" class="btn btn-light btn-lg">See My Work</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-8 mx-auto text-center">
|
|
<h2 class="mb-4">About Me</h2>
|
|
<p class="lead">This is a placeholder for your about section. Talk about your passion, your skills, and your experience. Make it personal and engaging. Let visitors know who you are beyond the professional. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Portfolio Section -->
|
|
<section id="portfolio" class="bg-light py-5">
|
|
<div class="container">
|
|
<h2 class="text-center mb-5">Portfolio</h2>
|
|
<div class="row">
|
|
<!-- Portfolio Item 1 -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card portfolio-item">
|
|
<img src="https://picsum.photos/seed/p1/400/200" class="card-img-top" alt="Project 1">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Project One</h5>
|
|
<p class="card-text">A brief description of the project. What was the challenge and how you solved it.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Portfolio Item 2 -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card portfolio-item">
|
|
<img src="https://picsum.photos/seed/p2/400/200" class="card-img-top" alt="Project 2">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Project Two</h5>
|
|
<p class="card-text">A brief description of the project. What was the challenge and how you solved it.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Portfolio Item 3 -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card portfolio-item">
|
|
<img src="https://picsum.photos/seed/p3/400/200" class="card-img-top" alt="Project 3">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Project Three</h5>
|
|
<p class="card-text">A brief description of the project. What was the challenge and how you solved it.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials Section -->
|
|
<section id="testimonials" class="py-5">
|
|
<div class="container">
|
|
<h2 class="text-center mb-5">Testimonials</h2>
|
|
<div class="row">
|
|
<div class="col-lg-6 mx-auto">
|
|
<div class="card testimonial-card p-4 mb-4">
|
|
<p class="mb-0">"This is a placeholder testimonial. A great quote from a happy client goes here. It builds trust and credibility."</p>
|
|
<footer class="blockquote-footer mt-2">Client Name, <cite title="Source Title">Company</cite></footer>
|
|
</div>
|
|
<div class="card testimonial-card p-4">
|
|
<p class="mb-0">"Another fantastic quote. Highlighting specific positive outcomes is very effective. Keep it short and impactful."</p>
|
|
<footer class="blockquote-footer mt-2">Another Client, <cite title="Source Title">Organization</cite></footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="bg-light py-5">
|
|
<div class="container">
|
|
<h2 class="text-center mb-4">Contact Me</h2>
|
|
<div class="row">
|
|
<div class="col-lg-6 mx-auto">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email address</label>
|
|
<input type="email" class="form-control" id="email" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="message" class="form-label">Message</label>
|
|
<textarea class="form-control" id="message" rows="4" required></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100">Send Message</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-4 bg-dark text-white text-center">
|
|
<div class="container">
|
|
<a href="#" class="text-white me-3"><i class="bi bi-twitter"></i></a>
|
|
<a href="#" class="text-white me-3"><i class="bi bi-linkedin"></i></a>
|
|
<a href="#" class="text-white"><i class="bi bi-github"></i></a>
|
|
<p class="mt-3 mb-0">Copyright © <?php echo date("Y"); ?>. All Rights Reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|