+
+
Timeline
+
A little about us
+
+ {timeline_items.map((item, index) => (
+ //
+
-
+
+
+ ))}
+
+
+
+ );
+};
+
+export { Timeline }
\ No newline at end of file
diff --git a/frontend/src/components/timeline_card.tsx b/frontend/src/components/timeline_card.tsx
new file mode 100644
index 0000000..dae5834
--- /dev/null
+++ b/frontend/src/components/timeline_card.tsx
@@ -0,0 +1,22 @@
+import * as elements from "typed-html";
+
+import { TimelineItem } from "../structs/timeline_item";
+
+
+
+const TimelineCard = ({ date_start, date_end, title, description, icon_name}: TimelineItem) => {
+ return (
+
+
+
+
+
{ title }
+
+
{ description }
+
+ );
+};
+
+export { TimelineCard }
\ No newline at end of file
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index a26a644..e198b32 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -2,26 +2,112 @@ import { Elysia } from "elysia";
import { html } from "@elysiajs/html";
import { staticPlugin } from "@elysiajs/static";
-// import { autoroutes } from "elysia-autoroutes";
-// import { Store } from "./store";
-// // @ts-ignore
-// import data from "../package.json";
+import { BaseHTML } from "./base";
+import { LandingPage } from "./pages/landing";
-import { HomeLayout } from "./layout";
-import { Landing } from "./landing";
+import { TimelineItem } from "./structs/timeline_item";
+import { FooterLink } from "./structs/footer_link";
+
+const timeline_items: TimelineItem[] = [
+ {
+ date_start: new Date(),
+ date_end: new Date(),
+ title: "First",
+ description: "Description number 1",
+ icon_name: "world",
+ },
+ {
+ date_start: new Date(),
+ date_end: new Date(),
+ title: "Hello",
+ description: "Description number 2",
+ icon_name: "world",
+ },
+ {
+ date_start: new Date(),
+ date_end: new Date(),
+ title: "Hello",
+ description: "Longer description number 3",
+ icon_name: "world",
+ },
+ {
+ date_start: new Date(),
+ date_end: new Date(),
+ title: "Hello",
+ description: "Very looooooooooong description number 4",
+ icon_name: "world",
+ },
+ {
+ date_start: new Date(),
+ date_end: new Date(),
+ title: "Hello",
+ description: "Description number 5",
+ icon_name: "world",
+ },
+ {
+ date_start: new Date(),
+ date_end: new Date(),
+ title: "Hello",
+ description: "Description number 6",
+ icon_name: "world",
+ },
+ {
+ date_start: new Date(),
+ date_end: new Date(),
+ title: "Hello",
+ description: "Description number 7",
+ icon_name: "world",
+ },
+ {
+ date_start: new Date(),
+ date_end: new Date(),
+ title: "Hello",
+ description: "Description number 8",
+ icon_name: "world",
+ },
+];
+
+
+const footer_links: FooterLink[] = [
+ {
+ icon_name: "github",
+ title: "Github",
+ url: "https://github.com",
+ },
+ {
+ icon_name: "twitter",
+ title: "Twitter",
+ url: "https://twitter.com",
+ },
+ {
+ icon_name: "linkedin",
+ title: "LinkedIn",
+ url: "https://linkedin.com",
+ },
+ {
+ icon_name: "instagram",
+ title: "Instagram",
+ url: "https://instagram.com",
+ },
+ {
+ icon_name: "facebook",
+ title: "Facebook",
+ url: "https://facebook.com",
+ },
+];
+
+const content = {
+ 'timeline_items': timeline_items,
+ 'footer_links': footer_links,
+};
export const server = new Elysia()
.use(html())
.use(staticPlugin())
- // .get("/public/htmx.js", () =>
- // Bun.file("node_modules/htmx.org/dist/htmx.min.js"),
- // )
- // .state("store", new Store())
- // .state("version", data.version)
.onError(({ code, error }) => {
console.error(code, error);
})
- .get("/", ({html}) => html(
))
+ .get("/", ({html}) => html(
))
.post("/clicked", ()=>
Hello?
)
.listen(Bun.env["PORT"] ?? 3000);
diff --git a/frontend/src/landing.tsx b/frontend/src/landing.tsx
deleted file mode 100644
index 136c1ad..0000000
--- a/frontend/src/landing.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as elements from "typed-html";
-
-const Landing = ({ children }: elements.Children) => `
-
- ${children}
-`;
-
-export { Landing }
diff --git a/frontend/src/pages/landing.tsx b/frontend/src/pages/landing.tsx
new file mode 100644
index 0000000..e358851
--- /dev/null
+++ b/frontend/src/pages/landing.tsx
@@ -0,0 +1,20 @@
+import * as elements from "typed-html";
+import { Timeline } from "../components/timeline";
+import { Navigation } from "../components/navigation";
+import { Hero } from "../components/hero";
+import { Footer } from "../components/footer";
+
+
+const LandingPage = ({ content }: Dict) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+
+export { LandingPage }
diff --git a/frontend/src/pages/portfolio.tsx b/frontend/src/pages/portfolio.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/structs/footer_link.tsx b/frontend/src/structs/footer_link.tsx
new file mode 100644
index 0000000..eece29c
--- /dev/null
+++ b/frontend/src/structs/footer_link.tsx
@@ -0,0 +1,7 @@
+type FooterLink = {
+ icon_name: string;
+ title: string;
+ url: string;
+}
+
+export { FooterLink }
\ No newline at end of file
diff --git a/frontend/src/structs/timeline_item.tsx b/frontend/src/structs/timeline_item.tsx
new file mode 100644
index 0000000..fe48452
--- /dev/null
+++ b/frontend/src/structs/timeline_item.tsx
@@ -0,0 +1,9 @@
+type TimelineItem = {
+ date_start: Date;
+ date_end: Date;
+ title: string;
+ description: string;
+ icon_name: string;
+}
+
+export { TimelineItem }