personal-site/app/(components)/HomepageComponent.tsx
2023-07-20 21:21:46 +01:00

57 lines
1.5 KiB
TypeScript

"use client";
import React from "react";
import Hero from "./Hero";
import AboutSection from "./AboutSection";
import { gsap } from "gsap";
import MyWorkSection from "./MyWorkSection";
import MySkillsSection from "./MySkillsSection";
import homepageTimeline from "../(utils)/homepage-timeline";
import { SiteContext } from "../../layouts/general_layout/GeneralLayout";
import ContactMeSection from "./ContactMeSection";
export type Project = {
id: number;
title: string;
description: string;
image?: string | null;
url?: string | null;
full_description?: string;
};
type ChildProps = {
projects: Project[];
};
export default function HomepageComponent({ projects }: ChildProps) {
const layoutContext: any = React.useContext(SiteContext);
if (layoutContext) layoutContext.projects = projects;
const comp = React.useRef<HTMLDivElement>(null);
React.useLayoutEffect(() => {
let ctx = gsap.context(() => {
homepageTimeline({ componentRef: comp });
}, comp);
return () => ctx.revert();
}, []);
return (
<React.Fragment>
<div
id="homepage-content-wrapper"
ref={comp}
className="z-0 xl:z-50 mb-32"
>
<Hero />
<AboutSection />
<MySkillsSection />
<MyWorkSection />
<ContactMeSection />
</div>
</React.Fragment>
);
}