Interface v2 (#14)

* Transitioned the SPA structure to Next.js

* Improved landing styling.

* Prototype contact page.

* Specced all major sections of the site.

* Added user input prototype to the Contact page.

* Wrote more plans for Modelling, Learning Machines sections.

* Fixed landing zoom out behaviour.

* Added incremental rendering of user input boxes to Contact page.

* Optimised home layout for maintainability+extensibility.

* Added digital rain and animations to contact page.

* Added draggable graph to Learning Machines page and specced data requirements.

* Added content to Learning Machines page.

* Added graph data.

* Added more knowledge map edge data.

* Restructure learningMachines CSS.

* Added software page content and styling. Brainstormed Maze Search project.

* Added Software page content and styling.
Brainstormed Software maze search project.
Deleted Resume page.

* Specced Blog section.

* Added web design tips.

* Worked on landing page animations.

* Improved intro animations.
Drafted main nav menu.

* Finished intro animations.

* Added Technical nav menu. Should use for other nav menus as well. Perhaps as a function with json input.

* Added navigation menus for Writing section.

* Added functional 2nd-level menu generation.

* Implemented 2nd-level menu function.

* Added sidebar and page generation structures for writing section. Can also be in Technical section once debugged.

* Improved nav grid data structure and functional rendering.

* Improved data structure and implementation for nav grid. Next step is to add full text data to the structure and integrate the structure into the rendering of the final pages (eg blog posts).

* Debugged current UI for production build.

app/_components/_intro/_components/textScrambler.js

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+
+const TextScrambler = ({initialValue, finalValue}) => {
+  const [text, setText] = useState(initialValue);
+
+  const stepDuration = 500;
+  const totalDuration = 5000;
+  const elementLength = 4;
+
+  useEffect(() => {
+    let intervalId;
+    let counter = 0;
+
+    const scramble = () => {
+      const randomValue = Math.random().toString(36).substring(2, 2 + elementLength).toUpperCase();
+      setText(randomValue);
+      counter += stepDuration;
+
+      if (counter >= totalDuration) {
+        clearInterval(intervalId);
+        setText(finalValue);
+      }
+    };
+
+    intervalId = setInterval(scramble, stepDuration);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [initialValue, finalValue]);
+
+  return <p>{text}</p>;
+};
+
+export default TextScrambler;

app/_components/_intro/_components/unscrambler.js

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+import styles from '../intro.module.css';
+
+export default function UnScrambler({ text }) {
+  const scramble = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const [scrambleText, setScrambleText] = useState('');
+  const [counter, setCounter] = useState(0);
+
+  useEffect(() => {
+    let newScrambleText = '';
+    for (let i = 0; i < text.length; i++) {
+      if (i <= counter) {
+        newScrambleText += text[i];
+      } else {
+        newScrambleText += scramble[Math.floor(Math.random() * scramble.length)];
+      }
+    }
+    setScrambleText(newScrambleText);
+    if (counter < text.length) {
+      setTimeout(() => setCounter(counter + 1), 100); // delay time
+    }
+  }, [text, counter]); // dependency array
+
+  return <p className={styles.decodedTextBox}>{scrambleText}</p>;
+};

app/_components/_intro/intro.js

@@ -0,0 +1,75 @@
+'use client'
+import styles from './intro.module.css';
+import React, { useState } from 'react';
+import UnScrambler from './_components/unscrambler';
+import TextScrambler from './_components/textScrambler';
+
+// Hex code: 57 65 20 6C 69 76 65 20 69 6E 20 61 20 66 75 74 75 72 65 20 66 65 77 20 69 6D 61 67 69 6E 65 64 20 70 6F 73 73 69 62 6C 65 2E
+
+const Intro = () => {
+  const [content, setContent] = useState('encodedHex');
+
+  const overclickPrevention = 300;
+  const transitionDelay = 2000; // TODO prod 2000
+  const handleClick = () => {
+    if (content === 'encodedHex') {
+      setTimeout(() => {
+        setContent('decodedHex');
+      }, overclickPrevention);
+    } else if (content === 'decodedHex') {
+      setTimeout(() => {
+        // Start the derender transition
+        setContent('menu');
+        setTimeout(() => {
+          // Derender the page
+          setContent('none');
+        }, transitionDelay);
+      }, overclickPrevention);
+    }
+  };
+
+  // let decodedParagraphStyle = decodedTextFadeIn ? styles.decodedTextBox : styles.decodedTextBoxInvisible;
+  let mainStyle = ((content === 'menu') ? styles.mainInvisible : styles.main);
+
+  let allContent = (
+    <div className={mainStyle} onClick={handleClick}>
+      <div className={styles.contentContainer}>
+        <div className={styles.subContainer}>
+          <div className={styles.grid}>
+            {scramblingGrid()}
+          </div>
+        </div>
+        <div className={styles.subContainer}>
+          {content != 'encodedHex' ? decodedParagraph() : null}
+        </div>
+      </div>
+    </div>
+  )
+  // Update render by state
+  if (content === 'none') {
+    // Derender so the menu behind becomes clickable
+    return null;
+  } else {
+    // Render content in front of the nav menu
+    return (
+      <div>
+        {allContent}
+      </div>
+    );
+  }
+}
+
+function scramblingGrid() {
+  const hexEncoded = ['5765', '206C', '6976', '6520', '696E', '2061', '2066', '7574', '7572', '6520', '6665', '7720', '696D', '6167', '696E', '6564', '2070', '6F73', '7369', '626C', '652E'];
+
+  return hexEncoded.map((val, index) => (
+    <TextScrambler key={index} initialValue='0000' finalValue={val} />
+  ))
+}
+
+function decodedParagraph() {
+  // We live in a future few imagined possible.
+  return <UnScrambler text='We live in a future few imagined possible.' />;
+}
+
+export default Intro;

app/_components/_intro/intro.module.css

@@ -0,0 +1,117 @@
+.main {
+  background-color: black;
+
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  min-width: 100vw;
+  min-height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 2rem;
+  font-family: Cascadia Mono;
+}
+
+.mainInvisible {
+  background-color: black;
+
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  min-width: 100vw;
+  min-height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 2rem;
+  font-family: Cascadia Mono;
+
+  opacity: 0;
+  transition: opacity 2s ease-out;
+}
+
+.contentContainer {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 0.3rem;
+  position: absolute;
+  color: white;
+
+  /* border-radius: var(--border-radius);
+  border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  background-color: rgba(var(--card-bg-rgb), 0.15); */
+}
+
+.grid {
+  /* background-color: #77d9a390; */
+
+  display: grid;
+  width: 100%;
+  min-height: 100%;
+  padding-left: 5%;
+  padding-right: 5%;
+  grid-template-columns: repeat(7, auto);
+  gap: 2rem 0;
+  align-items: center;
+  justify-content: space-between;
+  text-align: right;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.decodedTextBox {
+  /* background-color: #29d476d5; */
+  display: block;
+  width: 100%;
+
+  text-align: left;
+  font-family: inherit;
+  font-size: inherit;
+
+  transition: opacity 0.5s ease-out;
+}
+
+.decodedTextBox p {
+  background-color: #560ca5;
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  justify-content: center;
+  align-items: center;
+
+}
+/* 
+.decodedTextBoxInvisible {
+  display: block;
+  width: 100%;
+
+  text-align: center;
+  font-family: inherit;
+  font-size: inherit;
+
+  opacity: 0;
+} */
+
+.contentContainer .subContainer {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  justify-content: flex-end;
+  align-items: center;
+
+  /* border-radius: var(--border-radius);
+  border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  background-color: rgba(var(--card-bg-rgb), 0.15); */
+}

app/_components/_mainNavGrid/mainNavGrid.js

@@ -0,0 +1,33 @@
+// TODO Fix styling - in the single-element case, the element isn't centered.
+
+import Link from 'next/link'
+import styles from './mainNavGrid.module.css'
+
+export default function MainNavGrid() {
+  return (
+    <div className={styles.menuContainer}>
+      <div className={styles.menu}>
+        <Link href='technical'>
+          <div className={styles.card}>
+            <h2>TECH</h2>
+          </div>
+        </Link>
+        <Link href='https://www.linkedin.com/in/stephen-elliott231/'>
+          <div className={styles.card}>
+            <h2>CV</h2>
+          </div>
+        </Link>
+        <Link href='writing'>
+          <div className={styles.card}>
+            <h2>WRITING</h2>
+          </div>
+        </Link>
+        <Link href='art'>
+          <div className={styles.card}>
+            <h2>ART</h2>
+          </div>
+        </Link>
+      </div >
+    </div >
+  )
+}

app/_components/_mainNavGrid/mainNavGrid.module.css

@@ -0,0 +1,72 @@
+.menuContainer {
+  display: flex;
+  justify-content: center;
+  z-index: 2;
+
+  margin: 1rem;
+}
+
+.menu {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: center;
+
+  height: 100%;
+
+  padding-left: 1rem;
+  padding-right: 4rem;
+  gap: 1rem;
+
+  transition: opacity 0.5s ease-out;
+}
+
+.menuInvisible {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: center;
+
+  height: 100%;
+
+  padding-left: 3rem;
+  padding-right: 3rem;
+  gap: 1rem;
+
+  opacity: 0;
+}
+
+
+.card {
+  text-align: center;
+
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  border-radius: var(--border-radius);
+  border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  background-color: rgba(var(--card-bg-rgb), 0.15);
+
+  /* Floating effect */
+  box-shadow: 0 10px 20px rgba(80, 80, 80, 0.2), 0 6px 6px rgba(80, 80, 80, 0.2);
+  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+}
+
+.card:hover {
+  /* Box shadow hover effect */
+  box-shadow: 0 14px 28px rgba(56, 172, 255, 0.594), 0 10px 10px rgba(158, 39, 39, 0.22);
+}
+
+.card h2 {
+  min-width: 100;
+  opacity: 0.6;
+  font-size: 2rem;
+  line-height: 1.5;
+  color: #7DFDFE;
+  font-family: Cascadia Mono;
+  transition: opacity 0.5s ease-in-out;
+
+}
+
+.card h2:hover {
+  /* Box text hover effect */
+  opacity: 1;
+}