rannes.dev/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

darkmode selector layout and content add

Browse Source
This commit is contained in:
ChrQR 2024-04-27 12:55:00 +02:00
parent eb45070c2e
commit a80f3a3cc7
3 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/ThemeSwitch.svelte
View File

@ -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 {

5
src/routes/+layout.svelte
View File

@ -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 />

38
src/routes/homelab/+page.svelte
View File

@ -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>