feat(website): add contact section to the home page (#77)

Khenziii · Oct 26, 2024 · 85499e2 · 85499e2
1 parent 5ada7a7
commit 85499e2
Show file tree

Hide file tree

Showing 14 changed files with 301 additions and 28 deletions.
diff --git 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 (
         <Flex direction={"column"} gap={20} className={style.container}>
+            <Dialog
+                title={"My other accounts"}
+                open={isDialogOpen}
+                onClose={() => setIsDialogOpen(false)}
+            >
+                <Flex className={style.dialog_container} direction="column">
+                    {accounts.map((account, index) => (
+                        <Paragraph
+                            key={`account-${index}`}
+                            fontSize={1.25}
+                            styles={{ lineBreak: "anywhere" }}
+                        >
+                            {account.siteName} - <Anchor href={account.href} darkenOnHover newTab>{account.hrefText}</Anchor>
+                        </Paragraph>
+                    ))}
+                </Flex>
+            </Dialog>
+
             <Flex direction={"column"} align={"center"} gap={0}>
                 <Logo animate={true} size={mobile ? 275 : 300} />
 
@@ -102,6 +123,8 @@ const Home = () => {
                             {" route."}
                         </Paragraph>
                     </Flex>
+
+                    <Contact openDialog={() => setIsDialogOpen(true)} />
                 </Flex>
             </FadeIn>
         </Flex>

diff --git 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 }) => (
-    <TRPCProvider>
-        <SessionProviderWrapper>
-            <IsNotFoundProvider>
-                <html lang="en">
-                    <body className={clsx(style.layout, montserrat.className)}>
-                        {children}
-                    </body>
-                </html>
-            </IsNotFoundProvider>
-        </SessionProviderWrapper>
-    </TRPCProvider>
+    <Providers>
+        <html lang="en">
+            <body className={clsx(style.layout, montserrat.className)}>
+                {children}
+            </body>
+        </html>
+    </Providers>
 );
 
 export default RootLayout;
diff --git 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
@@ -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<SetStateAction<boolean>>;
+};
+
+export const AreSocialsOpenContext = createContext<AreSocialsOpenContextProps>({
+    areSocialsOpen: false,
+    setAreSocialsOpen: () => {
+        console.log("AreSocialsOpenContext needs to be initialized before usage!");
+    },
+});
+
+export type AreSocialsOpenProviderProps = {
+    children: ReactNode;
+};
+
+export const AreSocialsOpenProvider: FC<AreSocialsOpenProviderProps> = ({ children }) => {
+    const [areSocialsOpen, setAreSocialsOpen] = useState(false);
+
+    return (
+        <AreSocialsOpenContext.Provider value={{ areSocialsOpen, setAreSocialsOpen }}>
+            {children}
+        </AreSocialsOpenContext.Provider>
+    );
+};
diff --git a/src/providers/index.ts b/src/providers/index.ts
diff --git a/src/providers/index.tsx 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<ProvidersProps> = ({ children }) => (
+    <TRPCProvider>
+        <SessionProviderWrapper>
+            <IsNotFoundProvider>
+                <AreSocialsOpenProvider>
+                    {children}
+                </AreSocialsOpenProvider>
+            </IsNotFoundProvider>
+        </SessionProviderWrapper>
+    </TRPCProvider>
+);
diff --git 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
@@ -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
@@ -0,0 +1,143 @@
+export type account = {
+    siteName: string;
+    href: string;
+    hrefText: string;
+};
+
+export const accounts: account[] = [
+    {
+        siteName: "mail",
+        href: "mailto:[email protected]",
+        hrefText: "[email protected]",
+    },
+    {
+        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
@@ -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
@@ -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<ContactProps> = ({ openDialog }) => {
+    const { setAreSocialsOpen } = useContext(AreSocialsOpenContext);
+    const mobile = useMobile();
+
+    return (
+        <Flex direction={"column"} align={"flex-start"}>
+            <Header fontSize={mobile ? 1.75 : 2}>Contact</Header>
+
+            <Paragraph fontSize={1.25} styles={{ width: "fit-content" }}>
+                {"If you want to contact me, I'm the most likely to give a quick response "}
+                <span onClick={() => setAreSocialsOpen(true)} className={style.span}>{"here"}</span>
+                {", I use those platforms the most."}
+            </Paragraph>
+
+            <Paragraph fontSize={1.25}>
+                {"However, you can also find me on "}
+                <span onClick={openDialog} className={style.span}>{"various sites"}</span>
+                {" all over the web!"}
+            </Paragraph>
+        </Flex>
+    );
+};
diff --git 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";