more components, logo in navbar

app/components/content.mdx

@@ -0,0 +1,11 @@
+# First Component
+
+Let's see if MDX styling gets passed into a JSX component!
+
+## Formatting
+
+wewewew
+
+- One
+- Two
+- Three

app/components/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+import Panel from "@/components/ui/Panel";
+import Content from "./content.mdx";
+
+export default function FirstComponent() {
+    return (
+        <div className="flex flex-col items-center w-full h-full">
+            <div className="h-48" />
+            <Panel width={"1/2"}>
+                <Content />
+            </Panel>
+        </div>
+    )
+}

app/layout.tsx

@@ -4,11 +4,13 @@ import Head from 'next/head'
 import Navbar from '@/components/Navbar'
 import SiteTree from '@/components/SiteTree'
 import { MDXProvider } from '@mdx-js/react'
-import { Inter } from 'next/font/google'
+import { Inter, Besley, Cabin } from 'next/font/google'
 import components from '@/components/mdx'
 import './globals.css'
 
-const inter = Inter({ subsets: ['latin'] })
+export const inter = Inter({ subsets: ['latin'] })
+export const besley = Besley({ subsets: ['latin'] })
+export const cabin = Cabin({ subsets: ['latin'] })
 
 export const metadata = {
   title: 'Mikayla Dobson | Software Engineer',

app/logo/page.tsx

@@ -30,7 +30,7 @@ export default function LogoPage() {
         setCircleColors({ firstColor, secondColor, thirdColor });
     }
 
-    useEffect(() => handleHover, []);
+    useEffect(handleHover, []);
 
     useEffect(() => {
         if (LOOPING_ENABLED_ON_SECOND_LOGO) {

components/Navbar.tsx

@@ -1,10 +1,11 @@
 import Link from 'next/link'
+import { InlineLogo } from './logo'
 
 export default function Navbar() {
     return (
         <div id="navbar" className="w-full h-auto flex flex-nowrap justify-between px-8 py-4 bg-black text-white">
             <Link href="/">
-                <h1>Mikayla Dobson</h1>
+                <InlineLogo />
             </Link>
             <Link href="/about">
                 <p>About</p>

components/SiteTree.tsx

@@ -8,7 +8,7 @@ export default function SiteTree() {
     const pathAsArray = pathname.split('/').filter(x => x !== '');
 
     return (
-        <div className="flex flex-nowrap">
+        <div className="flex flex-nowrap w-full">
             <Link href="/">
                 <p className="mx-4">home</p>
             </Link>
@@ -17,12 +17,12 @@ export default function SiteTree() {
                 const path = pathAsArray.slice(0, idx + 1).join('/')
 
                 return (
-                    <>
-                    <p className="mr-4">/</p>
-                    <Link href={path} key={v4()}>
-                        <p className="mr-4">{segment}</p>
-                    </Link>
-                    </>
+                    <div key={v4()}>
+                        <p className="mr-4">/</p>
+                        <Link href={path}>
+                            <p className="mr-4">{segment}</p>
+                        </Link>
+                    </div>
                 )
             })}
         </div>

components/logo/index.tsx

@@ -0,0 +1,65 @@
+'use client'
+import { FC } from "react";
+import useColorShift, { type ColorListType } from "./useColorShift";
+import { useRouter } from "next/navigation";
+export { default as useColorShift } from "./useColorShift";
+
+const DEFAULT_SHIFT_INTERVAL = 3000;
+
+interface LogoProps {
+    shiftInterval?: number,
+    customColorList?: ColorListType[],
+    disableShift?: boolean,
+}
+
+export const StackedLogo: FC<LogoProps> = ({ shiftInterval, customColorList, disableShift = false }) => {
+    const hookProps = [
+        shiftInterval ?? DEFAULT_SHIFT_INTERVAL,
+        disableShift,
+        customColorList,
+    ] as const;
+
+    const { firstColor, secondColor, thirdColor, handleHover } = useColorShift(...hookProps);
+
+    return (
+        <div id="venn-diagram-logo-container" className="flex w-full h-auto justify-center">
+            <div onMouseEnter={handleHover} onMouseOut={handleHover} className={`absolute flex flex-col z-40 items-center justify-center animate-logo-throw-left h-16 w-16 bg-opacity-75 ${firstColor} transition-colors duration-[5000ms] ease rounded-full`}>
+                <p className="text-6xl font-bold opacity-100">M</p>
+            </div>
+            <div onMouseEnter={handleHover} onMouseOut={handleHover} className={`absolute flex flex-col items-center justify-center animate-logo-throw-down h-16 w-16 bg-opacity-75 ${secondColor} transition-colors duration-[5000ms] ease rounded-full`}>
+                <p className="text-6xl font-bold opacity-100 z-50">C</p>
+            </div>
+            <div onMouseEnter={handleHover} onMouseOut={handleHover} className={`absolute flex flex-col items-center justify-center animate-logo-throw-right h-16 w-16 bg-opacity-75 ${thirdColor} transition-colors duration-[5000ms] ease rounded-full`}>
+                <p className="text-6xl font-bold opacity-100">D</p>
+            </div>
+        </div>
+    )
+}
+
+export const InlineLogo: FC<LogoProps> = ({ shiftInterval, customColorList, disableShift = false }) => {
+    const router = useRouter();
+
+    const hookProps = [
+        shiftInterval ?? DEFAULT_SHIFT_INTERVAL,
+        disableShift,
+        customColorList,
+    ] as const;
+
+    const { firstColor, secondColor, thirdColor, handleHover } = useColorShift(...hookProps);
+
+    return (
+        <button onClick={() => router.push('/')} id="inline-logo-container" className="flex w-auto h-auto justify-center">
+            <div onMouseEnter={handleHover} onMouseOut={handleHover} className={`flex flex-col items-center justify-center h-16 w-16 bg-opacity-75 ${firstColor} transition-colors duration-[5000ms] rounded-full`}>
+                <p className="text-2xl font-bold opacity-100">M</p>
+            </div>
+
+            <div onMouseEnter={handleHover} onMouseOut={handleHover} className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${secondColor} transition-colors duration-[5000ms] rounded-full`}>
+                <p className="text-2xl font-bold opacity-100">C</p>
+            </div>
+
+            <div onMouseEnter={handleHover} onMouseOut={handleHover} className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${thirdColor} transition-colors duration-[5000ms] rounded-full`}>
+                <p className="text-2xl font-bold opacity-100">D</p>
+            </div>
+        </button>
+    )
+}

components/logo/useColorShift.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { DefaultColors } from "tailwindcss/types/generated/colors";
+
+export type ColorListType = (`bg-${keyof DefaultColors}` | `bg-${keyof DefaultColors}-${string}`);
+
+const colorList: ColorListType[] = [
+    "bg-purple-400",
+    "bg-purple-700",
+    "bg-sky-400",
+    "bg-sky-700",
+    "bg-blue-400",
+    "bg-pink-400",
+    "bg-pink-700",
+];
+
+const useColorShift = (shiftInterval: number, disableShift = false, customColorList?: ColorListType[]): {
+    firstColor: ColorListType | "",
+    secondColor: ColorListType | "",
+    thirdColor: ColorListType | "",
+    handleHover: () => void,
+} => {
+    if (shiftInterval <= 0) throw new Error("shiftInterval must be greater than 0")
+
+    const [circleColors, setCircleColors] = useState<{
+        firstColor: ColorListType | "",
+        secondColor: ColorListType | "",
+        thirdColor: ColorListType | "",
+    }>({
+        firstColor: "",
+        secondColor: "",
+        thirdColor: "",
+    })
+
+    function handleHover() {
+        const firstColor = colorList[Math.floor(Math.random() * colorList.length | 0)]
+        const secondColor = colorList[Math.floor(Math.random() * colorList.length | 0)]
+        const thirdColor = colorList[Math.floor(Math.random() * colorList.length | 0)]
+
+        setCircleColors({ firstColor, secondColor, thirdColor });
+    }
+
+    // perform initial mount of color changing pattern
+    useEffect(disableShift ? handleHover : (() => { return }), []);
+
+    // set this function to repeat
+    useEffect(() => {
+        const interval = setInterval(() => {
+            handleHover();
+        }, shiftInterval);
+
+        return () => clearInterval(interval);
+    }, [])
+
+    return { ...circleColors, handleHover };
+}
+
+export default useColorShift

components/mdx/index.tsx

@@ -1,4 +1,5 @@
 import { v4 } from "uuid"
+import { cabin } from "@/app/layout";
 
 type ElementType<Key extends keyof JSX.IntrinsicElements> = React.FC<JSX.IntrinsicElements[Key]>
 type FormattedTags = {
@@ -6,7 +7,7 @@ type FormattedTags = {
 }
 
 const H1TAG: ElementType<"h1"> = ({ children }) => { return (
-    <h1 key={v4()} className="text-4xl text-red-500">{children}</h1>
+    <h1 key={v4()} className={`text-4xl text-red-500 ${cabin.className} tracking-wide`}>{children}</h1>
 )}
 
 const H2Tag: ElementType<"h2"> = ({ children }) => (

components/ui/Panel.tsx

@@ -0,0 +1,31 @@
+import { FC, ReactNode } from "react"
+import { v4 } from "uuid"
+import type { TailwindFraction, TailwindNumber } from "./types"
+
+interface PanelProps {
+    children: ReactNode
+    width?: TailwindFraction | TailwindNumber | undefined
+    height?: TailwindFraction | TailwindNumber | undefined
+}
+
+const Panel: FC<PanelProps> = ({ children, width, height }) => {
+    const narrow = (input: TailwindNumber | TailwindFraction | undefined) => {
+        if (typeof input === 'number') return input.toString();
+        return input ?? "auto";
+    }
+
+    return (
+        <div
+            id={`ui-panel-${v4().slice(0, 6)}`}
+            className={`bg-inherit border-white border-2 border-opacity-50 border-double
+                drop-shadow-md shadow-white shadow-opacity-25
+                w-${narrow(width)} h-${narrow(height)}
+                rounded-lg p-3
+            `}
+        >
+            {children}
+        </div>
+    )
+}
+
+export default Panel

components/ui/types.ts

@@ -0,0 +1,17 @@
+const tailwindNumbers = [
+    0,  1,  2,  3,  4,  5,  6,  7,  8,
+    9, 10, 11, 12, 14, 16, 20, 24, 28,
+   32, 36, 40, 44, 48, 52, 56, 60, 64,
+   72, 80, 96
+] as const;
+
+const tailwindFractions = [
+    "1/2", "1/3", "2/3", "1/4", "2/4", "3/4",
+    "1/5", "2/5", "3/5", "4/5", "1/6", "2/6",
+    "3/6", "4/6", "5/6", "1/12", "2/12", "3/12",
+    "4/12", "5/12", "6/12", "7/12", "8/12", "9/12",
+    "10/12", "11/12"
+] as const;
+
+export type TailwindNumber = typeof tailwindNumbers[number];
+export type TailwindFraction = typeof tailwindFractions[number];