-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Accidentally spent 3 hours trying to figure out out to use InView and…
… only logged on hour!
- Loading branch information
1 parent
6b9297b
commit 74fec01
Showing
18 changed files
with
460 additions
and
188 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,31 @@ | ||
| function Fallback() { | ||
| return ( | ||
| <div> | ||
| <h1>Container element not found!</h1> | ||
| <h2>Make sure the container element exists in the HTML file.</h2> | ||
| <p>If you are a user of the website, and refreshing the page doesn't fix this, please contact me at | ||
| [email protected]</p> | ||
| </div> | ||
| ) | ||
| import {renderToString} from "react-dom/server"; | ||
| import {FC} from "react"; | ||
|
|
||
| /** | ||
| * Interface defining the props for the Fallback component. | ||
| * @interface | ||
| * @property {string} supportEmail - The email address to contact for support. | ||
| */ | ||
| interface FallbackProps { | ||
| supportEmail: string; | ||
| } | ||
|
|
||
| /** | ||
| * Fallback component rendered when a container element is not found. | ||
| * This component is server-side rendered to a string. | ||
| * | ||
| * @param {FallbackProps} props - The props for the Fallback component. | ||
| * @returns {string} The HTML string of the Fallback component. | ||
| */ | ||
| export const Fallback: FC<FallbackProps> = ({supportEmail}) => { | ||
| const html = <div> | ||
| <h1>Container element not found!</h1> | ||
| <h2>Make sure the container element exists in the HTML file.</h2> | ||
| <p>If you are a user of the website, and refreshing the page doesn't fix this, please contact me at | ||
| {supportEmail}</p> | ||
| </div> | ||
|
|
||
| return renderToString(html); | ||
| } | ||
|
|
||
| export default Fallback; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,6 +4,7 @@ export const | |
| COMPANY_NAME = 'Kaden Frisk', | ||
| WEBSITE_TITLE = 'Kaden Frisk', | ||
| EMAIL = '[email protected]', | ||
| SUPPORT_EMAIL = '[email protected]', | ||
| GITHUB = 'https://github.com/ofluffydev', | ||
| NAV_LINKS = [ | ||
| {path: '/', label: 'Home'}, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import {ArrowRight, Book, Briefcase, Code} from 'lucide-react'; | ||
| import {FC, ReactElement} from "react"; | ||
| import {InView} from "react-intersection-observer"; | ||
|
|
||
| /** | ||
| * Props for the AboutMe component. | ||
| * @prop {string} name - The name of the person. | ||
| * @prop {string[]} roles - An array of roles or titles. | ||
| * @prop {string} [tinyText] - Optional small introductory text. | ||
| * @prop {string} [shortDescription] - Optional short description about the person. | ||
| * @prop {string} buttonText - Text for the main action button. | ||
| */ | ||
| interface AboutMeProps { | ||
| name: string; | ||
| roles: string[]; | ||
| tinyText?: string; | ||
| shortDescription?: string; | ||
| buttonText: string; | ||
| } | ||
|
|
||
| /** | ||
| * A functional component to display information about a person, including their name, roles, and a short description. | ||
| * It also showcases projects, services, and courses with a call-to-action button. | ||
| * | ||
| * @param {AboutMeProps} props - The props for the component. | ||
| * @returns {ReactElement} The AboutMe component. | ||
| */ | ||
| const AboutMe: FC<AboutMeProps> = ({ | ||
| name, roles, tinyText, shortDescription, buttonText | ||
| }: AboutMeProps): ReactElement => ( | ||
| <div className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20"> | ||
| <div className="container mx-auto px-4"> | ||
| <InView> | ||
| {({ inView, ref}) => ( | ||
| <p ref={ref} className={inView? 'animated-list-item' : ''}>{tinyText}</p> | ||
| )} | ||
| </InView> | ||
| <h1 className="animated-list-item text-4xl md:text-6xl font-bold mb-4">{name}</h1> | ||
| <p className="animated-list-item text-xl md:text-2xl mb-8">{roles.map((role, index) => <span | ||
| key={index}>{role}{index < roles.length - 1 ? ', ' : ''}</span>)}</p> | ||
|
|
||
| <div className="animated-list-item grid md:grid-cols-3 gap-8 mb-12"> | ||
| <div className="animated-list-item flex items-center"> | ||
| <Code className="animated-list-item mr-2"/> | ||
| <span>Showcasing My Projects</span> | ||
| </div> | ||
| <div className="animated-list-item flex items-center"> | ||
| <Briefcase className="animated-list-item mr-2"/> | ||
| <span>Offering Web Services</span> | ||
| </div> | ||
| <div className="animated-list-item flex items-center"> | ||
| <Book className="animated-list-item mr-2"/> | ||
| <span>Free Programming Courses</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p className="animated-list-item text-lg mb-8">{shortDescription}</p> | ||
|
|
||
| <button | ||
| className="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold flex items-center hover:bg-blue-100 transition-colors"> | ||
| {buttonText} | ||
| <ArrowRight className="ml-2"/> | ||
| </button> | ||
| </div> | ||
| </div>); | ||
|
|
||
| export default AboutMe; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { ReactNode, forwardRef } from 'react'; | ||
| import useFadeInOnScroll from "../hooks/fluffy-hooks.tsx"; | ||
|
|
||
| interface FadeInProps { | ||
| children: ReactNode; | ||
| delay?: number; | ||
| threshold?: number; | ||
| } | ||
|
|
||
| const FadeIn = forwardRef<HTMLDivElement, FadeInProps>( | ||
| ({ children, delay = 0, threshold = 0.1 }, forwardedRef) => { | ||
| const [internalRef, isVisible] = useFadeInOnScroll(threshold, delay); | ||
|
|
||
| const setRefs = (element: HTMLDivElement | null) => { | ||
| (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = element; | ||
|
|
||
| if (typeof forwardedRef === 'function') { | ||
| forwardedRef(element); | ||
| } else if (forwardedRef) { | ||
| (forwardedRef).current = element; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| ref={setRefs} | ||
| className={`transition-opacity duration-1000 ease-out ${ | ||
| isVisible ? 'opacity-100' : 'opacity-0' | ||
| }`} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| FadeIn.displayName = 'FadeIn'; | ||
|
|
||
| export default FadeIn; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import {ReactElement} from "react"; | ||
|
|
||
| /** | ||
| * `Hero` component props definition. | ||
| */ | ||
| interface HeroProps { | ||
| /** Text to display as the main greeting or welcome message. */ | ||
| welcomeText: string; | ||
| /** Text to display as a secondary message or information. */ | ||
| secondaryText: string; | ||
| } | ||
|
|
||
| /** | ||
| * Renders a Hero section with a dynamic background gradient and text. | ||
| * | ||
| * This component displays a full-screen hero section with a colorful, animated background gradient. | ||
| * It shows a welcome message and a secondary text, both of which are customizable through props. | ||
| * | ||
| * @param {HeroProps} props - The props for the Hero component. | ||
| * @returns {ReactElement} The Hero section as a React element. | ||
| */ | ||
| const Hero = ({welcomeText, secondaryText}: HeroProps): ReactElement => { | ||
| return (<div className="relative h-screen flex items-center justify-center overflow-hidden"> | ||
| <div | ||
| className="absolute inset-0 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 animate-gradient-x"></div> | ||
|
|
||
| <div className="relative z-10 text-center"> | ||
| <h1 className="text-6xl font-bold text-white mb-4 animated-list-item"> | ||
| {welcomeText} | ||
| </h1> | ||
| <p className="text-xl text-white animate-fade-in-up animated-list-item "> | ||
| {secondaryText} | ||
| </p> | ||
| </div> | ||
| </div>); | ||
| }; | ||
|
|
||
| export default Hero; |
Oops, something went wrong.