Skip to content

Commit

Permalink
feat: update
Browse files Browse the repository at this point in the history
  • Loading branch information
@ezralazuardy
ezralazuardy committed Nov 30, 2024
1 parent 996b2f4 commit b4df722
Show file tree
Hide file tree
Showing 6 changed files with 208 additions and 119 deletions.
29 changes: 2 additions & 27 deletions app/gallery/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Tiles from "@/components/ui/gallery/tiles";
import Navigation from "@/components/ui/navigation";
import Header from "@/components/ui/gallery/header";
import Footer from "@/components/ui/gallery/footer";

export default function Page() {
return (
Expand All @@ -10,29 +11,3 @@ export default function Page() {
</>
);
}

function Header() {
return (
<div className="fixed z-40 top-0 start-0 w-full mt-10 px-10 text-center">
<div className="inline-block mx-auto py-2 px-6">
<Navigation />
</div>
</div>
);
}

function Footer() {
return (
<div className="fixed bottom-0 start-0 w-full mb-10 px-10 grid grid-cols-3">
<div className="flex justify-start font-extralight text-sm text-white pt-6">
by YUNIUS MUJIANTO
</div>
<div className="flex flex-col justify-center text-center font-extralight text-sm text-white/80 pt-6">
Copyright © Yunius Mujianto 2024. All rights reserved.
</div>
<div className="flex justify-end font-extralight text-sm text-white pt-6">
01/12/2024
</div>
</div>
);
}
147 changes: 144 additions & 3 deletions app/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@ import Link from "next/link";
import Spectral from "@/lib/fonts/spectral";
import BlurFade from "@/components/ui/blur-fade";
import Header from "@/components/ui/home/header";
import Footer from "@/components/ui/home/footer";
import Video from "@/components/ui/home/video";
import Contact from "@/components/ui/home/contact";
import ContentFirst from "@/components/ui/home/content-first";
import ContentSecond from "@/components/ui/home/content-second";
import Sponsor from "@/components/ui/home/sponsor";
import { Button } from "@/components/ui/button";
import Navigation from "@/components/ui/navigation";
import {
IconMail,
IconBrandWhatsapp,
IconBrandInstagram,
IconBrandFacebook,
IconBrandYoutube,
IconBrandTiktok,
IconChevronsDown,
IconMail,
} from "@tabler/icons-react";
import { useEffect, useRef } from "react";

Expand All @@ -33,6 +33,9 @@ export default function Home() {
const subtitle2 = useRef(null);
const button = useRef(null);
const hint = useRef(null);
const footerNavigation = useRef(null);
const footerSocial = useRef(null);
const footerCopyright = useRef(null);

useEffect(() => {
const b = blur?.current;
Expand All @@ -45,6 +48,9 @@ export default function Home() {
const st2 = subtitle2?.current;
const bt = button?.current;
const hn = hint?.current;
const fn = footerNavigation?.current;
const fs = footerSocial?.current;
const fc = footerCopyright?.current;

if (
!v ||
Expand All @@ -57,6 +63,9 @@ export default function Home() {
!st2 ||
!bt ||
!hn ||
!fn ||
!fs ||
!fc ||
typeof window === "undefined" ||
document === "undefined"
)
Expand Down Expand Up @@ -146,6 +155,36 @@ export default function Home() {
hn.classList.remove("opacity-100");
}

function showFooterNavigation() {
fn.classList.add("opacity-100");
fn.classList.remove("opacity-0");
}

function hideFooterNavigation() {
fn.classList.add("opacity-0");
fn.classList.remove("opacity-100");
}

function showFooterSocial() {
fs.classList.add("opacity-100");
fs.classList.remove("opacity-0");
}

function hideFooterSocial() {
fs.classList.add("opacity-0");
fs.classList.remove("opacity-100");
}

function showFooterCopyright() {
fc.classList.add("opacity-100");
fc.classList.remove("opacity-0");
}

function hideFooterCopyright() {
fc.classList.add("opacity-0");
fc.classList.remove("opacity-100");
}

const handleScroll = () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight;
Expand Down Expand Up @@ -202,6 +241,27 @@ export default function Home() {
} else {
hideHint();
}

// show or hide footer navigation
if (scrollPercent >= 99) {
showFooterNavigation();
} else {
hideFooterNavigation();
}

// show or hide footer social
if (scrollPercent >= 98) {
showFooterSocial();
} else {
hideFooterSocial();
}

// show or hide footer copyright
if (scrollPercent >= 97) {
showFooterCopyright();
} else {
hideFooterCopyright();
}
};

window.addEventListener("scroll", handleScroll);
Expand Down Expand Up @@ -289,7 +349,88 @@ export default function Home() {
></div>
<div ref={footer} className="hidden bottom-0 start-0 w-full z-50">
<div className="relative w-full">
<Footer />
<div className="pb-10 text-center flex flex-col text-gray-200">
<div
ref={footerNavigation}
className="opacity-100 transition-opacity duration-500 flex w-full justify-center"
>
<Navigation />
</div>
<div
ref={footerSocial}
className="opacity-100 transition-opacity duration-500 flex justify-center font-light text-md pt-6"
>
<div className="me-8">
<Link href="https://wa.me/6281225822417" target="_blank">
<IconMail
size={20}
stroke={1}
className="text-white/70 hover:scale-125 hover:text-white transition-all duration-300"
/>
</Link>
</div>
<div className="me-8">
<Link href="https://wa.me/6281225822417" target="_blank">
<IconBrandWhatsapp
size={20}
stroke={1}
className="text-white/70 hover:scale-125 hover:text-white transition-all duration-300"
/>
</Link>
</div>
<div className="me-8">
<Link
href="https://instagram.com/yunius_mujianto"
target="_blank"
>
<IconBrandInstagram
size={20}
stroke={1}
className="text-white/70 hover:scale-125 hover:text-white transition-all duration-300"
/>
</Link>
</div>
<div className="me-8">
<Link href="https://facebook.com/yunius.bridal" target="_blank">
<IconBrandFacebook
size={20}
stroke={1}
className="text-white/70 hover:scale-125 hover:text-white transition-all duration-300"
/>
</Link>
</div>
<div className="me-8">
<Link
href="https://tiktok.com/@yunius.mujianto"
target="_blank"
>
<IconBrandTiktok
size={20}
stroke={1}
className="text-white/70 hover:scale-125 hover:text-white transition-all duration-300"
/>
</Link>
</div>
<div className="me-0">
<Link
href="https://youtube.com/@yuniusmujiantofashiondesig9646"
target="_blank"
>
<IconBrandYoutube
size={20}
stroke={1}
className="text-white/70 hover:scale-125 hover:text-white transition-all duration-300"
/>
</Link>
</div>
</div>
<div
ref={footerCopyright}
className="opacity-100 transition-opacity duration-500 flex justify-center font-extralight text-sm text-white/80 pt-6"
>
Copyright © Yunius Mujianto 2024. All rights reserved.
</div>
</div>
</div>
</div>
<div className="absolute top-0 start-0 w-full min-h-screen z-50 pointer-events-none">
Expand Down
23 changes: 23 additions & 0 deletions components/ui/gallery/footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import BlurFade from "@/components/ui/blur-fade";

export default function Footer() {
return (
<div className="fixed bottom-0 start-0 w-full mb-10 px-10 grid grid-cols-3">
<div className="flex justify-start font-extralight text-sm text-white pt-6">
<BlurFade delay={0.25 + 1 * 0.05} inView>
by YUNIUS MUJIANTO
</BlurFade>
</div>
<div className="flex flex-col justify-center text-center font-extralight text-sm text-white/80 pt-6">
<BlurFade delay={0.25 + 2 * 0.05} inView>
Copyright © Yunius Mujianto 2024. All rights reserved.
</BlurFade>
</div>
<div className="flex justify-end font-extralight text-sm text-white pt-6">
<BlurFade delay={0.25 + 3 * 0.05} inView>
01/12/2024
</BlurFade>
</div>
</div>
);
}
11 changes: 11 additions & 0 deletions components/ui/gallery/header.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Navigation from "@/components/ui/navigation";

export default function Header() {
return (
<div className="fixed z-40 top-0 start-0 w-full mt-10 px-10 text-center">
<div className="inline-block mx-auto py-2 px-6">
<Navigation />
</div>
</div>
);
}
37 changes: 28 additions & 9 deletions components/ui/gallery/tiles.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as THREE from "three";
import { useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { Canvas, useFrame, useThree, extend } from "@react-three/fiber";
import { Image, Scroll, ScrollControls, useScroll } from "@react-three/drei";
import { proxy, useSnapshot } from "valtio";
Expand All @@ -17,15 +17,34 @@ const state = proxy({
});

export default function Tiles() {
const frame = useRef(null);
const canvas = useRef(null);

useEffect(() => {
const f = frame?.current;
const c = canvas?.current;

if (!f || !c || typeof window === "undefined" || document === "undefined")
return;

setTimeout(() => {
f.classList.add("opacity-100");
f.classList.remove("opacity-0");
}, 2000);
});

return (
<Canvas
style={{ width: "100%", height: "100vh" }}
gl={{ antialias: false }}
dpr={[1, 1.5]}
onPointerMissed={() => (state.clicked = null)}
>
<Items />
</Canvas>
<div ref={frame} className="opacity-0 transition-opacity duration-500">
<Canvas
ref={canvas}
style={{ width: "100%", height: "100vh" }}
gl={{ antialias: false, performance: "low-power" }}
dpr={[1, 1.5]}
onPointerMissed={() => (state.clicked = null)}
>
<Items />
</Canvas>
</div>
);
}

Expand Down
Loading

0 comments on commit b4df722

Please sign in to comment.