diff --git a/components/Blog/Card.tsx b/components/Blog/Card.tsx
new file mode 100644
index 0000000..05cd573
--- /dev/null
+++ b/components/Blog/Card.tsx
@@ -0,0 +1,11 @@
+import type { NextPage } from "next";
+import styles from "../../styles/Blog/Card.module.scss";
+
+const ProjectCard: NextPage<{ title: string, description: string }> = ({ title, description}) => {
+ return
+
{title}
+
{description}
+
Hello there!
+ Miaumiau Lorem ipsum
+ Projects
+ {
+ projectList ? (projectList as ContentList).filter(p => p.type === "project").map(p => ) :
}
- };
+ Diaries
+ {
+ projectList ? (projectList as ContentList).filter(p => p.type === "diary").map(p => ) :
+ }
+ ;
+
};
-export default Home;
+export default Blog;
\ No newline at end of file
diff --git a/pages/terminal.tsx b/pages/terminal.tsx
new file mode 100644
index 0000000..dd62295
--- /dev/null
+++ b/pages/terminal.tsx
@@ -0,0 +1,98 @@
+import type { NextPage, GetStaticProps } from "next";
+import Head from "next/head";
+import { GithubLogo, InstagramLogo, DiscordLogo, GameController, Envelope } from "phosphor-react";
+import { useEffect, useRef,useCallback } from "react";
+import { useCommands } from "../lib/commands/ContextProvider";
+import { useModalFunctions } from "../components/Terminal/contexts/ModalFunctions";
+import ProjectModal from "../components/Terminal/ProjectModal";
+import REPL from "../components/Terminal/REPL";
+import styles from "../styles/Home.module.css";
+import type { ContentList } from "../lib/content/types";
+import { useRouter } from "next/router";
+import Rainbow from "../lib/colors";
+
+const Home: NextPage<{ buildTime: string }> = ({ buildTime }) => {
+ const inputRef = useRef(null);
+ const { modalFunctions } = useModalFunctions();
+ const { setContents } = useCommands();
+ const router = useRouter();
+
+ const updateProjects = useCallback(async () => {
+ try {
+ const res = await fetch("/content/list.json");
+ const projects: ContentList = await res.json();
+ projects.sort((a, b) => {
+ return a.name.localeCompare(b.name);
+ });
+ setContents(projects);
+ } catch {}
+ }, [setContents]);
+
+ const focusInput = () => { if (inputRef.current) inputRef.current.focus(); };
+
+ const hideModalOnEsc = (e: React.KeyboardEvent) => {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ if(modalFunctions.setVisible) modalFunctions.setVisible(false);
+ }
+ };
+
+ useEffect(() => {
+ updateProjects().then(() => { if (modalFunctions.onContentReady) modalFunctions.onContentReady(); });
+ const interval = setInterval(updateProjects, 30 * 1000);
+ return () => clearInterval(interval);
+ }, [updateProjects, modalFunctions]);
+
+ useEffect(() => {
+ if ("rainbow" in router.query) {
+ Rainbow.start();
+ }
+ }, [router]);
+
+ return (
+
+ c0ntroller.de
+
+
+
+ );
+};
+
+export const getStaticProps: GetStaticProps = async (_context) => {
+ const date = new Date();
+ const padD = (n: number) => n.toString().padStart(2, "0");
+ const buildTime = `${date.getUTCFullYear()}${padD(date.getUTCDate())}${padD(date.getUTCMonth() + 1)}-${padD(date.getUTCHours())}${padD(date.getUTCMinutes())}`;
+ return {
+ props: {
+ buildTime
+ }
+ };
+};
+
+export default Home;
diff --git a/styles/Blog/Card.module.scss b/styles/Blog/Card.module.scss
new file mode 100644
index 0000000..b110966
--- /dev/null
+++ b/styles/Blog/Card.module.scss
@@ -0,0 +1,5 @@
+.card {
+ border: 1px solid gray;
+ border-radius: 5px;
+ max-width: 200px;
+}
\ No newline at end of file