Revamped landing page and mobile nav #7
66
src/lib/BottomNavigation.svelte
Normal file
66
src/lib/BottomNavigation.svelte
Normal file
@ -0,0 +1,66 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
BottomNav,
|
||||
BottomNavItem,
|
||||
BottomNavHeader,
|
||||
BottomNavHeaderItem,
|
||||
Tooltip,
|
||||
Skeleton,
|
||||
ImagePlaceholder
|
||||
} from 'flowbite-svelte';
|
||||
import {
|
||||
HomeSolid,
|
||||
BookmarkSolid,
|
||||
PlusOutline,
|
||||
SearchOutline,
|
||||
AdjustmentsVerticalOutline
|
||||
} from 'flowbite-svelte-icons';
|
||||
let activeBtn = 'home';
|
||||
function handleNavItemClick(btnName) {
|
||||
activeBtn = btnName;
|
||||
}
|
||||
|
||||
$: isHidden = activeBtn === 'projects';
|
||||
</script>
|
||||
|
||||
<p>{isHidden}</p>
|
||||
<BottomNav position="absolute" navType="group" classInner="grid-cols-5">
|
||||
<BottomNavHeader hidden slot="header">
|
||||
<BottomNavHeaderItem itemName="New" />
|
||||
<BottomNavHeaderItem itemName="Popular" active={true} />
|
||||
<BottomNavHeaderItem itemName="Following" />
|
||||
</BottomNavHeader>
|
||||
<BottomNavItem on:click={() => handleNavItemClick('home')} btnName="home" id="group-home">
|
||||
<HomeSolid
|
||||
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"
|
||||
/>
|
||||
<Tooltip arrow={false}>Home</Tooltip>
|
||||
</BottomNavItem>
|
||||
<BottomNavItem on:click={() => handleNavItemClick('whoami')} btnName="whoami" id="group-whoami">
|
||||
<BookmarkSolid
|
||||
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"
|
||||
/>
|
||||
<Tooltip arrow={false}>whoami</Tooltip>
|
||||
</BottomNavItem>
|
||||
<BottomNavItem
|
||||
on:click={() => handleNavItemClick('projects')}
|
||||
btnName="projects"
|
||||
id="group-projects"
|
||||
>
|
||||
<PlusOutline
|
||||
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"
|
||||
/>
|
||||
<Tooltip arrow={false}>projects</Tooltip>
|
||||
</BottomNavItem>
|
||||
<BottomNavItem
|
||||
on:click={() => handleNavItemClick('contact')}
|
||||
btnName="contact"
|
||||
id="group-contact"
|
||||
>
|
||||
<SearchOutline
|
||||
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"
|
||||
/>
|
||||
<Tooltip arrow={false}>contact</Tooltip>
|
||||
</BottomNavItem>
|
||||
</BottomNav>
|
15
src/lib/Landing/VendorMarquee.svelte
Normal file
15
src/lib/Landing/VendorMarquee.svelte
Normal file
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import { Marquee } from 'flowbite-svelte';
|
||||
import { projects } from '$lib/projects.js';
|
||||
const allVendors = Array.from(
|
||||
new Map(
|
||||
projects.flatMap((project) => project.vendors).map((vendor) => [vendor.name, vendor])
|
||||
).values()
|
||||
);
|
||||
</script>
|
||||
|
||||
<Marquee speed={0.5} hoverSpeed={0.25} class="py-6 bg-stone-200 gradi">
|
||||
{#each allVendors as vendor}
|
||||
<img class="w-16 h-16" alt={vendor.name} src={vendor.img} />
|
||||
{/each}
|
||||
</Marquee>
|
@ -9,11 +9,12 @@
|
||||
DropdownItem,
|
||||
DarkMode
|
||||
} from 'flowbite-svelte';
|
||||
import { ChevronDownOutline, HomeOutline } from 'flowbite-svelte-icons';
|
||||
import { ChevronDownOutline } from 'flowbite-svelte-icons';
|
||||
import '../app.css';
|
||||
import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
|
||||
import logo from '$lib/logo.png';
|
||||
import { page } from '$app/stores';
|
||||
import BottomNavigation from '../lib/BottomNavigation.svelte';
|
||||
|
||||
$: activeUrl = $page.url.pathname;
|
||||
</script>
|
||||
@ -28,15 +29,18 @@
|
||||
</NavBrand>
|
||||
<div class="flex">
|
||||
<DarkMode btnClass="block sm:hidden" />
|
||||
<NavHamburger />
|
||||
</div>
|
||||
<NavUl {activeUrl}>
|
||||
<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>
|
||||
<Dropdown class="w-44 z-20">
|
||||
<Dropdown
|
||||
{activeUrl}
|
||||
activeClass="font-bold text-primary-800 dark:text-stone-200"
|
||||
class="w-44 z-20"
|
||||
>
|
||||
<DropdownItem href="/projects/svelte">svelte</DropdownItem>
|
||||
<DropdownItem href="/projects/nextjs">nextjs</DropdownItem>
|
||||
<DropdownItem href="/projects/homelab">homelab</DropdownItem>
|
||||
@ -50,6 +54,9 @@
|
||||
<div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
|
||||
<slot />
|
||||
</div>
|
||||
<footer class="mt-12 text-center">
|
||||
<p class="text-sm text-stone-400">built by christian rannes 2024</p>
|
||||
<footer>
|
||||
<div class="text-sm text-stone-400 mt-12 text-center">
|
||||
<p>built by christian rannes 2024</p>
|
||||
</div>
|
||||
</footer>
|
||||
<BottomNavigation />
|
||||
|
@ -1,5 +1,10 @@
|
||||
<script>
|
||||
import VendorMarquee from '$lib/Landing/VendorMarquee.svelte';
|
||||
</script>
|
||||
|
||||
<div class="main-container text-center">
|
||||
<h1 class="text-xl mb-2">Welcome to my corner of the internet</h1>
|
||||
<VendorMarquee />
|
||||
<p>
|
||||
You most likely ended up here after listening to me rambling about the wonders of self hosted
|
||||
services, and how life would be much easier if we could just containerize everything.
|
||||
|
@ -1,17 +1,36 @@
|
||||
<script>
|
||||
import migImg from "$lib/images/mig.jpg"
|
||||
import osImg from "$lib/images/os.webp"
|
||||
import { fade } from "svelte/transition";
|
||||
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>
|
||||
<h1 class="text-xl mb-4">Life is good in Copenhagen</h1>
|
||||
<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>
|
||||
<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>
|
||||
|
@ -3,10 +3,12 @@
|
||||
import asrockImg from '$lib/images/asrock.webp';
|
||||
import rackImg from '$lib/images/rack.webp';
|
||||
import { fade } from 'svelte/transition';
|
||||
import PageHeader from '$lib/PageHeader.svelte';
|
||||
const title = 'Homelab';
|
||||
</script>
|
||||
|
||||
<div in:fade >
|
||||
<h1 class="text-2xl mb-4">Homelab</h1>
|
||||
<div in:fade>
|
||||
<PageHeader {title} />
|
||||
|
||||
<div class="content text-left">
|
||||
<article>
|
||||
@ -24,9 +26,9 @@
|
||||
maker-culture.
|
||||
</p>
|
||||
<p>
|
||||
My lab started in 2020, when I wanted to set up my own DNS server at home, to add
|
||||
network wide ad-block (Pihole). As I learned more about Linux and containerization I quickly
|
||||
got drawn into the hobby of self-hosting web-services.
|
||||
My lab started in 2020, when I wanted to set up my own DNS server at home, to add network
|
||||
wide ad-block (Pihole). As I learned more about Linux and containerization I quickly got
|
||||
drawn into the hobby of self-hosting web-services.
|
||||
</p>
|
||||
<p>
|
||||
Raspberry Pi's are great, but but the computing resources are limited compared to a x86, so
|
||||
@ -80,9 +82,11 @@
|
||||
<p>
|
||||
The homelab is also connected to two 3D printers, that are running open source custom
|
||||
firmware (klipper) and controlled through a web interface (Mainsail) from any device in the
|
||||
local network. I started with a Ender3, and during my parental leave last year I built <a class="underline" href="https://vorondesign.com/voron0.2">Voron 0.2</a>. 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.
|
||||
local network. I started with a Ender3, and during my parental leave last year I built <a
|
||||
class="underline"
|
||||
href="https://vorondesign.com/voron0.2">Voron 0.2</a
|
||||
>. 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>
|
||||
<p>
|
||||
@ -116,8 +120,7 @@
|
||||
<li>Portfolio web page</li>
|
||||
<p class="italic pl-4">
|
||||
This is my portfolio page, which will soon be available at rannes.dev. I'm using
|
||||
svelte/sveltekit. It is
|
||||
currently not exposed to the internet as I am still building it.
|
||||
svelte/sveltekit. It is currently not exposed to the internet as I am still building it.
|
||||
</p>
|
||||
<li>Crowdsec Security Engine</li>
|
||||
<li>Prometheus</li>
|
||||
@ -152,9 +155,16 @@
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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.</p>
|
||||
<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.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user