134 lines
5.3 KiB
PHP
134 lines
5.3 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
require_once 'db/config.php';
|
|
|
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Learn more about the creator of Classic Tetris.';
|
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>About the Author - Classic Tetris</title>
|
|
|
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<?php if ($projectImageUrl): ?>
|
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<?php endif; ?>
|
|
|
|
<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;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<style>
|
|
.profile-header {
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
|
border: 1px solid #334155;
|
|
color: white;
|
|
padding: 4rem 0;
|
|
border-radius: 12px;
|
|
margin-bottom: 3rem;
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
|
|
}
|
|
.profile-img {
|
|
width: 150px;
|
|
height: 150px;
|
|
object-fit: cover;
|
|
border: 5px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
.profile-icon-container {
|
|
background: #1e293b;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
padding: 10px;
|
|
border: 2px solid #3b82f6;
|
|
}
|
|
.profile-icon-inner {
|
|
background: #0f172a;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg py-3">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="/">TETRIS</a>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="about.php">About Author</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a href="/" class="btn btn-outline-info btn-sm fw-semibold">Back to Game</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="profile-header text-center shadow-sm">
|
|
<div class="mb-3">
|
|
<div class="profile-icon-container">
|
|
<div class="profile-icon-inner">
|
|
<span class="fs-1">👨💻</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h1 class="fw-bold mb-2">Alex Dev</h1>
|
|
<p class="lead text-muted mb-0">Web Developer & Retro Game Enthusiast</p>
|
|
</div>
|
|
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body p-4 p-md-5">
|
|
<h2 class="fw-bold mb-4">The Story Behind</h2>
|
|
<p class="text-muted mb-4">
|
|
Hello! I'm Alex, a passionate developer who loves bringing classic arcade experiences to the modern web.
|
|
This Tetris clone was built as a demonstration of what can be achieved with pure PHP, JavaScript, and Canvas.
|
|
</p>
|
|
|
|
<div class="row g-4 mt-2">
|
|
<div class="col-md-6">
|
|
<h5 class="fw-bold text-info"><span class="me-2">🚀</span> My Mission</h5>
|
|
<p class="small text-muted">To create simple, engaging, and accessible web applications that remind us of the golden age of gaming.</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h5 class="fw-bold text-info"><span class="me-2">🛠️</span> Tech Stack</h5>
|
|
<p class="small text-muted">For this project, I used PHP for the backend persistence, MySQL for high scores, and Canvas API for the game engine.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-5 border-secondary opacity-25">
|
|
|
|
<div class="text-center">
|
|
<h3 class="fw-bold mb-4">Get in Touch</h3>
|
|
<div class="d-flex justify-content-center gap-3">
|
|
<a href="#" class="btn btn-dark border-secondary fw-medium px-4">GitHub</a>
|
|
<a href="#" class="btn btn-dark border-secondary fw-medium px-4">Twitter</a>
|
|
<a href="#" class="btn btn-primary fw-medium px-4">Contact Me</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="container py-4 border-top border-secondary text-center">
|
|
<p class="text-muted small mb-1">© <?= date('Y') ?> Classic Tetris. Built with PHP & Canvas.</p>
|
|
<a href="/" class="text-decoration-none small text-muted">Back to Game</a>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|