From 0b7c70058d211a528b77b7e043d0ed315f865b00 Mon Sep 17 00:00:00 2001
From: Benjamin Toby <devops@tben.me>
Date: Tue, 2 Dec 2025 16:30:46 +0100
Subject: [PATCH] Updates

---
 .../lib/(partials)/PopoverComponent.tsx       |   2 +-
 components/lib/base.css                       |  15 +++
 .../lib/composites/docs/TWUIDocsLink.tsx      |   2 +-
 components/lib/editors/AceEditor.tsx          |   4 +-
 components/lib/editors/TinyMCE/index.tsx      |  78 +++++++++----
 components/lib/editors/TinyMCE/useTinyMCE.tsx |  49 +++++---
 components/lib/elements/Dropdown.tsx          |   4 +
 components/lib/elements/LoadingOverlay.tsx    |  14 ++-
 components/lib/elements/Modal.tsx             |   9 +-
 components/lib/elements/Search.tsx            |   6 +-
 components/lib/elements/Table.tsx             |   4 +-
 components/lib/elements/Tabs.tsx              |   9 +-
 components/lib/elements/ai/AIPromptBlock.tsx  |  12 +-
 .../lib/elements/ai/AIPromptPreview.tsx       |   4 +-
 components/lib/form/FileUpload.tsx            | 108 ++++++++++++++----
 components/lib/form/Input/index.tsx           |   6 +-
 components/lib/form/Select.tsx                |   4 +-
 components/lib/layout/Button.tsx              |   2 +-
 components/lib/layout/Container.tsx           |   2 +-
 components/lib/layout/H5.tsx                  |   2 +-
 components/lib/layout/Spacer.tsx              |   2 +-
 components/lib/mdx/mdx-components.tsx         |   3 +
 .../lib/next-js/hooks/useMDXComponents.tsx    |   2 +
 components/lib/utils/fetch/fetchApi.ts        |  25 ++--
 .../lib/utils/form/fileInputToBase64.ts       |   2 +-
 layouts/main/index.tsx                        |  18 ++-
 pages/about.tsx                               |   2 +-
 pages/contact.tsx                             |   2 +-
 pages/index.tsx                               |   8 +-
 pages/skills.tsx                              |   2 +-
 pages/work.tsx                                |   2 +-
 31 files changed, 298 insertions(+), 106 deletions(-)

