tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Tben
2023-07-19 15:49:15 +01:00
parent b18cbba53d
commit 550d54fdd7
67 changed files with 3098 additions and 2397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/404.jsx
-20
View File
@@ -1,20 +0,0 @@
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 → pages/_app.tsx
+3 -1
View File
@@ -2,7 +2,9 @@ import "../styles/main.css";
import "../styles/tw_main.css";
import { Fragment } from "react";
function MyApp({ Component, pageProps }) {
import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
return (
<Fragment>
<Component {...pageProps} />
pages/_document.js
+5 -4
View File
@@ -5,11 +5,12 @@ export default function Document() {
return (
<Html>
<Head>
{/* <script src="https://unpkg.com/@barba/core"></script> */}
{/* <script src="/scripts/swup.js"></script> */}
<script src="/scripts/main.js" defer></script>
<script
src="/scripts/main.js"
defer
></script>
</Head>
<body className="bg-black">
<body className="w-full">
<Main />
<NextScript />
</body>
pages/about.jsx
-139
View File
@@ -1,139 +0,0 @@
import React from 'react'
import Head from 'next/head'
import TextShuffler from '../components/actions/TextShuffler'
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
import threeJsAnimations from '../functions/frontend/threeJsAnimations'
const about = () => {
return (
<GeneralLayout pageName="about">
<Head>
<title>About Me</title>
<meta name="description" content="Ben of all trade, master of all! Learn more about me" />
</Head>
<h1><TextShuffler textInput="Ben of all trade, master of all!" /></h1>
<span className='hero-sub-text'>
<TextShuffler textInput="Quick learner, adaptable, problem solver, curious. I strive to know the system, rather than the status quo. My credo is: no problem too great, no knowledge too vast, no logic too complex. I thrive in difficult situations and complex hurdles: problem solving is now second nature to me: if you can think it, it can be done." delay={ 500 } />
</span>
<div className='w-full h-6'></div>
<section>
<h2><TextShuffler textInput="Web Dev Tech Stack" /></h2>
<ul style={ { maxWidth: "800px" } }>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="HTML, CSS, Javascript" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="The basics, the bedrock of all websites." />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="React JS" /></h3>
<span className='opacity-50'>
<TextShuffler textInput=" JavaScript library for high-performance web applications" />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Next JS" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="High performance React and Node js web framework for building blazing flast and performant web applications" />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Tailwind CSS" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Lighting fast mobile first styling" />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Node JS" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="JavaScript runtime for the server. For creating backend architectures and APIs" />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Ubuntu Linux" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Secure server management with ubuntu and Linux" />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Nginx" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Super secure web server, reverse proxy and load balancer" />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="MySQL" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Tried and tested data storage, querying, and management." />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Git and Github" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Version control" />
</span>
</li>
</ul>
</section>
<section>
<h2><TextShuffler textInput="UI/UX tech Stack" /></h2>
<ul style={ { maxWidth: "800px" } }>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Adobe Photoshop" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Web design, image manipulation, image compositing, and more" />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Adobe Illustrator" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Vector graphic of all types" />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Figma" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Web, UI, UX design." />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Affinity Designer" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Vector graphics." />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="After Effects" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Motion graphics and animation" />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Adobe XD" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="UI/UX design" />
</span>
</li>
<li>
<h3 className="tech-stack-header"><TextShuffler textInput="Webflow" /></h3>
<span className='opacity-50'>
<TextShuffler textInput="Visual Web coding" />
</span>
</li>
</ul>
</section>
<div className="hero-ctas-section">
<a href='/documents/Benjamin_Toby_CV-updated.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/api/contactForm.js
-57
View File
@@ -1,57 +0,0 @@
/**
*
*
* Imports
* ------------------------------------------------------------------------------
*
*/
const fs = require("fs");
const nodemailer = require("nodemailer");
/** ********************* Functions and Other API Imports */
let transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 465,
secure: true,
auth: {
user: "benoti.san@gmail.com",
pass: "dkxxbvomzyqfyfuq",
},
});
/**
*
*
* API handler
* ------------------------------------------------------------------------------
* @param {Object} req - http incoming request
* @param {Object} res - http response
*
*/
export default async function handler(req, res) {
/** ********************* Get Page Data */
if (req.method === "POST") {
let name = req.body.name;
let email = req.body.email;
let message = req.body.message;
console.log("Message Sending ...");
try {
// send mail with defined transport object
let info = await transporter.sendMail({
from: email, // sender address
to: "benoti.san@gmail.com, benoti.sanchez@gmail.com", // list of receivers
subject: "Tben.me | Client Message", // Subject line
text: "Hello from tben",
html: `<h1>Message from ${name} | ${email}</h1><h4>Name:</h4><p>${name}</p><h4>Email:</h4><p>${email}</p><h4>Message:</h4><p>${message}</p>`, // html body
});
console.log("Message sent: %s", info.messageId);
res.json({ msg: "Success", info: info });
} catch (error) {
console.log(error);
res.json({ msg: "Failed" });
}
}
}
pages/api/contactForm.ts
+49
View File
@@ -0,0 +1,49 @@
/**
* Imports
*/
const fs = require("fs");
const sanitizeHtml = require("sanitize-html");
const nodemailer = require("nodemailer");
import sanitizeHtmlOptions from "../../functions/backend/sanitizeHtmlOptions";
import { NextApiRequest, NextApiResponse } from "next";
let transporter = nodemailer.createTransport({
host: process.env.OUTLOOK_HOST,
port: 587,
auth: {
user: process.env.OUTLOOK_EMAIL,
pass: process.env.OUTLOOK_EMAIL_PASSWORD,
},
});
/**
* API handler
*
*/
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === "POST") {
let name = req.body.name;
let email = req.body.email;
let message = req.body.message;
const html = `<h1>Message from ${name} | ${email}</h1><h4>Name:</h4><p>${name}</p><h4>Email:</h4><p>${email}</p><h4>Message:</h4><p>${message}</p>`;
const sanitizedHtml = sanitizeHtml(html, sanitizeHtmlOptions);
try {
let info = await transporter.sendMail({
from: email,
to: "benoti.san@gmail.com, benoti.sanchez@gmail.com",
subject: "Tben.me | Client Message",
text: "Hello from tben",
html: sanitizedHtml,
});
console.log("Message sent: %s", info.messageId);
res.json({ msg: "Success", info: info });
} catch (error) {
console.log(error);
res.json({ msg: "Failed" });
}
}
}
pages/blog/[single].jsx
-302
View File
@@ -1,302 +0,0 @@
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
import React from "react";
import Head from "next/head";
const https = require("https");
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
import GeneralLayout from "../../layouts/general_layout/GeneralLayout";
import TextShuffler from "../../components/actions/TextShuffler";
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
*/
export default function BlogIndex({ blogPost }) {
// ## Get Contexts
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Javascript Variables
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## React Hooks { useState, useEffect, useRef, etc ... }
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Function Return
return (
<React.Fragment>
<Head>
<title>{ blogPost.title } | Tben.me Blog</title>
<meta name="description" content={ blogPost.excerpt } />
</Head>
<GeneralLayout>
<div className="flex flex-col items-start gap-2 mb-8 max-w-3xl">
<button
className="bg-transparent text-white/50 border-2 border-solid border-white/20"
onClick={ (e) => {
window.history.back()
} }
>Back</button>
<h1 className="m-0"><TextShuffler textInput={ blogPost.title } /></h1>
<span className="text-lg">
<TextShuffler textInput={ blogPost.excerpt } />
</span>
<span className="text-base opacity-50">
<TextShuffler textInput={ blogPost.date_created.substring(0, 24) } />
</span>
</div>
<span className="flex flex-col items-start max-w-3xl w-full gap-4 text-lg" dangerouslySetInnerHTML={ { __html: blogPost.body } }></span>
</GeneralLayout>
</React.Fragment>
);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
};
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* Server Side Props or Static Props
* ==============================================================================
* @param {Object} req - http incoming request object
* @param {Object} res - http response object
* @param {Object} query - queries attached to the url
*/
export async function getStaticProps({ params }) {
// ## Environment processes
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## User Authentication
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Page/Site Data Data Fetching
const postsResponse = await new Promise((resolve, reject) => {
https
.get(
/** ********************* Get Options object */
{
host: "datasquirel.com",
path: `/api/query/get?db=tbenme&query=select+*+from+blog_posts+where+slug='${params.single}'`,
headers: {
Authorization: process.env.DATASQUIREL_API_KEY,
},
},
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************* Callback function */
(response) => {
var str = "";
// ## another chunk of data has been received, so append it to `str`
response.on("data", function (chunk) {
str += chunk;
});
// ## the whole response has been received, so we just print it out here
response.on("end", function () {
resolve(JSON.parse(str))
});
response.on("error", (err) => {
console.log(err);
});
}
)
.end();
});
// if (!postsResponse.success || !postsResponse.payload[0]) {
// return {
// redirect: {
// destination: "/blog",
// permanent: false
// }
// }
// }
const post = postsResponse.payload[0];
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Server Props Return
return {
props: {
blogPost: post,
},
revalidate: 3600
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
}
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* Server Side Props or Static Props
* ==============================================================================
* @param {Object} req - http incoming request object
* @param {Object} res - http response object
* @param {Object} query - queries attached to the url
*/
export async function getStaticPaths() {
/**
* Data fetching
*
* @abstract fetch date from the server or externnal source
*/
const postsResponse = await new Promise((resolve, reject) => {
https
.get(
/** ********************* Get Options object */
{
host: "datasquirel.com",
path: `/api/query/get?db=tbenme&query=select+slug+from+blog_posts`,
headers: {
Authorization: process.env.DATASQUIREL_API_KEY,
},
},
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************* Callback function */
(response) => {
var str = "";
// ## another chunk of data has been received, so append it to `str`
response.on("data", function (chunk) {
str += chunk;
});
// ## the whole response has been received, so we just print it out here
response.on("end", function () {
resolve(JSON.parse(str))
});
response.on("error", (err) => {
console.log(err);
});
}
)
.end();
});
// if (!postsResponse.success) {
// return {
// redirect: {
// destination: "/blog",
// permanent: false
// }
// }
// }
const posts = postsResponse.payload;
const paths = posts.map((entry) => {
return {
params: { single: entry.slug }
}
})
return {
paths: paths,
fallback: "blocking",
}
}
// Legacy
// { blogPost.body.map((element) => {
// reactKey++;
// if (element.tag.match(/img/i)) {
// return <img
// key={ reactKey }
// src={ element.src }
// width={ element.width }
// height={ element.height }
// className={ element.class }
// alt={ element.alt }
// style={ element.style }
// />
// }
// function construtElement(elementEntry) {
// if (elementEntry.children) {
// return (
// <elementEntry.tag
// key={ reactKey }
// className={ elementEntry.class ? elementEntry.class : null }
// href={ elementEntry.href }
// style={ element.style }
// >
// { elementEntry.children.map(child => construtElement(child)) }
// </elementEntry.tag>
// )
// }
// return (
// <elementEntry.tag
// key={ reactKey }
// className={ elementEntry.class ? elementEntry.class : null }
// href={ elementEntry.href }
// >
// { elementEntry.content }
// </elementEntry.tag>
// )
// }
// return construtElement(element);
// }
// ) }
pages/blog/[single].tsx
+178
View File
@@ -0,0 +1,178 @@
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
import React from "react";
import Head from "next/head";
import type { InferGetStaticPropsType, GetStaticProps, GetStaticPaths } from "next";
const datasquirel = require("datasquirel");
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
import GeneralLayout from "../../layouts/general_layout/GeneralLayout";
import TextShuffler from "../../components/actions/TextShuffler";
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
*/
export default function BlogIndex({ blogPost }: InferGetStaticPropsType<typeof getStaticProps>) {
// ## Get Contexts
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Javascript Variables
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## React Hooks { useState, useEffect, useRef, etc ... }
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Function Return
return (
<React.Fragment>
<Head>
<title>{blogPost.title} | Tben.me Blog</title>
<meta
name="description"
content={blogPost.excerpt}
/>
</Head>
<GeneralLayout>
<div className="flex flex-col items-start gap-2 mb-8 max-w-6xl w-full">
<button
className="bg-transparent text-white/50 border-2 border-solid border-white/20"
onClick={(e) => {
window.history.back();
}}
>
Back
</button>
<h1 className="m-0">
<TextShuffler textInput={blogPost.title} />
</h1>
<span className="text-lg">
<TextShuffler textInput={blogPost.excerpt} />
</span>
<span className="text-base opacity-50">
<TextShuffler textInput={blogPost.date_created.substring(0, 24)} />
</span>
</div>
<span
className="flex flex-col items-start max-w-6xl w-full gap-4 text-xl"
dangerouslySetInnerHTML={{ __html: blogPost.body }}
></span>
</GeneralLayout>
</React.Fragment>
);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
}
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* Server Side Props or Static Props
* ==============================================================================
*/
export const getStaticProps: GetStaticProps = async ({ params }) => {
// ## Environment processes
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## User Authentication
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Page/Site Data Data Fetching
const postsResponse = await datasquirel.get({
key: process.env.DATASQUIREL_API_KEY,
db: "tbenme",
query: `select * from blog_posts WHERE slug='${params?.single}'`,
});
const post = postsResponse.payload[0];
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Server Props Return
return {
props: {
blogPost: post,
},
revalidate: 3600,
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
};
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* Server Side Props or Static Props
* ==============================================================================
*/
export const getStaticPaths: GetStaticPaths = async () => {
/**
* Data fetching
*
* @abstract fetch date from the server or externnal source
*/
const postsResponse = await datasquirel.get({
key: process.env.DATASQUIREL_API_KEY,
db: "tbenme",
query: `select slug from blog_posts`,
});
const posts: { slug: string }[] | null = postsResponse.payload;
const paths = posts?.map((entry) => {
return {
params: { single: entry.slug },
};
});
return {
paths: paths ? paths : [],
fallback: "blocking",
};
};
pages/blog/index.jsx → pages/blog/index.tsx
+41 -81
View File
@@ -6,9 +6,8 @@
import React from "react";
import Head from "next/head";
// const contentful = require('contentful');
const https = require("https")
import type { InferGetStaticPropsType, GetStaticProps, GetStaticPropsContext } from "next";
const datasquirel = require("datasquirel");
/** ********************************************** */
/** ********************************************** */
@@ -31,7 +30,7 @@ import TextShuffler from "../../components/actions/TextShuffler";
* ==============================================================================
* @param {Object} props - Server props
*/
export default function BlogIndex(props) {
export default function BlogIndex(props: InferGetStaticPropsType<typeof getStaticProps>) {
/**
* Get Contexts
*
@@ -65,29 +64,42 @@ export default function BlogIndex(props) {
<React.Fragment>
<Head>
<title>Blog | Tben.me</title>
<meta name="description" content="Tech talks" />
<meta
name="description"
content="Tech talks"
/>
</Head>
<GeneralLayout>
<h1 className="mb-8"><TextShuffler textInput="My Blog" /></h1>
<div className="flex flex-col items-start w-full gap-4">
{ props.blogPosts.map(post =>
<a
href={ `/blog/${post.slug}` }
className="flex flex-col items-start gap-2 w-full hover:bg-blue-600 border border-solid border-white/20 p-8 transition-all"
key={ post.slug }
>
<h2 className="m-0"><TextShuffler textInput={ post.title } /></h2>
<span className="opacity-80"><TextShuffler textInput={ post.excerpt } /></span>
<span className="text-sm opacity-50"><TextShuffler textInput={ post.date_created.substring(0, 24) } /></span>
</a>
) }
<div className="flex flex-col items-start max-w-6xl w-full">
<h1 className="mb-8">
<TextShuffler textInput="My Blog" />
</h1>
<div className="flex flex-col items-start w-full gap-4">
{props.blogPosts.map((post: { slug: string; title: string; excerpt: string; date_created: string }, index: number) => (
<a
key={index}
href={`/blog/${post.slug}`}
className="flex flex-col items-start gap-2 w-full hover:bg-blue-600 border border-solid border-white/20 p-8 transition-all bg-primary/10"
>
<h2 className="m-0">
<TextShuffler textInput={post.title} />
</h2>
<span className="opacity-80">
<TextShuffler textInput={post.excerpt} />
</span>
<span className="text-sm opacity-50">
<TextShuffler textInput={post.date_created.substring(0, 24)} />
</span>
</a>
))}
</div>
</div>
</GeneralLayout>
</React.Fragment>
);
/** ********************************************** */
};
}
/** ****************************************************************************** */
/** ****************************************************************************** */
@@ -97,27 +109,15 @@ export default function BlogIndex(props) {
/** ****************************************************************************** */
/**
* ==============================================================================
* Server Side Props or Static Props
* ==============================================================================
* @param {Object} req - http incoming request object
* @param {Object} res - http response object
* @param {Object} query - queries attached to the url
*/
export async function getStaticProps({ req, res, query }) {
export const getStaticProps: GetStaticProps = async ({ params }: GetStaticPropsContext) => {
/**
* User Auth
*
* @abstract grab user
*/
// const contentfulClient = contentful.createClient({
// space: process.env.CONTENTFUL_SPACE_ID,
// accessToken: process.env.CONTENTFUL_API_KEY,
// });
// const posts = await contentfulClient.getEntries()
// console.log(posts);
/** ********************************************** */
@@ -126,59 +126,19 @@ export async function getStaticProps({ req, res, query }) {
*
* @abstract fetch date from the server or externnal source
*/
// let blogPosts = await httpFetch({
// options: {
// method:"DELETE",
// path: "/api/tben-blogs"
// },
// paradigm:"https"
// })
// console.log(blogPosts.data);
const postsResponse = await new Promise((resolve, reject) => {
https
.get(
/** ********************* Get Options object */
{
host: "datasquirel.com",
path: `/api/query/get?db=tbenme&query=select+title,slug,excerpt,date_created+from+blog_posts+limit+10`,
headers: {
Authorization: process.env.DATASQUIREL_API_KEY,
},
},
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************* Callback function */
(response) => {
var str = "";
// ## another chunk of data has been received, so append it to `str`
response.on("data", function (chunk) {
str += chunk;
});
// ## the whole response has been received, so we just print it out here
response.on("end", function () {
resolve(JSON.parse(str))
});
response.on("error", (err) => {
console.log(err);
});
}
)
.end();
const postsResponse = await datasquirel.get({
key: process.env.DATASQUIREL_API_KEY,
db: "tbenme",
query: "select title,slug,excerpt,date_created from blog_posts limit 10",
});
if (!postsResponse.success) {
return {
redirect: {
destination: "/",
permanent: false
}
}
permanent: false,
},
};
}
const posts = postsResponse.payload;
@@ -192,10 +152,10 @@ export async function getStaticProps({ req, res, query }) {
props: {
blogPosts: posts,
},
revalidate: 3600
revalidate: 3600,
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
}
};
pages/contact.jsx
+75 -23
View File
@@ -1,36 +1,88 @@
import React from 'react'
import Head from 'next/head'
import TextShuffler from '../components/actions/TextShuffler'
import submitContactForm from '../functions/frontend/submitContactForm'
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
import threeJsAnimations from '../functions/frontend/threeJsAnimations'
import React from "react";
import Head from "next/head";
import TextShuffler from "../components/actions/TextShuffler";
import submitContactForm from "../functions/frontend/submitContactForm";
import GeneralLayout from "../layouts/general_layout/GeneralLayout";
import threeJsAnimations from "../functions/frontend/threeJsAnimations";
const contact = () => {
let [success, setSuccess] = React.useState(false);
return (
<GeneralLayout>
<Head>
<title>Contact me</title>
<meta name="description" content="Get in touch" />
<meta
name="description"
content="Get in touch"
/>
</Head>
<h1><TextShuffler textInput="Great things await ..." /></h1>
<span className='hero-sub-text'>
<TextShuffler textInput="Let's talk" delay={ 500 } />
</span>
<div className="flex flex-col items-start max-w-6xl w-full">
<h1>
<TextShuffler textInput="Get in touch" />
</h1>
<span className="hero-sub-text">
<TextShuffler
textInput="Have a question? Want to work together? Send me a message!"
delay={500}
/>
</span>
<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 === "Failed" && <div className='message-response failed'>Failed <button onClick={ () => { window.location.reload() } }>Reload</button></div> }
</form>
<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 === "Failed" && (
<div className="message-response failed">
Failed{" "}
<button
onClick={() => {
window.location.reload();
}}
>
Reload
</button>
</div>
)}
</form>
</div>
</GeneralLayout>
)
}
);
};
export default contact
export default contact;
pages/index.jsx
-35
View File
@@ -1,35 +0,0 @@
import Head from 'next/head'
import React from 'react'
import TextShuffler from '../components/actions/TextShuffler'
import threeJsAnimations from '../functions/frontend/threeJsAnimations'
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
const index = () => {
return (
<React.Fragment>
<Head>
<title>Benjamin Toby | Fullstack developer, UI UX designer</title>
<meta name="description" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer, React Developer, Next JS developer, Node JS developer, Javascript Developer, Linux Ubuntu, DevOps, Nginx, MySQL developer, Freelancer" />
</Head>
<GeneralLayout pageName="home">
<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 Benjamin Toby, a fullstack web developer and UI/UX expert." delay={ 500 } />
</span>
<div className="hero-ctas-section">
<a href='/documents/Benjamin_Toby_CV-updated.pdf' download={ true }>See my resume</a>
<a href='https://www.linkedin.com/in/benjamin-toby/' target="_blank">Linkedin</a>
<a href='/contact' style={ {
backgroundColor: "transparent",
color: "white",
border: "2px solid white"
} }>Contact Me</a>
</div>
</GeneralLayout>
</React.Fragment>
)
}
export default index
pages/work.jsx
+34 -15
View File
@@ -1,8 +1,8 @@
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'
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 myWork = () => {
const portfolioEntries = require("../components/portfolioEntries.json");
@@ -11,21 +11,40 @@ const myWork = () => {
<GeneralLayout>
<Head>
<title>My Work | Tben</title>
<meta name="description" content="Some of my Work" />
<meta
name="description"
content="Some of my Work"
/>
</Head>
<h1><TextShuffler textInput="My Work" /></h1>
<span className='hero-sub-text'>
<TextShuffler textInput="Some of my work ..." delay={ 500 } />
</span>
<div className='portfolio-entries-block mt-4'>
{ portfolioEntries.map(entry => <PortfolioEntry key={ entry.title } title={ entry.title } description={ entry.description } url={ entry.url } image={ entry.image } />) }
<div className="flex flex-col items-start w-full max-w-6xl">
<h1>
<TextShuffler textInput="My Work" />
</h1>
<span className="hero-sub-text mb-2">
<TextShuffler
textInput="Some of the projects I've worked on"
delay={500}
/>
</span>
<div className="portfolio-entries-block mt-4">
{portfolioEntries.map((entry) => (
<PortfolioEntry
key={entry.title}
title={entry.title}
description={entry.description}
url={entry.url}
image={entry.image}
/>
))}
</div>
</div>
</GeneralLayout>
)
}
);
};
export default myWork
export default myWork;
// {
// "title": "Stirrmedia Social webapp",