darkmode selector layout and content add
This commit is contained in:
parent
eb45070c2e
commit
a80f3a3cc7
@ -34,11 +34,11 @@
|
||||
}
|
||||
|
||||
#theme-toggle + label {
|
||||
@apply inline-block cursor-pointer h-8 w-8 absolute top-6 right-24 rounded-full duration-300 content-[''];
|
||||
@apply inline-block cursor-pointer h-6 w-6 fixed top-4 right-4 rounded-full duration-300 content-[''];
|
||||
}
|
||||
|
||||
#theme-toggle:not(:checked) + label {
|
||||
@apply bg-black;
|
||||
@apply bg-yellow-200;
|
||||
}
|
||||
|
||||
#theme-toggle:checked + label {
|
||||
|
@ -47,15 +47,16 @@
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
<hr class="nav-divider max-w-xl h-0.5 border-0 mx-auto my-1 bg-black rounded md:my-1 dark:bg-stone-100"/>
|
||||
<hr class="nav-divider max-w-xl h-0.5 border-0 mx-auto bg-black rounded dark:bg-stone-100"/>
|
||||
{#key selected}
|
||||
<ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
|
||||
{#each selected.subPages as subPage}
|
||||
<li class="sub-nav-item inline-block font-jose"><a class="sub-nav-link text-xl p-2"href={(subPage)}>{subPage.replace(/_/g, ' ')}</a></li>
|
||||
{/each}
|
||||
|
||||
</ul>
|
||||
{/key}
|
||||
<ThemeSwitch class="absolute"/>
|
||||
|
||||
</nav>
|
||||
<div class="container text-center w-3/4 mx-auto">
|
||||
<slot />
|
||||
|
@ -10,11 +10,11 @@
|
||||
<div class="content text-left">
|
||||
<article>
|
||||
<h2 class="text-xl text-center">What is a homelab?</h2>
|
||||
<p>
|
||||
<img class="rounded mt-4" src={quoteImg} alt="" />
|
||||
<p class="text-sm italic">
|
||||
This question was answered very well by the reddit users webtroter and TreAwayDeuce 6 years
|
||||
ago.
|
||||
</p>
|
||||
<img class="rounded my-4" src={quoteImg} alt="" />
|
||||
<h2 class="text-xl text-center mt-4">Origin and Hardware</h2>
|
||||
<p>
|
||||
My interest in “Homelabbing” arose long before I was familiar with the term Homelab. I have
|
||||
@ -60,14 +60,20 @@
|
||||
more space, so I built the new server in a 2U rack case, which also leaves lots of room for
|
||||
storage upgrades. I used consumer grade hardware to keep idle power low:
|
||||
</p>
|
||||
<ul class="list-disc list-inside indent-4">
|
||||
<li>MSI Pro-690-P (Lots of IOMMU groups)</li>
|
||||
<li>Intel i3-12100f (Low power idle)</li>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>MSI Pro-690-P</li>
|
||||
<p class="italic pl-4">Lots of IOMMU groups</p>
|
||||
<li>Intel i3-12100f</li>
|
||||
<p class="italic pl-4">Low power idle</p>
|
||||
<li>32GB Corsair Vengeance DDR4 3200</li>
|
||||
<li>1tb Samsung Evo 970 (Host boot and VM disks)</li>
|
||||
<li>512gb Samsung Evo 970 (NAS cache)</li>
|
||||
<li>2 x 10TB Seagate Ironwolf (RAID1)</li>
|
||||
<li>Geforce 1650ti 4gb (for transcoding)</li>
|
||||
<li>1tb Samsung Evo 970</li>
|
||||
<p class="italic pl-4">Host boot and VM disks</p>
|
||||
<li>512gb Samsung Evo 970</li>
|
||||
<p class="italic pl-4">NAS cache</p>
|
||||
<li>2 x 10TB Seagate Ironwolf</li>
|
||||
<p class="italic pl-4">RAID1</p>
|
||||
<li>Geforce 1650ti 4gb</li>
|
||||
<p class="italic pl-4">for transcoding</p>
|
||||
</ul>
|
||||
<img class="rounded my-4" src={rackImg} alt="" />
|
||||
<p>
|
||||
@ -95,19 +101,19 @@
|
||||
<p class="underline">Currently I am hosting the following services:</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>Traefik</li>
|
||||
<p class="pl-4">
|
||||
<p class="italic pl-4">
|
||||
Reverse Proxy to direct and secure external traffic to external services. Traefik also
|
||||
handles ssl certificates from letsencrypt, as all of my external an internal domains have
|
||||
ssl encryption.
|
||||
</p>
|
||||
<li>Traefik-bouncer</li>
|
||||
<p class="pl-4">
|
||||
<p class="italic pl-4">
|
||||
Monitors traefik, and bans incoming connection from known threat actors and a set of
|
||||
predefined rules. Also bans for multiple failed login attempts, and monitors logs of all
|
||||
exposed services.
|
||||
</p>
|
||||
<li>Portfolio web page</li>
|
||||
<p class="pl-4">
|
||||
<p class="italic pl-4">
|
||||
This is my portfolio page, which will soon be available at rannes.dev. I'm using
|
||||
svelte/sveltekit. It is
|
||||
currently not exposed to the internet as I am still building it.
|
||||
@ -116,14 +122,14 @@
|
||||
<li>Prometheus</li>
|
||||
<li>Grafana</li>
|
||||
<li>Authelia</li>
|
||||
<p class="pl-4">IAM layer with 2FA.</p>
|
||||
<p class="italic pl-4">IAM layer with 2FA.</p>
|
||||
<li>Media Stack</li>
|
||||
<p class="pl-4">Jellyfin, Radarr, Sonarr, Prowlarr, Blazarr, Gluetun, Jellyseerr.</p>
|
||||
<p class="italic pl-4">Jellyfin, Radarr, Sonarr, Prowlarr, Blazarr, Gluetun, Jellyseerr.</p>
|
||||
<li>Syncthing</li>
|
||||
<li>Gitea</li>
|
||||
<p class="pl-4">self-hosted git repository</p>
|
||||
<p class="italic pl-4">self-hosted git repository</p>
|
||||
<li>Gitea Runners</li>
|
||||
<p class="pl-4">Runners for Continuous deployment.</p>
|
||||
<p class="italic pl-4">Runners for Continuous deployment.</p>
|
||||
<li>Kuma Uptime</li>
|
||||
<li>Portainer</li>
|
||||
</ul>
|
||||
|
Loading…
Reference in New Issue
Block a user