Merge branch 'dev'

williamfridh · Jul 1, 2024 · ea4c2cb · ea4c2cb
2 parents 8cf94dd + e7b88b1
commit ea4c2cb
Show file tree

Hide file tree

Showing 32 changed files with 1,228 additions and 672 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "williamfridh.com",
-  "version": "1.1.0",
+  "version": "1.2.5",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/app/src/components/LoadingAnimation.tsx b/app/src/components/LoadingAnimation.tsx
@@ -0,0 +1,57 @@
+import { max } from "date-fns"
+import { use, useEffect } from "react"
+
+/**
+ * LoadingAnimation.tsx
+ * 
+ * Example:
+ * [1][0.8][0.6][0.4][0.2]
+ * [ ][ ][ ][ ][ ]
+ * [ ][ ][ ][ ][ ]
+ * [ ][ ][ ][ ][ ]
+ * [ ][ ][ ][ ][ ]
+ * 
+ * Each cell hols a value in the span of [0, 1]
+ * to determin the size of the cell color block.
+ */
+const LoadingAnimation = () => {
+
+    const size: number[] = [10, 10]
+    const minSize: number = 0.1
+    const maxSize: number = 1
+
+    const data = Array.from(
+        { length: size[0] },
+        () => Array.from({ length: size[1] }, () => minSize)
+    )
+
+    const setSize = (x: number, y: number, size: number) => {
+        if (!data[x] || !data[x][y]) throw new Error('Invalid size')
+        data[x][y] = size
+    }
+
+    useEffect(() => {
+        console.log(data)
+    }, [])
+
+    return (
+        <div className="loading-animation">
+            {data.map((row, i) => (
+                <div key={i} className="loading-animation-row">
+                    {row.map((col, j) => (
+                        <div key={j} className="loading-animation-col">
+                            <div
+                                className="loading-animation-cell"
+                                style={{
+                                    width: `${col * 100}%`,
+                                    height: `${col * 100}%`
+                                }}
+                                ></div>
+                        </div>
+                    ))}
+                </div>
+            ))}
+        </div>
+    )
+}
+export default LoadingAnimation
diff --git a/app/src/components/header.tsx b/app/src/components/header.tsx
@@ -1,19 +1,27 @@
 import React from 'react';
-import { GeneralSettings } from '../shared/interfaces';
+import { GeneralSettings } from '@/shared/interfaces';
 import Image from 'next/image'
 import Head from 'next/head';
