basic site added

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.next

components/actions/TextShuffler.jsx

@@ -0,0 +1,42 @@
+import React, { Fragment, useEffect, useState } from 'react'
+
+let timer = 0;
+let keyNum = 0;
+let textTimeout;
+let chars = ("abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=-;.,/?><][}{:`~").split("");
+
+const TextShuffler = ({ textInput }) => {
+
+    let [text, setText] = useState(textInput);
+    let [refresh, setRefresh] = useState(0);
+
+    useEffect(() => {
+
+        let shuffledText = () => {
+            let textArray = textInput.split("");
+            let newTextArray = [];
+            textArray.forEach(char => {
+                if (char === " ") {
+                    return newTextArray.push(" ")
+                }
+                newTextArray.push(chars[Math.floor(Math.random() * 85)])
+            })
+
+            return newTextArray.join("");
+        }
+
+        textTimeout = setTimeout(() => {
+            if (timer === 7) {
+                setText(textInput);
+                return window.clearTimeout(textTimeout);
+            };
+            setText(prev => prev);
+            setRefresh(prev => prev + 1);
+            timer++
+        }, 200);
+    }, [refresh])
+
+    return (<span className="shuffled-text-span">{text.split("").map(char => <span key={keyNum++} style={{ animationDelay: Math.random() + "s", animationDuration: (Math.random() * 2) + "s" }}>{char}</span>)}</span>)
+}
+
+export default TextShuffler

functions/frontend/textShuffle.js

@@ -0,0 +1,13 @@
+export const textSHuffle = (text, dispatch) => {
+
+    let shuffleTimer = 0;
+    let startText = text;
+    let shuffledtext
+
+    setInterval(()=>{
+        shuffleTimer++
+        shuffledtext = startText + "whatever";
+    }, 200);
+
+    return shuffledtext
+}

layouts/general_layout/GeneralHeader.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const GeneralHeader = () => {
+    return (
+        <header>
+            <a href="/" className="logo-link-block"><h1>Tben.me</h1></a>
+            <nav>
+                <a href="/">Home</a>
+                <a href="/about">About Me</a>
+                <a href='/documents/Benjamin_Toby_CV.pdf' target="_blank">My Resume</a>
+                <a href="/contact">Contact Me</a>
+            </nav>
+        </header>
+    )
+}
+
+export default GeneralHeader

layouts/general_layout/GeneralLayout.jsx

