diff --git a/public/img/ArrowMyStory.svg b/public/img/ArrowMyStory.svg new file mode 100644 index 0000000..258eb26 --- /dev/null +++ b/public/img/ArrowMyStory.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/L-To-R.svg b/public/img/L-To-R.svg new file mode 100644 index 0000000..df6ef74 --- /dev/null +++ b/public/img/L-To-R.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/R-To-L.svg b/public/img/R-To-L.svg new file mode 100644 index 0000000..bf2798b --- /dev/null +++ b/public/img/R-To-L.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/ctrl-alt-grow.png b/public/img/ctrl-alt-grow.png new file mode 100644 index 0000000..6c69926 Binary files /dev/null and b/public/img/ctrl-alt-grow.png differ diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 0967955..28c4934 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -19,14 +19,14 @@ export const Navigation = () => { Home - + Projekte Produkte - + Über Mich @@ -45,7 +45,7 @@ export const Navigation = () => { Home - + Projekte @@ -56,7 +56,7 @@ export const Navigation = () => { Über Mich - Skills + Skills diff --git a/src/components/StoryItems.tsx b/src/components/StoryItems.tsx new file mode 100644 index 0000000..61bc594 --- /dev/null +++ b/src/components/StoryItems.tsx @@ -0,0 +1,22 @@ +import { For } from "solid-js"; +import { StoryItem, StoryItemType } from "./partials/StoryItem"; + + + +type StoryItemsProps = { + storyItems: StoryItemType[] +} + +export const StoryItems = (props: StoryItemsProps) => { + + return ( +
+ {(item, index) => + + } +
+ ) + + + +} \ No newline at end of file diff --git a/src/components/partials/StoryItem.tsx b/src/components/partials/StoryItem.tsx index 660168e..694e5ac 100644 --- a/src/components/partials/StoryItem.tsx +++ b/src/components/partials/StoryItem.tsx @@ -1,14 +1,32 @@ +export type StoryItemType = { + title: string; + description: string; + image: string; + epochTime?: string, + epochTitle?: string, + epochDescription?: string +}; + + type StoryItemProps = { - index: number, - epochTime: string, - epochTitle: string, - epochDescription: string + mirrored?: boolean, + item: StoryItemType } -const StoryItem = (props: StoryItemProps) => { +export const StoryItem = (props: StoryItemProps) => { return ( -
+
+
+
+

{props.item.title}

+

{props.item.description}

+
+ {props.item.epochTime &&

{props.item.epochTime}

} +
+
+ {props.item.image && } +
) } \ No newline at end of file diff --git a/src/pages/mystory.astro b/src/pages/mystory.astro index e0d2a48..279cb76 100644 --- a/src/pages/mystory.astro +++ b/src/pages/mystory.astro @@ -1,23 +1,36 @@ --- import { Navigation } from "../components/Navigation"; +import { StoryItems } from "../components/StoryItems"; +import { StoryItemType } from "../components/partials/StoryItem"; import Footer from "../views/Footer.astro"; -type StoryItem = { - title: string, - description: string, - image: string, -} - - -const StoryItems: StoryItem[] = [ - {title: "Pre-Work", description:"", image:""} -] - +const storyItems: StoryItemType[] = [ + { + title: "Ctrl-Alt-Grow", + description: + "As a curious kid, I dove headfirst into the world of computers, playing around with code, gaming, and tech wonders, solidifying my enduring passion for all things digital.", + image: "/img/ctrl-alt-grow.png" + }, + { + title: "First Code", + description: + "At the age of 13, I penned my first lines of code. Over the following years, I transitioned from crafting Minecraft plugins with Java to entering the world of web development.", + image: "", + epochTime: "2017 - 2019" + }, + { + title: "Apprenticeship", + description: + "During my three-year apprenticeship, I delved into web and backend application development, honing my skills and building a strong foundation in the field.", + image: "", + epochTime: "2020 - 2023" + } +]; --- - -
-

Meine Geschichte

+
+

Meine Geschichte

+
-