290 lines
10 KiB
PHP
290 lines
10 KiB
PHP
<?php require_once __DIR__ . '/lang_helper.php'; ?>
|
|
<!DOCTYPE html>
|
|
<html lang="<?php echo $lang; ?>">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title><?php echo $text['blog_title']; ?> - <?php echo $text['name']; ?></title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="top-nav">
|
|
<div class="nav-left">Juvenal Diaz</div>
|
|
<div class="nav-right">
|
|
<?php foreach ($availableLangs as $code): ?>
|
|
<a href="blog.php?lang=<?php echo $code; ?>"><?php echo strtoupper($code); ?></a>
|
|
<?php endforeach; ?>
|
|
|
|
|
<a href="index.php?lang=<?php echo $lang; ?>"
|
|
data-translate data-key="nav_home"
|
|
data-en="<?php echo htmlspecialchars($en['nav_home']); ?>">
|
|
<?php echo $text['nav_home']; ?>
|
|
</a>
|
|
<a href="cv.php?lang=<?php echo $lang; ?>"
|
|
data-translate data-key="nav_cv"
|
|
data-en="<?php echo htmlspecialchars($en['nav_cv']); ?>">
|
|
<?php echo $text['nav_cv']; ?>
|
|
</a>
|
|
<a href="blog.php?lang=<?php echo $lang; ?>"
|
|
data-translate data-key="nav_blog"
|
|
data-en="<?php echo htmlspecialchars($en['nav_blog']); ?>">
|
|
<?php echo $text['nav_blog']; ?>
|
|
</a>
|
|
<a href="demos.php?lang=<?php echo $lang; ?>"
|
|
data-translate data-key="nav_demos"
|
|
data-en="<?php echo htmlspecialchars($en['nav_demos']); ?>">
|
|
<?php echo $text['nav_demos']; ?>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="blog-page">
|
|
<section class="blog-hero">
|
|
<p class="blog-kicker"
|
|
data-translate data-key="blog_kicker"
|
|
data-en="<?php echo htmlspecialchars($en['blog_kicker']); ?>">
|
|
<?php echo $text['blog_kicker']; ?>
|
|
</p>
|
|
<h1 data-translate data-key="blog_title"
|
|
data-en="<?php echo htmlspecialchars($en['blog_title']); ?>">
|
|
<?php echo $text['blog_title']; ?>
|
|
</h1>
|
|
<p class="blog-subtitle"
|
|
data-translate data-key="blog_subtitle"
|
|
data-en="<?php echo htmlspecialchars($en['blog_subtitle']); ?>">
|
|
<?php echo $text['blog_subtitle']; ?>
|
|
</p>
|
|
</section>
|
|
|
|
<section class="conversation" aria-label="Homelab build conversation">
|
|
<article class="message question">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_question"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_question']); ?>">
|
|
<?php echo $text['blog_speaker_question']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_q1"
|
|
data-en="<?php echo htmlspecialchars($en['blog_q1']); ?>">
|
|
<?php echo $text['blog_q1']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message answer">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_answer"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_answer']); ?>">
|
|
<?php echo $text['blog_speaker_answer']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_a1"
|
|
data-en="<?php echo htmlspecialchars($en['blog_a1']); ?>">
|
|
<?php echo $text['blog_a1']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message question">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_question"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_question']); ?>">
|
|
<?php echo $text['blog_speaker_question']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_q2"
|
|
data-en="<?php echo htmlspecialchars($en['blog_q2']); ?>">
|
|
<?php echo $text['blog_q2']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message answer">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_answer"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_answer']); ?>">
|
|
<?php echo $text['blog_speaker_answer']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_a2"
|
|
data-en="<?php echo htmlspecialchars($en['blog_a2']); ?>">
|
|
<?php echo $text['blog_a2']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message question">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_question"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_question']); ?>">
|
|
<?php echo $text['blog_speaker_question']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_q3"
|
|
data-en="<?php echo htmlspecialchars($en['blog_q3']); ?>">
|
|
<?php echo $text['blog_q3']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message answer">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_answer"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_answer']); ?>">
|
|
<?php echo $text['blog_speaker_answer']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_a3"
|
|
data-en="<?php echo htmlspecialchars($en['blog_a3']); ?>">
|
|
<?php echo $text['blog_a3']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message question">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_question"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_question']); ?>">
|
|
<?php echo $text['blog_speaker_question']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_q4"
|
|
data-en="<?php echo htmlspecialchars($en['blog_q4']); ?>">
|
|
<?php echo $text['blog_q4']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message answer">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_answer"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_answer']); ?>">
|
|
<?php echo $text['blog_speaker_answer']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_a4"
|
|
data-en="<?php echo htmlspecialchars($en['blog_a4']); ?>">
|
|
<?php echo $text['blog_a4']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message question">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_question"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_question']); ?>">
|
|
<?php echo $text['blog_speaker_question']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_q5"
|
|
data-en="<?php echo htmlspecialchars($en['blog_q5']); ?>">
|
|
<?php echo $text['blog_q5']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message answer">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_answer"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_answer']); ?>">
|
|
<?php echo $text['blog_speaker_answer']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_a5"
|
|
data-en="<?php echo htmlspecialchars($en['blog_a5']); ?>">
|
|
<?php echo $text['blog_a5']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message question">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_question"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_question']); ?>">
|
|
<?php echo $text['blog_speaker_question']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_q6"
|
|
data-en="<?php echo htmlspecialchars($en['blog_q6']); ?>">
|
|
<?php echo $text['blog_q6']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message answer">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_answer"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_answer']); ?>">
|
|
<?php echo $text['blog_speaker_answer']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_a6"
|
|
data-en="<?php echo htmlspecialchars($en['blog_a6']); ?>">
|
|
<?php echo $text['blog_a6']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message question">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_question"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_question']); ?>">
|
|
<?php echo $text['blog_speaker_question']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_q7"
|
|
data-en="<?php echo htmlspecialchars($en['blog_q7']); ?>">
|
|
<?php echo $text['blog_q7']; ?>
|
|
</p>
|
|
</article>
|
|
|
|
<article class="message answer">
|
|
<div class="speaker"
|
|
data-translate data-key="blog_speaker_answer"
|
|
data-en="<?php echo htmlspecialchars($en['blog_speaker_answer']); ?>">
|
|
<?php echo $text['blog_speaker_answer']; ?>
|
|
</div>
|
|
<p data-translate data-key="blog_a7"
|
|
data-en="<?php echo htmlspecialchars($en['blog_a7']); ?>">
|
|
<?php echo $text['blog_a7']; ?>
|
|
</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="tech-notes">
|
|
<h2 data-translate data-key="blog_stack_title"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_title']); ?>">
|
|
<?php echo $text['blog_stack_title']; ?>
|
|
</h2>
|
|
<ul>
|
|
<li data-translate data-key="blog_stack_1"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_1']); ?>">
|
|
<?php echo $text['blog_stack_1']; ?>
|
|
</li>
|
|
<li data-translate data-key="blog_stack_2"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_2']); ?>">
|
|
<?php echo $text['blog_stack_2']; ?>
|
|
</li>
|
|
<li data-translate data-key="blog_stack_3"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_3']); ?>">
|
|
<?php echo $text['blog_stack_3']; ?>
|
|
</li>
|
|
<li data-translate data-key="blog_stack_4"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_4']); ?>">
|
|
<?php echo $text['blog_stack_4']; ?>
|
|
</li>
|
|
<li data-translate data-key="blog_stack_5"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_5']); ?>">
|
|
<?php echo $text['blog_stack_5']; ?>
|
|
</li>
|
|
<li data-translate data-key="blog_stack_6"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_6']); ?>">
|
|
<?php echo $text['blog_stack_6']; ?>
|
|
</li>
|
|
<li data-translate data-key="blog_stack_7"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_7']); ?>">
|
|
<?php echo $text['blog_stack_7']; ?>
|
|
</li>
|
|
<li data-translate data-key="blog_stack_8"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_8']); ?>">
|
|
<?php echo $text['blog_stack_8']; ?>
|
|
</li>
|
|
<li data-translate data-key="blog_stack_9"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_9']); ?>">
|
|
<?php echo $text['blog_stack_9']; ?>
|
|
</li>
|
|
<li data-translate data-key="blog_stack_10"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_10']); ?>">
|
|
<?php echo $text['blog_stack_10']; ?>
|
|
</li>
|
|
<li data-translate data-key="blog_stack_11"
|
|
data-en="<?php echo htmlspecialchars($en['blog_stack_11']); ?>">
|
|
<?php echo $text['blog_stack_11']; ?>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const OTHER_PAGES = ['/index.php', '/cv.php'];
|
|
</script>
|
|
<?php require_once __DIR__ . '/partials/translation_ui.php'; ?>
|
|
|
|
</body>
|
|
</html>
|