From 4f39e5d7c889616e7d2a37f7b189497460527e6f Mon Sep 17 00:00:00 2001 From: epenflow Date: Sun, 4 Feb 2024 21:41:30 +0800 Subject: [PATCH] terminal update --- next.config.mjs | 4 +- src/components/Navbar.tsx | 120 ++++++++++++++++++++++++----- src/components/Section/Gallery.tsx | 8 +- src/components/Section/Hero.tsx | 33 ++++++-- src/components/Section/Home.tsx | 44 ++++++++++- 5 files changed, 178 insertions(+), 31 deletions(-) diff --git a/next.config.mjs b/next.config.mjs index 4678774..250b026 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,6 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + reactStrictMode: false, +}; export default nextConfig; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 6d93605..9127c9a 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -2,32 +2,116 @@ import Link from 'next/link'; import React from 'react'; import { Slant as Hamburger } from 'hamburger-react'; +import { IF } from './Conditional'; +import gsap from 'gsap'; +import Each from './Each'; +const navlist = ['Home', 'Gallery', 'Results', 'Login', 'Location']; + const Line = () => { - return ; + return
; +}; +const DesktopNavbarList = () => { + return ( +
+ + index === navlist.length - 1 ? ( +
+ +

{item}

+ +
+ ) : ( +
+ +

{item}

+
+ ) + } + /> +
+ ); }; const Navbar = () => { + const [isToggle, setToggle] = React.useState(false); + const mobileNavbarContent = React.useRef(null); + const mobileNavbarList = React.useRef<(HTMLHeadingElement | null)[]>([]); + const list = document.querySelectorAll('#navbar-list'); + const tl = gsap.timeline({ paused: true }); + function handleToggle(ev: React.MouseEvent) { + ev.stopPropagation(); + setToggle((prev) => !prev); + } + React.useLayoutEffect(() => { + tl.set(mobileNavbarContent.current, { + yPercent: -100, + backgroundColor: 'black', + }) + .set(list, { yPercent: 100 }) + .to(mobileNavbarContent.current, { + yPercent: 0, + display: 'flex', + backgroundColor: '#f2f2f2', + }) + .to(list, { yPercent: 0, stagger: 0.5 }); + + if (isToggle) { + tl.play(); + document.body.style.overflow = 'hidden'; + } + return () => { + tl.reverse(); + document.body.style.overflow = 'unset'; + }; + }, [isToggle]); return ( -
-
- -

Home

- - -

gallery

- -

results

- - -

login

- - -

location

+
+
+
+ +
-
+

archive//bangli--skatepark

- + +
+ +
+ ( +

+ + {item} + +

+ )} + />
); diff --git a/src/components/Section/Gallery.tsx b/src/components/Section/Gallery.tsx index 3791ed5..004076d 100644 --- a/src/components/Section/Gallery.tsx +++ b/src/components/Section/Gallery.tsx @@ -7,8 +7,8 @@ const Gallery = () => { return (
+ id='dekstop__items' + className='flex flex-row w-full flex-wrap justify-center content-start lg:justify-start'> {Array.from({ length: 4 }).map((_, index) => ( { id='program__window' className='absolute top-0 left-0 flex'>
+ id='minimized__window' + className='fixed right-5 bottom-5 flex flex-col gap-y-1 z-[60]'>
); diff --git a/src/components/Section/Hero.tsx b/src/components/Section/Hero.tsx index 1303f69..72122c7 100644 --- a/src/components/Section/Hero.tsx +++ b/src/components/Section/Hero.tsx @@ -1,14 +1,37 @@ +'use client'; import Image from 'next/image'; import React from 'react'; import HomeMarquee from './HomeMarquee'; - +import gsap from 'gsap'; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; +gsap.registerPlugin(ScrollTrigger); const Hero = () => { const date = new Date(); - + React.useLayoutEffect(() => { + gsap.to('#hero__wrapper', { + scrollTrigger: { + trigger: '#hero__wrapper', + start: 'top top', + end: 'bottom top', + pin: true, + scrub: true, + pinSpacing: false, + }, + backgroundColor: 'black', + color: '#f2f2f2', + }); + }, []); return ( -
-

Prologue

-

{date.toUTCString()}

+
+
+

Prologue

+

{date.toUTCString()}

+
+

+ Bangli{' '} + {' '} + Skatepark +

); }; diff --git a/src/components/Section/Home.tsx b/src/components/Section/Home.tsx index 8f0a43b..97f9a0b 100644 --- a/src/components/Section/Home.tsx +++ b/src/components/Section/Home.tsx @@ -1,16 +1,52 @@ +'use client'; import React from 'react'; import Image from 'next/image'; import Marquee from 'react-fast-marquee'; import HomeMarquee from './HomeMarquee'; import Link from 'next/link'; +import gsap from 'gsap'; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; const text = { one: 'We are part of the PSB (Persatuan Skateboarders Bali), an official organization that accommodates the skateboard community in the Bangli area (PSB Bangli) under the auspices of PSB, which accommodates all skateboard communities in Bali. PSB Bangli was formed and built by people who have a passion and a strong desire to develop extreme sports in the Bangli area, especially skateboarding, so that the potential of young people who love skateboarding can be channeled better and directed, so that the existing potential can be developed into achievements that will later make the name of the region, nation, and country proud in this field of sports.', two: 'With the success of the Bupati Cup Competition I event last year, we want to continue this positive event as an annual event that is always eagerly awaited by the entire skateboard community in Bali in general. With a sustainable event, our hope as regional managers is to be able to grow and develop skateboarding as a new alternative sport for the young generation of Bangli and Bali in carrying out their creative activities towards achievements where skateboarding has been recognized by the world as a sport of achievement that has entered official competitions both from Extreme Games, SEA Games, ASIAN Games and Olympiad. The support that has been given to our activities is the spirit that drives us to remain active and strive to give our best to build potential for successful skateboard athletes who can bring pride and honor to Kabupaten Bangli in local, national, and even international events as our biggest target to achieve in the future.', }; const Home = () => { + React.useLayoutEffect(() => { + const tl = gsap.timeline({ + scrollTrigger: { + trigger: '#home__wrapper', + start: 'top top', + pin: true, + scrub: true, + markers: true, + }, + }); + const ctx = gsap.context(() => { + tl.fromTo( + '#home__section-one', + { + yPercent: 100, + }, + { + yPercent: 0, + } + ).fromTo( + '#home__section-two', + { + yPercent: 100, + }, + { yPercent: 0 } + ); + }); + return () => ctx.revert(); + }, []); return ( -
-
+
+

Bupati Cup Skateboard Competition
@@ -31,7 +67,9 @@ const Home = () => {

-
+

background