Corrected info architecture based on feedback from Martin Sandholt #8
@ -14,7 +14,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
data-sveltekit-preload-data="hover"
|
data-sveltekit-preload-data="hover"
|
||||||
class="bg-stone-200 dark:bg-primary-900 text-primary-900 dark:text-stone-200 font-jose font-light"
|
class="bg-stone-200 dark:bg-primary-900 text-primary-900 dark:text-stone-200"
|
||||||
>
|
>
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -25,7 +25,7 @@
|
|||||||
|
|
||||||
<BottomNav
|
<BottomNav
|
||||||
position="fixed"
|
position="fixed"
|
||||||
classInner="grid-cols-4"
|
classInner="grid-cols-2"
|
||||||
outerClass="md:hidden w-full z-50 border-gray-200 dark:bg-slate-900 dark:border-gray-600"
|
outerClass="md:hidden w-full z-50 border-gray-200 dark:bg-slate-900 dark:border-gray-600"
|
||||||
>
|
>
|
||||||
<BottomNavItem btnName="home" href="/" on:click={() => handleNavItemClick('home')}>
|
<BottomNavItem btnName="home" href="/" on:click={() => handleNavItemClick('home')}>
|
||||||
@ -33,19 +33,10 @@
|
|||||||
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
|
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
|
||||||
/>
|
/>
|
||||||
</BottomNavItem>
|
</BottomNavItem>
|
||||||
<BottomNavItem btnName="whoami" href="/about" on:click={() => handleNavItemClick('whoami')}>
|
|
||||||
<ProfileCardOutline
|
|
||||||
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
|
|
||||||
/>
|
|
||||||
</BottomNavItem>
|
|
||||||
<BottomNavItem btnName="projects" on:click={() => handleNavItemClick('projects')}>
|
<BottomNavItem btnName="projects" on:click={() => handleNavItemClick('projects')}>
|
||||||
<ImageOutline
|
<ImageOutline
|
||||||
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
|
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
|
||||||
/>
|
/>
|
||||||
</BottomNavItem>
|
</BottomNavItem>
|
||||||
<BottomNavItem btnName="contact" href="/contact" on:click={() => handleNavItemClick('contact')}>
|
|
||||||
<MobilePhoneOutline
|
|
||||||
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
|
|
||||||
/>
|
|
||||||
</BottomNavItem>
|
|
||||||
</BottomNav>
|
</BottomNav>
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import ProjectDescription from './ProjectDescription.svelte';
|
import ProjectDescription from './ProjectDescription.svelte';
|
||||||
import ProjectHeader from './ProjectHeader.svelte';
|
import ProjectHeader from './ProjectHeader.svelte';
|
||||||
|
import ProjectLinks from './ProjectLinks.svelte';
|
||||||
import ProjectRepo from './ProjectRepo.svelte';
|
import ProjectRepo from './ProjectRepo.svelte';
|
||||||
import VendorGallery from './VendorGallery.svelte';
|
import VendorGallery from './VendorGallery.svelte';
|
||||||
|
|
||||||
@ -14,7 +15,11 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="pt-12">
|
<div class="pt-12">
|
||||||
|
<div class="flex justify-start items-center gap-4">
|
||||||
<ProjectHeader {title} />
|
<ProjectHeader {title} />
|
||||||
|
<ProjectLinks {url} {repo}/>
|
||||||
|
</div>
|
||||||
|
<hr class="border-slate-400 border-1" />
|
||||||
<ProjectDescription {description} />
|
<ProjectDescription {description} />
|
||||||
<VendorGallery {vendors} />
|
<VendorGallery {vendors} />
|
||||||
<ProjectRepo {repo} {rss} {url} />
|
<ProjectRepo {repo} {rss} {url} />
|
||||||
|
@ -2,5 +2,4 @@
|
|||||||
export let title;
|
export let title;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h3 class="text-3xl mb-2">{title}</h3>
|
<h3 class="text-3xl">{title}</h3>
|
||||||
<hr class="border-slate-400 border-1" />
|
|
||||||
|
18
src/lib/ProjectCard/ProjectLinks.svelte
Normal file
18
src/lib/ProjectCard/ProjectLinks.svelte
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
|
||||||
|
import { GithubSolid, GlobeOutline } from "flowbite-svelte-icons";
|
||||||
|
export let url;
|
||||||
|
export let repo;
|
||||||
|
</script>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="hover:scale-110">
|
||||||
|
<a href={url}>
|
||||||
|
<GlobeOutline class="mx-auto" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="hover:scale-110">
|
||||||
|
<a href={repo}>
|
||||||
|
<GithubSolid class="mx-auto" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
@ -1,23 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import RssContainer from './RssContainer.svelte';
|
import RssContainer from './RssContainer.svelte';
|
||||||
import { GlobeOutline, GithubSolid } from 'flowbite-svelte-icons';
|
|
||||||
export let url;
|
|
||||||
export let repo;
|
|
||||||
export let rss;
|
export let rss;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex justify-center gap-12 my-12">
|
|
||||||
<div class="hover:scale-110">
|
|
||||||
<a href={url}>
|
|
||||||
<GlobeOutline class="mx-auto" />
|
|
||||||
</a>
|
|
||||||
<p>www</p>
|
|
||||||
</div>
|
|
||||||
<div class="hover:scale-110">
|
|
||||||
<a href={repo}>
|
|
||||||
<GithubSolid class="mx-auto" />
|
|
||||||
</a>
|
|
||||||
<p>git</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<RssContainer url={rss} />
|
<RssContainer url={rss} />
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="my-4 dark:bg-slate-800 w-fit mx-auto rounded-2xl p-2">
|
<div class="my-4 dark:bg-slate-800 w-fit mx-auto rounded-2xl p-2">
|
||||||
<h3 class="text-xl mb-2">built with</h3>
|
<h3 class="text-xl mb-2 text-center">built with</h3>
|
||||||
<div class="flex justify-center gap-6 flex-wrap">
|
<div class="flex justify-center gap-6 flex-wrap">
|
||||||
{#each vendors as vendor}
|
{#each vendors as vendor}
|
||||||
<VendorIcon {...vendor} />
|
<VendorIcon {...vendor} />
|
||||||
|
@ -1,12 +1,10 @@
|
|||||||
<script>
|
<script>
|
||||||
export let name;
|
export let name;
|
||||||
export let img;
|
export let img;
|
||||||
export let url;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a href={url}>
|
|
||||||
<div class="flex flex-col justify-center h-16 hover:scale-110">
|
<div class="flex flex-col justify-center h-16 hover:scale-110">
|
||||||
<img src={img} alt={name} class="min-h-12 max-w-12 self-center" />
|
<img src={img} alt={name} class="min-h-12 max-w-12 self-center" />
|
||||||
<p class="text-slate-900 dark:text-stone-200 font-normal">{name}</p>
|
<p class="text-slate-900 dark:text-stone-200 font-normal">{name}</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
|
@ -27,7 +27,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<NavUl class="md:flex-row" {activeUrl}>
|
<NavUl class="md:flex-row" {activeUrl}>
|
||||||
<NavLi href="/">home</NavLi>
|
<NavLi href="/">home</NavLi>
|
||||||
<NavLi href="/about">whoami</NavLi>
|
|
||||||
<NavLi class="cursor-pointer">
|
<NavLi class="cursor-pointer">
|
||||||
projects<ChevronDownOutline class="w-6 h-6 text-primary-800 dark:text-stone-200 inline" />
|
projects<ChevronDownOutline class="w-6 h-6 text-primary-800 dark:text-stone-200 inline" />
|
||||||
</NavLi>
|
</NavLi>
|
||||||
@ -40,7 +39,6 @@
|
|||||||
<DropdownItem href="/projects/nextjs">nextjs</DropdownItem>
|
<DropdownItem href="/projects/nextjs">nextjs</DropdownItem>
|
||||||
<DropdownItem href="/projects/homelab">homelab</DropdownItem>
|
<DropdownItem href="/projects/homelab">homelab</DropdownItem>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
<NavLi href="/contact">contact</NavLi>
|
|
||||||
<NavLi class="hidden sm:block">
|
<NavLi class="hidden sm:block">
|
||||||
<DarkMode btnClass="p-0" />
|
<DarkMode btnClass="p-0" />
|
||||||
</NavLi>
|
</NavLi>
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<CloudflareAnalytics />
|
<CloudflareAnalytics />
|
||||||
<TopNav />
|
<TopNav />
|
||||||
<div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center mb-20 md:mb-0">
|
<div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl mb-20 md:mb-0">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<BottomNavigation />
|
<BottomNavigation />
|
||||||
|
@ -4,18 +4,11 @@
|
|||||||
import { Heading, Mark } from 'flowbite-svelte';
|
import { Heading, Mark } from 'flowbite-svelte';
|
||||||
import portfolio from '$lib/images/portfolio.png';
|
import portfolio from '$lib/images/portfolio.png';
|
||||||
import hero from '$lib/images/hero.webp';
|
import hero from '$lib/images/hero.webp';
|
||||||
|
|
||||||
const images = [
|
|
||||||
{
|
|
||||||
title: '/projects/nextjs',
|
|
||||||
image: portfolio
|
|
||||||
}
|
|
||||||
];
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="text-center text-xl">
|
<div class="text-xl">
|
||||||
<div class="flex my-4 gap-4">
|
<div class="flex my-4 gap-4">
|
||||||
<Heading tag="h1" class="md:text-right">father by day <Mark>developer</Mark> by night</Heading>
|
<Heading tag="h1" class="md:text-right leading-tight">father by day <Mark>developer</Mark> by night</Heading>
|
||||||
<img
|
<img
|
||||||
src={hero}
|
src={hero}
|
||||||
alt=""
|
alt=""
|
||||||
@ -27,17 +20,10 @@
|
|||||||
expand over time.
|
expand over time.
|
||||||
</h2>
|
</h2>
|
||||||
<p class="py-2">
|
<p class="py-2">
|
||||||
I like to explore many different technologies and frameworks mostly surrounding web development
|
I like to explore many different technologies and frameworks mostly surrounding web development, infrastructure and DevOps.
|
||||||
and infrastructure.
|
|
||||||
</p>
|
</p>
|
||||||
<div class="hidden md:block py-2">
|
|
||||||
<VendorMarquee />
|
|
||||||
</div>
|
|
||||||
<div class="md:hidden py-2">
|
|
||||||
<VendorCarousel />
|
|
||||||
</div>
|
|
||||||
<h2 class="py-2">
|
<h2 class="py-2">
|
||||||
You can see some of my web dev projects and a small write-up on my homelab in the projects
|
This page is my initial portfolio project built in Svelte.
|
||||||
section.
|
|
||||||
</h2>
|
</h2>
|
||||||
|
<p>You can read all about it <a class="underline" href="/projects/svelte">here</a> and explore the repo on <a class="underline" href="https://gitea.rannes.dev/rannes.dev/my-portfolio">my gitea.</a></p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,36 +0,0 @@
|
|||||||
<script>
|
|
||||||
import migImg from '$lib/images/mig.jpg';
|
|
||||||
import osImg from '$lib/images/os.webp';
|
|
||||||
import { fade } from 'svelte/transition';
|
|
||||||
import PageHeader from '$lib/PageHeader.svelte';
|
|
||||||
const title = 'Life is good in Copenhagen';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="page-container" in:fade>
|
|
||||||
<PageHeader {title} />
|
|
||||||
<div class="article-container md:flex mb-4 items-center text-left">
|
|
||||||
<p class="">
|
|
||||||
I live in Copenhagen with my partner and children near the water. We love going on expeditions
|
|
||||||
around the city in our cargo bike, or on my electrical skateboard. When we're not outside I
|
|
||||||
spend a lot of time fiddling around with my homelab, and development projects. You can read
|
|
||||||
more about my projects and homelab under the homelab and portfolio nav.
|
|
||||||
</p>
|
|
||||||
<img
|
|
||||||
class="rounded-2xl xl:ml-4 md:w-auto md:h-52 md:ml-0 md:mt-4 sm:ml-0 sm:mt-4 sm:w-full"
|
|
||||||
src={migImg}
|
|
||||||
alt="crazy man"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p class="mb-4">
|
|
||||||
I work in recruitment, and I specialise in building product teams for start ups and scale ups
|
|
||||||
for a small recruitment agency called <a
|
|
||||||
class="underline font-semibold"
|
|
||||||
href="https://www.adveniopeople.com">Advenio People</a
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
<img
|
|
||||||
src={osImg}
|
|
||||||
alt="A happy man and a beautiful woman both wearing facemasks."
|
|
||||||
class="rounded-full w-1/2 h-auto m-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
|
@ -10,15 +10,15 @@
|
|||||||
<div in:fade>
|
<div in:fade>
|
||||||
<PageHeader {title} />
|
<PageHeader {title} />
|
||||||
|
|
||||||
<div class="content text-left">
|
<div class="content">
|
||||||
<article>
|
<article>
|
||||||
<h2 class="text-xl text-center">What is a homelab?</h2>
|
<h2 class="text-xl ">What is a homelab?</h2>
|
||||||
<img class="rounded mt-4" src={quoteImg} alt="" />
|
<img class="rounded mt-4" src={quoteImg} alt="" />
|
||||||
<p class="text-sm italic">
|
<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>
|
||||||
<h2 class="text-xl text-center mt-4">Origin and Hardware</h2>
|
<h2 class="text-xl 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
|
||||||
always been curious, and drawn towards things that are unfamiliar to me. I am also a builder
|
always been curious, and drawn towards things that are unfamiliar to me. I am also a builder
|
||||||
@ -88,7 +88,7 @@
|
|||||||
>. The parts are all sourced, and the rest of the parts are 3D printed in ABS+. It took me
|
>. The parts are all sourced, and the rest of the parts are 3D printed in ABS+. It took me
|
||||||
roughly 40 hours to build it and calibrate it.
|
roughly 40 hours to build it and calibrate it.
|
||||||
</p>
|
</p>
|
||||||
<h2 class="text-xl text-center mt-4">OS</h2>
|
<h2 class="text-xl mt-4">OS</h2>
|
||||||
<p>
|
<p>
|
||||||
The server is running ProxmoxVE which is great for experimenting, as I can provision
|
The server is running ProxmoxVE which is great for experimenting, as I can provision
|
||||||
development and test environments easily from templates and spin up machines to experiment
|
development and test environments easily from templates and spin up machines to experiment
|
||||||
@ -96,8 +96,8 @@
|
|||||||
Proxmox even though virtualization is not necessarily something I will do a deep dive on. It
|
Proxmox even though virtualization is not necessarily something I will do a deep dive on. It
|
||||||
also makes it easy to separate services in LXC containers and virtual machines.
|
also makes it easy to separate services in LXC containers and virtual machines.
|
||||||
</p>
|
</p>
|
||||||
<h2 class="text-xl text-center mt-4">VMs and LXC</h2>
|
<h2 class="text-xl mt-4">VMs and LXC</h2>
|
||||||
<h3 class="text-lg text-center">Docker Host</h3>
|
<h3 class="text-lg ">Docker Host</h3>
|
||||||
<p>
|
<p>
|
||||||
This VM is my production environment where I run my docker services that have been tested an
|
This VM is my production environment where I run my docker services that have been tested an
|
||||||
properly implemented with network volumes and backup.
|
properly implemented with network volumes and backup.
|
||||||
@ -137,7 +137,7 @@
|
|||||||
<li>Kuma Uptime</li>
|
<li>Kuma Uptime</li>
|
||||||
<li>Portainer</li>
|
<li>Portainer</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h3 class="text-lg text-center mt-4">Pi-Hole</h3>
|
<h3 class="text-lg mt-4">Pi-Hole</h3>
|
||||||
<p>
|
<p>
|
||||||
LXC container running Pi-hole dns blocker. This is separate so the network is not affected
|
LXC container running Pi-hole dns blocker. This is separate so the network is not affected
|
||||||
when servicing other VMs. First this was included in the docker-stack but it created too
|
when servicing other VMs. First this was included in the docker-stack but it created too
|
||||||
@ -146,7 +146,7 @@
|
|||||||
<p>
|
<p>
|
||||||
For this reason, I am also planning on moving Crowdsec and Traefik to a separate containers.
|
For this reason, I am also planning on moving Crowdsec and Traefik to a separate containers.
|
||||||
</p>
|
</p>
|
||||||
<h3 class="text-lg text-center mt-4">Unraid</h3>
|
<h3 class="text-lg mt-4">Unraid</h3>
|
||||||
<p>
|
<p>
|
||||||
This VM is running Unraid, which is managing my BTRFS array in Raid1. Upon boot it is loaded
|
This VM is running Unraid, which is managing my BTRFS array in Raid1. Upon boot it is loaded
|
||||||
from a USB-stick, and runs from memory. I moved to unraid as it allows me to add more drives
|
from a USB-stick, and runs from memory. I moved to unraid as it allows me to add more drives
|
||||||
@ -154,13 +154,13 @@
|
|||||||
have the knowledge (or the will) of storage systems to manage it if I can avoid it.
|
have the knowledge (or the will) of storage systems to manage it if I can avoid it.
|
||||||
</p>
|
</p>
|
||||||
<p>This VM has the SATA controller passed through, for full control of the HDD's.</p>
|
<p>This VM has the SATA controller passed through, for full control of the HDD's.</p>
|
||||||
<h3 class="text-lg text-center mt-4">Development server</h3>
|
<h3 class="text-lg mt-4">Development server</h3>
|
||||||
<p>
|
<p>
|
||||||
This vm is my development server. It's running a act_runner paired up with Gitea to build my
|
This vm is my development server. It's running a act_runner paired up with Gitea to build my
|
||||||
portfolio project, dockerize it and push it to my container registry. The application then
|
portfolio project, dockerize it and push it to my container registry. The application then
|
||||||
deployed in the staging environment for a last check.
|
deployed in the staging environment for a last check.
|
||||||
</p>
|
</p>
|
||||||
<h2 class="text-xl text-center mt-4">CI/CD</h2>
|
<h2 class="text-xl mt-4">CI/CD</h2>
|
||||||
<p>
|
<p>
|
||||||
I use Gitea Actions which is similar to Github Actions. I will post a guide soon how to set
|
I use Gitea Actions which is similar to Github Actions. I will post a guide soon how to set
|
||||||
up CI for your svelte-docker project with Gitea Actions.
|
up CI for your svelte-docker project with Gitea Actions.
|
||||||
|
Loading…
Reference in New Issue
Block a user