feat: add a base layout for base HTML
This commit is contained in:
21
src/layouts/BaseLayout.astro
Normal file
21
src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body
|
||||
class="flex min-h-screen flex-col justify-center p-6 sm:px-14 md:px-24 lg:px-32"
|
||||
>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,91 +8,78 @@ import KeyoxideLogo from "../images/Keyoxide.svg";
|
||||
import LinkedInLogo from "../images/LinkedIn.svg";
|
||||
import MatrixLogo from "../images/Matrix-logo.svg";
|
||||
import portrait from "../images/portrait.jpg";
|
||||
import "../styles/global.css";
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>kmoschcau.de</title>
|
||||
</head>
|
||||
<body
|
||||
class="flex min-h-screen flex-col justify-center p-6 sm:px-14 md:px-24 lg:px-32"
|
||||
>
|
||||
<main>
|
||||
<article class="flex flex-col items-center gap-10">
|
||||
<Image
|
||||
alt="Portrait von Kai Moschcau"
|
||||
class="rounded-full"
|
||||
priority
|
||||
src={portrait}
|
||||
width={200}
|
||||
height={200}
|
||||
/>
|
||||
<h1>Kai Moschcau</h1>
|
||||
<section class="text-soft">
|
||||
<p>Fachinformatiker für Anwendungsentwicklung</p>
|
||||
</section>
|
||||
<nav>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li>
|
||||
<ExternalLink
|
||||
cssClass="link-matrix"
|
||||
href="https://matrix.to/#/@kmoschcau:matrix.org"
|
||||
title="Mein Matrix-Konto"
|
||||
>
|
||||
<InlineSvg SvgComponent={MatrixLogo} slot="logo" />
|
||||
<span>@kmoschcau:matrix.org</span>
|
||||
</ExternalLink>
|
||||
</li>
|
||||
<li>
|
||||
<ExternalLink
|
||||
cssClass="link-github"
|
||||
href="https://github.com/kmoschcau/"
|
||||
title="Mein GitHub-Konto"
|
||||
>
|
||||
<InlineSvg SvgComponent={GitHubLogo} slot="logo" />
|
||||
<span>kmoschcau</span>
|
||||
</ExternalLink>
|
||||
</li>
|
||||
<li>
|
||||
<ExternalLink
|
||||
cssClass="link-gitlab"
|
||||
href="https://gitlab.com/kmoschcau"
|
||||
title="Mein GitLab-Konto"
|
||||
>
|
||||
<InlineSvg SvgComponent={GitLabLogo} slot="logo" />
|
||||
<span>kmoschcau</span>
|
||||
</ExternalLink>
|
||||
</li>
|
||||
<li>
|
||||
<ExternalLink
|
||||
cssClass="link-linked-in"
|
||||
href="https://www.linkedin.com/in/kmoschcau/"
|
||||
title="Mein LinkedIn-Konto"
|
||||
>
|
||||
<InlineSvg SvgComponent={LinkedInLogo} slot="logo" />
|
||||
<span>kmoschcau</span>
|
||||
</ExternalLink>
|
||||
</li>
|
||||
<li>
|
||||
<ExternalLink
|
||||
cssClass="link-keyoxide"
|
||||
href="https://keyoxide.org/8CE00E9495B5030DA9217208DF16F424177090BB"
|
||||
title="Mein Keyoxide-Eintrag"
|
||||
>
|
||||
<InlineSvg SvgComponent={KeyoxideLogo} slot="logo" />
|
||||
<span>Keyoxide</span>
|
||||
</ExternalLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<BaseLayout>
|
||||
<main>
|
||||
<article class="flex flex-col items-center gap-10">
|
||||
<Image
|
||||
alt="Portrait von Kai Moschcau"
|
||||
class="rounded-full"
|
||||
priority
|
||||
src={portrait}
|
||||
width={200}
|
||||
height={200}
|
||||
/>
|
||||
<h1>Kai Moschcau</h1>
|
||||
<section class="text-soft">
|
||||
<p>Fachinformatiker für Anwendungsentwicklung</p>
|
||||
</section>
|
||||
<nav>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li>
|
||||
<ExternalLink
|
||||
cssClass="link-matrix"
|
||||
href="https://matrix.to/#/@kmoschcau:matrix.org"
|
||||
title="Mein Matrix-Konto"
|
||||
>
|
||||
<InlineSvg SvgComponent={MatrixLogo} slot="logo" />
|
||||
<span>@kmoschcau:matrix.org</span>
|
||||
</ExternalLink>
|
||||
</li>
|
||||
<li>
|
||||
<ExternalLink
|
||||
cssClass="link-github"
|
||||
href="https://github.com/kmoschcau/"
|
||||
title="Mein GitHub-Konto"
|
||||
>
|
||||
<InlineSvg SvgComponent={GitHubLogo} slot="logo" />
|
||||
<span>kmoschcau</span>
|
||||
</ExternalLink>
|
||||
</li>
|
||||
<li>
|
||||
<ExternalLink
|
||||
cssClass="link-gitlab"
|
||||
href="https://gitlab.com/kmoschcau"
|
||||
title="Mein GitLab-Konto"
|
||||
>
|
||||
<InlineSvg SvgComponent={GitLabLogo} slot="logo" />
|
||||
<span>kmoschcau</span>
|
||||
</ExternalLink>
|
||||
</li>
|
||||
<li>
|
||||
<ExternalLink
|
||||
cssClass="link-linked-in"
|
||||
href="https://www.linkedin.com/in/kmoschcau/"
|
||||
title="Mein LinkedIn-Konto"
|
||||
>
|
||||
<InlineSvg SvgComponent={LinkedInLogo} slot="logo" />
|
||||
<span>kmoschcau</span>
|
||||
</ExternalLink>
|
||||
</li>
|
||||
<li>
|
||||
<ExternalLink
|
||||
cssClass="link-keyoxide"
|
||||
href="https://keyoxide.org/8CE00E9495B5030DA9217208DF16F424177090BB"
|
||||
title="Mein Keyoxide-Eintrag"
|
||||
>
|
||||
<InlineSvg SvgComponent={KeyoxideLogo} slot="logo" />
|
||||
<span>Keyoxide</span>
|
||||
</ExternalLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</article>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
||||
7
src/pages/skills.astro
Normal file
7
src/pages/skills.astro
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<p>Skills</p>
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user