diff --git a/src/components/atoms/Button.astro b/src/components/atoms/Button.astro new file mode 100644 index 0000000..5dfadea --- /dev/null +++ b/src/components/atoms/Button.astro @@ -0,0 +1,55 @@ +--- +import { clx } from '../../utils/classes'; +type Props = { + className?: string; + type?: 'primary' | 'ghost'; +} + +const { className, type, ...props } = Astro.props; +const buttonType = type ?? 'primary' +--- + + + + \ No newline at end of file diff --git a/src/components/atoms/Card.astro b/src/components/atoms/Card.astro new file mode 100644 index 0000000..f69f655 --- /dev/null +++ b/src/components/atoms/Card.astro @@ -0,0 +1,23 @@ +--- +interface Props { + to: string; + class?: string; +} + +const { to, class: className, ...rest } = Astro.props; +--- + + + + + + \ No newline at end of file diff --git a/src/components/atoms/HorizontalSlider.astro b/src/components/atoms/HorizontalSlider.astro new file mode 100644 index 0000000..7ec251e --- /dev/null +++ b/src/components/atoms/HorizontalSlider.astro @@ -0,0 +1,19 @@ +
+
+ +
+
+ + \ No newline at end of file diff --git a/src/components/atoms/Link.astro b/src/components/atoms/Link.astro index fb430d3..1312ff4 100644 --- a/src/components/atoms/Link.astro +++ b/src/components/atoms/Link.astro @@ -15,58 +15,34 @@ const currentPath = new URL(Astro.url).pathname.split('/')[1]; a { text-decoration: none; color: white; - font-size: larger; + font-size: large; position: relative; - &::before { - content: "{"; - transform: translateX(-2rem); - left: 0; - position: absolute; - transition-property: transform, opacity; - transition-duration: 150ms; - transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); - } - &::after { - content: "}"; - transform: translateX(2rem); - right: 0; - position: absolute; + font-family: monospace; + content: ".clickable"; transition-property: transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); } &:not(.current) { - &::after, - &::before { + &::after { opacity: 0; } &:hover, &:focus-within { - &::before, &::after { opacity: 1; } - &::before { transform: translateX(-1rem); } - &::after { transform: translateX(1rem); } } } &.current { - &::before { - transition: transform 100ms cubic-bezier(0.785, 0.135, 0.15, 0.86); - transform: translateX(-2rem); - } - - &:hover::before, - &:focus-visible::before { - transform: translateX(-1rem); - } &::after { + content: '.current'; transform: translateX(2rem); transition: transform 100ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } diff --git a/src/components/nav.astro b/src/components/nav.astro new file mode 100644 index 0000000..756b112 --- /dev/null +++ b/src/components/nav.astro @@ -0,0 +1,77 @@ +--- +import { Icon } from 'astro-icon/components'; +import Button from './atoms/Button.astro'; +import Link from './atoms/Link.astro'; +--- + +
+ +
+ + + + + \ No newline at end of file diff --git a/src/icons/ham.svg b/src/icons/ham.svg new file mode 100644 index 0000000..3334697 --- /dev/null +++ b/src/icons/ham.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 9c5df40..fcc573a 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,6 @@ --- -import Link from '../components/atoms/Link.astro'; -import { getLangFromUrl, useTranslations } from '../i18n/utils'; +import Navigation from '../components/nav.astro' +import { getLangFromUrl } from '../i18n/utils'; import '../styles/global.css' interface Props { @@ -9,7 +9,7 @@ interface Props { const { title } = Astro.props; const lang = getLangFromUrl(Astro.url); -const t = useTranslations(lang); +// const t = useTranslations(lang); --- @@ -24,10 +24,7 @@ const t = useTranslations(lang);
- +
@@ -35,23 +32,12 @@ const t = useTranslations(lang); diff --git a/src/pages/index.astro b/src/pages/index.astro index 02f7a0f..b1e9dd7 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,7 +1,6 @@ --- import Layout from '../layouts/Layout.astro'; import { useTranslations } from '../i18n/utils'; -import '../styles/homepage-markdown.scss'; import { Icon } from 'astro-icon/components'; const t = useTranslations(); diff --git a/src/pages/knowledge-base/index.astro b/src/pages/knowledge-base/index.astro new file mode 100644 index 0000000..ed19236 --- /dev/null +++ b/src/pages/knowledge-base/index.astro @@ -0,0 +1,68 @@ +--- +import { Icon } from 'astro-icon/components' +import Card from '../../components/atoms/Card.astro' +import HorizontalSlider from '../../components/atoms/HorizontalSlider.astro' +import { getCollection } from 'astro:content' +import Layout from '../../layouts/Layout.astro' + +const dhbwModules = await getCollection('dhbw', (module) => module.data.show); +--- + + +
+

Startseite der Knowledge-Base

+

+ Hier findet Ihr verschiedene Einträge / Beiträge / innere Monologe jedweder Art von Wissen, die ich als Entwickler sammeln und teilen kann oder will. Die Inhalte sollten (im besten Fall) mit der Zeit mehr werden, eine Garantie "regelmäßig" etwas zu verfassen kann ich aber nicht geben. +

+

+ Zusätzlich zu den Inhalten werden hier auch Informationen aufbereitet, die ich als Dozent an der DHBW Karlsruhe in den Module Web Engineering I sowie Web Engineering II präsentiere. +

+
+ +
+

DHBW Module

+

+ Hier findet Ihr alles rund um die Module die ich als Dozent für die DHBW verfasst habe. +

+ + {dhbwModules.map((module) => ( + + {module.data.title} + + + ))} + +
+ + + diff --git a/src/styles/global.css b/src/styles/global.css index e69de29..3ff9fed 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -0,0 +1,11 @@ +:root { + --background-color: #051923; + --foreground-color: #eef4ed; + + --navigation-background-color: #003554; + --button-background-color: #0582ca; + --button-background-color-translucent: #0582ca33; + --button-hover-color: #006494; + --button-active-color: #051923; + --button-fg-color: white; +} \ No newline at end of file diff --git a/src/utils/classes.ts b/src/utils/classes.ts new file mode 100644 index 0000000..20ae602 --- /dev/null +++ b/src/utils/classes.ts @@ -0,0 +1,7 @@ +export const clx = (c: Record, additional?: string) => { + const converted = Object.entries(c).map(([key, value]) => value ? key : null).filter((key) => !!key).join(' '); + if (additional) { + return `${converted} ${additional}`; + } + return converted; +} \ No newline at end of file