admin/34128-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
Flatlogic Bot 2025-09-17 14:17:03 +00:00
parent d4afebca3e
commit e8af15796b
5 changed files with 125 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
assets/css/custom.css
View File

@ -1,12 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
:root {
--primary-color: #2563EB;
--primary-color: #000000;
--secondary-color: #475569;
--background-color: #F8FAFC;
--surface-color: #FFFFFF;
--text-color: #1E293B;
--text-color: #000000;
--border-radius: 0.5rem;
}
@ -21,15 +20,23 @@ body {
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.hero {
background: linear-gradient(45deg, rgba(37, 99, 235, 0.9), rgba(96, 165, 250, 0.9)), url('https://picsum.photos/seed/hero/1600/900') no-repeat center center;
background-size: cover;
color: white;
padding: 6rem 1rem;
.navbar-brand, .nav-link {
color: var(--text-color);
}
.hero h1 {
font-weight: 700;
.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 {
@ -38,7 +45,7 @@ body {
.section-title {
font-weight: 700;
color: var(--primary-color);
color: var(--text-color);
margin-bottom: 2rem;
}
@ -70,3 +77,56 @@ body {
padding: 2rem 1rem;
border-top: 1px solid #e2e8f0;
}
#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;
}

BIN
assets/pasted-20250917-104344-f4d265de.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
assets/pasted-20250917-104638-bcdb7a3e.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 354 KiB

BIN
assets/pasted-20250917-130502-48058169.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB

97
index.php
View File

@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe - Personal Portfolio</title>
<meta name="description" content="A personal portfolio website for John Doe, showcasing work and skills.">
<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">
@ -13,9 +13,9 @@
<link rel="stylesheet" href="assets/css/custom.css">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="John Doe - Personal Portfolio">
<meta property="og:description" content="A personal portfolio website for John Doe, showcasing work and skills.">
<meta property="og:image" content="https://picsum.photos/seed/hero/1200/630">
<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">
@ -23,41 +23,26 @@
<body>
<!-- Header -->
<header>
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<header class="hero text-center">
<div class="container">
<a class="navbar-brand fw-bold" href="#">John Doe</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="#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="#contact">Contact</a></li>
</ul>
<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>
</nav>
</header>
<main>
<!-- Hero Section -->
<section class="hero text-center">
<div class="container">
<h1 class="display-4">Creative Developer & Designer</h1>
<p class="lead my-4">I build beautiful and functional websites for the modern web.</p>
<a href="#portfolio" class="btn btn-primary btn-lg">View My Work</a>
</div>
</section>
<!-- 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 John, a passionate web developer with a knack for creating elegant solutions in the least amount of time. I specialize in front-end development and love bringing ideas to life in the browser. When I'm not coding, you can find me exploring new technologies or enjoying a good cup of coffee.</p>
<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>
@ -66,26 +51,48 @@
<!-- Portfolio Section -->
<section id="portfolio" class="section bg-light">
<div class="container">
<h2 class="section-title text-center">Portfolio</h2>
<div class="row g-4">
<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="card">
<img src="https://picsum.photos/seed/portfolio1/800/600" class="card-img-top" alt="Placeholder for portfolio project one.">
<div class="card-body">
<h5 class="card-title">Project One</h5>
<p class="card-text">A brief description of the project, highlighting the technologies used and the problems solved.</p>
</div>
<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">
<div class="card">
<img src="https://picsum.photos/seed/portfolio2/800/600" class="card-img-top" alt="Placeholder for portfolio project two.">
<div class="card-body">
<h5 class="card-title">Project Two</h5>
<p class="card-text">Another project description, focusing on the creative process and the final outcome.</p>
<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>
@ -108,19 +115,19 @@
<textarea class="form-control" rows="5" placeholder="Your Message" required></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Send Message</button>
<button type="submit" class="btn btn-dark">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<p class="mb-0">&copy; 2025 John Doe. All Rights Reserved.</p>
<p class="mb-0">&copy; 2025 Jane Doe. All Rights Reserved.</p>
</div>
</footer>