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

Corrected info architecture based on feedback from Martin Sandholt #8

Merged
christian merged 1 commits from info-arch into main 2024-05-21 13:25:03 +00:00
Conversation 0 Commits 1 Files Changed 13 +46 -104
13 changed files with 46 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

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

13
src/lib/BottomNavigation.svelte
View File

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

7
src/lib/ProjectCard/ProjectCard.svelte
View File

@ -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">
<ProjectHeader {title} /> <div class="flex justify-start items-center gap-4">
<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} />

3
src/lib/ProjectCard/ProjectHeader.svelte
View File

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

17
src/lib/ProjectCard/ProjectRepo.svelte
View File

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

2
src/lib/ProjectCard/VendorGallery.svelte
View File

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

4
src/lib/ProjectCard/VendorIcon.svelte
View File

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

2
src/lib/TopNav.svelte
View File

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

2
src/routes/+layout.svelte
View File

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

24
src/routes/+page.svelte
View File

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

36
src/routes/about/+page.svelte
View File

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

20
src/routes/projects/homelab/+page.svelte
View File

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