+import ToggleInput from './toggleInput';
+import useGrainEffect from '@/hooks/useGrainEffect';
 
 interface Props {
   generalSettings: GeneralSettings;
 }
 
 const Header: React.FC<Props> = ({ generalSettings: { title, description, customLogoUrl, siteIconUrl } }) => {
+
+    const { grainEffect, setGrainEffect } = useGrainEffect()
+
     return (
-        <>
+        <div className='pt-4'>
             <Head>
                 <link rel='icon' href={siteIconUrl} />
             </Head>
-            <header className='flex pt-8'>
+            <div>
+                <ToggleInput label='Grain effect' value={grainEffect} handler={setGrainEffect} />
+            </div>
+            <header className='flex pt-4'>
                 {customLogoUrl && <div className='size-20 md:size-[6.5rem] lg:size-36 mr-4'>
                     <Image
                         src={customLogoUrl}
@@ -27,7 +35,7 @@ const Header: React.FC<Props> = ({ generalSettings: { title, description, custom
                     <h5 className='mt-5 md:mt-4'>{description}</h5>
                 </div>
             </header>
-        </>
+        </div>
     );
 };
 export default Header;

diff --git a/app/src/components/icon.tsx b/app/src/components/icon.tsx
diff --git a/app/src/components/layout.tsx b/app/src/components/layout.tsx
@@ -1,56 +1,29 @@
-import React, { ReactNode, useState, useEffect } from 'react'
-import Prompt from '../components/prompt'
-import Header from '../components/header'
-import Navigation from '../components/navigation'
-import { GeneralSettings, MenuItem } from '../shared/interfaces'
-import Social from '../components/social'
+import React, { ReactNode, useState, useEffect, use } from 'react'
+import Prompt from '@/components/prompt/prompt'
+import Header from '@/components/header'
+import Navigation from '@/components/navigation'
+import { GeneralSettings, MenuItem, Project } from '@/shared/interfaces'
+import Social from '@/components/social'
 import { useSwipeable } from 'react-swipeable'
-import useWindowDimensions from '../hooks/useWindowDimensions'
+import useWindowDimensions from '@/hooks/useWindowDimensions'
 import { useRouter } from 'next/router'
+import useGrainEffect from '@/hooks/useGrainEffect'
+import usePrompt from '@/hooks/usePrompt'
 
-
-
-const large_screen_width_threshhold = process.env.NEXT_PUBLIC_WP_LARGE_SCREEN_WIDTH_THRESHHOLD
-
-
-
-/**
- * File specific interfaces and types.
- */
 interface Props {
     children:           ReactNode
     generalSettings:    GeneralSettings
     menuItems:          MenuItem[]
     socialMedia:        MenuItem[]
+    projectList:        Project[]
 }
 
+const Layout: React.FC<Props> = ({ children, generalSettings, menuItems, socialMedia, projectList }) => {
 
-
-/**
- * The layout component is the main layout for the application.
- */
-const Layout: React.FC<Props> = ({ children, generalSettings, menuItems, socialMedia }) => {
-
-    const { width, height } = useWindowDimensions();
+    const { width, height } = useWindowDimensions()
 	const router = useRouter()
-
-    /**
-     * Keep states for special effects and layout here.
-     * Remember to to add toggles for the extra features
-     * on the APP for those who prefer less distractions.
-     */
-    const [noiseEffect, setNoiseEffect] = useState(true)
-    const [showPrompt, setShowPrompt] = useState(false)
-
-    /**
-     * Toggle prompt.
-     * 
-     * This function is used to toggle the prompt.
-     * It's passed to the prompt component.
-     */
-    const togglePrompt = () => {
-        setShowPrompt(!showPrompt)
-    }
+    const { grainEffect, setGrainEffect } = useGrainEffect();
+    const { showPrompt, setShowPrompt, layoutReady } = usePrompt();
 
     /**
      * Swipe handlers.
@@ -68,19 +41,6 @@ const Layout: React.FC<Props> = ({ children, generalSettings, menuItems, socialM
         preventScrollOnSwipe: false,
     });
 
-    /**
-     * Set data upon activation.
-     * 
-     * Hide the prompt as default if none large scren
-     * is detected.
-     */
-    useEffect(() => {
-        if (window.innerWidth >= Number(large_screen_width_threshhold))
-            setTimeout(() => {
-                setShowPrompt(true)
-            }, 500)
-    }, [])
-
     /**
      * Scroll to  top on navigation.
      */
@@ -97,13 +57,26 @@ const Layout: React.FC<Props> = ({ children, generalSettings, menuItems, socialM
             router.events.off('routeChangeComplete', handleRouteChange)
         }
     }, [])
+
+    /**
+     * On window resize.
+     */
+    useEffect(() => {
+        if (width && width >= Number(process.env.NEXT_PUBLIC_WP_LARGE_SCREEN_WIDTH_THRESHHOLD)) {
+            if (!showPrompt) setShowPrompt(true)
+        } else {
+            if (showPrompt) setShowPrompt(false)
+        }
+    }, [width])
 
     return (
-        <div {...handlers}>
-            {noiseEffect && <div className={`noise-effect`}></div>}
-            <Prompt menuItems={menuItems} socialMedia={socialMedia} togglePrompt={togglePrompt} showPrompt={showPrompt} />
-            <main id={`content`} className={`
+        <div {...handlers} className={`
                 bg-neutral-700
+                h-screen
+            `}>
+            {grainEffect && <div className={`grain-effect`}></div>}
+            <Prompt menuItems={menuItems} socialMedia={socialMedia} projectList={projectList} />
+            <main id={`content`} className={`
                 w-full
                 h-screen
                 fixed
@@ -117,7 +90,7 @@ const Layout: React.FC<Props> = ({ children, generalSettings, menuItems, socialM
                 flex
                 place-content-center
                 transition-width
-                duration-200
+                ${layoutReady && `_layout-ready duration-200`}
             `}>
                 <div className={`h-fit mb-32 w-full sm:w-auto`}>
                     <Header generalSettings={generalSettings} />

diff --git a/app/src/components/navigation.tsx b/app/src/components/navigation.tsx
@@ -1,4 +1,4 @@
-import { MenuItem } from '../shared/interfaces'
+import { MenuItem } from '@/shared/interfaces'
 import NavigationButton from './navigationButton'
 
 interface Props {

diff --git a/app/src/components/portfolio.tsx b/app/src/components/portfolio.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Project } from '../shared/interfaces';
+import { Project } from '@/shared/interfaces';
 import Link from 'next/link';
 import Date from './date';
 import BadgeList from './BadgeList';

diff --git a/app/src/components/prompt.json b/app/src/components/prompt.json