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">
on:click={() => handleNavItemClick('projects')} <ImageOutline
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" 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')}
/> />
<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>
<VendorMarquee /> <h2 class="py-2">
<p> welcome to my space. For now it is used to document my learnings and share my projects. It might
You most likely ended up here after listening to me rambling about the wonders of self hosted expand over time.
services, and how life would be much easier if we could just containerize everything. </h2>
</p> <p class="py-2">
<p class="italic text-sm mt-8"> I like to explore many different technologies and frameworks mostly surrounding web development
This page is my initial svelte project to try out the framework, and at the time of writing or infrastructure.
(24th April 2024) many pages are still lacking content.
</p> </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.
</h2>
</div> </div>