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

Compare commits

base: rannes.dev:c9467a66694c070bf25045b65d82a95af9a90129
Branches Tags
rannes.dev:main
rannes.dev:info-arch
rannes.dev:new-landing
rannes.dev:flowbite-svelte
rannes.dev:projects-2
rannes.dev:sanity-cms
..
compare: rannes.dev:a67351c950b6e2c33701ccd25279bba611facbd9
Branches Tags
rannes.dev:main
rannes.dev:info-arch
rannes.dev:new-landing
rannes.dev:flowbite-svelte
rannes.dev:projects-2
rannes.dev:sanity-cms

No commits in common. "c9467a66694c070bf25045b65d82a95af9a90129" and "a67351c950b6e2c33701ccd25279bba611facbd9" have entirely different histories.
c9467a6669 ... a67351c950

13 changed files with 104 additions and 46 deletions
Show Stats 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" class="bg-stone-200 dark:bg-primary-900 text-primary-900 dark:text-stone-200 font-jose font-light"
> >
<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-2" classInner="grid-cols-4"
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,10 +33,19 @@
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>

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

@ -1,7 +1,6 @@
<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';
@ -15,11 +14,7 @@
</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} />

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

@ -2,4 +2,5 @@
export let title; export let title;
</script> </script>
<h3 class="text-3xl">{title}</h3> <h3 class="text-3xl mb-2">{title}</h3>
<hr class="border-slate-400 border-1" />

18
src/lib/ProjectCard/ProjectLinks.svelte
View File

@ -1,18 +0,0 @@
<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,6 +1,23 @@
<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 text-center">built with</h3> <h3 class="text-xl mb-2">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,10 +1,12 @@
<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,6 +27,7 @@
</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>
@ -39,6 +40,7 @@
<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 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 text-center mb-20 md:mb-0">
<slot /> <slot />
</div> </div>
<BottomNavigation /> <BottomNavigation />

24
src/routes/+page.svelte
View File

@ -4,11 +4,18 @@
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-xl"> <div class="text-center text-xl">
<div class="flex my-4 gap-4"> <div class="flex my-4 gap-4">
<Heading tag="h1" class="md:text-right leading-tight">father by day <Mark>developer</Mark> by night</Heading> <Heading tag="h1" class="md:text-right">father by day <Mark>developer</Mark> by night</Heading>
<img <img
src={hero} src={hero}
alt="" alt=""
@ -20,10 +27,17 @@
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, infrastructure and DevOps. I like to explore many different technologies and frameworks mostly surrounding web development
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">
This page is my initial portfolio project built in Svelte. You can see some of my web dev projects and a small write-up on my homelab in the projects
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 Normal file
View File

@ -0,0 +1,36 @@
<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"> <div class="content text-left">
<article> <article>
<h2 class="text-xl ">What is a homelab?</h2> <h2 class="text-xl text-center">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 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
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 mt-4">OS</h2> <h2 class="text-xl text-center 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 mt-4">VMs and LXC</h2> <h2 class="text-xl text-center mt-4">VMs and LXC</h2>
<h3 class="text-lg ">Docker Host</h3> <h3 class="text-lg text-center">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 mt-4">Pi-Hole</h3> <h3 class="text-lg text-center 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 mt-4">Unraid</h3> <h3 class="text-lg text-center 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 mt-4">Development server</h3> <h3 class="text-lg text-center 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 mt-4">CI/CD</h2> <h2 class="text-xl text-center 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.