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:
Benjamin Toby
2023-10-24 18:59:00 +01:00
parent d163438f7b
commit b9364a702c
68 changed files with 4701 additions and 4697 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/PortfolioEntry.jsx
+54 -54
View File
@@ -1,54 +1,54 @@
/**
*
*
* 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>
<div className="portfolio-image-wrapper">
<img src={ image } alt="" className="portfolio-image" />
</div>
<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;
/**
*
*
* 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>
<div className="portfolio-image-wrapper">
<img src={ image } alt="" className="portfolio-image" />
</div>
<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/actions/TextShuffler.tsx
+98 -98
View File
@@ -1,98 +1,98 @@
"use client";
import React, { FC, useEffect, useState, ReactElement } from "react";
import { gsap } from "gsap";
type ChildProps = {
textInput: string;
delay?: number;
};
const TextShuffler: FC<ChildProps> = ({ textInput, delay }): ReactElement => {
let [readyState, setReadyState] = useState(false);
const spanRef = React.useRef<HTMLElement>(null);
useEffect(() => {
const spanObserver = new IntersectionObserver(
(entries, observer) => {
if (entries[0].isIntersecting) {
if (delay) {
setTimeout(() => {
setReadyState(true);
}, delay);
} else {
setReadyState(true);
}
if (spanRef.current) observer.unobserve(spanRef.current);
}
},
{
rootMargin: "0px 0px 0px 0px",
}
);
if (spanRef.current) spanObserver.observe(spanRef.current);
}, []);
useEffect(() => {
if (!readyState) return;
let chars = textInput.split("");
let charsSpans = chars.map((char) => `<span style="opacity:0">${char}</span>`);
if (spanRef?.current?.innerHTML) spanRef.current.innerHTML = charsSpans.join("");
if (spanRef.current) {
gsap.to(spanRef.current, {
opacity: 1,
duration: 1,
});
}
let textSpans: NodeList | null = spanRef.current ? spanRef.current.querySelectorAll("span") : null;
requestAnimationFrame(() => {
if (textSpans) {
textSpans.forEach((span) => {
gsap.to(span, {
opacity: 1,
duration: Math.random() * 1.5,
});
});
textSpans.forEach((span) => {
gsap.killTweensOf(span, "opacity");
gsap.to(span, {
opacity: 0,
duration: Math.random() * 1.5,
delay: Math.random() * 0.5,
});
});
textSpans.forEach((span) => {
gsap.killTweensOf(span, "opacity");
gsap.to(span, {
opacity: 1,
duration: Math.random() * 1.5,
delay: Math.random(),
});
});
}
});
}, [readyState]);
return (
<span
className="shuffled-text-span"
ref={spanRef}
style={{ opacity: 0 }}
>
{textInput}
</span>
);
};
export default TextShuffler;
"use client";
import React, { FC, useEffect, useState, ReactElement } from "react";
import { gsap } from "gsap";
type ChildProps = {
textInput: string;
delay?: number;
};
const TextShuffler: FC<ChildProps> = ({ textInput, delay }): ReactElement => {
let [readyState, setReadyState] = useState(false);
const spanRef = React.useRef<HTMLElement>(null);
useEffect(() => {
const spanObserver = new IntersectionObserver(
(entries, observer) => {
if (entries[0].isIntersecting) {
if (delay) {
setTimeout(() => {
setReadyState(true);
}, delay);
} else {
setReadyState(true);
}
if (spanRef.current) observer.unobserve(spanRef.current);
}
},
{
rootMargin: "0px 0px 0px 0px",
}
);
if (spanRef.current) spanObserver.observe(spanRef.current);
}, []);
useEffect(() => {
if (!readyState) return;
let chars = textInput.split("");
let charsSpans = chars.map((char) => `<span style="opacity:0">${char}</span>`);
if (spanRef?.current?.innerHTML) spanRef.current.innerHTML = charsSpans.join("");
if (spanRef.current) {
gsap.to(spanRef.current, {
opacity: 1,
duration: 1,
});
}
let textSpans: NodeList | null = spanRef.current ? spanRef.current.querySelectorAll("span") : null;
requestAnimationFrame(() => {
if (textSpans) {
textSpans.forEach((span) => {
gsap.to(span, {
opacity: 1,
duration: Math.random() * 1.5,
});
});
textSpans.forEach((span) => {
gsap.killTweensOf(span, "opacity");
gsap.to(span, {
opacity: 0,
duration: Math.random() * 1.5,
delay: Math.random() * 0.5,
});
});
textSpans.forEach((span) => {
gsap.killTweensOf(span, "opacity");
gsap.to(span, {
opacity: 1,
duration: Math.random() * 1.5,
delay: Math.random(),
});
});
}
});
}, [readyState]);
return (
<span
className="shuffled-text-span"
ref={spanRef}
style={{ opacity: 0 }}
>
{textInput}
</span>
);
};
export default TextShuffler;
components/blogposts/001/index.jsx
+129 -129
View File
@@ -1,129 +1,129 @@
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
import React from "react";
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
*/
export default function Homepage(props) {
// ## Get Contexts
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Javascript Variables
/** ********************* Head Items */
let head = (
<React.Fragment>
<title>Showmerebates | Home</title>
<meta name="description" content="Find great property rebates" />
</React.Fragment>
);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## React Hooks { useState, useEffect, useRef, etc ... }
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Function Return
return (
<React.Fragment>
<GeneralLayout head={ head } user={ props.user }>
<main>
<Hero />
<HowItWorks />
<FeaturedProperties data={ props.data } user={ props.user } />
<AboutUsSection />
{ !props.user && <LoginPromptPopup user={ props.user } /> }
</main>
</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 getServerSideProps({ req, res, query }) {
// ## Environment processes
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## User Authentication
const user = await userAuth(req, res);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Page/Site Data Data Fetching
let properties = await dbHandler(`
SELECT
ListingKeyNumeric,City,RoomsTotal,BathroomsFull,BathroomsTotalInteger,BedroomsTotal,UnparsedAddress,BuildingAreaTotal,ListPrice,PostalCode
FROM
utahapidata
WHERE
PhotosCount > 0 AND ListPrice > 0 AND BedroomsTotal > 0 LIMIT 3
`);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Server Props Return
return {
props: {
user: user,
data: properties,
},
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
}
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
import React from "react";
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
*/
export default function Homepage(props) {
// ## Get Contexts
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Javascript Variables
/** ********************* Head Items */
let head = (
<React.Fragment>
<title>Showmerebates | Home</title>
<meta name="description" content="Find great property rebates" />
</React.Fragment>
);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## React Hooks { useState, useEffect, useRef, etc ... }
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Function Return
return (
<React.Fragment>
<GeneralLayout head={ head } user={ props.user }>
<main>
<Hero />
<HowItWorks />
<FeaturedProperties data={ props.data } user={ props.user } />
<AboutUsSection />
{ !props.user && <LoginPromptPopup user={ props.user } /> }
</main>
</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 getServerSideProps({ req, res, query }) {
// ## Environment processes
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## User Authentication
const user = await userAuth(req, res);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Page/Site Data Data Fetching
let properties = await dbHandler(`
SELECT
ListingKeyNumeric,City,RoomsTotal,BathroomsFull,BathroomsTotalInteger,BedroomsTotal,UnparsedAddress,BuildingAreaTotal,ListPrice,PostalCode
FROM
utahapidata
WHERE
PhotosCount > 0 AND ListPrice > 0 AND BedroomsTotal > 0 LIMIT 3
`);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Server Props Return
return {
props: {
user: user,
data: properties,
},
};
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
}
components/blogposts/SingleBlogPostPreset.jsx
+73 -73
View File
@@ -1,73 +1,73 @@
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
import React from "react";
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
*/
export default function SingleBlogPostPreset(props) {
// ## Get Contexts
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Javascript Variables
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## React Hooks { useState, useEffect, useRef, etc ... }
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Function Return
return (
<React.Fragment>
<GeneralLayout head={ head } user={ props.user }>
<main>
<Hero />
<HowItWorks />
<FeaturedProperties data={ props.data } user={ props.user } />
<AboutUsSection />
{ !props.user && <LoginPromptPopup user={ props.user } /> }
</main>
</GeneralLayout>
</React.Fragment>
);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
};
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
import React from "react";
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
*/
export default function SingleBlogPostPreset(props) {
// ## Get Contexts
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Javascript Variables
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## React Hooks { useState, useEffect, useRef, etc ... }
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
// ## Function Return
return (
<React.Fragment>
<GeneralLayout head={ head } user={ props.user }>
<main>
<Hero />
<HowItWorks />
<FeaturedProperties data={ props.data } user={ props.user } />
<AboutUsSection />
{ !props.user && <LoginPromptPopup user={ props.user } /> }
</main>
</GeneralLayout>
</React.Fragment>
);
/** ********************************************** */
/** ********************************************** */
/** ********************************************** */
};
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
components/blogposts/index.json
+6 -6
View File
@@ -1,6 +1,6 @@
[
{
"title": "",
"id": 1
}
]
[
{
"title": "",
"id": 1
}
]
components/portfolioEntries.json
+26 -26
View File
@@ -1,26 +1,26 @@
[
{
"title": "Showme Rebates",
"description": "Showmerebates curates agents' rebates/cashback on properties in Utah, Texas, Florida, and Kansas states",
"url": "https://showmerebates.com/",
"image": "/images/showmerebates.jpg"
},
{
"title": "Summit Lending",
"description": "Summit Lending is a mortgage broker offering competitive rates for home loans of all sorts",
"url": "https://summitlending.com",
"image": "/images/summit-lending.jpg"
},
{
"title": "Datasquirel",
"description": "Datasquirel is a fast and efficient cloud-based SQL data management system",
"url": "https://datasquirel.com",
"image": "/images/datasquirel-img.jpg"
},
{
"title": "Homeruntoken",
"description": "Real Estate Investing Made Easy",
"url": "https://homeruntoken.vercel.app/",
"image": "/images/Homeruntoken-graphic.jpg"
}
]
[
{
"title": "Showme Rebates",
"description": "Showmerebates curates agents' rebates/cashback on properties in Utah, Texas, Florida, and Kansas states",
"url": "https://showmerebates.com/",
"image": "/images/showmerebates.jpg"
},
{
"title": "Summit Lending",
"description": "Summit Lending is a mortgage broker offering competitive rates for home loans of all sorts",
"url": "https://summitlending.com",
"image": "/images/summit-lending.jpg"
},
{
"title": "Datasquirel",
"description": "Datasquirel is a fast and efficient cloud-based SQL data management system",
"url": "https://datasquirel.com",
"image": "/images/datasquirel-img.jpg"
},
{
"title": "Homeruntoken",
"description": "Real Estate Investing Made Easy",
"url": "https://homeruntoken.vercel.app/",
"image": "/images/Homeruntoken-graphic.jpg"
}
]
components/portfolioEntriesbackup.json
+32 -32
View File
@@ -1,32 +1,32 @@
[
{
"title": "Showme Rebates",
"description": "Property rebates in Utah",
"url": "https://dev.showmerebates.com/",
"image": "/images/showmerebates.jpg"
},
{
"title": "Guaranteed software",
"description": "software development agency",
"url": "https://guaranteed.software/",
"image": "/images/guaranteed.jpg"
},
{
"title": "Renition",
"description": "Curated top quality Apparel",
"url": "https://renition.com",
"image": "/images/renition-graphic.jpg"
},
{
"title": "Castcord",
"description": "Social Media web app",
"url": "https://cast-cord.com",
"image": "/images/castcord-graphic.jpg"
},
{
"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/next-7-graphic-min.jpg"
}
]
[
{
"title": "Showme Rebates",
"description": "Property rebates in Utah",
"url": "https://dev.showmerebates.com/",
"image": "/images/showmerebates.jpg"
},
{
"title": "Guaranteed software",
"description": "software development agency",
"url": "https://guaranteed.software/",
"image": "/images/guaranteed.jpg"
},
{
"title": "Renition",
"description": "Curated top quality Apparel",
"url": "https://renition.com",
"image": "/images/renition-graphic.jpg"
},
{
"title": "Castcord",
"description": "Social Media web app",
"url": "https://cast-cord.com",
"image": "/images/castcord-graphic.jpg"
},
{
"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/next-7-graphic-min.jpg"
}
]