Skip to content

Commit

Permalink
terminal update
Browse files Browse the repository at this point in the history
  • Loading branch information
@epenflow
epenflow committed Feb 4, 2024
1 parent 5b138b3 commit 4f39e5d
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 31 deletions.
4 changes: 3 additions & 1 deletion next.config.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
const nextConfig = {
reactStrictMode: false,
};

export default nextConfig;
120 changes: 102 additions & 18 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 <span className='w-[0.025rem] block h-full bg-black' />;
return <div className='w-[0.025rem] block h-full bg-[#C8C8C8]'></div>;
};
const DesktopNavbarList = () => {
return (
<div className='w-full flex justify-between h-full'>
<Each
of={navlist}
render={(item, index) =>
index === navlist.length - 1 ? (
<div
className='h-full w-full font-mono font-bold flex flex-row items-center justify-between text-center'
key={index}>
<Line />
<h1 className='w-full'>{item}</h1>
<Line />
</div>
) : (
<div
className='h-full w-full font-mono font-bold flex flex-row items-center justify-between text-center'
key={index}>
<Line />
<h1 className='w-full'>{item}</h1>
</div>
)
}
/>
</div>
);
};
const Navbar = () => {
const [isToggle, setToggle] = React.useState<boolean>(false);
const mobileNavbarContent = React.useRef<HTMLDivElement>(null);
const mobileNavbarList = React.useRef<(HTMLHeadingElement | null)[]>([]);
const list = document.querySelectorAll('#navbar-list');
const tl = gsap.timeline({ paused: true });
function handleToggle(ev: React.MouseEvent<HTMLButtonElement, 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 (
<header className='sticky top-0 z-50 px-10 py-2'>
<div className='h-10 w-full rounded-full border border-solid border-black bg-[#f2f2f2] hidden flex-row items-center justify-between px-14 capitalize lg:flex'>
<Link href={'/'}>
<h1>Home</h1>
</Link>
<Line />
<h1>gallery</h1>
<Line />
<h1>results</h1>
<Line />
<Link href={'/login'}>
<h1>login</h1>
</Link>
<Line />
<h1>location</h1>
<header
id='navbar__wrapper'
className='sticky top-0 z-[100] px-10 py-2 '>
<div
id='dekstop__navbar'
className='h-10 w-full rounded-md border border-solid border-[#C8C8C8] bg-[#f5f5f5] hidden flex-row items-center gap-2 px-2 capitalize lg:flex shadow-md'>
<div className='h-5 w-5 bg-black rounded-full'></div>
<DesktopNavbarList />
<div className='h-5 w-5 bg-black rounded-full'></div>
</div>
<div className='h-10 rounded-full border border-solid border-black bg-[#f2f2f2] lg:hidden flex items-center justify-between p-5'>
<div
id='mobile__navbar'
className='h-10 rounded-md border border-solid border-[#C8C8C8] bg-[#f5f5f5] shadow-md lg:hidden flex items-center justify-between p-5 relative'>
<h1 className='text-xs font-mono font-bold'>
archive//bangli--skatepark
</h1>
<Hamburger />
<button onClick={(ev) => handleToggle(ev)}>
<Hamburger
toggled={isToggle}
size={20}
/>
</button>
</div>

<div
id='mobile__navbar/content'
ref={mobileNavbarContent}
className='absolute bg-[#f5f5f5] h-screen w-screen left-0 top-0 -z-10 hidden justify-center flex-col p-2 text-6xl gap-2 lg:hidden'>
<Each
of={navlist}
render={(item, index) => (
<h1
key={index}
className='h-fit overflow-hidden w-fit'>
<span
id='navbar-list'
className='block p-2'>
{item}
</span>
</h1>
)}
/>
</div>
</header>
);
Expand Down
8 changes: 4 additions & 4 deletions src/components/Section/Gallery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ const Gallery = () => {
return (
<section className='h-screen max-h-screen w-screen relative overflow-hidden flex flex-row justify-center flex-wrap lg:flex-row p-2 gap-4'>
<div
className='flex flex-row w-full flex-wrap justify-center content-start lg:justify-start'
id='dekstop__items'>
id='dekstop__items'
className='flex flex-row w-full flex-wrap justify-center content-start lg:justify-start'>
{Array.from({ length: 4 }).map((_, index) => (
<Finder
key={index}
Expand All @@ -20,8 +20,8 @@ const Gallery = () => {
id='program__window'
className='absolute top-0 left-0 flex'>
<div
className='fixed right-5 bottom-5 flex flex-col gap-y-1 z-[60]'
id='minimized__window'></div>
id='minimized__window'
className='fixed right-5 bottom-5 flex flex-col gap-y-1 z-[60]'></div>
</div>
</section>
);
Expand Down
33 changes: 28 additions & 5 deletions src/components/Section/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<section className='h-fit p-2 flex flex-col lg:flex-row items-center justify-between'>
<h1 className='lg:text-8xl text-7xl py-2'>Prologue</h1>
<h1 className=''>{date.toUTCString()}</h1>
<section id='hero__wrapper'>
<div className='h-fit p-2 flex flex-col lg:flex-row items-center justify-between -z-20'>
<h1 className='lg:text-8xl text-7xl py-2'>Prologue</h1>
<h1 className=''>{date.toUTCString()}</h1>
</div>
<h1 className='text-center lg:text-8xl text-7xl py-4 uppercase font-mono flex items-center w-full justify-center'>
Bangli{' '}
<span className='h-14 w-14 rounded-full bg-black block' />{' '}
Skatepark
</h1>
</section>
);
};
Expand Down
44 changes: 41 additions & 3 deletions src/components/Section/Home.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<section className='w-screen lg:max-h-screen lg:h-screen flex flex-col lg:flex-row border-y border-solid border-black'>
<div className='flex items-center justify-center h-full flex-col w-full lg:w-1/2 relative overflow-hidden lg:border-none border-b border-solid border-black gap-2'>
<section
id='home__wrapper'
className='w-screen lg:max-h-screen lg:h-screen flex flex-col lg:flex-row border-y border-solid border-black bg-[#f2f2f2] z-20'>
<div
id='home__section-one'
className='flex items-center justify-center h-full flex-col w-full lg:w-1/2 relative overflow-hidden lg:border-none border-b border-solid border-black gap-2 -z-10'>
<h1 className=' text-center text-4xl lg:text-8xl uppercase mt-14 lg:mt-0'>
Bupati Cup Skateboard Competition
<br />
Expand All @@ -31,7 +67,9 @@ const Home = () => {
<HomeMarquee direction='right' />
</div>
</div>
<div className='flex flex-col h-full w-full lg:w-1/2 items-center justify-center border-l border-solid border-black gap-2 box-border overflow-hidden relative'>
<div
id='home__section-two'
className='flex flex-col h-full w-full lg:w-1/2 items-center justify-center border-l border-solid border-black gap-2 box-border overflow-hidden relative bg-[#f2f2f2] z-10'>
<h1 className='text-center text-4xl uppercase mt-5'>
background
</h1>
Expand Down

0 comments on commit 4f39e5d

Please sign in to comment.