adrian/homepage
Private
Public Access
1
0
Fork 0
Code Activity

feat: add header component

Browse Source 
- add font Adwaita Sans
- add font styles
- add app styles
- add data json
This commit is contained in:
Adrian Fennert
2026-01-24 20:00:20 +01:00
parent 43a441d778
commit 498081df05
9 changed files with 328 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/lib/assets/font/AdwaitaSans-Italic.ttf Normal file
View File

Binary file not shown.

BIN
src/lib/assets/font/AdwaitaSans-Regular.ttf Normal file
View File

Binary file not shown.

83
src/lib/components/Header.svelte Normal file
View File

@@ -0,0 +1,83 @@
<script lang="ts">
import type { Header } from '$lib/types/data';
let { links }: Header = $props();
</script>
<header>
<nav>
<ul>
{#each links as { href, label }, i (i)}
<li>
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
<a href={href}>{label}</a>
</li>
{/each}
</ul>
</nav>
</header>
<style>
header {
position: fixed;
inset-inline: 0;
bottom: 5rem;
z-index: var(--z-index-header);
width: fit-content;
padding: 1rem;
margin-inline: auto;
border: 1px solid var(--color-header-border);
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: bold;
background-color: var(--color-dark-blue);
backdrop-filter: blur(1rem);
@media (min-width: 768px) {
top: 0;
bottom: unset;
width: auto;
padding: 1rem;
border-radius: unset;
font-size: 1.125rem;
}
}
ul {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin: unset;
padding: unset;
list-style: none;
@media (min-width: 768px) {
gap: 2rem;
}
}
li {
display: contents;
}
a {
padding: 0.5rem;
color: var(--color-text-primary);
text-decoration: none;
transition: ease-in-out 0.2s;
&:hover {
color: var(--color-accent-primary);
}
}
</style>

22
src/lib/data/data.json Normal file
View File

@@ -0,0 +1,22 @@
{
"header": {
"links": [
{
"label": "Profil",
"href": "#profile"
},
{
"label": "Projekte",
"href": "#projects"
},
{
"label": "Skills",
"href": "#skills"
},
{
"label": "Kontakt",
"href": "#contact"
}
]
}
}

18
src/lib/styles/app.css
View File

@@ -1,12 +1,26 @@
:root {
--color-body-background: oklch(0.21 0.034 264.665);
--color-header-border: oklab(0.623 -0.0378409 -0.210628 / 0.3);
--color-dark-blue: oklab(0.21 -0.00316128 -0.0338527 / 0.95);
--color-text-primary: oklch(0.872 0.01 258.338);
--color-accent-primary: oklch(70.7% 0.165 254.624);
--color-accent-secondary:oklch(0.585 0.233 277.117);
--z-index-header: 50;
}
:root {
font-size: 16px;
color: var(--color-text-primary);
}
* {
box-sizing: border-box;
}
body {
font-family: 'AdwaitaMono', sans-serif;
html, body {
position: relative;
margin: unset;
background-color: var(--color-body-background);
font-family: 'AdwaitaSans', 'AdwaitaMono', sans-serif;
}

24
src/lib/styles/font.css
View File

@@ -1,4 +1,20 @@
/* Regular */
/* Sans Regular */
@font-face {
font-family: 'AdwaitaSans';
src: url('$lib/assets/font/AdwaitaSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Sans Italic */
@font-face {
font-family: 'AdwaitaSans';
src: url('$lib/assets/font/AdwaitaSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
/* Mono Regular */
@font-face {
font-family: 'AdwaitaMono';
src: url('$lib/assets/font/AdwaitaMono-Regular.ttf') format('truetype');
@@ -6,7 +22,7 @@
font-style: normal;
}
/* Italic */
/* Mono Italic */
@font-face {
font-family: 'AdwaitaMono';
src: url('$lib/assets/font/AdwaitaMono-Italic.ttf') format('truetype');
@@ -14,7 +30,7 @@
font-style: italic;
}
/* Bold */
/* Mono Bold */
@font-face {
font-family: 'AdwaitaMono';
src: url('$lib/assets/font/AdwaitaMono-Bold.ttf') format('truetype');
@@ -22,7 +38,7 @@
font-style: normal;
}
/* Bold Italic */
/* Mono Bold Italic */
@font-face {
font-family: 'AdwaitaMono';
src: url('$lib/assets/font/AdwaitaMono-BoldItalic.ttf') format('truetype');

12
src/lib/types/data.ts Normal file
View File

@@ -0,0 +1,12 @@
export type Data = {
header: Header;
}
export type Header = {
links: HeaderLink[];
}
export type HeaderLink = {
label: string;
href: string;
}

5
src/routes/+layout.svelte
View File

@@ -2,12 +2,17 @@
import '$lib/styles/app.css';
import '$lib/styles/font.css';
import favicon from '$lib/assets/favicon.svg';
import Header from '$lib/components/Header.svelte';
import content from '$lib/data/data.json';
import type { Data } from '$lib/types/data';
let { children } = $props();
let data: Data = content;
</script>
<svelte:head>
<link rel="icon" href={favicon} />
</svelte:head>
<Header {...data.header} />
{@render children()}

170
src/routes/+page.svelte
View File

@@ -1,2 +1,172 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem debitis dicta distinctio dolores dolorum ea eum
facilis ipsum itaque labore maxime odio, qui vel vero voluptas? Debitis ea praesentium quibusdam!
</div>
<div>Cumque enim eos facere magnam vero! A autem, delectus dignissimos distinctio enim inventore laudantium natus nihil
non omnis quisquam repudiandae sequi ullam veritatis vitae voluptas voluptates voluptatibus. Doloribus perspiciatis,
velit.
</div>
<div>Ab aliquid consectetur cum ea enim, est fugit, hic iure modi necessitatibus nobis non obcaecati odio officiis quam
quia, quibusdam reprehenderit sunt suscipit tenetur vel vitae voluptas! Eos, impedit, quidem?
</div>
<div>Consequuntur facere fuga neque nulla praesentium vero vitae! A aliquam aperiam, commodi doloremque et harum maiores
suscipit unde. Ad architecto dicta fugiat impedit molestias quae qui quod sint? Consequatur, ipsam?
</div>
<div>Blanditiis consectetur dolore eum mollitia voluptatibus. Eveniet expedita facilis minima nisi quisquam? Id quasi,
soluta! A atque, deserunt dolores eveniet magni molestiae nulla quas quisquam repudiandae similique velit vero
voluptatum.
</div>
<div>Accusamus accusantium ad adipisci alias animi eos et eveniet hic, incidunt inventore iste itaque laboriosam
laudantium molestias necessitatibus nesciunt nisi nobis odio, officia porro possimus, praesentium rem rerum similique
totam.
</div>
<div>Autem culpa cumque fugiat hic natus reiciendis tenetur. Aperiam aspernatur atque debitis, dignissimos doloremque
ducimus fuga illo impedit itaque magnam minima nostrum numquam odio quos repudiandae unde voluptate. Ipsam, pariatur!
</div>
<div>Alias aspernatur, assumenda commodi delectus doloremque excepturi exercitationem fugiat inventore ipsam iste
necessitatibus numquam perferendis tempora veniam voluptatem. Accusamus dolor doloribus ducimus est nam, nobis officia
placeat reiciendis rem totam.
</div>
<div>Ad commodi culpa delectus ea, eius ex ipsam iusto magnam recusandae rem repellat saepe sed voluptatum? At
consequatur dolor, esse incidunt minima nulla officiis veritatis. Cum ipsum iure similique temporibus!
</div>
<div>Accusamus alias animi architecto atque blanditiis consequuntur dolorum, eligendi eum ex facilis hic ipsa iste nemo,
nobis omnis provident qui quia quis rem sunt tempore ullam unde. Id, magnam, quam.
</div>
<div>Accusantium atque consectetur dignissimos dolor doloribus dolorum ea et labore magni mollitia necessitatibus neque
omnis, porro quaerat qui quidem quod quos ratione rerum tempora veniam, vero vitae voluptatem? Animi, fugiat.
</div>
<div>Consectetur, debitis dolores doloribus ea minima pariatur placeat quidem tenetur veniam. Ab, beatae cumque deserunt
ducimus enim eum ex illum incidunt labore modi, natus nemo nihil omnis quasi quia voluptates!
</div>
<div>Alias asperiores autem blanditiis dolorem ea error illum iure, laborum necessitatibus quia quibusdam quidem,
reiciendis vel. Beatae corporis est laudantium libero quidem sed vero! Adipisci in iusto officiis ratione
reprehenderit.
</div>
<div>A animi dolorum id perspiciatis sequi tenetur voluptas? Accusantium beatae commodi dicta distinctio doloribus eos
odio provident quasi, quia rem reprehenderit sit, voluptates. Aliquid asperiores cumque inventore nulla quibusdam?
Natus.
</div>
<div>A animi architecto aut autem eius eum eveniet facere ipsam nulla odio quam quidem quis quos ratione, sit soluta
tempora tempore velit. Cum, dolorem hic illum quam rem tenetur vero!
</div>
<div>Accusantium ad adipisci aspernatur ea est eum ipsa nam porro. Accusantium architecto autem consequuntur cupiditate
deserunt doloribus dolorum error ex explicabo itaque iusto praesentium qui, repellendus sint sunt, velit veniam!
</div>
<div>Adipisci consequatur cum dicta et ex harum illum laudantium magni maxime nisi perferendis porro quasi quod,
recusandae reprehenderit rerum sint tempore vero vitae voluptas? Ad delectus libero nesciunt quod totam.
</div>
<div>Culpa dignissimos facere quam? Aliquid, atque deserunt dignissimos dolorem eius eos eveniet, fugiat iusto magnam
magni maxime nulla obcaecati sunt tenetur veniam voluptas voluptatibus. Adipisci consectetur corporis ducimus fugiat
incidunt?
</div>
<div>Dolorem explicabo minima odio quis recusandae. Accusantium amet earum fugit illo nostrum quasi sit voluptatibus!
Accusantium aliquam aspernatur blanditiis commodi debitis, doloremque inventore laboriosam molestias nesciunt, nulla
ratione, recusandae temporibus?
</div>
<div>Aperiam dicta dolor error ipsam iusto nostrum quas sint. Eius hic itaque sequi. Accusantium blanditiis, error
impedit, itaque laboriosam minima molestiae nisi possimus repellendus sequi sit soluta veniam? Quas, repudiandae!
</div>
<div>Ab aut beatae blanditiis, deleniti, dolor ducimus esse illo praesentium repellat repellendus, reprehenderit sed
similique velit. Aliquid aspernatur eligendi ex ipsam necessitatibus numquam, odit omnis, optio quisquam quod suscipit
unde.
</div>
<div>Animi consectetur consequatur delectus, enim eveniet illum recusandae unde. Accusantium amet autem, deserunt dolore
esse illo impedit magnam magni nobis quae repellat sapiente ut vitae! Esse modi natus optio quas?
</div>
<div>Aliquam aliquid est excepturi fuga illum inventore nostrum provident, similique soluta! Alias aperiam, consequuntur
corporis est eum id, illum in magnam, molestiae nisi quisquam sapiente soluta voluptate. Maxime quaerat, soluta.
</div>
<div>Accusantium aliquam aliquid autem consequatur culpa eaque et, facere fugiat iste minima necessitatibus quia
quisquam quo rem vitae! Aspernatur cum cumque est fuga, illum ipsa ipsam nostrum officia perspiciatis ullam!
</div>
<div>A impedit in iste, officiis pariatur porro quasi saepe. A adipisci atque aut dicta ducimus fuga nam neque nulla
pariatur perspiciatis sapiente, tempora velit vitae! Architecto doloribus et nihil voluptatibus!
</div>
<div>Eligendi eos magnam temporibus! Excepturi facere itaque vel! Ad amet autem beatae doloribus, harum ipsa ipsum
labore nisi nobis nostrum placeat, saepe sapiente sed sunt vel, veritatis voluptates! Minus, vel.
</div>
<div>A adipisci animi ducimus esse in minima mollitia, nihil quaerat ratione voluptatum! Accusantium assumenda aut
beatae eveniet fugiat incidunt nam necessitatibus nesciunt placeat, quis rerum, sed tenetur? Aspernatur, nihil,
veniam.
</div>
<div>Aliquam asperiores consequatur corporis debitis deleniti facilis impedit ipsum labore nemo odio porro, possimus
quam quia quos, similique sint voluptates! Ab accusamus amet consequatur eius illo impedit quidem veritatis
voluptatem.
</div>
<div>Aperiam consequatur dignissimos eius illum itaque obcaecati placeat recusandae sed. Aperiam aspernatur at
blanditiis deserunt ducimus eius excepturi fuga id impedit, modi, nam praesentium quod quos repellendus rerum sint
voluptatibus.
</div>
<div>Animi architecto aut autem corporis cum debitis dignissimos expedita facere ipsa magni molestiae molestias officia
optio, possimus quaerat repellendus reprehenderit unde vero! Cumque et eum fugiat maiores totam voluptate voluptatum!
</div>
<div>Accusantium alias amet autem, consequuntur, corporis cum doloremque ducimus eveniet excepturi hic magnam magni
maxime modi quam quia quibusdam quos recusandae repellat reprehenderit rerum sed similique tenetur velit? Omnis,
reprehenderit!
</div>
<div>Alias deserunt illum incidunt laborum maiores molestiae, quae quisquam sapiente veritatis voluptatem? Ab, aut
distinctio dolores enim hic nesciunt odio repudiandae temporibus velit voluptatem. Corporis doloremque expedita nisi
nulla qui.
</div>
<div>Magnam quae quo sint? Et facilis itaque magni nobis voluptatum? Atque delectus dolore dolorem dolores, dolorum
eligendi enim esse et harum in ipsam iste minus, nostrum quis recusandae unde ut.
</div>
<div>Accusantium distinctio eaque error id iure rem tenetur. Accusamus aperiam cumque hic id, iste laborum libero nihil
nobis praesentium quas quis reiciendis similique ut. Accusantium cumque cupiditate est fugit iste!
</div>
<div>Ab cumque dicta dolore exercitationem laboriosam nobis nostrum perferendis qui saepe vitae! Accusamus accusantium
aperiam, at autem culpa cumque ea eaque fuga ipsam rem, reprehenderit soluta veniam voluptate? Consequatur, cum.
</div>
<div>Libero, officiis, totam. A, asperiores atque dicta error eveniet ipsam labore laboriosam libero omnis. Aliquid ea
quidem tenetur totam voluptas? Ea exercitationem nulla perferendis. Debitis explicabo fuga laboriosam recusandae
tenetur?
</div>
<div>Atque error illo itaque necessitatibus numquam, perspiciatis quaerat qui quos tempore voluptates! Doloremque ea
quis tenetur unde. Accusantium dignissimos est ex exercitationem facere, fugit illo laborum quasi qui sapiente
voluptates!
</div>
<div>Aperiam assumenda culpa fugit harum, incidunt non, nostrum quidem ratione, sequi tempore voluptas voluptate
voluptates. Est expedita facilis harum illo magnam quam sed tenetur totam. Cum nihil quia quo vel!
</div>
<div>Corporis cumque enim eveniet, itaque perferendis repellat sit. Culpa fugiat officia saepe sit velit. Architecto
atque error fugit. Beatae consectetur cumque est ex laudantium, molestiae nobis officia rerum vero voluptas!
</div>
<div>Adipisci, architecto at commodi culpa dolor dolorem doloribus ducimus earum eligendi ex facilis illo magnam minima
nesciunt, officia perferendis praesentium quibusdam quisquam rerum, saepe sapiente sequi suscipit totam unde
voluptatum.
</div>
<div>Aperiam consectetur corporis cumque dolore error est eum inventore laboriosam magni molestias nisi, officiis quam
quasi, repellat repudiandae tempore totam? Accusamus cum eligendi, esse obcaecati officia similique? Sapiente, tempore
voluptate.
</div>
<div>Alias assumenda consectetur eligendi ipsa natus non odit optio rerum, tempore voluptates! Aut debitis magni maxime
minima qui. Cupiditate distinctio, doloribus fugiat laudantium maiores neque officiis rerum sed sit tempore?
</div>
<div>Accusantium adipisci alias amet animi atque, corporis cumque eaque esse et eum facilis fugit, minus nemo nihil
nobis officiis quos veniam veritatis, vero voluptatum. Consequatur cum dignissimos exercitationem nulla sunt!
</div>
<div>Ad aperiam cum cupiditate delectus dignissimos doloribus, ex facere fugit hic illum ipsa ipsum, iusto labore
laboriosam, laborum omnis quidem sapiente tempore totam vel. Consequuntur dignissimos dolores neque quisquam
repellendus.
</div>
<div>A cum, exercitationem id neque nobis omnis. Minima nihil pariatur sit? Adipisci aliquam aliquid assumenda delectus
deleniti est excepturi labore minima necessitatibus placeat quaerat quasi, quod recusandae repellendus saepe voluptas.
</div>
<div>Ad animi dolorem ea, iusto magnam quas reiciendis voluptatum. Ad alias blanditiis corporis cumque deleniti id
laborum molestias, nobis, perspiciatis porro, possimus qui rem reprehenderit repudiandae rerum! Aliquam, deserunt,
fugiat.
</div>
<div>Autem consectetur debitis deserunt ducimus illum mollitia reprehenderit soluta tempora tempore voluptatibus? Culpa
cumque dolor est illo iste itaque magni, minima omnis, pariatur quam qui sit ullam velit vitae voluptatibus!
</div>
<div>Accusamus consectetur cumque ea fugit id itaque iure, magnam nesciunt pariatur quisquam, quos ut. Aliquid deleniti
expedita, ipsam magnam maiores nulla officiis, quia, quidem rem repellat sed tempora temporibus voluptatem!
</div>
<div>Aspernatur dolorum error fuga inventore nam quo reprehenderit veniam. Accusamus aliquid, asperiores deleniti dolor
dolore dolores ea facere incidunt inventore, iure molestiae nihil odio odit officiis optio, qui vitae voluptate?
</div>
<div>Deleniti eveniet laboriosam molestiae nisi odio omnis pariatur, perspiciatis tempora? Architecto culpa cumque
delectus distinctio doloremque dolorum hic incidunt ipsa ipsum labore laborum, odio quam sint sit tempore veniam vero?
</div>