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

- added josefine sans

Browse Source 
- added some placeholder pages and routes-
    - added logic to render nav-items without submenus as <a>
This commit is contained in:
ChrQR 2024-04-06 11:22:20 +02:00
parent b975564cc9
commit 8088da8886
6 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.html
View File

@ -3,6 +3,9 @@
<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.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">
<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>

28
src/routes/+layout.svelte
View File

@ -1,6 +1,9 @@
<script> <script>
import { fade } from "svelte/transition";
import "../app.css"; import "../app.css";
// Navigation links are generated based on this object
const nav = [ const nav = [
{ {
name: "index", name: "index",
@ -20,11 +23,11 @@
}, },
{ {
name: "login", name: "login",
subPages: [] subPages: [],
} }
]; ];
let selected = nav[0]; // keep track of the selected 'page' object (default to the about component since we must have local db connection established first) let selected = nav[0]; // keep track of the selected 'page' object.
let intSelected = 0; // selected page index 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) // change the selected component (the event.originalTarget.id is not accessible in Chrome so switched to event.srcElement.id)
@ -34,19 +37,26 @@
} }
</script> </script>
<nav> <nav class="nav-container h-32 w-full">
<div class="justify-items-center align-middle"> <ul class="text-center">
<ul>
{#each nav as main,i} {#each nav as main,i}
{#if i != 0} {#if i != 0}
<li class="nav-item inline-block"><button class={selected==nav[i] ? "nav-link font-bold p-2 ml-1" : "p-2 ml-1 nav-link"} on:click={changeComponent} id={i} >{main.name}</button></li> {#if !nav[i].subPages[0]}
<li class="nav-item font-jose inline-block"><a href={main.name} class={selected==nav[i] ? "nav-link stroke-slate-700 text-2xl p-3" : "nav link text-2xl p-3"} on:click={changeComponent} id={i} >{main.name}</a></li>
{:else}
<li class="nav-item font-jose inline-block"><button class={selected==nav[i] ? "nav-link stroke-slate-700 text-2xl p-3" : "nav link text-2xl p-3"} on:click={changeComponent} id={i} >{main.name}</button></li>
{/if}
{/if} {/if}
{/each} {/each}
<hr /> </ul>
<hr class="nav-divider max-w-xl h-0.5 border-0 mx-auto my-1 bg-black rounded md:my-1"/>
{#key selected}
<ul in:fade={{ delay: 250 }} out:fade={{ duration: 250 }} class="text-center h-4 my-1">
{#each selected.subPages as subPage} {#each selected.subPages as subPage}
<li class="sub-nav-item inline-block"><a class="sub-nav-link"href={subPage}>{subPage}</a></li> <li class="sub-nav-item inline-block font-jose"><a class="sub-nav-link text-xl p-2"href={subPage}>{subPage}</a></li>
{/each} {/each}
</ul> </ul>
</div> {/key}
</nav> </nav>
<slot /> <slot />

7
src/routes/+page.svelte
View File

@ -1,2 +1,5 @@
<h1>Welcome to SvelteKit</h1> <div class="main-container w-2/4 mx-auto text-center">
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> <h1 class="text-xl">Welcome to my personal webpage</h1>
<p>My name is Christian and I live in Copenhagen. In my professional life, I recruit in product and engineering.
</p>
</div>

1
src/routes/about/+page.svelte Normal file
View File

@ -0,0 +1 @@
<h1>This is the about page</h1>

1
src/routes/login/+page.svelte Normal file
View File

@ -0,0 +1 @@
<h1>This is the login page</h1>

6
tailwind.config.js
View File

@ -2,7 +2,11 @@
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
theme: { theme: {
extend: {}, extend: {
fontFamily: {
"jose": ["Josefin Sans", "sans-serif"]
}
},
}, },
plugins: [], plugins: [],
} }