diff --git a/src/app/(website)/page.tsx b/src/app/(website)/page.tsx
index 59432a20..5423286a 100644
--- a/src/app/(website)/page.tsx
+++ b/src/app/(website)/page.tsx
@@ -1,5 +1,6 @@
"use client";
+import { useEffect, useState } from "react";
import {
Logo,
Paragraph,
@@ -10,14 +11,16 @@ import {
Loading,
CodeBlock,
FadeIn,
+ Dialog,
} from "@khenzii-dev/ui/atoms";
-import style from "@khenzii-dev/styles/home.module.scss";
+import { Contact, accounts } from "@khenzii-dev/ui/organisms";
import { useMobile } from "@khenzii-dev/hooks";
import { api } from "@khenzii-dev/providers";
-import { useEffect, useState } from "react";
+import style from "@khenzii-dev/styles/home.module.scss";
const Home = () => {
const [logoAnimationFinished, setLogoAnimationFinished] = useState(false);
+ const [isDialogOpen, setIsDialogOpen] = useState(false);
const mobile = useMobile();
const {
data: currentProjectData,
@@ -35,6 +38,24 @@ const Home = () => {
return (
+
+
@@ -102,6 +123,8 @@ const Home = () => {
{" route."}
+
+ setIsDialogOpen(true)} />
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c7b76866..a977272b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,13 +1,9 @@
import { Montserrat } from "next/font/google";
import type { Metadata } from "next";
import type { ReactNode, FC } from "react";
-import clsx from "clsx";
-import {
- TRPCProvider,
- SessionProviderWrapper,
- IsNotFoundProvider,
-} from "@khenzii-dev/providers";
+import { Providers } from "@khenzii-dev/providers";
import style from "@khenzii-dev/styles/layout.module.scss";
+import clsx from "clsx";
const montserrat = Montserrat({
weight: "600",
@@ -25,17 +21,13 @@ export const metadata: Metadata = {
};
const RootLayout: FC<{ children: ReactNode }> = ({ children }) => (
-
-
-
-
-
- {children}
-
-
-
-
-
+
+
+
+ {children}
+
+
+
);
export default RootLayout;
diff --git a/src/hooks/use_mobile.ts b/src/hooks/use_mobile.ts
index 103deb20..1a55e740 100644
--- a/src/hooks/use_mobile.ts
+++ b/src/hooks/use_mobile.ts
@@ -1,3 +1,5 @@
+"use client";
+
import { useState, useEffect } from 'react';
// if you wish to update this, please update
diff --git a/src/providers/are_socials_open_provider.tsx b/src/providers/are_socials_open_provider.tsx
new file mode 100644
index 00000000..e3de7bd6
--- /dev/null
+++ b/src/providers/are_socials_open_provider.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import {
+ createContext,
+ useState,
+ type Dispatch,
+ type SetStateAction,
+ type ReactNode,
+ type FC,
+} from "react";
+
+export type AreSocialsOpenContextProps = {
+ areSocialsOpen: boolean;
+ setAreSocialsOpen: Dispatch>;
+};
+
+export const AreSocialsOpenContext = createContext({
+ areSocialsOpen: false,
+ setAreSocialsOpen: () => {
+ console.log("AreSocialsOpenContext needs to be initialized before usage!");
+ },
+});
+
+export type AreSocialsOpenProviderProps = {
+ children: ReactNode;
+};
+
+export const AreSocialsOpenProvider: FC = ({ children }) => {
+ const [areSocialsOpen, setAreSocialsOpen] = useState(false);
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/providers/index.ts b/src/providers/index.ts
deleted file mode 100644
index f6dad918..00000000
--- a/src/providers/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./trpc_provider";
-export * from "./session_provider_wrapper";
-export * from "./is_not_found_provider";
diff --git a/src/providers/index.tsx b/src/providers/index.tsx
new file mode 100644
index 00000000..9d6fa17a
--- /dev/null
+++ b/src/providers/index.tsx
@@ -0,0 +1,26 @@
+export * from "./trpc_provider";
+export * from "./session_provider_wrapper";
+export * from "./is_not_found_provider";
+export * from "./are_socials_open_provider";
+
+import type { ReactNode, FC } from "react";
+import { TRPCProvider } from "./trpc_provider";
+import { SessionProviderWrapper } from "./session_provider_wrapper";
+import { IsNotFoundProvider } from "./is_not_found_provider";
+import { AreSocialsOpenProvider } from "./are_socials_open_provider";
+
+export type ProvidersProps = {
+ children: ReactNode;
+};
+
+export const Providers: FC = ({ children }) => (
+
+
+
+
+ {children}
+
+
+
+
+);
diff --git a/src/styles/home.module.scss b/src/styles/home.module.scss
index bebf8de5..87e9abfc 100644
--- a/src/styles/home.module.scss
+++ b/src/styles/home.module.scss
@@ -1,5 +1,11 @@
@import "./constants.scss";
+.dialog_container {
+ height: min(50vh, 50rem);
+ width: min(75vw, 40rem);
+ overflow: scroll;
+}
+
.container {
margin-block: $defaultGap;
}
diff --git a/src/ui/atoms/dialog/index.module.scss b/src/ui/atoms/dialog/index.module.scss
index a1998498..074fb163 100644
--- a/src/ui/atoms/dialog/index.module.scss
+++ b/src/ui/atoms/dialog/index.module.scss
@@ -18,6 +18,7 @@
left: 0;
width: 100%;
height: 100%;
+ z-index: 10000;
background: rgba(0, 0, 0, 0.5);
display: grid;
place-items: center;
diff --git a/src/ui/organisms/contact/accounts.ts b/src/ui/organisms/contact/accounts.ts
new file mode 100644
index 00000000..4175eab0
--- /dev/null
+++ b/src/ui/organisms/contact/accounts.ts
@@ -0,0 +1,143 @@
+export type account = {
+ siteName: string;
+ href: string;
+ hrefText: string;
+};
+
+export const accounts: account[] = [
+ {
+ siteName: "mail",
+ href: "mailto:khenzii.was.taken@gmail.com",
+ hrefText: "khenzii.was.taken@gmail.com",
+ },
+ {
+ siteName: "twitch",
+ href: "https://twitch.tv/khenziii",
+ hrefText: "twitch.tv/khenziii",
+ },
+ {
+ siteName: "reddit",
+ href: "https://reddit.com/u/khenziii",
+ hrefText: "reddit.com/u/khenziii",
+ },
+ {
+ siteName: "wikipedia",
+ href: "https://wikipedia.org/wiki/user:khenziii",
+ hrefText: "wikipedia.org/wiki/user:khenziii",
+ },
+ {
+ siteName: "soundcloud",
+ href: "https://soundcloud.com/khenzii",
+ hrefText: "soundcloud.com/khenzii",
+ },
+ {
+ siteName: "letterboxd",
+ href: "https://letterboxd.com/khenzii",
+ hrefText: "letterboxd.com/khenzii",
+ },
+ {
+ siteName: "pinterest",
+ href: "https://pinterest.com/khenziii",
+ hrefText: "pinterest.com/khenziii",
+ },
+ {
+ siteName: "monkeytype",
+ href: "https://monkeytype.com/profile/khenzii",
+ hrefText: "monkeytype.com/profile/khenzii",
+ },
+ {
+ siteName: "lichess",
+ href: "https://lichess.org/@/khenzii",
+ hrefText: "lichess.org/@/khenzii",
+ },
+ {
+ siteName: "imgur",
+ href: "https://imgur.com/user/khenzii",
+ hrefText: "imgur.com/user/khenzii",
+ },
+ {
+ siteName: "itch.io",
+ href: "https://khenzii.itch.io",
+ hrefText: "khenzii.itch.io",
+ },
+ {
+ siteName: "leetcode",
+ href: "https://leetcode.com/u/khenzii",
+ hrefText: "leetcode.com/u/khenzii",
+ },
+ {
+ siteName: "docker hub",
+ href: "https://hub.docker.com/u/khenzii",
+ hrefText: "hub.docker.com/u/khenzii",
+ },
+ {
+ siteName: "stackoverflow",
+ href: "https://stackoverflow.com/users/22290899/khenzii",
+ hrefText: "stackoverflow.com/users/22290899/khenzii",
+ },
+ {
+ siteName: "archive",
+ href: "https://archive.org/details/@khenzii",
+ hrefText: "archive.org/details/@khenzii",
+ },
+ {
+ siteName: "npm",
+ href: "https://npmjs.com/~khenzii",
+ hrefText: "npmjs.com/~khenzii",
+ },
+ {
+ siteName: "gitlab",
+ href: "https://gitlab.com/khenzii",
+ hrefText: "gitlab.com/khenzii",
+ },
+ {
+ siteName: "codeberg",
+ href: "https://codeberg.org/khenzii",
+ hrefText: "codeberg.org/khenzii",
+ },
+ {
+ siteName: "nixos discourse",
+ href: "https://discourse.nixos.org/u/khenzii",
+ hrefText: "discourse.nixos.org/u/khenzii",
+ },
+ {
+ siteName: "rust discourse",
+ href: "https://users.rust-lang.org/u/khenzii",
+ hrefText: "users.rust-lang.org/u/khenzii",
+ },
+ {
+ siteName: "wikidot",
+ href: "https://wikidot.com/user:info/khenzii",
+ hrefText: "wikidot.com/user:info/khenzii",
+ },
+ {
+ siteName: "typeracer",
+ href: "https://data.typeracer.com/pit/profile?user=khenzii",
+ hrefText: "data.typeracer.com/pit/profile?user=khenzii",
+ },
+ {
+ siteName: "replit",
+ href: "https://replit.com/@khenzii",
+ hrefText: "replit.com/@khenzii",
+ },
+ {
+ siteName: "medal",
+ href: "https://medal.tv/u/khenzii",
+ hrefText: "medal.tv/u/khenzii",
+ },
+ {
+ siteName: "opencollective",
+ href: "https://opencollective.com/khenzii",
+ hrefText: "opencollective.com/khenzii",
+ },
+ {
+ siteName: "pastebin",
+ href: "https://pastebin.com/u/khenziii",
+ hrefText: "pastebin.com/u/khenziii",
+ },
+ {
+ siteName: "sketchfab",
+ href: "https://sketchfab.com/khenzii",
+ hrefText: "sketchfab.com/khenzii",
+ },
+];
diff --git a/src/ui/organisms/contact/index.module.scss b/src/ui/organisms/contact/index.module.scss
new file mode 100644
index 00000000..26fbd4ef
--- /dev/null
+++ b/src/ui/organisms/contact/index.module.scss
@@ -0,0 +1,10 @@
+@import "../../../styles/constants.scss";
+
+.span {
+ cursor: pointer;
+ text-decoration: underline;
+
+ &:hover {
+ color: $textDarkened;
+ }
+}
diff --git a/src/ui/organisms/contact/index.tsx b/src/ui/organisms/contact/index.tsx
new file mode 100644
index 00000000..3754b3d5
--- /dev/null
+++ b/src/ui/organisms/contact/index.tsx
@@ -0,0 +1,38 @@
+export * from "./accounts";
+
+import { type FC, useContext } from "react";
+import { AreSocialsOpenContext } from "@khenzii-dev/providers";
+import { useMobile } from "@khenzii-dev/hooks";
+import {
+ Flex,
+ Header,
+ Paragraph,
+} from "@khenzii-dev/ui/atoms";
+import style from "./index.module.scss";
+
+export type ContactProps = {
+ openDialog: () => void;
+};
+
+export const Contact: FC = ({ openDialog }) => {
+ const { setAreSocialsOpen } = useContext(AreSocialsOpenContext);
+ const mobile = useMobile();
+
+ return (
+
+
+
+
+ {"If you want to contact me, I'm the most likely to give a quick response "}
+ setAreSocialsOpen(true)} className={style.span}>{"here"}
+ {", I use those platforms the most."}
+
+
+
+ {"However, you can also find me on "}
+ {"various sites"}
+ {" all over the web!"}
+
+
+ );
+};
diff --git a/src/ui/organisms/index.ts b/src/ui/organisms/index.ts
index 28b48050..1bbcaf6d 100644
--- a/src/ui/organisms/index.ts
+++ b/src/ui/organisms/index.ts
@@ -5,3 +5,4 @@ export * from "./admin_login";
export * from "./protected_page";
export * from "./tags";
export * from "./posts";
+export * from "./contact";
diff --git a/src/ui/organisms/nav/nav_desktop/index.tsx b/src/ui/organisms/nav/nav_desktop/index.tsx
index 00189df9..555408dc 100644
--- a/src/ui/organisms/nav/nav_desktop/index.tsx
+++ b/src/ui/organisms/nav/nav_desktop/index.tsx
@@ -1,11 +1,10 @@
import {
type FC,
- useState,
useCallback,
useContext,
} from "react";
import { usePathname } from "next/navigation";
-import { IsNotFoundContext } from "@khenzii-dev/providers";
+import { IsNotFoundContext, AreSocialsOpenContext } from "@khenzii-dev/providers";
import type { route, social } from "..";
import { NavDesktopItem } from "./nav_desktop_item";
import { Icon, Anchor, Flex } from "@khenzii-dev/ui/atoms";
@@ -19,7 +18,7 @@ export type NavDesktopProps = {
export const NavDesktop: FC = ({ routes , socials }) => {
const pathname = usePathname();
- const [areSocialsOpen, setAreSocialsOpen] = useState(false);
+ const { areSocialsOpen, setAreSocialsOpen } = useContext(AreSocialsOpenContext);
const { isNotFound } = useContext(IsNotFoundContext);
const isRouteActive = useCallback((path?: string): boolean => {
diff --git a/src/ui/organisms/nav/nav_mobile/index.tsx b/src/ui/organisms/nav/nav_mobile/index.tsx
index 9bb0272c..5b7f371c 100644
--- a/src/ui/organisms/nav/nav_mobile/index.tsx
+++ b/src/ui/organisms/nav/nav_mobile/index.tsx
@@ -1,11 +1,10 @@
import {
type FC,
- useState,
useCallback,
useContext,
} from "react";
import { usePathname } from "next/navigation";
-import { IsNotFoundContext } from "@khenzii-dev/providers";
+import { IsNotFoundContext, AreSocialsOpenContext } from "@khenzii-dev/providers";
import type { route, social } from "..";
import { NavMobileItem } from "./nav_mobile_item";
import { Icon, Anchor, Flex } from "@khenzii-dev/ui/atoms";
@@ -19,7 +18,7 @@ export type NavMobileProps = {
export const NavMobile: FC = ({ routes, socials }) => {
const pathname = usePathname();
- const [areSocialsOpen, setAreSocialsOpen] = useState(false);
+ const { areSocialsOpen, setAreSocialsOpen } = useContext(AreSocialsOpenContext);
const { isNotFound } = useContext(IsNotFoundContext);
const isRouteActive = useCallback((path?: string): boolean => {