feat: add intro component
- add intro section to data.json - add intro types - add css variables - update header position desktop
This commit is contained in:
adrian committed
1 parent
e299b91039
commit
bc680f6870
7 files changed
+144
-179
No files matched your search
@@ -34,8 +34,10 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
|
||||
margin-top: 5rem;
|
||||
padding: 2rem;
|
||||
|
||||
background-color: var(--color-footer-background);
|
||||
}
|
||||
|
||||
|
||||
@@ -34,17 +34,20 @@
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
|
||||
background-color: var(--color-dark-blue);
|
||||
background-color: var(--color-header-background);
|
||||
backdrop-filter: blur(1rem);
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: unset;
|
||||
|
||||
width: auto;
|
||||
padding: 1rem;
|
||||
|
||||
border: unset;
|
||||
border-bottom: 1px solid var(--color-header-border);
|
||||
border-radius: unset;
|
||||
|
||||
font-size: 1.125rem;
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
<script lang="ts">
|
||||
import type { Intro } from '$lib/types/data';
|
||||
import profileImage from '$lib/assets/images/profile_picture.png';
|
||||
|
||||
let { name, title, text }: Intro = $props();
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<div>
|
||||
<div class="image-wrapper">
|
||||
<img src={profileImage} alt="">
|
||||
</div>
|
||||
<h1>{name}</h1>
|
||||
<h2>{title}</h2>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
section {
|
||||
padding: 5rem 1rem;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(
|
||||
var(--color-body-background) 0%,
|
||||
var(--color-intro-background-secondary) 100%
|
||||
);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
|
||||
margin-inline: auto;
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: flex;
|
||||
width: 12rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: 0.25rem;
|
||||
border-radius: 100%;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--color-intro-image-background-primary) 0%,
|
||||
var(--color-intro-image-background-secondary) 100%
|
||||
);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: unset;
|
||||
color: transparent;
|
||||
font-size: 2.25rem;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--color-intro-subtitle-text-primary) 0%,
|
||||
var(--color-intro-subtitle-text-secondary) 60%,
|
||||
var(--color-intro-subtitle-text-tertiary) 100%);
|
||||
background-clip: text;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
margin: unset;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-intro-title-text);
|
||||
font-size: 1.25rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: unset;
|
||||
color: var(--color-intro-text);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.625;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -25,5 +25,10 @@
|
||||
"linkedin": "https://www.linkedin.com/in/adrian-fennert-b3148920a/"
|
||||
},
|
||||
"copyright": "© 2026 Adrian Fennert. Alle Rechte vorbehalten."
|
||||
},
|
||||
"intro": {
|
||||
"name": "Adrian Fennert",
|
||||
"title": "Senior Fullstack Engineer",
|
||||
"text": "Erfahrener Full-Stack Developer mit Fokus auf moderne Web-Technologien. Spezialisiert auf skalierbare Anwendungen, Teamführung und Integration komplexer Systeme. Leidenschaft für sauberen Code und benutzerzentrierte Lösungen."
|
||||
}
|
||||
}
|
||||
+15
-6
@@ -1,15 +1,24 @@
|
||||
:root {
|
||||
--color-body-background: oklch(0.21 0.034 264.665);
|
||||
--color-footer-background: oklch(0.13 0.028 261.692);
|
||||
|
||||
--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-text-secondary: oklch(0.551 0.027 264.364);
|
||||
|
||||
--color-accent-primary: oklch(70.7% 0.165 254.624);
|
||||
--color-accent-secondary:oklch(0.585 0.233 277.117);
|
||||
--color-header-border: oklab(0.623 -0.0378409 -0.210628 / 0.3);
|
||||
--color-header-background: oklab(0.21 -0.00316128 -0.0338527 / 0.95);
|
||||
--color-header-hover: oklch(70.7% 0.165 254.624);
|
||||
|
||||
--color-footer-background: oklch(0.13 0.028 261.692);
|
||||
|
||||
--color-intro-background-primary: oklab(0.379 -0.0113992 -0.145554 / 0.2);
|
||||
--color-intro-background-secondary: oklab(0.379 -0.0113992 -0.145554 / 0.2);
|
||||
--color-intro-image-background-primary: oklch(0.623 0.214 259.815);
|
||||
--color-intro-image-background-secondary: oklch(0.511 0.262 276.966);
|
||||
--color-intro-text: oklch(0.967 0.003 264.542);
|
||||
--color-intro-title-text: oklch(0.809 0.105 251.813);
|
||||
--color-intro-subtitle-text-primary: oklch(0.707 0.165 254.624);
|
||||
--color-intro-subtitle-text-secondary: oklch(0.673 0.182 276.935);
|
||||
--color-intro-subtitle-text-tertiary: oklch(0.714 0.203 305.504);
|
||||
|
||||
--z-index-header: 50;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
export type Data = {
|
||||
header: Header;
|
||||
footer: Footer;
|
||||
intro: Intro;
|
||||
};
|
||||
|
||||
export type Header = {
|
||||
@@ -22,3 +23,9 @@ export type FooterLink = {
|
||||
};
|
||||
|
||||
export type FooterLinkKey = 'git' | 'linkedin';
|
||||
|
||||
export type Intro = {
|
||||
name: string;
|
||||
title: string;
|
||||
text: string;
|
||||
}
|
||||
+9
-172
@@ -1,172 +1,9 @@
|
||||
<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>
|
||||
<script lang="ts">
|
||||
import content from '$lib/data/data.json';
|
||||
import type { Data } from '$lib/types/data';
|
||||
import Intro from '$lib/components/Intro.svelte';
|
||||
|
||||
let data: Data = content;
|
||||
</script>
|
||||
|
||||
<Intro {...data.intro} />
|
||||
Reference in new issue
Block a user