add work section

components/PortfolioEntry.jsx

@@ -0,0 +1,52 @@
+/**
+ *
+ *
+ * Imports
+ * ------------------------------------------------------------------------------
+ *
+ */
+/** ********************* React/Next Imports */
+import React from "react";
+import TextShuffler from "./actions/TextShuffler";
+/** ~ End React/Next Imports *************** */
+
+/** ********************* Functions and Other Page Imports */
+/** ~ End Functions and Other Page Imports *************** */
+
+/**
+ *
+ *
+ * Main Component { Functional }
+ * ------------------------------------------------------------------------------
+ * @param {Object} props - React component props including { children }
+ *
+ */
+/** ********************* Page Main Component */
+export default function PortfolioEntry({ title, description, url, image }) {
+    // ## Get Contexts
+    // -----------------------
+
+    // ## Javascript Variables
+    // -----------------------
+
+    // ## React Hooks { useState, useEffect, useRef, etc ... }
+    // -----------------------
+
+    // ## Function Return
+    return (
+        <div className="portfolio-entry-block">
+            <h2 style={ { marginTop: "0" } }><TextShuffler textInput={ title } /></h2>
+            <img src={ image } alt="" />
+            <span>
+                <TextShuffler textInput={ description } />
+            </span>
+            <div className="hero-ctas-section">
+                <a href={ url } target="_blank">Visit Site</a>
+            </div>
+        </div>
+    );
+    // -----------------------
+};
+/** ~ End Page Main Component *************** */
+
+// export default Header;

components/portfolioEntries.json

@@ -0,0 +1,8 @@
+[
+    {
+        "title": "Next 7 Web Engine",
+        "description": "Next 7 is an all-in-one web engine featuring a web page builder and a content management system",
+        "url": "https://next7.io",
+        "image": "/images/next7screenshot.png"
+    }
+]

layouts/general_layout/GeneralHeader.jsx

@@ -7,6 +7,7 @@ const GeneralHeader = () => {
             <nav>
                 <a href="/">Home</a>
                 <a href="/about">About Me</a>
+                <a href="/work">My Work</a>
                 <a href='/documents/Benjamin_Toby_CV.pdf' target="_blank">My Resume</a>
                 <a href="/contact">Contact Me</a>
             </nav>

pages/contact.jsx

@@ -20,13 +20,13 @@ const contact = () => {
                 <TextShuffler textInput="Let's talk" />
             </span>
 
-            <form autoComplete='on' onSubmit={(e) => { submitContactForm(e, setSuccess) }}>
+            <form autoComplete='on' onSubmit={ (e) => { submitContactForm(e, setSuccess) } }>
                 <input type="text" placeholder='Your Name' autoComplete='name' required />
                 <input type="email" placeholder='Your Email Address' autoComplete='email' required />
                 <textarea name="message" id="contact-form-message" cols="30" rows="10" placeholder='Message'></textarea>
                 <button type="submit">Submit</button>
-                {success === "Success" && <div className='message-response'>Success!!! <button onClick={() => { window.location.reload() }}>Reload</button></div>}
+                { success === "Success" && <div className='message-response'>Success!!! <button onClick={ () => { window.location.reload() } }>Reload</button></div> }
-                {success === "Failed" && <div className='message-response failed'>Failed <button onClick={() => { window.location.reload() }}>Reload</button></div>}
+                { success === "Failed" && <div className='message-response failed'>Failed <button onClick={ () => { window.location.reload() } }>Reload</button></div> }
             </form>
         </GeneralLayout>
     )

pages/work.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Head from 'next/head'
+import TextShuffler from '../components/actions/TextShuffler'
+import GeneralLayout from '../layouts/general_layout/GeneralLayout'
+import PortfolioEntry from '../components/PortfolioEntry'
+
+const about = () => {
+    const portfolioEntries = require("../components/portfolioEntries.json");
+
+    return (
+        <GeneralLayout>
+            <Head>
+                <title>My Work | Tben</title>
+                <meta name="description" content="Some of my Work" />
+            </Head>
+            <h1><TextShuffler textInput="My Work" /></h1>
+            <span className='hero-sub-text' style={ { marginTop: "-30px", marginBottom: "20px", display: "block" } }>
+                <TextShuffler textInput="Some of my work ..." />
+            </span>
+
+            <div className='portfolio-entries-block'>
+                { portfolioEntries.map(entry => <PortfolioEntry key={ entry.title } title={ entry.title } description={ entry.description } url={ entry.url } image={ entry.image } />) }
+
+            </div>
+        </GeneralLayout>
+    )
+}
+
+export default about

styles/main.css

@@ -243,6 +243,26 @@ nav a:hover {
     height: 100%;
 }
 
+/*############################################# -- Portfolio page */
+.portfolio-entries-block {
+    display: flex;
+    align-items: flex-start;
+    gap: 40px;
+    flex-wrap: wrap;
+}
+
+.portfolio-entry-block {
+    max-width: 700px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 20px;
+}
+
+.portfolio-entry-block img {
+    width: 100%;
+    height: 300px;
+    object-fit: contain;
+    object-position: left top;
+}
 /*############################################# -- Contact Forms */
 form {
     margin-top: 40px;