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 components;
@tailwind utilities; @tailwind utilities;
body { /* body {
transition: transition:
background-color 0.2s ease-in-out, background-color 0.2s ease-in-out,
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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</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> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </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

95
src/routes/+layout.svelte
View File

@ -1,8 +1,19 @@
<script> <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 '../app.css';
import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte'; 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 // Navigation links are generated based on this object
const nav = [ const nav = [
@ -23,62 +34,38 @@
subPages: ['get_in_touch', 'socials'] subPages: ['get_in_touch', 'socials']
} }
]; ];
$: activeUrl = $page.url.pathname;
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;
}
</script> </script>
<CloudflareAnalytics /> <CloudflareAnalytics />
<nav class="nav-container h-32 w-full mt-12"> <Navbar class="bg-transparent">
<ul class="text-center"> <NavBrand href="/">
{#each nav as main, i} <img src={logo} class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
{#if i != 0} <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-stone-200"
{#if !nav[i].subPages[0]} >rannes.dev</span
<li class="nav-item font-jose inline-block"> >
<a </NavBrand>
href={main.name} <NavHamburger />
class={selected == nav[i] <NavUl {activeUrl}>
? 'nav-link text-2xl p-3 hover:text-slate-400' <NavLi href="/">home</NavLi>
: 'nav-link text-2xl p-3 hover:text-slate-400'} <NavLi href="/about">whoami</NavLi>
on:click={changeComponent} <NavLi class="cursor-pointer">
id={i}>{main.name}</a projects<ChevronDownOutline class="w-6 h-6 text-primary-800 dark:text-stone-200 inline" />
> </NavLi>
</li> <Dropdown class="w-44 z-20">
{:else} <DropdownItem href="/svelte">svelte</DropdownItem>
<li class="nav-item font-jose inline-block hover:text-slate-400"> <DropdownItem href="/nextjs">nextjs</DropdownItem>
<button <DropdownItem href="/homelab">homelab</DropdownItem>
class={selected == nav[i] ? 'nav-link text-2xl p-3' : 'nav link text-2xl p-3'} </Dropdown>
on:click={changeComponent} <NavLi href="/contact">contact</NavLi>
id={i}>{main.name}</button <NavLi>
> <DarkMode btnClass="p-0" />
</li> </NavLi>
{/if} </NavUl>
{/if} </Navbar>
{/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>
<div class="mt-6 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center"> <div class="mt-6 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
<slot /> <slot />
</div> </div>
<footer class="mt-12"> <footer class="mt-12 text-center">
<p class="text-sm text-gray-400">built by christian rannes 2024</p> <p class="text-sm text-stone-400">built by christian rannes 2024</p>
</footer> </footer>

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

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

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

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