diff --git a/components/lib/(partials)/PopoverComponent.tsx b/components/lib/(partials)/PopoverComponent.tsx
index 1da18d3..e75658d 100644
--- a/components/lib/(partials)/PopoverComponent.tsx
+++ b/components/lib/(partials)/PopoverComponent.tsx
@@ -69,7 +69,7 @@ export default function PopoverComponent({
         <Paper
             {...props}
             className={twMerge(
-                "max-w-[300px]",
+                "max-w-[300px] z-[250]",
                 "twui-popover-content",
                 props.className
             )}
diff --git a/components/lib/base.css b/components/lib/base.css
index 47cab24..c12b04e 100644
--- a/components/lib/base.css
+++ b/components/lib/base.css
@@ -60,6 +60,8 @@
     --radius-default-xs: 1px;
     --radius-default-lg: 7px;
     --radius-default-xl: 10px;
+
+    --container-container: 1200px;
 }
 
 @custom-variant dark (&:where(.dark, .dark *));
@@ -155,3 +157,16 @@ option {
 .normal-text {
     @apply text-foreground-light dark:text-foreground-dark;
 }
+
+ol {
+    list-style: decimal;
+}
+
+ul {
+    list-style: disc;
+}
+
+ul,
+ol {
+    margin-left: 25px;
+}
diff --git a/components/lib/composites/docs/TWUIDocsLink.tsx b/components/lib/composites/docs/TWUIDocsLink.tsx
index 7be9a8c..5c62232 100644
--- a/components/lib/composites/docs/TWUIDocsLink.tsx
+++ b/components/lib/composites/docs/TWUIDocsLink.tsx
@@ -115,7 +115,7 @@ export default function TWUIDocsLink({
                             <TWUIDocsLink
                                 key={index}
                                 docLink={link}
-                                className="text-sm opacity-70"
+                                className="opacity-70"
                                 autoExpandAll={autoExpandAll}
                                 child
                             />
diff --git a/components/lib/editors/AceEditor.tsx b/components/lib/editors/AceEditor.tsx
index be185e8..f0acb4a 100644
--- a/components/lib/editors/AceEditor.tsx
+++ b/components/lib/editors/AceEditor.tsx
@@ -114,7 +114,7 @@ export default function AceEditor({
             return function () {
                 editor.destroy();
             };
-        }, [refresh, darkMode, ready, externalRefresh, content]);
+        }, [refresh, darkMode, ready, externalRefresh]);
 
         React.useEffect(() => {
             const htmlClassName = document.documentElement.className;
@@ -145,7 +145,7 @@ export default function AceEditor({
     } catch (error: any) {
         return (
             <React.Fragment>
-                <span className="text-sm m-0">
+                <span className="m-0">
                     Editor Error:{" "}
                     <b className="text-red-600">{error.message}</b>
                 </span>
diff --git a/components/lib/editors/TinyMCE/index.tsx b/components/lib/editors/TinyMCE/index.tsx
index 7d8c7b1..667382a 100644
--- a/components/lib/editors/TinyMCE/index.tsx
+++ b/components/lib/editors/TinyMCE/index.tsx
@@ -3,9 +3,9 @@ import { RawEditorOptions, TinyMCE, Editor } from "./tinymce";
 import { twMerge } from "tailwind-merge";
 import twuiSlugToNormalText from "../../utils/slug-to-normal-text";
 import Border from "../../elements/Border";
+import useTinyMCE from "./useTinyMCE";
 
 export type TinyMCEEditorProps<KeyType extends string> = {
-    tinyMCE?: TinyMCE | null;
     options?: RawEditorOptions;
     editorRef?: React.MutableRefObject<Editor | null>;
     setEditor?: React.Dispatch<React.SetStateAction<Editor>>;
@@ -26,8 +26,6 @@ export type TinyMCEEditorProps<KeyType extends string> = {
     placeholder?: string;
 };
 
-let interval: any;
-
 /**
  * # Tiny MCE Editor Component
  * @className_wrapper twui-rte-wrapper
@@ -35,8 +33,7 @@ let interval: any;
 export default function TinyMCEEditor<KeyType extends string>({
     options,
     editorRef,
-    setEditor,
-    tinyMCE,
+    setEditor: passedSetEditor,
     wrapperProps,
     defaultValue,
     changeHandler,
@@ -47,29 +44,49 @@ export default function TinyMCEEditor<KeyType extends string>({
     useParentCSS,
     placeholder,
 }: TinyMCEEditorProps<KeyType>) {
+    const { tinyMCE } = useTinyMCE();
+
     const editorComponentRef = React.useRef<HTMLDivElement>(null);
 
+    const EDITOR_VALUE_CHANGE_TIMEOUT = 500;
+
     const FINAL_HEIGHT = options?.height || 500;
     const [themeReady, setThemeReady] = React.useState(false);
     const [ready, setReady] = React.useState(false);
     const [darkMode, setDarkMode] = React.useState(false);
+    const [refresh, setRefresh] = React.useState(0);
+    const [editor, setEditor] = React.useState<Editor>();
 
     const title = name ? twuiSlugToNormalText(name) : "Rich Text";
 
     React.useEffect(() => {
-        const htmlClassName = document.documentElement.className;
-        if (htmlClassName.match(/dark/i)) setDarkMode(true);
-        setTimeout(() => {
-            setThemeReady(true);
-        }, 200);
-    }, []);
-
-    React.useEffect(() => {
-        if (!editorComponentRef.current || !themeReady) {
+        if (!tinyMCE) {
             return;
         }
 
-        tinyMCE?.init({
+        const htmlClassName = document.documentElement.className;
+
+        if (htmlClassName.match(/dark/i)) setDarkMode(true);
+
+        setTimeout(() => {
+            setThemeReady(true);
+        }, 200);
+    }, [tinyMCE]);
+
+    let valueTimeout: any;
+
+    const id = crypto.randomUUID();
+
+    React.useEffect(() => {
+        if (!editorComponentRef.current || !themeReady || !tinyMCE) {
+            return;
+        }
+
+        const baseUrl =
+            process.env.NEXT_PUBLIC_TINYMCE_BASE_URL ||
+            "https://www.datasquirel.com/tinymce-public";
+
+        tinyMCE.init({
             height: FINAL_HEIGHT,
             menubar: false,
             plugins:
@@ -79,20 +96,30 @@ export default function TinyMCEEditor<KeyType extends string>({
             content_style:
                 "body { font-family:Helvetica,Arial,sans-serif; font-size:14px; background-color: transparent }",
             init_instance_callback: (editor) => {
-                setEditor?.(editor as any);
+                setEditor(editor as any);
                 if (editorRef) editorRef.current = editor as any;
                 if (defaultValue) editor.setContent(defaultValue);
                 setReady(true);
 
-                editor.on("change", (e) => {
-                    changeHandler?.(editor.getContent());
+                // editor.on("change", (e) => {
+                //     changeHandler?.(editor.getContent());
+                // });
+
+                editor.on("input", (e) => {
+                    if (changeHandler) {
+                        window.clearTimeout(valueTimeout);
+
+                        valueTimeout = setTimeout(() => {
+                            changeHandler(editor.getContent());
+                        }, EDITOR_VALUE_CHANGE_TIMEOUT);
+                    }
                 });
 
                 if (useParentCSS) {
                     useParentStyles(editor);
                 }
             },
-            base_url: "https://www.datasquirel.com/tinymce-public",
+            base_url: baseUrl,
             body_class: "twui-tinymce",
             placeholder,
             relative_urls: true,
@@ -106,9 +133,14 @@ export default function TinyMCEEditor<KeyType extends string>({
         });
 
         return function () {
-            tinyMCE?.remove();
+            if (!ready) return;
+
+            const instance = editorComponentRef.current
+                ? tinyMCE?.get(editorComponentRef.current?.id)
+                : undefined;
+            instance?.remove();
         };
-    }, [tinyMCE, themeReady]);
+    }, [tinyMCE, themeReady, refresh]);
 
     return (
         <div
@@ -129,7 +161,7 @@ export default function TinyMCEEditor<KeyType extends string>({
                         "bg-background-light dark:bg-background-dark text-gray-500",
                         "dark:text-white/80 rounded"
                     )}
-                    htmlFor={name || "twui-tinymce"}
+                    htmlFor={id}
                 >
                     {title}
                 </label>
@@ -153,7 +185,7 @@ export default function TinyMCEEditor<KeyType extends string>({
                         "bg-slate-200 dark:bg-slate-700 rounded-sm w-full",
                         "twui-rte-wrapper"
                     )}
-                    id={name || "twui-tinymce"}
+                    id={id}
                 ></div>
             </Border>
         </div>
diff --git a/components/lib/editors/TinyMCE/useTinyMCE.tsx b/components/lib/editors/TinyMCE/useTinyMCE.tsx
index 6480d4e..dadedb4 100644
--- a/components/lib/editors/TinyMCE/useTinyMCE.tsx
+++ b/components/lib/editors/TinyMCE/useTinyMCE.tsx
@@ -4,32 +4,49 @@ import { TinyMCE } from "./tinymce";
 let interval: any;
 
 export default function useTinyMCE() {
-    const [tinyMCE, setTinyMCE] = React.useState<TinyMCE | null>(null);
+    const [tinyMCE, setTinyMCE] = React.useState<TinyMCE>();
+    const [refresh, setRefresh] = React.useState(0);
+    const [scriptLoaded, setScriptLoaded] = React.useState(false);
 
     React.useEffect(() => {
-        // @ts-ignore
-        if (window.tinymce) {
-            console.log("Tinymce already exists");
-            // @ts-ignore
-            setTinyMCE(window.tinymce);
+        if (refresh >= 5) return;
+
+        const clientWindow = window as Window & { tinymce?: TinyMCE };
+
+        if (clientWindow.tinymce) {
+            setScriptLoaded(true);
             return;
         }
 
         const script = document.createElement("script");
-        script.src =
-            "https://www.datasquirel.com/tinymce-public/tinymce.min.js";
+
+        const baseUrl =
+            process.env.NEXT_PUBLIC_TINYMCE_BASE_URL ||
+            "https://www.datasquirel.com/tinymce-public";
+
+        script.src = `${baseUrl}/tinymce.min.js`;
         script.async = true;
 
-        document.head.appendChild(script);
-
         script.onload = () => {
-            // @ts-ignore
-            if (window.tinymce) {
-                // @ts-ignore
-                setTinyMCE(window.tinymce);
-            }
+            setScriptLoaded(true);
         };
-    }, []);
+
+        document.head.appendChild(script);
+    }, [refresh]);
+
+    React.useEffect(() => {
+        if (!scriptLoaded) return;
+
+        const clientWindow = window as Window & { tinymce?: TinyMCE };
+
+        let tinyMCE = clientWindow.tinymce;
+
+        if (tinyMCE) {
+            setTinyMCE(tinyMCE);
+        } else {
+            setRefresh((prev) => prev + 1);
+        }
+    }, [scriptLoaded]);
 
     return { tinyMCE };
 }
diff --git a/components/lib/elements/Dropdown.tsx b/components/lib/elements/Dropdown.tsx
index 92b2729..1d08a0b 100644
--- a/components/lib/elements/Dropdown.tsx
+++ b/components/lib/elements/Dropdown.tsx
@@ -9,6 +9,8 @@ export const TWUIDropdownContentPositions = [
     "left",
     "bottom-left",
     "top-left",
+    "top",
+    "bottom",
     "right",
     "bottom-right",
     "top-right",
@@ -160,6 +162,8 @@ export default function Dropdown({
                         ? "right-0 top-[100%]"
                         : position == "center"
                         ? "left-[50%] -translate-x-[50%] top-[100%]"
+                        : position == "top"
+                        ? "left-[50%] -translate-x-[50%] bottom-[100%]"
                         : "top-[100%]",
                     above ? "-translate-y-[120%]" : "",
                     open ? "flex" : "hidden",
diff --git a/components/lib/elements/LoadingOverlay.tsx b/components/lib/elements/LoadingOverlay.tsx
index 8a2575d..e9e8772 100644
--- a/components/lib/elements/LoadingOverlay.tsx
+++ b/components/lib/elements/LoadingOverlay.tsx
@@ -2,19 +2,26 @@ import { ComponentProps, DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import Center from "../layout/Center";
 import Loading from "./Loading";
+import Row from "../layout/Row";
+import Span from "../layout/Span";
 
 type Props = DetailedHTMLProps<
     HTMLAttributes<HTMLDivElement>,
     HTMLDivElement
 > & {
     loadingProps?: ComponentProps<typeof Loading>;
+    label?: string;
 };
 
 /**
  * # Loading Overlay Component
  * @className_wrapper twui-loading-overlay
  */
-export default function LoadingOverlay({ loadingProps, ...props }: Props) {
+export default function LoadingOverlay({
+    loadingProps,
+    label,
+    ...props
+}: Props) {
     return (
         <div
             {...props}
@@ -26,7 +33,10 @@ export default function LoadingOverlay({ loadingProps, ...props }: Props) {
             )}
         >
             <Center>
-                <Loading {...loadingProps} />
+                <Row>
+                    <Loading {...loadingProps} />
+                    {label && <Span>{label}</Span>}
+                </Row>
             </Center>
         </div>
     );
diff --git a/components/lib/elements/Modal.tsx b/components/lib/elements/Modal.tsx
index 68e3d67..2ca1783 100644
--- a/components/lib/elements/Modal.tsx
+++ b/components/lib/elements/Modal.tsx
@@ -32,6 +32,7 @@ export type TWUI_MODAL_PROPS = DetailedHTMLProps<
     trigger?: (typeof TWUIPopoverTriggers)[number];
     debounce?: number;
     onClose?: () => any;
+    hoverOpen?: boolean;
 };
 
 /**
@@ -55,6 +56,7 @@ export default function Modal(props: TWUI_MODAL_PROPS) {
         trigger = "hover",
         debounce = 500,
         onClose,
+        hoverOpen,
     } = props;
 
     const [ready, setReady] = React.useState(false);
@@ -65,6 +67,9 @@ export default function Modal(props: TWUI_MODAL_PROPS) {
         const modalRoot = document.getElementById(IDName);
 
         if (modalRoot) {
+            if (isPopover) {
+                modalRoot.style.zIndex = "1000";
+            }
             setReady(true);
         } else {
             const newModalRootEl = document.createElement("div");
@@ -144,12 +149,12 @@ export default function Modal(props: TWUI_MODAL_PROPS) {
                     onClick={(e) => setOpen(!open)}
                     ref={finalTargetRef}
                     onMouseEnter={
-                        isPopover && trigger === "hover"
+                        isPopover && (trigger === "hover" || hoverOpen)
                             ? popoverEnterFn
                             : targetWrapperProps?.onMouseEnter
                     }
                     onMouseLeave={
-                        isPopover && trigger === "hover"
+                        isPopover && (trigger === "hover" || hoverOpen)
                             ? popoverLeaveFn
                             : targetWrapperProps?.onMouseLeave
                     }
diff --git a/components/lib/elements/Search.tsx b/components/lib/elements/Search.tsx
index dca6430..180ada6 100644
--- a/components/lib/elements/Search.tsx
+++ b/components/lib/elements/Search.tsx
@@ -21,6 +21,7 @@ export type SearchProps<KeyType extends string> = DetailedHTMLProps<
     >;
     loading?: boolean;
     placeholder?: string;
+    componentRef?: React.RefObject<HTMLInputElement | null>;
 };
 
 /**
@@ -37,6 +38,7 @@ export default function Search<KeyType extends string>({
     buttonProps,
     loading,
     placeholder,
+    componentRef,
     ...props
 }: SearchProps<KeyType>) {
     const [input, setInput] = React.useState(
@@ -52,7 +54,7 @@ export default function Search<KeyType extends string>({
         }, delay);
     }, [input]);
 
-    const inputRef = React.useRef<HTMLInputElement>(null);
+    const inputRef = componentRef || React.useRef<HTMLInputElement>(null);
 
     React.useEffect(() => {
         if (props.autoFocus) {
@@ -64,7 +66,7 @@ export default function Search<KeyType extends string>({
         <Row
             {...props}
             className={twMerge(
-                "relative xl:flex-nowrap items-stretch gap-0",
+                "relative xl:flex-nowrap items-stretch gap-0 flex-nowrap",
                 "twui-search-wrapper",
                 props?.className
             )}
diff --git a/components/lib/elements/Table.tsx b/components/lib/elements/Table.tsx
index f4678dc..8c1374f 100644
--- a/components/lib/elements/Table.tsx
+++ b/components/lib/elements/Table.tsx
@@ -31,7 +31,7 @@ export default function Table({ data }: Props) {
                             <th
                                 key={header}
                                 className={twMerge(
-                                    "px-3 py-2 text-left text-sm opacity-50",
+                                    "px-3 py-2 text-left opacity-50",
                                     "font-semibold"
                                 )}
                                 title={header}
@@ -58,7 +58,7 @@ export default function Table({ data }: Props) {
                                 <td
                                     key={`${header}-${index}`}
                                     className={twMerge(
-                                        "px-3 py-2 whitespace-nowrap text-sm text-foreground-light",
+                                        "px-3 py-2 whitespace-nowrap text-foreground-light",
                                         "dark:text-foreground-dark max-w-[200px] overflow-hidden",
                                         "overflow-ellipsis"
                                     )}
diff --git a/components/lib/elements/Tabs.tsx b/components/lib/elements/Tabs.tsx
index 42a3520..b936772 100644
--- a/components/lib/elements/Tabs.tsx
+++ b/components/lib/elements/Tabs.tsx
@@ -8,7 +8,7 @@ import twuiSlugify from "../utils/slugify";
 export type TWUITabsObject = {
     title: string;
     value?: string;
-    content: React.ReactNode;
+    content?: React.ReactNode;
     defaultActive?: boolean;
 };
 
@@ -35,6 +35,8 @@ export type TWUI_TOGGLE_PROPS = React.ComponentProps<typeof Stack> & {
  * @className twui-tab-buttons
  * @className twui-tab-button-active
  * @className twui-tab-buttons-wrapper
+ * @className twui-tab-buttons-container
+ * @className twui-tabs-border
  */
 export default function Tabs({
     tabsContentArray,
@@ -91,13 +93,14 @@ export default function Tabs({
                 )}
             >
                 <Border
-                    className="p-0 w-full overflow-hidden"
+                    className="p-0 w-full overflow-hidden twui-tabs-border"
                     {...tabsBorderProps}
                 >
                     <Row
                         className={twMerge(
                             "gap-0 items-stretch w-full flex-nowrap overflow-x-auto",
-                            centered && "justify-center"
+                            centered && "justify-center",
+                            "twui-tab-buttons-container"
                         )}
                     >
                         {values.map((value, index) => {
diff --git a/components/lib/elements/ai/AIPromptBlock.tsx b/components/lib/elements/ai/AIPromptBlock.tsx
index a612e6e..2fe756e 100644
--- a/components/lib/elements/ai/AIPromptBlock.tsx
+++ b/components/lib/elements/ai/AIPromptBlock.tsx
@@ -18,6 +18,7 @@ type Props = {
     loading?: boolean;
     mdRes?: string;
     setMdRes: React.Dispatch<React.SetStateAction<string>>;
+    placeholder?: string;
 };
 
 export default function AIPromptBlock({
@@ -27,6 +28,7 @@ export default function AIPromptBlock({
     loading = false,
     mdRes = "",
     setMdRes,
+    placeholder,
 }: Props) {
     const [prompt, setPrompt] = React.useState("");
     const currentPromptRef = React.useRef("");
@@ -43,7 +45,7 @@ export default function AIPromptBlock({
                                 <MessageCircleMore
                                     size={15}
                                     opacity={0.5}
-                                    className="-mt-[1px]"
+                                    className="-mt-px"
                                 />
                             </Row>
                         </Card>
@@ -53,11 +55,15 @@ export default function AIPromptBlock({
                     setStreamRes={setMdRes}
                     streamRes={mdRes}
                     history={history}
+                    loading={loading}
                 />
                 <Stack className="w-full relative">
                     {loading && <LoadingOverlay />}
                     <Textarea
-                        placeholder={model ? `Prompt ${model}` : "Prompt AI"}
+                        placeholder={
+                            placeholder ||
+                            (model ? `Prompt ${model}` : "Prompt AI")
+                        }
                         wrapperProps={{ className: "outline-none" }}
                         wrapperWrapperProps={{ className: "w-full" }}
                         value={prompt}
@@ -65,7 +71,7 @@ export default function AIPromptBlock({
                             setPrompt(e.target.value);
                         }}
                         onKeyDown={(e) => {
-                            if (e.key == "Enter" && !e.ctrlKey) {
+                            if (e.key == "Enter" && !e.ctrlKey && !e.shiftKey) {
                                 e.preventDefault();
                                 currentPromptRef.current = prompt;
                                 setTimeout(() => {
diff --git a/components/lib/elements/ai/AIPromptPreview.tsx b/components/lib/elements/ai/AIPromptPreview.tsx
index 1877a17..a172544 100644
--- a/components/lib/elements/ai/AIPromptPreview.tsx
+++ b/components/lib/elements/ai/AIPromptPreview.tsx
@@ -8,12 +8,14 @@ type Props = {
     streamRes: string;
     setStreamRes: React.Dispatch<React.SetStateAction<string>>;
     history: ChatCompletionMessageParam[];
+    loading?: boolean;
 };
 
 export default function AIPromptPreview({
     setStreamRes,
     streamRes,
     history,
+    loading,
 }: Props) {
     const responseContentRef = React.useRef<HTMLDivElement>(null);
     const isContentInterrupted = React.useRef(false);
@@ -27,7 +29,7 @@ export default function AIPromptPreview({
         }
     }, [streamRes]);
 
-    if (!streamRes?.match(/./)) return null;
+    if (loading || !streamRes?.match(/./)) return null;
 
     return (
         <Stack className="w-full">
diff --git a/components/lib/form/FileUpload.tsx b/components/lib/form/FileUpload.tsx
index 3e9ff7e..d8a074f 100644
--- a/components/lib/form/FileUpload.tsx
+++ b/components/lib/form/FileUpload.tsx
@@ -11,6 +11,7 @@ import fileInputToBase64 from "../utils/form/fileInputToBase64";
 import Row from "../layout/Row";
 import Input from "./Input";
 import Loading from "../elements/Loading";
+import Tag from "../elements/Tag";
 
 type FileInputUtils = {
     clearFileInput?: () => void;
@@ -59,6 +60,7 @@ type ImageUploadProps = DetailedHTMLProps<
     existingFile?: FileInputToBase64FunctionReturn;
     existingFileUrl?: string;
     icon?: ReactNode;
+    externalSetFileURL?: React.Dispatch<string | undefined>;
     labelSpanProps?: ComponentProps<typeof Span>;
     loading?: boolean;
     multiple?: boolean;
@@ -86,6 +88,7 @@ export default function FileUpload({
     multiple,
     onClear,
     changeHandler,
+    externalSetFileURL,
     ...props
 }: ImageUploadProps) {
     const [file, setFile] = React.useState<
@@ -97,6 +100,7 @@ export default function FileUpload({
 
     const [fileDraggedOver, setFileDraggedOver] = React.useState(false);
     const inputRef = React.useRef<HTMLInputElement>(null);
+    const tempFileURLRef = React.useRef<string>(null);
 
     React.useEffect(() => {
         if (existingFileUrl) {
@@ -244,26 +248,37 @@ export default function FileUpload({
                     className="w-full relative h-full items-center justify-center overflow-hidden"
                     {...previewImageWrapperProps}
                 >
-                    {disablePreview ? (
-                        <Span className="opacity-50" size="small">
-                            Image Uploaded!
-                        </Span>
-                    ) : fileUrl.match(/\.pdf$|\.txt$/) ? (
-                        <Row>
-                            <FileArchive size={36} strokeWidth={1} />
-                            <Stack className="gap-0">
-                                <Span size="smaller" className="opacity-70">
-                                    {fileUrl}
-                                </Span>
-                            </Stack>
-                        </Row>
-                    ) : (
-                        <img
-                            src={fileUrl}
-                            className="w-full object-contain overflow-hidden"
-                            {...previewImageProps}
-                        />
-                    )}
+                    <Stack className="w-full">
+                        {disablePreview ? (
+                            <Span className="opacity-50" size="small">
+                                Image Uploaded!
+                            </Span>
+                        ) : fileUrl.match(/\.pdf$|\.txt$/) ? (
+                            <Row>
+                                <FileArchive size={36} strokeWidth={1} />
+                                <Stack className="gap-0">
+                                    <Span size="smaller" className="opacity-70">
+                                        {fileUrl}
+                                    </Span>
+                                </Stack>
+                            </Row>
+                        ) : (
+                            <img
+                                src={fileUrl}
+                                className="w-full object-contain overflow-hidden"
+                                {...previewImageProps}
+                            />
+                        )}
+
+                        <Tag
+                            variant="outlined"
+                            color="gray"
+                            className="w-full py-2 text-sm"
+                        >
+                            {fileUrl}
+                        </Tag>
+                    </Stack>
+
                     <Button
                         variant="ghost"
                         className={twMerge(
@@ -345,6 +360,59 @@ export default function FileUpload({
                             >
                                 {label || "Click to Upload File"}
                             </Span>
+                            {externalSetFileURL ? (
+                                <Row
+                                    className="flex-nowrap gap-0 items-stretch"
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                    }}
+                                >
+                                    <Input
+                                        placeholder="Add Media URL"
+                                        className="text-sm"
+                                        wrapperProps={{ className: "h-full" }}
+                                        wrapperWrapperProps={{
+                                            className: "h-full",
+                                        }}
+                                        changeHandler={(value) => {
+                                            tempFileURLRef.current = value;
+                                        }}
+                                        onKeyUp={(e) => {
+                                            if (e.key == "Enter") {
+                                                if (tempFileURLRef.current) {
+                                                    setFileUrl(
+                                                        tempFileURLRef.current
+                                                    );
+                                                    externalSetFileURL(
+                                                        tempFileURLRef.current
+                                                    );
+                                                }
+                                            }
+                                        }}
+                                    />
+                                    <Button
+                                        title="Add Media URL"
+                                        variant="outlined"
+                                        className="py-0 px-3"
+                                        color="gray"
+                                        onClick={(e) => {
+                                            e.preventDefault();
+
+                                            if (tempFileURLRef.current) {
+                                                setFileUrl(
+                                                    tempFileURLRef.current
+                                                );
+                                                externalSetFileURL(
+                                                    tempFileURLRef.current
+                                                );
+                                            }
+                                        }}
+                                    >
+                                        <span className="text-2xl">+</span>
+                                    </Button>
+                                </Row>
+                            ) : null}
                         </Stack>
                     </Center>
                 </Card>
diff --git a/components/lib/form/Input/index.tsx b/components/lib/form/Input/index.tsx
index 7ebf5fc..5104df6 100644
--- a/components/lib/form/Input/index.tsx
+++ b/components/lib/form/Input/index.tsx
@@ -207,14 +207,16 @@ export default function Input<KeyType extends string>(
 
             window.clearTimeout(timeout);
 
-            if (validationRegex && !validationFunction) {
+            if (validationRegex) {
                 timeout = setTimeout(() => {
                     setValidity({
                         isValid: validationRegex.test(val),
                         msg: "Value mismatch",
                     });
                 }, finalDebounce);
-            } else if (validationFunction) {
+            }
+
+            if (validationFunction) {
                 window.clearTimeout(validationFnTimeout);
 
                 validationFnTimeout = setTimeout(() => {
diff --git a/components/lib/form/Select.tsx b/components/lib/form/Select.tsx
index 3e6d53c..a43a540 100644
--- a/components/lib/form/Select.tsx
+++ b/components/lib/form/Select.tsx
@@ -232,9 +232,9 @@ export default function Select<
                         }
                         hoverOpen
                     >
-                        <Card className="min-w-[250px] text-sm p-6">
+                        <Card className="min-w-[250px] p-6">
                             {typeof info == "string" ? (
-                                <Span className="text-sm">{info}</Span>
+                                <Span>{info}</Span>
                             ) : (
                                 info
                             )}
diff --git a/components/lib/layout/Button.tsx b/components/lib/layout/Button.tsx
index 85e8b5a..f73bf67 100644
--- a/components/lib/layout/Button.tsx
+++ b/components/lib/layout/Button.tsx
@@ -258,7 +258,7 @@ export default function Button({
                 props.disabled ? "opacity-40 cursor-not-allowed" : "",
                 "twui-button-general",
                 size == "small"
-                    ? "px-3 py-1.5 text-sm twui-button-small"
+                    ? "px-3 py-1.5 twui-button-small text-sm"
                     : size == "smaller"
                     ? "px-2 py-1 text-xs twui-button-smaller"
                     : size == "large"
diff --git a/components/lib/layout/Container.tsx b/components/lib/layout/Container.tsx
index 321e2b5..7885294 100644
--- a/components/lib/layout/Container.tsx
+++ b/components/lib/layout/Container.tsx
@@ -12,7 +12,7 @@ export default function Container({
         <div
             {...props}
             className={twMerge(
-                "flex w-full max-w-[1200px] gap-4 justify-between",
+                "flex w-full max-w-container gap-4 justify-between",
                 "flex-wrap flex-col xl:flex-row items-start xl:items-center",
                 "twui-container",
                 props.className
diff --git a/components/lib/layout/H5.tsx b/components/lib/layout/H5.tsx
index f1edfdd..853f9d6 100644
--- a/components/lib/layout/H5.tsx
+++ b/components/lib/layout/H5.tsx
@@ -12,7 +12,7 @@ export default function H5({
         <h5
             {...props}
             className={twMerge(
-                "text-sm mb-4",
+                "mb-4",
                 "twui-headings twui-heading",
                 "twui-h5",
                 props.className
diff --git a/components/lib/layout/Spacer.tsx b/components/lib/layout/Spacer.tsx
index a1be476..2adbdf7 100644
--- a/components/lib/layout/Spacer.tsx
+++ b/components/lib/layout/Spacer.tsx
@@ -18,7 +18,7 @@ export default function Spacer({ horizontal, ...props }: Props) {
         <div
             {...props}
             className={twMerge(
-                "grow",
+                "",
                 horizontal ? "w-10" : "w-full h-10",
                 "twui-spacer",
                 props.className
diff --git a/components/lib/mdx/mdx-components.tsx b/components/lib/mdx/mdx-components.tsx
index 17e3c3d..38df396 100644
--- a/components/lib/mdx/mdx-components.tsx
+++ b/components/lib/mdx/mdx-components.tsx
@@ -23,6 +23,7 @@ export function useMDXComponents(params?: Params) {
             pre: ({ children, ...props }) => {
                 if (React.isValidElement(children) && children.props) {
                     return (
+                        // @ts-ignore
                         <CodeBlock {...props} backgroundColor={codeBgColor}>
                             {/* @ts-ignore */}
                             {children.props.children}
@@ -30,6 +31,7 @@ export function useMDXComponents(params?: Params) {
                     );
                 }
                 return (
+                    // @ts-ignore
                     <CodeBlock {...props} backgroundColor={codeBgColor}>
                         {children}
                     </CodeBlock>
@@ -62,6 +64,7 @@ export function useMDXComponents(params?: Params) {
                 );
             },
             img: (props) => (
+                // @ts-ignore
                 <img
                     {...props}
                     className="w-full h-auto shadow-lg rounded-default overflow-hidden"
diff --git a/components/lib/next-js/hooks/useMDXComponents.tsx b/components/lib/next-js/hooks/useMDXComponents.tsx
index a0dd30b..e719aee 100644
--- a/components/lib/next-js/hooks/useMDXComponents.tsx
+++ b/components/lib/next-js/hooks/useMDXComponents.tsx
@@ -22,6 +22,7 @@ export default function useMDXComponents({
         pre: ({ children, ...props }) => {
             if (React.isValidElement(children) && children.props) {
                 return (
+                    // @ts-ignore
                     <CodeBlock {...props} backgroundColor={codeBgColor}>
                         {/* @ts-ignore */}
                         {children.props.children}
@@ -29,6 +30,7 @@ export default function useMDXComponents({
                 );
             }
             return (
+                // @ts-ignore
                 <CodeBlock {...props} backgroundColor={codeBgColor}>
                     {children}
                 </CodeBlock>
diff --git a/components/lib/utils/fetch/fetchApi.ts b/components/lib/utils/fetch/fetchApi.ts
index 2ccfb25..7e44cf8 100644
--- a/components/lib/utils/fetch/fetchApi.ts
+++ b/components/lib/utils/fetch/fetchApi.ts
@@ -1,17 +1,20 @@
 import _ from "lodash";
 
+export const FetchAPIMethods = [
+    "POST",
+    "GET",
+    "DELETE",
+    "PUT",
+    "PATCH",
+    "post",
+    "get",
+    "delete",
+    "put",
+    "patch",
+] as const;
+
 type FetchApiOptions<T extends { [k: string]: any } = { [k: string]: any }> = {
-    method:
-        | "POST"
-        | "GET"
-        | "DELETE"
-        | "PUT"
-        | "PATCH"
-        | "post"
-        | "get"
-        | "delete"
-        | "put"
-        | "patch";
+    method: (typeof FetchAPIMethods)[number];
     body?: T | string;
     headers?: FetchHeader;
 };
diff --git a/components/lib/utils/form/fileInputToBase64.ts b/components/lib/utils/form/fileInputToBase64.ts
index 8a289e0..4a9bb96 100644
--- a/components/lib/utils/form/fileInputToBase64.ts
+++ b/components/lib/utils/form/fileInputToBase64.ts
@@ -35,7 +35,7 @@ export default async function fileInputToBase64({
                     resolve(reader.result?.toString());
                 };
                 reader.onerror = function (/** @type {*} */ error: any) {
-                    console.log("Error: ", error.message);
+                    console.log("File Input to Base64 Error: ", error.message);
                 };
             }
         );
diff --git a/layouts/main/index.tsx b/layouts/main/index.tsx
index 838c08b..d34ca60 100644
--- a/layouts/main/index.tsx
+++ b/layouts/main/index.tsx
@@ -4,14 +4,28 @@ import Header from "./Header";
 import Footer from "./Footer";
 import { twMerge } from "tailwind-merge";
 import MobileMenu from "./(sections)/MobileMenu";
+import Head from "next/head";
 
-type Props = PropsWithChildren & {};
+type Props = PropsWithChildren & {
+    meta?: {
+        title?: string;
+        description?: string;
+    };
+};
 
-export default function Layout({ children }: Props) {
+export default function Layout({ children, meta }: Props) {
     const [menuOpen, setMenuOpen] = React.useState(false);
 
     return (
         <div className="flex flex-row items-stretch w-full min-h-screen">
+            <Head>
+                <title>
+                    {meta?.title || "10X Software/Devops Engineer | Tben.me"}
+                </title>
+                {meta?.description && (
+                    <meta name="description" content={meta?.description} />
+                )}
+            </Head>
             <Aside />
             <div className={twMerge("flex flex-col items-start gap-0", "grow")}>
                 <Header {...{ menuOpen, setMenuOpen }} />
diff --git a/pages/about.tsx b/pages/about.tsx
index dcf8473..f8a28d4 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -3,7 +3,7 @@ import Main from "@/components/pages/about";
 
 export default function ContactPage() {
     return (
-        <Layout>
+        <Layout meta={{ title: "About Me | Tben.me" }}>
             <Main />
         </Layout>
     );
diff --git a/pages/contact.tsx b/pages/contact.tsx
index abce712..96e8bbd 100644
--- a/pages/contact.tsx
+++ b/pages/contact.tsx
@@ -3,7 +3,7 @@ import Main from "@/components/pages/contact";
 
 export default function ContactPage() {
     return (
-        <Layout>
+        <Layout meta={{ title: "Contact Me | Tben.me" }}>
             <Main />
         </Layout>
     );
diff --git a/pages/index.tsx b/pages/index.tsx
index eb79862..9690add 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,4 @@
 import Layout from "@/layouts/main";
-import H1 from "@/components/lib/layout/H1";
 import Main from "@/components/pages/Home";
 import AboutSection from "@/components/pages/Home/(sections)/AboutSection";
 import Divider from "@/components/lib/layout/Divider";
@@ -8,7 +7,12 @@ import MyWorkSection from "@/components/pages/Home/(sections)/MyWorkSection";
 
 export default function Home() {
     return (
-        <Layout>
+        <Layout
+            meta={{
+                description:
+                    "Software Engineer, DevOps Engineer, Full Stack Developer, Software Architect, Philosopher, Solar Energy Enthusiast.",
+            }}
+        >
             <Main />
             <Divider />
             <AboutSection />
diff --git a/pages/skills.tsx b/pages/skills.tsx
index 49ee660..95aa9a0 100644
--- a/pages/skills.tsx
+++ b/pages/skills.tsx
@@ -5,7 +5,7 @@ import MySkillsSection from "@/components/pages/Home/(sections)/MySkillsSection"
 
 export default function SkillsPage() {
     return (
-        <Layout>
+        <Layout meta={{ title: "My Skills | Tben.me" }}>
             <Main />
             <Divider />
             <MySkillsSection noTitle expand />
diff --git a/pages/work.tsx b/pages/work.tsx
index 7fc9a2c..a825dc7 100644
--- a/pages/work.tsx
+++ b/pages/work.tsx
@@ -5,7 +5,7 @@ import MyWorkSection from "@/components/pages/Home/(sections)/MyWorkSection";
 
 export default function WorkPage() {
     return (
-        <Layout>
+        <Layout meta={{ title: "My Work | Tben.me" }}>
             <Main />
             <Divider />
             <MyWorkSection noTitle expand />