- Removed about
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m43s
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m43s
- Removed contact - Revamped information architecture of Projects and Landing
This commit is contained in:
parent
a67351c950
commit
c73fec85ad
@ -14,7 +14,7 @@
|
||||
</head>
|
||||
<body
|
||||
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>
|
||||
</body>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
|
||||
<BottomNav
|
||||
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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</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')}>
|
||||
<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"
|
||||
/>
|
||||
</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>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import ProjectDescription from './ProjectDescription.svelte';
|
||||
import ProjectHeader from './ProjectHeader.svelte';
|
||||
import ProjectLinks from './ProjectLinks.svelte';
|
||||
import ProjectRepo from './ProjectRepo.svelte';
|
||||
import VendorGallery from './VendorGallery.svelte';
|
||||
|
||||
@ -14,7 +15,11 @@
|
||||
</script>
|
||||
|
||||
<div class="pt-12">
|
||||
<div class="flex justify-start items-center gap-4">
|
||||
<ProjectHeader {title} />
|
||||
<ProjectLinks {url} {repo}/>
|
||||
</div>
|
||||
<hr class="border-slate-400 border-1" />
|
||||
<ProjectDescription {description} />
|
||||
<VendorGallery {vendors} />
|
||||
<ProjectRepo {repo} {rss} {url} />
|
||||
|
||||
@ -2,5 +2,4 @@
|
||||
export let title;
|
||||
</script>
|
||||
|
||||
<h3 class="text-3xl mb-2">{title}</h3>
|
||||
<hr class="border-slate-400 border-1" />
|
||||
<h3 class="text-3xl">{title}</h3>
|
||||
|
||||
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>
|
||||
import RssContainer from './RssContainer.svelte';
|
||||
import { GlobeOutline, GithubSolid } from 'flowbite-svelte-icons';
|
||||
export let url;
|
||||
export let repo;
|
||||
export let rss;
|
||||
</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} />
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</script>
|
||||
|
||||
<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">
|
||||
{#each vendors as vendor}
|
||||
<VendorIcon {...vendor} />
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<script>
|
||||
export let name;
|
||||
export let img;
|
||||
export let url;
|
||||
</script>
|
||||
|
||||
<a href={url}>
|
||||
|
||||
<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" />
|
||||
<p class="text-slate-900 dark:text-stone-200 font-normal">{name}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -27,7 +27,6 @@
|
||||
</div>
|
||||
<NavUl class="md:flex-row" {activeUrl}>
|
||||
<NavLi href="/">home</NavLi>
|
||||
<NavLi href="/about">whoami</NavLi>
|
||||
<NavLi class="cursor-pointer">
|
||||
projects<ChevronDownOutline class="w-6 h-6 text-primary-800 dark:text-stone-200 inline" />
|
||||
</NavLi>
|
||||
@ -40,7 +39,6 @@
|
||||
<DropdownItem href="/projects/nextjs">nextjs</DropdownItem>
|
||||
<DropdownItem href="/projects/homelab">homelab</DropdownItem>
|
||||
</Dropdown>
|
||||
<NavLi href="/contact">contact</NavLi>
|
||||
<NavLi class="hidden sm:block">
|
||||
<DarkMode btnClass="p-0" />
|
||||
</NavLi>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
<CloudflareAnalytics />
|
||||
<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 />
|
||||
</div>
|
||||
<BottomNavigation />
|
||||
|
||||
@ -4,18 +4,11 @@
|
||||
import { Heading, Mark } from 'flowbite-svelte';
|
||||
import portfolio from '$lib/images/portfolio.png';
|
||||
import hero from '$lib/images/hero.webp';
|
||||
|
||||
const images = [
|
||||
{
|
||||
title: '/projects/nextjs',
|
||||
image: portfolio
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="text-center text-xl">
|
||||
<div class="text-xl">
|
||||
<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
|
||||
src={hero}
|
||||
alt=""
|
||||
@ -27,17 +20,10 @@
|
||||
expand over time.
|
||||
</h2>
|
||||
<p class="py-2">
|
||||
I like to explore many different technologies and frameworks mostly surrounding web development
|
||||
and infrastructure.
|
||||
I like to explore many different technologies and frameworks mostly surrounding web development, infrastructure and DevOps.
|
||||
</p>
|
||||
<div class="hidden md:block py-2">
|
||||
<VendorMarquee />
|
||||
</div>
|
||||
<div class="md:hidden py-2">
|
||||
<VendorCarousel />
|
||||
</div>
|
||||
<h2 class="py-2">
|
||||
You can see some of my web dev projects and a small write-up on my homelab in the projects
|
||||
section.
|
||||
This page is my initial portfolio project built in Svelte.
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
<PageHeader {title} />
|
||||
|
||||
<div class="content text-left">
|
||||
<div class="content">
|
||||
<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="" />
|
||||
<p class="text-sm italic">
|
||||
This question was answered very well by the reddit users webtroter and TreAwayDeuce 6 years
|
||||
ago.
|
||||
</p>
|
||||
<h2 class="text-xl text-center mt-4">Origin and Hardware</h2>
|
||||
<h2 class="text-xl mt-4">Origin and Hardware</h2>
|
||||
<p>
|
||||
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
|
||||
@ -88,7 +88,7 @@
|
||||
>. 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.
|
||||
</p>
|
||||
<h2 class="text-xl text-center mt-4">OS</h2>
|
||||
<h2 class="text-xl mt-4">OS</h2>
|
||||
<p>
|
||||
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
|
||||
@ -96,8 +96,8 @@
|
||||
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.
|
||||
</p>
|
||||
<h2 class="text-xl text-center mt-4">VMs and LXC</h2>
|
||||
<h3 class="text-lg text-center">Docker Host</h3>
|
||||
<h2 class="text-xl mt-4">VMs and LXC</h2>
|
||||
<h3 class="text-lg ">Docker Host</h3>
|
||||
<p>
|
||||
This VM is my production environment where I run my docker services that have been tested an
|
||||
properly implemented with network volumes and backup.
|
||||
@ -137,7 +137,7 @@
|
||||
<li>Kuma Uptime</li>
|
||||
<li>Portainer</li>
|
||||
</ul>
|
||||
<h3 class="text-lg text-center mt-4">Pi-Hole</h3>
|
||||
<h3 class="text-lg mt-4">Pi-Hole</h3>
|
||||
<p>
|
||||
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
|
||||
@ -146,7 +146,7 @@
|
||||
<p>
|
||||
For this reason, I am also planning on moving Crowdsec and Traefik to a separate containers.
|
||||
</p>
|
||||
<h3 class="text-lg text-center mt-4">Unraid</h3>
|
||||
<h3 class="text-lg mt-4">Unraid</h3>
|
||||
<p>
|
||||
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
|
||||
@ -154,13 +154,13 @@
|
||||
have the knowledge (or the will) of storage systems to manage it if I can avoid it.
|
||||
</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>
|
||||
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
|
||||
deployed in the staging environment for a last check.
|
||||
</p>
|
||||
<h2 class="text-xl text-center mt-4">CI/CD</h2>
|
||||
<h2 class="text-xl mt-4">CI/CD</h2>
|
||||
<p>
|
||||
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.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user