141 lines
6.6 KiB
PHP
141 lines
6.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Jane Doe - Architect Portfolio</title>
|
|
<meta name="description" content="A personal portfolio website for Jane Doe, showcasing architectural projects and skills.">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
|
|
<!-- Open Graph Meta Tags -->
|
|
<meta property="og:title" content="Jane Doe - Architect Portfolio">
|
|
<meta property="og:description" content="A personal portfolio website for Jane Doe, showcasing architectural projects and skills.">
|
|
<meta property="og:image" content="https://picsum.photos/seed/architecture-og/1200/630">
|
|
<meta property="og:url" content="">
|
|
<meta property="og:type" content="website">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<header class="hero text-center">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 mx-auto">
|
|
<h1 class="display-1 fw-bold">Jane Doe</h1>
|
|
<p class="lead">Architect</p>
|
|
<a href="#portfolio" class="btn btn-dark btn-lg">See my work</a>
|
|
<a href="#contact" class="btn btn-outline-secondary btn-lg">Get in touch</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="section">
|
|
<div class="container">
|
|
<h2 class="section-title text-center">About Me</h2>
|
|
<div class="row">
|
|
<div class="col-md-8 mx-auto text-center">
|
|
<p>Hello! I'm Jane, an architect with a passion for creating sustainable and innovative buildings. I believe great design can improve lives and strive to create spaces that are both beautiful and functional. When I'm not designing, you can find me exploring new cities or sketching in my notebook.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Portfolio Section -->
|
|
<section id="portfolio" class="section bg-light">
|
|
<div class="container">
|
|
<h2 class="section-title text-center">Latest Work</h2>
|
|
<div class="portfolio-card">
|
|
<div class="row g-0">
|
|
<div class="col-md-6">
|
|
<div class="portfolio-card-body">
|
|
<h3 class="portfolio-card-title">Modern Villa</h3>
|
|
<p class="portfolio-card-text">A stunning architectural villa with a minimalist design, focusing on open spaces and natural light.</p>
|
|
<a href="#" class="btn btn-dark">More</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<img src="https://picsum.photos/seed/architecture-1/800/600" class="img-fluid" alt="Modern Architectural Villa">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-card">
|
|
<div class="row g-0">
|
|
<div class="col-md-6">
|
|
<div class="portfolio-card-body">
|
|
<h3 class="portfolio-card-title">City Museum</h3>
|
|
<p class="portfolio-card-text">A contemporary museum design that blends with the urban landscape, featuring a unique facade.</p>
|
|
<a href="#" class="btn btn-dark">More</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<img src="https://picsum.photos/seed/architecture-2/800/600" class="img-fluid" alt="Contemporary City Museum">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-card">
|
|
<div class="row g-0">
|
|
<div class="col-md-6">
|
|
<div class="portfolio-card-body">
|
|
<h3 class="portfolio-card-title">Residential Tower</h3>
|
|
<p class="portfolio-card-text">A high-rise residential tower with a focus on sustainable living and community spaces.</p>
|
|
<a href="#" class="btn btn-dark">More</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<img src="https://picsum.photos/seed/architecture-3/800/600" class="img-fluid" alt="Sustainable Residential Tower">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="section">
|
|
<div class="container">
|
|
<h2 class="section-title text-center">Get In Touch</h2>
|
|
<div class="row">
|
|
<div class="col-md-6 mx-auto">
|
|
<p class="text-center mb-4">Have a project in mind or just want to say hello? Drop me a line.</p>
|
|
<form>
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control" placeholder="Your Name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<input type="email" class="form-control" placeholder="Your Email" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<textarea class="form-control" rows="5" placeholder="Your Message" required></textarea>
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-dark">Send Message</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer text-center">
|
|
<div class="container">
|
|
<p class="mb-0">© 2025 Jane Doe. All Rights Reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js"></script>
|
|
|
|
</body>
|
|
</html> |