diff --git a/src/lib/assets/font/AdwaitaSans-Italic.ttf b/src/lib/assets/font/AdwaitaSans-Italic.ttf new file mode 100644 index 0000000..b0249e7 Binary files /dev/null and b/src/lib/assets/font/AdwaitaSans-Italic.ttf differ diff --git a/src/lib/assets/font/AdwaitaSans-Regular.ttf b/src/lib/assets/font/AdwaitaSans-Regular.ttf new file mode 100644 index 0000000..6fcafd9 Binary files /dev/null and b/src/lib/assets/font/AdwaitaSans-Regular.ttf differ diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte new file mode 100644 index 0000000..6719d56 --- /dev/null +++ b/src/lib/components/Header.svelte @@ -0,0 +1,83 @@ + + +
+ +
+ + \ No newline at end of file diff --git a/src/lib/data/data.json b/src/lib/data/data.json new file mode 100644 index 0000000..848ebbd --- /dev/null +++ b/src/lib/data/data.json @@ -0,0 +1,22 @@ +{ + "header": { + "links": [ + { + "label": "Profil", + "href": "#profile" + }, + { + "label": "Projekte", + "href": "#projects" + }, + { + "label": "Skills", + "href": "#skills" + }, + { + "label": "Kontakt", + "href": "#contact" + } + ] + } +} diff --git a/src/lib/styles/app.css b/src/lib/styles/app.css index 2e4851a..1371e0c 100644 --- a/src/lib/styles/app.css +++ b/src/lib/styles/app.css @@ -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; } \ No newline at end of file diff --git a/src/lib/styles/font.css b/src/lib/styles/font.css index bde92c8..c7ec8db 100644 --- a/src/lib/styles/font.css +++ b/src/lib/styles/font.css @@ -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'); diff --git a/src/lib/types/data.ts b/src/lib/types/data.ts new file mode 100644 index 0000000..fe1b7a3 --- /dev/null +++ b/src/lib/types/data.ts @@ -0,0 +1,12 @@ +export type Data = { + header: Header; +} + +export type Header = { + links: HeaderLink[]; +} + +export type HeaderLink = { + label: string; + href: string; +} \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6c0cb81..0679e9d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -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; +
{@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index cc88df0..7a3320e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,2 +1,172 @@

Welcome to SvelteKit

Visit svelte.dev/docs/kit to read the documentation

+
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! +
+
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. +
+
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? +
+
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? +
+
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. +
+
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. +
+
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! +
+
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. +
+
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! +
+
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. +
+
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. +
+
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! +
+
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. +
+
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. +
+
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! +
+
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! +
+
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. +
+
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? +
+
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? +
+
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! +
+
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. +
+
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? +
+
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. +
+
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! +
+
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! +
+
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. +
+
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. +
+
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. +
+
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. +
+
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! +
+
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! +
+
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. +
+
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. +
+
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! +
+
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. +
+
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? +
+
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! +
+
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! +
+
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! +
+
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. +
+
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. +
+
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? +
+
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! +
+
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. +
+
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. +
+
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. +
+
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! +
+
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! +
+
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? +
+
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? +