log101-dot-dev/src/components/Header.astro
2024-06-22 18:15:56 +03:00

90 lines
2.3 KiB
Plaintext

---
---
<style>
.nav-links a {
@apply text-xl text-inherit;
}
.contact-links li a {
@apply text-gray-500 no-underline;
}
.nav-links a {
@apply no-underline;
}
</style>
<div class="flex flex-col justify-start gap-2">
<ul class="flex flex-row items-center list-none p-0 gap-3 contact-links">
<li><a href="mailto:ffrknerdm@gmail.com">Eposta</a></li>
<li><a href="https://github.com/log101" target="_blank">Github</a></li>
<li>
<a
href="https://www.linkedin.com/in/furkan-erdem-506548218/"
target="_blank">LinkedIn</a
>
</li>
<li><a href="/furkan_erdem_cv.pdf" target="_blank">CV</a></li>
</ul>
<div class="flex flex-col gap-4">
<div
class="flex flex-row gap-2 items-center md:h-20 h-16"
id="title-container">
<a href="/" class="no-underline text-inherit -ml-[0.27rem]" id="title">
<h1 class="font-mono md:text-6xl text-5xl">Log101</h1>
</a>
<div id="board" class="board"></div>
</div>
<div class="border-b border-x-0 border-t-0 border-slate-900 border-solid">
<ul
class="flex md:flex-row flex-col md:items-center justify-between list-none p-0 gap-3 nav-links">
<li>
<a href="/fikir/1">Fikir</a>
</li>
<li>
<a href="/teknik/1">Teknik</a>
</li>
<li>
<a href="/edebiyat/1">Babür'ün Serüvenleri</a>
</li>
<li>
<a href="/ansiklopedi/1">Ansiklopedi</a>
</li>
</ul>
</div>
</div>
</div>
<script>
import ConwaySimulator from "../scripts/conway-simulator";
const title = document.getElementById("title");
const titleContainer = document.getElementById("title-container");
const titleWidth = title?.offsetWidth ?? 194;
const titleContainerWidth = titleContainer?.offsetWidth ?? 750;
let pixelSize = 6;
let rows = 8;
let cols = (titleContainerWidth - titleWidth) / pixelSize;
let delay = 250;
if (screen.availWidth > 768) {
cols = 60;
pixelSize = 8;
}
let gameOfLife = new ConwaySimulator(rows, cols, pixelSize, delay);
const boardElement = document.getElementById("board");
if (boardElement) {
boardElement.append(gameOfLife.canvas);
} else {
console.error("Board element could not be found.");
}
gameOfLife.start();
</script>