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

Revamped landing page and mobile nav #7

Merged
christian merged 6 commits from new-landing into main 2024-05-20 22:23:19 +00:00
Conversation 0 Commits 6 Files Changed 14 +141 -105
10 changed files with 141 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fc4044ecd9 - Show all commits

14
src/app.html
View File

@ -3,13 +3,19 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </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"> <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"
>
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

60
src/lib/BottomNavigation.svelte
View File

@ -1,21 +1,13 @@
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
import { import { BottomNav, BottomNavItem } from 'flowbite-svelte';
BottomNav,
BottomNavItem,
BottomNavHeader,
BottomNavHeaderItem,
Tooltip,
Skeleton,
ImagePlaceholder
} from 'flowbite-svelte';
import { import {
HomeSolid, HomeSolid,
BookmarkSolid, ProfileCardOutline,
PlusOutline, ImageOutline,
SearchOutline, MobilePhoneOutline
AdjustmentsVerticalOutline
} from 'flowbite-svelte-icons'; } from 'flowbite-svelte-icons';
let activeBtn = 'home'; let activeBtn = 'home';
function handleNavItemClick(btnName) { function handleNavItemClick(btnName) {
activeBtn = btnName; activeBtn = btnName;
@ -24,43 +16,33 @@
$: isHidden = activeBtn === 'projects'; $: isHidden = activeBtn === 'projects';
</script> </script>
<p>{isHidden}</p> <BottomNav
<BottomNav position="absolute" navType="group" classInner="grid-cols-5"> position="sticky"
<BottomNavHeader hidden slot="header"> classInner="grid-cols-4"
<BottomNavHeaderItem itemName="New" /> outerClass="md:hidden w-full z-50 border-gray-200 dark:bg-slate-900 dark:border-gray-600 bottom-0"
<BottomNavHeaderItem itemName="Popular" active={true} /> >
<BottomNavHeaderItem itemName="Following" /> <BottomNavItem btnName="home" href="/">
</BottomNavHeader>
<BottomNavItem on:click={() => handleNavItemClick('home')} btnName="home" id="group-home">
<HomeSolid <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" 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"
on:click={() => handleNavItemClick('home')}
/> />
<Tooltip arrow={false}>Home</Tooltip>
</BottomNavItem> </BottomNavItem>
<BottomNavItem on:click={() => handleNavItemClick('whoami')} btnName="whoami" id="group-whoami"> <BottomNavItem btnName="whoami" href="/about">
<BookmarkSolid <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" 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"
on:click={() => handleNavItemClick('whoami')}
/> />
<Tooltip arrow={false}>whoami</Tooltip>
</BottomNavItem> </BottomNavItem>
<BottomNavItem <BottomNavItem btnName="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"
on:click={() => handleNavItemClick('projects')} 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>
<BottomNavItem <BottomNavItem btnName="contact" href="/contact">
on:click={() => handleNavItemClick('contact')} <MobilePhoneOutline
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" 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"
on:click={() => handleNavItemClick('contact')}
/> />
<Tooltip arrow={false}>contact</Tooltip>
</BottomNavItem> </BottomNavItem>
</BottomNav> </BottomNav>

17
src/lib/Landing/VendorCarousel.svelte Normal file
View File

@ -0,0 +1,17 @@
<script>
import { Marquee } from 'flowbite-svelte';
import { projects } from '$lib/projects.js';
import VendorIcon from '../ProjectCard/VendorIcon.svelte';
const allVendors = Array.from(
new Map(
projects.flatMap((project) => project.vendors).map((vendor) => [vendor.name, vendor])
).values()
);
</script>
<div class="p-4 bg-stone-200 dark:bg-slate-800 rounded-xl flex items-center overflow-scroll gap-4">
{#each allVendors as vendor}
<VendorIcon {...vendor} />
{/each}
</div>

10
src/lib/Landing/VendorMarquee.svelte
View File

@ -1,6 +1,8 @@
<script> <script>
import { Marquee } from 'flowbite-svelte'; import { Marquee } from 'flowbite-svelte';
import { projects } from '$lib/projects.js'; import { projects } from '$lib/projects.js';
import VendorIcon from '../ProjectCard/VendorIcon.svelte';
const allVendors = Array.from( const allVendors = Array.from(
new Map( new Map(
projects.flatMap((project) => project.vendors).map((vendor) => [vendor.name, vendor]) projects.flatMap((project) => project.vendors).map((vendor) => [vendor.name, vendor])
@ -8,8 +10,12 @@
); );
</script> </script>
<Marquee speed={0.5} hoverSpeed={0.25} class="py-6 bg-stone-200 gradi"> <Marquee
speed={0.5}
hoverSpeed={0.25}
class="py-4 bg-stone-200 dark:bg-slate-800 rounded-xl flex items-center"
>
{#each allVendors as vendor} {#each allVendors as vendor}
<img class="w-16 h-16" alt={vendor.name} src={vendor.img} /> <VendorIcon {...vendor} />
{/each} {/each}
</Marquee> </Marquee>

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

@ -7,6 +7,6 @@
<a href={url}> <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>{name}</p> <p class="text-slate-900 dark:text-stone-200 font-normal">{name}</p>
</div> </div>
</a> </a>

48
src/lib/TopNav.svelte Normal file
View File

@ -0,0 +1,48 @@
<script>
import {
Navbar,
NavBrand,
NavLi,
NavUl,
Dropdown,
DropdownItem,
DarkMode
} from 'flowbite-svelte';
import { ChevronDownOutline } from 'flowbite-svelte-icons';
import logo from '$lib/logo.png';
import { page } from '$app/stores';
$: activeUrl = $page.url.pathname;
</script>
<Navbar class="bg-transparent">
<NavBrand href="/">
<img src={logo} class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-stone-200"
>rannes.dev</span
>
</NavBrand>
<div class="flex">
<DarkMode btnClass="block sm:hidden" />
</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>
<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>
</Dropdown>
<NavLi href="/contact">contact</NavLi>
<NavLi class="hidden sm:block">
<DarkMode btnClass="p-0" />
</NavLi>
</NavUl>
</Navbar>

BIN
src/lib/images/localWeather.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
src/lib/images/portfolio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

54
src/routes/+layout.svelte
View File

@ -1,62 +1,18 @@
<script> <script>
import {
Navbar,
NavBrand,
NavLi,
NavUl,
NavHamburger,
Dropdown,
DropdownItem,
DarkMode
} from 'flowbite-svelte';
import { ChevronDownOutline } from 'flowbite-svelte-icons';
import '../app.css'; import '../app.css';
import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte'; import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
import logo from '$lib/logo.png';
import { page } from '$app/stores';
import BottomNavigation from '../lib/BottomNavigation.svelte'; import BottomNavigation from '../lib/BottomNavigation.svelte';
import TopNav from '../lib/TopNav.svelte';
$: activeUrl = $page.url.pathname;
</script> </script>
<CloudflareAnalytics /> <CloudflareAnalytics />
<Navbar class="bg-transparent"> <TopNav />
<NavBrand href="/">
<img src={logo} class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-stone-200"
>rannes.dev</span
>
</NavBrand>
<div class="flex">
<DarkMode btnClass="block sm:hidden" />
</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>
<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>
</Dropdown>
<NavLi href="/contact">contact</NavLi>
<NavLi class="hidden sm:block">
<DarkMode btnClass="p-0" />
</NavLi>
</NavUl>
</Navbar>
<div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center"> <div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
<slot /> <slot />
</div> </div>
<footer> <footer class="">
<div class="text-sm text-stone-400 mt-12 text-center"> <div class="hidden md:block text-sm text-stone-400 mt-12 text-center">
<p>built by christian rannes 2024</p> <p>built by christian rannes 2024</p>
</div> </div>
<BottomNavigation />
</footer> </footer>
<BottomNavigation />

41
src/routes/+page.svelte
View File

@ -1,16 +1,37 @@
<script> <script>
import VendorMarquee from '$lib/Landing/VendorMarquee.svelte'; import VendorMarquee from '$lib/Landing/VendorMarquee.svelte';
import VendorCarousel from '../lib/Landing/VendorCarousel.svelte';
import { Carousel, Heading, Mark } from 'flowbite-svelte';
import rack from '$lib/images/rack.webp';
import portfolio from '$lib/images/portfolio.png';
import localWeather from '$lib/images/localWeather.png';
const images = [
{
title: '/projects/nextjs',
image: portfolio
}
];
</script> </script>
<div class="main-container text-center"> <div class="text-center text-xl">
<h1 class="text-xl mb-2">Welcome to my corner of the internet</h1> <Heading tag="h1" class="my-4">father by day <Mark>developer</Mark> by night</Heading>
<h2 class="py-2">
welcome to my space. For now it is used to document my learnings and share my projects. It might
expand over time.
</h2>
<p class="py-2">
I like to explore many different technologies and frameworks mostly surrounding web development
or infrastructure.
</p>
<div class="hidden md:block py-2">
<VendorMarquee /> <VendorMarquee />
<p> </div>
You most likely ended up here after listening to me rambling about the wonders of self hosted <div class="md:hidden py-2">
services, and how life would be much easier if we could just containerize everything. <VendorCarousel />
</p> </div>
<p class="italic text-sm mt-8"> <h2 class="py-2">
This page is my initial svelte project to try out the framework, and at the time of writing You can see some of my web dev projects and a small write-up on my homelab in the projects
(24th April 2024) many pages are still lacking content. section.
</p> </h2>
</div> </div>