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

navbar overhaul and darkmode implementation fix.
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 2m9s
Details

Browse Source
This commit is contained in:
christian 2024-05-20 13:36:50 +02:00
parent b22d9e97b3
commit 862bbeaf8d
9 changed files with 3956 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.css
View File

@ -2,9 +2,9 @@
@tailwind components;
@tailwind utilities;
body {
/* body {
transition:
background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
@apply bg-stone-200 dark:bg-gray-900 text-gray-900 dark:text-stone-200 text-center;
}
/* @apply bg-stone-200 dark:bg-gray-900 text-gray-900 dark:text-stone-200 text-center; */
/* } */

2
src/app.html
View File

@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="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>
</body>
</html>

5
src/lib/PageHeader.svelte Normal file
View File

@ -0,0 +1,5 @@
<script>
export let title;
</script>
<h1 class="text-center text-4xl">{title}</h1>

7
src/lib/PostPreview.svelte
View File

@ -1,7 +0,0 @@
<script>
export let data;
</script>
<h2>{data.post.title}</h2>
<p>data.</p>

BIN
src/lib/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

3900
src/lib/logo.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

93
src/routes/+layout.svelte
View File

@ -1,8 +1,19 @@
<script>
import { blur } from 'svelte/transition';
import {
Navbar,
NavBrand,
NavLi,
NavUl,
NavHamburger,
Dropdown,
DropdownItem,
DarkMode
} from 'flowbite-svelte';
import { ChevronDownOutline } from 'flowbite-svelte-icons';
import '../app.css';
import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
import { DarkMode } from 'flowbite-svelte';
import logo from '$lib/logo.png';
import { page } from '$app/stores';
// Navigation links are generated based on this object
const nav = [
@ -23,62 +34,38 @@
subPages: ['get_in_touch', 'socials']
}
];
let selected = nav[0]; // keep track of the selected 'page' object.
let intSelected = 0; // selected page index
// change the selected component (the event.originalTarget.id is not accessible in Chrome so switched to event.srcElement.id)
function changeComponent(event) {
selected = nav[event.srcElement.id];
intSelected = event.srcElement.id;
}
$: activeUrl = $page.url.pathname;
</script>
<CloudflareAnalytics />
<nav class="nav-container h-32 w-full mt-12">
<ul class="text-center">
{#each nav as main, i}
{#if i != 0}
{#if !nav[i].subPages[0]}
<li class="nav-item font-jose inline-block">
<a
href={main.name}
class={selected == nav[i]
? 'nav-link text-2xl p-3 hover:text-slate-400'
: 'nav-link text-2xl p-3 hover:text-slate-400'}
on:click={changeComponent}
id={i}>{main.name}</a
<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
>
</li>
{:else}
<li class="nav-item font-jose inline-block hover:text-slate-400">
<button
class={selected == nav[i] ? 'nav-link text-2xl p-3' : 'nav link text-2xl p-3'}
on:click={changeComponent}
id={i}>{main.name}</button
>
</li>
{/if}
{/if}
{/each}
</ul>
<hr class="nav-divider max-w-xl border-1 mx-auto rounded border-slate-400" />
{#key selected}
<ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
{#each selected.subPages as subPage}
<li class="sub-nav-item inline-block font-jose hover:text-slate-400">
<a class="sub-nav-link text-xl p-2" href={subPage}>{subPage.replace(/_/g, ' ')}</a>
</li>
{/each}
</ul>
{/key}
<div class="absolute top-2 md:top-6 right-2 md:right-6">
<DarkMode />
</div>
</nav>
</NavBrand>
<NavHamburger />
<NavUl {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">
<DropdownItem href="/svelte">svelte</DropdownItem>
<DropdownItem href="/nextjs">nextjs</DropdownItem>
<DropdownItem href="/homelab">homelab</DropdownItem>
</Dropdown>
<NavLi href="/contact">contact</NavLi>
<NavLi>
<DarkMode btnClass="p-0" />
</NavLi>
</NavUl>
</Navbar>
<div class="mt-6 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
<slot />
</div>
<footer class="mt-12">
<p class="text-sm text-gray-400">built by christian rannes 2024</p>
<footer class="mt-12 text-center">
<p class="text-sm text-stone-400">built by christian rannes 2024</p>
</footer>

4
src/routes/next.js/+page.svelte → src/routes/nextjs/+page.svelte
View File

@ -1,10 +1,12 @@
<script>
import { fade } from 'svelte/transition';
import Projects from '../../lib/Projects.svelte';
import PageHeader from '../../lib/PageHeader.svelte';
const category = 'nextjs';
const title = 'Next.js Projects';
</script>
<div in:fade>
<h1 class="text-2xl mb-4">Next.js Projects</h1>
<PageHeader {title} />
<Projects {category} />
</div>

4
src/routes/svelte/+page.svelte
View File

@ -1,11 +1,13 @@
<script>
import { fade } from 'svelte/transition';
import Projects from '../../lib/Projects.svelte';
import PageHeader from '../../lib/PageHeader.svelte';
const projectRssUrl = 'https://gitea.rannes.dev/rannes.dev/my-portfolio.rss';
const category = 'svelte';
const title = 'Svelte Projects';
</script>
<div in:fade>
<h1 class="text-2xl mb-4">Svelte Projects</h1>
<PageHeader {title} />
<Projects {category} />
</div>