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 { #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 { #theme-toggle:not(:checked) + label {
@apply bg-black; @apply bg-yellow-200;
} }
#theme-toggle:checked + label { #theme-toggle:checked + label {

5
src/routes/+layout.svelte
View File

@ -47,15 +47,16 @@
{/if} {/if}
{/each} {/each}
</ul> </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} {#key selected}
<ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1"> <ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
{#each selected.subPages as subPage} {#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> <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} {/each}
</ul> </ul>
{/key} {/key}
<ThemeSwitch class="absolute"/>
</nav> </nav>
<div class="container text-center w-3/4 mx-auto"> <div class="container text-center w-3/4 mx-auto">
<slot /> <slot />

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

@ -10,11 +10,11 @@
<div class="content text-left"> <div class="content text-left">
<article> <article>
<h2 class="text-xl text-center">What is a homelab?</h2> <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 This question was answered very well by the reddit users webtroter and TreAwayDeuce 6 years
ago. ago.
</p> </p>
<img class="rounded my-4" src={quoteImg} alt="" />
<h2 class="text-xl text-center mt-4">Origin and Hardware</h2> <h2 class="text-xl text-center mt-4">Origin and Hardware</h2>
<p> <p>
My interest in “Homelabbing” arose long before I was familiar with the term Homelab. I have 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 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: storage upgrades. I used consumer grade hardware to keep idle power low:
</p> </p>
<ul class="list-disc list-inside indent-4"> <ul class="list-disc list-inside">
<li>MSI Pro-690-P (Lots of IOMMU groups)</li> <li>MSI Pro-690-P</li>
<li>Intel i3-12100f (Low power idle)</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>32GB Corsair Vengeance DDR4 3200</li>
<li>1tb Samsung Evo 970 (Host boot and VM disks)</li> <li>1tb Samsung Evo 970</li>
<li>512gb Samsung Evo 970 (NAS cache)</li> <p class="italic pl-4">Host boot and VM disks</p>
<li>2 x 10TB Seagate Ironwolf (RAID1)</li> <li>512gb Samsung Evo 970</li>
<li>Geforce 1650ti 4gb (for transcoding)</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> </ul>
<img class="rounded my-4" src={rackImg} alt="" /> <img class="rounded my-4" src={rackImg} alt="" />
<p> <p>
@ -95,19 +101,19 @@
<p class="underline">Currently I am hosting the following services:</p> <p class="underline">Currently I am hosting the following services:</p>
<ul class="list-disc list-inside"> <ul class="list-disc list-inside">
<li>Traefik</li> <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 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 handles ssl certificates from letsencrypt, as all of my external an internal domains have
ssl encryption. ssl encryption.
</p> </p>
<li>Traefik-bouncer</li> <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 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 predefined rules. Also bans for multiple failed login attempts, and monitors logs of all
exposed services. exposed services.
</p> </p>
<li>Portfolio web page</li> <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 This is my portfolio page, which will soon be available at rannes.dev. I'm using
svelte/sveltekit. It is svelte/sveltekit. It is
currently not exposed to the internet as I am still building it. currently not exposed to the internet as I am still building it.
@ -116,14 +122,14 @@
<li>Prometheus</li> <li>Prometheus</li>
<li>Grafana</li> <li>Grafana</li>
<li>Authelia</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> <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>Syncthing</li>
<li>Gitea</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> <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>Kuma Uptime</li>
<li>Portainer</li> <li>Portainer</li>
</ul> </ul>