@@ -0,0 +1,13 @@
+import React, { Fragment } from 'react'
+import GeneralHeader from './GeneralHeader'
+
+const GeneralLayout = ({children}) => {
+    return (
+        <Fragment>
+            <GeneralHeader/>
+            {children}
+        </Fragment>
+    )
+}
+
+export default GeneralLayout

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "personal_site",
+  "version": "1.0.0",
+  "description": "My personal site",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "dev": "next dev -p 5000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BenjaminToby/personal_site.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/BenjaminToby/personal_site/issues"
+  },
+  "homepage": "https://github.com/BenjaminToby/personal_site#readme",
+  "dependencies": {
+    "next": "^12.0.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

pages/404.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import TextShuffler from '../components/actions/TextShuffler'
+import { textSHuffle } from '../functions/frontend/textShuffle'
+import GeneralLayout from '../layouts/general_layout/GeneralLayout'
+
+const index = () => {
+    return (
+        <div className='not-found-page-wrapper'>
+            <h1><TextShuffler textInput="404" /></h1>
+            <span className='hero-sub-text'>
+                <TextShuffler textInput="Oops ... page not found" />
+            </span>
+            <div className="hero-ctas-section">
+                <a href='/'>Go Back Home</a>
+            </div>
+        </div>
+    )
+}
+
+export default index

pages/_app.js

@@ -0,0 +1,14 @@
+import "../styles/main.css";
+import { Fragment } from "react";
+import Script from "next/script";
+
+function MyApp({ Component, pageProps }) {
+    return (
+        <Fragment>
+            <Component {...pageProps} />
+            <Script src="/scripts/main.js" strategy="beforeInteractive" />
+        </Fragment>
+    );
+}
+
+export default MyApp;

pages/about.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import TextShuffler from '../components/actions/TextShuffler'
+import { textSHuffle } from '../functions/frontend/textShuffle'
+import GeneralLayout from '../layouts/general_layout/GeneralLayout'
+
+const about = () => {
+    return (
+        <GeneralLayout>
+            <h1><TextShuffler textInput="Ben of all trade, master of all!" /></h1>
+            <span className='hero-sub-text'>
+                <TextShuffler textInput="So the thing about me is: I want to know it all, I want to master it all: this has lead me to dig deep into almost every aspect of web design and development. But that's not the best thing about me: the best thing is I'm willing to learn and adapt at any point: there are so many languages and libraries these days: even in my quest to master it all, it is not possible to master all the available languages and libraries: but whichever knowledge is needed at any given time, I adapt and learn: very quickly too: I see this as the best skill anyone can have in this age." />
+            </span>
+            <div className="hero-ctas-section">
+                <a href='/documents/Benjamin_Toby_CV.pdf' download={true}>See my resume</a>
+                <a href='https://www.linkedin.com/in/benjamin-toby/' target="_blank">Linkedin</a>
+            </div>
+        </GeneralLayout>
+    )
+}
+
+export default about

pages/contact.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import TextShuffler from '../components/actions/TextShuffler'
+import GeneralLayout from '../layouts/general_layout/GeneralLayout'
+
+const contact = () => {
+    return (
+        <GeneralLayout>
+            <h1><TextShuffler textInput="Great things await ..." /></h1>
+            <span className='hero-sub-text'>
+                <TextShuffler textInput="Let's talk" />
+            </span>
+
+            <form autoComplete='true'>
+                <input type="text" placeholder='Your Name' />
+                <input type="email" placeholder='Your Email Address' />
+                <textarea name="message" id="contact-form-message" cols="30" rows="10" placeholder='Message'></textarea>
+                <button type="submit">Submit</button>
+            </form>
+        </GeneralLayout>
+    )
+}
+
+export default contact

pages/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import TextShuffler from '../components/actions/TextShuffler'
+import { textSHuffle } from '../functions/frontend/textShuffle'
+import GeneralLayout from '../layouts/general_layout/GeneralLayout'
+
+const index = () => {
+    return (
+        <GeneralLayout>
+            <h1><TextShuffler textInput="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer" /></h1>
+            <span className='hero-sub-text'>
+                <TextShuffler textInput="Hi, I'm Ben, a highly talented fullstack web developer with extensive enxperience in web design, frontend and backend development." />
+            </span>
+            <div className="hero-ctas-section">
+                <a href='/documents/Benjamin_Toby_CV.pdf' download={true}>See my resume</a>
+                <a href='https://www.linkedin.com/in/benjamin-toby/' target="_blank">Linkedin</a>
+            </div>
+        </GeneralLayout>
+    )
+}
+
+export default index

public/scripts/main.js

@@ -0,0 +1,6 @@
+document.querySelectorAll("nav a").forEach((link) => {
+    let locationRegex = new RegExp(`${window.location.pathname}.*?`);
+    if (link.pathname === window.location.pathname) {
+        link.classList.add("active-page");
+    }
+});

styles/main.css

@@ -0,0 +1,291 @@
+html {
+    width: 100%;
+    /* overflow-x: hidden; */
+    scroll-behavior: smooth;
+    font-family: Helvetica;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #222;
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+:root {
+    --main-color: #1668e4;
+    --dark-color: #201e1e;
+    --sec-color-3: #688e26;
+    --sec-color-4: #adb2d3;
+    --sec-color-5: #c2a878;
+    --light-color-1: #ddd;
+    --transparent-white: rgba(255, 255, 255, 0.2);
+}
+
+body {
+    width: 100%;
+    margin: 0px;
+    padding: 40px;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    background-color: var(--dark-color);
+    color: white;
+}
+
+a {
+    text-decoration: none;
+    color: white;
+    border: 1px solid transparent;
+}
+
+a:hover {
+    color: var(--sec-color-2);
+}
+
+button {
+    padding: 10px 25px;
+    border: none;
+    cursor: pointer;
+    font-size: inherit;
+    border: 1px solid transparent;
+}
+
+hr {
+    opacity: 0.3;
+}
+
+button:hover {
+    background-color: var(--dark-color);
+    /* background-color: #c52532; */
+    color: white;
+    border-color: var(--transparent-white);
+}
+
+form * {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+header {
+    z-index: 1000000;
+    margin-bottom: 40px;
+}
+
+h1 {
+    font-size: 52px;
+    margin-top: 0;
+}
+
+/* ################################################# -- Sliders */
+aside,
+.side-nav-block {
+    scrollbar-width: none;
+}
+/* width */
+aside::-webkit-scrollbar,
+.side-nav-block::-webkit-scrollbar {
+    width: 5px;
+}
+
+/* Track */
+aside::-webkit-scrollbar-track,
+.side-nav-block::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+/* Handle */
+aside::-webkit-scrollbar-thumb,
+.side-nav-block::-webkit-scrollbar-thumb {
+    background: #dbe1eb;
+    border-radius: 10px;
+}
+
+/* Handle on hover */
+aside::-webkit-scrollbar-thumb:hover,
+.side-nav-block::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/*############################################# -- Common Actions */
+
+.visible {
+    display: flex;
+}
+
+.hidden {
+    display: none;
+}
+
+.fixed {
+    position: fixed;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.relative {
+    position: relative;
+}
+
+.no-pointer-events {
+    pointer-events: none;
+}
+
+.pointer-events {
+    pointer-events: visible;
+}
+
+.spacer {
+    display: block;
+    width: 100%;
+    height: 80px;
+}
+
+/*############################################# -- Header */
+
+header {
+    color: white;
+}
+
+.logo-link-block h1 {
+    font-size: 28px;
+    margin: 0;
+    margin-bottom: 5px;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+nav a {
+    opacity: 0.5;
+}
+
+nav a:hover {
+    opacity: 1;
+}
+
+.active-page {
+    opacity: 1;
+    border-bottom: 2px solid white;
+}
+
+/*############################################# -- Shuffled Text */
+
+#__next {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    animation-name: shuffle;
+    animation-timing-function: ease-out;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+}
+
+.shuffled-text-span span {
+    animation-name: shuffle;
+    animation-timing-function: ease-out;
+    animation-delay: 0.5s;
+}
+
+@keyframes shuffle {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+/*############################################# -- Hero Section */
+.hero-sub-text {
+    font-size: 24px;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.hero-ctas-section {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    gap: 20px;
+}
+
+.hero-ctas-section a {
+    padding: 10px 25px;
+    border: none;
+    cursor: pointer;
+    font-size: inherit;
+    color: var(--dark-color);
+    background-color: white;
+    font-size: 18px;
+}
+
+.hero-ctas-section a:hover {
+    background-color: var(--dark-color);
+    color: white;
+    border-color: var(--transparent-white);
+}
+
+/*############################################# -- 404 page */
+.not-found-page-wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+/*############################################# -- Contact Forms */
+form {
+    margin-top: 40px;
+    max-width: 1000px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+input,
+textarea {
+    padding: 15px 20px;
+    background-color: transparent;
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    width: 100%;
+    resize: none;
+}
+
+/* ###############################################################################################
+##################################################################################################
+##################################################################################################
+##################################################################################################
+##################################### -- Mobile Styles -- ########################################
+##################################################################################################
+##################################################################################################
+##################################################################################################
+############################################################################################### */
+
+@media (max-width: 1200px) {
+}
+
+@media (max-width: 990px) {
+}
+
+@media (max-width: 800px) {
+}
+
+@media (max-width: 600px) {
+}
+
+@media (max-width: 450px) {
+}
+
+@media (max-width: 350px) {
+}