Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
8934bf10ff | ||
|
|
e8af15796b | ||
|
|
d4afebca3e |
134
assets/css/custom.css
Normal file
134
assets/css/custom.css
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #000000;
|
||||||
|
--secondary-color: #475569;
|
||||||
|
--background-color: #F8FAFC;
|
||||||
|
--surface-color: #FFFFFF;
|
||||||
|
--text-color: #000000;
|
||||||
|
--border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand, .nav-link {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
padding: 6rem 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 4rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||||
|
transition: transform 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about .section-title,
|
||||||
|
#portfolio .section-title,
|
||||||
|
#contact .section-title {
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-card {
|
||||||
|
background-color: var(--surface-color);
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
margin-bottom: 5rem; /* Increased margin for more space */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-card-body {
|
||||||
|
padding: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-card-title {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-card-text {
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark {
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark:hover {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-secondary {
|
||||||
|
border-color: #000;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-secondary:hover {
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-card:not(:last-child) {
|
||||||
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
20
assets/js/main.js
Normal file
20
assets/js/main.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const navLinks = document.querySelectorAll('.nav-link');
|
||||||
|
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
if (link.hash !== '') {
|
||||||
|
link.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const targetElement = document.querySelector(this.hash);
|
||||||
|
|
||||||
|
if(targetElement) {
|
||||||
|
targetElement.scrollIntoView({
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
BIN
assets/pasted-20250917-104344-f4d265de.png
Normal file
BIN
assets/pasted-20250917-104344-f4d265de.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
assets/pasted-20250917-104638-bcdb7a3e.png
Normal file
BIN
assets/pasted-20250917-104638-bcdb7a3e.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
BIN
assets/pasted-20250917-130502-48058169.png
Normal file
BIN
assets/pasted-20250917-130502-48058169.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
262
index.php
262
index.php
@ -1,131 +1,141 @@
|
|||||||
<?php
|
<!DOCTYPE html>
|
||||||
declare(strict_types=1);
|
|
||||||
@ini_set('display_errors', '1');
|
|
||||||
@error_reporting(E_ALL);
|
|
||||||
@date_default_timezone_set('UTC');
|
|
||||||
|
|
||||||
$phpVersion = PHP_VERSION;
|
|
||||||
$now = date('Y-m-d H:i:s');
|
|
||||||
?>
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>New Style</title>
|
<title>Jane Doe - Architect Portfolio</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<meta name="description" content="A personal portfolio website for Jane Doe, showcasing architectural projects and skills.">
|
||||||
<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">
|
<!-- Bootstrap CSS -->
|
||||||
<style>
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
:root {
|
|
||||||
--bg-color-start: #6a11cb;
|
<!-- Custom CSS -->
|
||||||
--bg-color-end: #2575fc;
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
<!-- Open Graph Meta Tags -->
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
<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.">
|
||||||
body {
|
<meta property="og:image" content="https://picsum.photos/seed/architecture-og/1200/630">
|
||||||
margin: 0;
|
<meta property="og:url" content="">
|
||||||
font-family: 'Inter', sans-serif;
|
<meta property="og:type" content="website">
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
|
||||||
color: var(--text-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
|
||||||
animation: bg-pan 20s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@keyframes bg-pan {
|
|
||||||
0% { background-position: 0% 0%; }
|
|
||||||
100% { background-position: 100% 100%; }
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg-color);
|
|
||||||
border: 1px solid var(--card-border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
margin: 1.25rem auto 1.25rem;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
.hint {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px; height: 1px;
|
|
||||||
padding: 0; margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap; border: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
|
||||||
<div class="card">
|
<!-- Header -->
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
<header class="hero text-center">
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
<div class="container">
|
||||||
<span class="sr-only">Loading…</span>
|
<div class="row">
|
||||||
</div>
|
<div class="col-md-8 mx-auto">
|
||||||
<p class="hint">Flatlogic AI is collecting your requirements and applying the first changes.</p>
|
<h1 class="display-1 fw-bold">Jane Doe</h1>
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
<p class="lead">Architect</p>
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
<a href="#portfolio" class="btn btn-dark btn-lg">See my work</a>
|
||||||
</div>
|
<a href="#contact" class="btn btn-outline-secondary btn-lg">Get in touch</a>
|
||||||
</main>
|
</div>
|
||||||
<footer>
|
</div>
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
</div>
|
||||||
</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user