diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8e8fee5..aec2f31 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -18,9 +18,28 @@ import GithubPrimerWrapper from "@/components/wrappers/GithubPrimerWrappers";
import PortfolioHeader from "@/components/PortfolioHeader";
import { defaultLocale, dynamicLoadNActivateLocale } from "@/headers/i18n";
import defaultMessages from "@/locales/en/messages";
+import DevDebugComponents from "@/components/wrappers/DevDebugWrappers";
+import PhoneComponent from "@/components/phoneComponents/PhoneComponent";
+// Variables
const inter = Inter({ subsets: ['latin'] })
+// We set this variable to false as default
+// as it serves us to know if the `useEffect` hook
+// was called before rendering `I18nProvider` Component
+var isDefaultLocaleSet = false;
+// Dynamically call translations inside a `useEffect` React hook
+const I18nApp = () => {
+ useEffect(() => {
+ // With this method we should dynamically load the required locale
+ dynamicLoadNActivateLocale(defaultLocale);
+ console.log(isDefaultLocaleSet);
+ isDefaultLocaleSet = true;
+ }, [])
+}
+
+
+// Exports (Functions, Components, Variables/Constants)
export const metadata: Metadata = {
title: 'Alexis Opolka Portfolio',
description: 'The website & portfolio of Alexis Opolka',
@@ -32,29 +51,18 @@ export default function RootLayout({
children: React.ReactNode
}) {
- // We set this variable to false as default
- // as it serves us to know if the `useEffect` hook
- // was called before rendering `I18nProvider` Component
- var isDefaultLocaleSet = false;
-
- // Dynamically call translations inside a `useEffect` React hook
- const I18nApp = () => {
- useEffect(() => {
- // With this method we should dynamically load the required locale
- dynamicLoadNActivateLocale(defaultLocale);
- console.log(isDefaultLocaleSet);
- isDefaultLocaleSet = true;
- })
- }
-
+ console.log(`[${Date.now()}] - Current locale: ${i18n.locale}, DefaultLocaleSet: ${isDefaultLocaleSet}`);
// Workaround for `I18nProvider` Component not being activated
// We set the locale and the messages by default
if (!isDefaultLocaleSet) {
i18n.load(defaultLocale, defaultMessages);
i18n.activate(defaultLocale);
+ isDefaultLocaleSet = true;
}
+ console.log(`[${Date.now()}] - Current locale: ${i18n.locale}, DefaultLocaleSet: ${isDefaultLocaleSet}`);
+
return (
{/** The `SSRProvider` Component is here to ensure the same
@@ -64,34 +72,66 @@ export default function RootLayout({
*/}
-
- {/** The `NoSSR` custom element is present to avoid
- * the SSR Tree Mismatch error because certain components
- * such as `ThemeProvider` from `@primer/react` needs to be
- * rendered client side and is therefore not included creating
- * an SSR Tree mismatch error.
- */}
-
-
-
-
+
+
+ {/** The `NoSSR` custom element is present to avoid
+ * the SSR Tree Mismatch error because certain components
+ * such as `ThemeProvider` from `@primer/react` needs to be
+ * rendered client side and is therefore not included creating
+ * an SSR Tree mismatch error.
+ */}
+
+ {/*
+
+
+
+
+
+ {children}
+
+
+
+ {t({ message: `This is the Footer Content.` })}
+
+ */}
+
+
-
-
-
- {children}
-
-
-
- {t`This is the Footer Content.`}
-
-
-
-
-
+
+
+
+
+
+
+
+ {children}
+
+
+
+ {t({ message: `This is the Footer Content.` })}
+
+
+
+
+
+
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3668b2f..9b04d0a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,16 +1,25 @@
"use client"
// NextJS Imports
-import { t } from '@lingui/macro';
-import PortfolioHeader from '@/components/PortfolioHeader';
-import { Box, PageLayout } from '@primer/react';
+import { Box, Heading, Text } from '@primer/react';
+
+// Intern Imports
+import PhoneComponent from '@/components/phoneComponents/PhoneComponent';
// Components Functions
export default function Home() {
return (
-
- {t`This is the main Content.`}
+
+
+ Welcome to my website!
+
)
}