├── src
├── components
│ ├── Blog.js
│ ├── NotFound.js
│ ├── Home.js
│ ├── Footer.js
│ ├── About.js
│ ├── GalleryItem.js
│ ├── Navbar.js
│ ├── Gallery.js
│ ├── Featured.js
│ └── Hero.js
├── index.js
├── hooks
│ ├── useSmoothScroll.js
│ └── gsap.js
├── App.js
└── index.css
├── public
└── index.html
├── .gitignore
└── package.json
/src/components/Blog.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Blog = ({needFullHeight}) => {
4 | return
7 | }
8 |
9 | export default Blog
10 |
--------------------------------------------------------------------------------
/src/components/NotFound.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const NotFound = ({needFullHeight}) => {
4 | return
7 | }
8 |
9 | export default NotFound
10 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | immemorial
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/components/Home.js:
--------------------------------------------------------------------------------
1 | import About from "./About";
2 | import Featured from "./Featured";
3 |
4 | import Gallery from "./Gallery";
5 | import Hero from "./Hero";
6 |
7 |
8 | const Home = () => {
9 | return (
10 |
16 | )
17 | }
18 |
19 | export default Home;
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 |
13 | # misc
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 |
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import { BrowserRouter } from 'react-router-dom';
6 |
7 |
8 | const root = ReactDOM.createRoot(document.getElementById('root'));
9 | root.render(
10 |
11 |
12 |
14 |
15 | );
16 |
17 |
--------------------------------------------------------------------------------
/src/hooks/useSmoothScroll.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import Lenis from '@studio-freight/lenis';
3 | export const useSmoothScroll=()=>{
4 | const lenis = new Lenis({
5 | duration: 1.2,
6 | easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
7 | direction: 'vertical', // vertical,
8 | smooth: true,
9 | })
10 | useEffect(()=>{
11 | function raf(time) {
12 | lenis.raf(time)
13 | requestAnimationFrame(raf)
14 | }
15 | requestAnimationFrame(raf)
16 |
17 | },[])
18 | }
--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import {useGsapFooterHeadLine} from '../hooks/gsap'
3 | const Footer = () => {
4 |
5 | const footerRef =useRef(null)
6 | const footerHeadLineRef=useRef(null);
7 | useGsapFooterHeadLine(footerHeadLineRef,footerRef)
8 |
9 | return
10 | Bonjour
11 | ©{new Date().getFullYear()} immemorial Crafted by yours truly
12 |
13 | }
14 |
15 | export default Footer
16 |
--------------------------------------------------------------------------------
/src/components/About.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const About = () => {
4 | return
5 | About
6 | Explore the lost treasures and shining stars of the 1990s! Find your favorite cartoons, TV shows, music albums, & more with easy filtering functionality. With Immemorial, stay up-to-date with all your 90s favorites while turning back time.
7 | What's the only era that never seems to end? The 90s! Journey through appreciating items from 90s TV, music, and art. See if you remember old toys, cartoons, or prints of such. Indulge in some nostalgia before our world falls back into the dark ages.
8 |
9 | }
10 |
11 | export default About
12 |
--------------------------------------------------------------------------------
/src/components/GalleryItem.js:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import {useGsapGalleryTitle,useGsapGalleryCatagory,useGsapGalleryImage} from "../hooks/gsap"
3 |
4 | const GalleryItem = ({image}) => {
5 |
6 | const galleryTitleRef=useRef(null)
7 | const galleryCatagoryRef=useRef(null)
8 | const galleryImageRef=useRef(null)
9 |
10 | useGsapGalleryTitle(galleryTitleRef,galleryImageRef)
11 | useGsapGalleryCatagory(galleryCatagoryRef,galleryImageRef)
12 | useGsapGalleryImage(galleryImageRef)
13 |
14 | return (
15 |
16 |
17 | { image.title}
18 |
19 |
{image.category}
20 |
25 |
17 |
19 | }/>
20 | }/>
21 | }/>
22 | }/>
23 | } needFullHeight={true}/>
24 | } needFullHeight={true}/>
25 |
26 |
27 |
28 | )
29 | }
30 |
31 | export default App
32 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "immemorial",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@studio-freight/lenis": "^0.2.26",
7 | "@testing-library/jest-dom": "^5.16.5",
8 | "@testing-library/react": "^13.4.0",
9 | "@testing-library/user-event": "^13.5.0",
10 | "gsap": "^3.11.3",
11 | "react": "^18.2.0",
12 | "react-dom": "^18.2.0",
13 | "react-router-dom": "^6.4.5",
14 | "react-scripts": "5.0.1",
15 | "web-vitals": "^2.1.4"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "eslintConfig": {
24 | "extends": [
25 | "react-app",
26 | "react-app/jest"
27 | ]
28 | },
29 | "browserslist": {
30 | "production": [
31 | ">0.2%",
32 | "not dead",
33 | "not op_mini all"
34 | ],
35 | "development": [
36 | "last 1 chrome version",
37 | "last 1 firefox version",
38 | "last 1 safari version"
39 | ]
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 | import { Link } from "react-router-dom";
3 |
4 | import {useGsapDownStagger} from "../hooks/gsap"
5 |
6 | const Navbar = () => {
7 | const li1=useRef(null);
8 | const li2=useRef(null);
9 | const li3=useRef(null);
10 | const blogRef=useRef(null);
11 | const logoRef=useRef(null);
12 |
13 | const liArr=[li1,li2,li3];
14 | const favArr=[blogRef];
15 | const logoArr=[logoRef];
16 | useGsapDownStagger(liArr,0.9);
17 | useGsapDownStagger(logoArr,1.2)
18 | useGsapDownStagger(favArr,1.8);
19 |
20 |
21 | return
22 |
23 |
24 |
26 |
27 |
29 |
30 |
32 |
33 |
34 |
Immemorial
35 |
36 |
37 |
39 |
40 | }
41 | export default Navbar;
--------------------------------------------------------------------------------
/src/components/Gallery.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import GalleryItem from './GalleryItem';
3 | const images = [
4 | {
5 | id: 1,
6 | src: "https://images.pexels.com/photos/4842487/pexels-photo-4842487.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
7 | title: "Arcade playtime for 90's kids",
8 | category: "Arcade Games",
9 | },
10 | {
11 | id: 2,
12 | src: "https://images.pexels.com/photos/3356608/pexels-photo-3356608.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
13 | title: "No signal - no transmission",
14 | category: "TV",
15 | },
16 | {
17 | id: 3,
18 | src: "https://images.pexels.com/photos/12668238/pexels-photo-12668238.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
19 | title: "Retro Closures",
20 | category: "Boombox",
21 | },
22 | {
23 | id: 4,
24 | src:"https://images.pexels.com/photos/12204293/pexels-photo-12204293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
25 | title: "Vinyl Loveless Happiness",
26 | category: "Vinyl Record",
27 | },
28 | ];
29 |
30 | const Gallery = () => {
31 | return
32 | Gallery
33 |
34 | {images.map(image=>(
35 |
38 |
39 | }
40 |
41 | export default Gallery
42 |
--------------------------------------------------------------------------------
/src/components/Featured.js:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import {useGaspFeatureLeftShutterUnveil,useGaspFeatureRightShutterUnveil} from "../hooks/gsap"
3 |
4 | const Featured = () => {
5 | const featureRef=useRef(null)
6 | const featureLeftShutterRef=useRef(null)
7 | const featureRightShutterRef=useRef(null)
8 |
9 | useGaspFeatureLeftShutterUnveil(featureLeftShutterRef,featureRef)
10 |
11 | useGaspFeatureRightShutterUnveil(featureRightShutterRef,featureRef)
12 |
13 | return (
14 |
15 | Featured
16 |
17 |
18 |
90'S TELEPHONE
19 |
20 |
21 |
22 |
23 |
90'S CASSETTE PLYERPLYER
24 |
25 |
26 |
27 |
29 | );
30 | };
31 |
32 | export default Featured;
33 |
--------------------------------------------------------------------------------
/src/components/Hero.js:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import {useGsapShutterUnveil} from "../hooks/gsap"
3 | import {useGsapPhotoDroping,useGsapPhotoLevitate} from "../hooks/gsap"
4 |
5 | const Hero = () => {
6 | const heroRef=useRef(null);
7 | const shutter1=useRef(null);
8 | const shutter2=useRef(null);
9 |
10 | const photo1Ref=useRef(null)
11 | const photo2Ref=useRef(null)
12 | const photo3Ref=useRef(null)
13 | const photo4Ref=useRef(null)
14 | const photo5Ref=useRef(null)
15 |
16 |
17 | const photosArr=[photo1Ref,photo2Ref,photo3Ref,photo4Ref,photo5Ref]
18 | useGsapShutterUnveil(shutter1,0,heroRef)
19 | useGsapShutterUnveil(shutter2,0.2,heroRef)
20 | useGsapPhotoDroping(photosArr)
21 | useGsapPhotoLevitate(photosArr,heroRef)
22 |
23 | return
24 |
25 | Ethereal
27 |
28 | Canvas
30 |
31 |
36 |
37 |
40 |
41 |
42 |
45 |
46 |
49 |
50 |
51 |
54 |
56 | }
57 |
58 | export default Hero
59 |
--------------------------------------------------------------------------------
/src/hooks/gsap.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import gsap,{Expo} from "gsap";
3 | import {ScrollTrigger} from "gsap/ScrollTrigger";
4 |
5 | gsap.registerPlugin(ScrollTrigger);
6 |
7 | export const useGsapShutterUnveil = (item,delay=0,trig) => {
8 | useEffect(() => {
9 | const el = item.current;
10 | gsap.fromTo(
11 | el,
12 | {
13 | height:"100%",
14 | },
15 | {
16 | height:0,
17 | duration:2,
18 | case:Expo.easeInOut,
19 | delay:delay,
20 | scrollTrigger:{
21 | trigger:trig.current,
22 | toggleActions: "play reverse play reverse"
23 | }
24 | })
25 | }, []);
26 | };
27 |
28 | export const useGsapDownStagger=(arr,delay)=>{
29 | useEffect(()=>{
30 | const el= arr.map(item=>item.current)
31 | gsap.fromTo(el,{
32 | y:"-100%",
33 | opacity:0
34 | },{
35 | y:0,
36 | opacity:1,
37 | duration:1.5,
38 | stagger:0.1,
39 | case:Expo.easeIn,
40 | delay:delay
41 | })
42 | })
43 | }
44 |
45 | export const useGsapPhotoDroping=(arr)=>{
46 | useEffect(()=>{
47 | const el=arr.map((item)=>item.current)
48 | gsap.fromTo(el,{
49 | y:"-100vh",
50 | scale:0
51 | },{
52 | y:0,
53 | scale:1,
54 | duration:2,
55 | stagger:0.2,
56 | delay:2.7,
57 | case:Expo.easeInOut,
58 | })
59 | },[])
60 | }
61 | export const useGsapPhotoLevitate = (arr, trig) => {
62 | useEffect(() => {
63 | const el=arr.map(item=>item.current)
64 | gsap.fromTo(
65 | el,
66 | {
67 | y: 0,
68 | },
69 | {
70 | y: "-35%",
71 | ease:Expo.easeInOut,
72 | scrollTrigger:{
73 | trigger:trig.current,
74 | scrub:1,
75 | toggleActions:"play reverse play reverse"
76 | }
77 | }
78 | )
79 | }, []);
80 | };
81 |
82 |
83 | export const useGaspFeatureLeftShutterUnveil=(item,trig)=>{
84 |
85 | useEffect(()=>{
86 | const el=item.current;
87 | gsap.fromTo(
88 | el,
89 | {
90 | height:"100%"
91 | },
92 | {
93 | height:0,
94 | duration:1.3,
95 | ease:Expo.easeInOut,
96 | scrollTrigger:{
97 | trigger:trig.current,
98 | start:"top cemter",
99 | end:"bottom center",
100 | toggleActions:"play reverse play reverse"
101 | }
102 | }
103 | )
104 | })
105 | }
106 | export const useGaspFeatureRightShutterUnveil=(item,trig)=>{
107 | useEffect(()=>{
108 | const el=item.current;
109 | gsap.fromTo(
110 | el,
111 | {
112 | width:"100%"
113 | },
114 | {
115 | width:0,
116 | duration:1.3,
117 | ease:Expo.easeInOut,
118 | scrollTrigger:{
119 | trigger:trig.current,
120 | start:"top center",
121 | end:"bottom center",
122 | toggleActions:"play reverse play reverse"
123 | }
124 | }
125 |
126 | )
127 | },[])
128 | }
129 |
130 | export const useGsapGalleryImage=(item)=>{
131 | useEffect(()=>{
132 | const el=item.current
133 | gsap.fromTo(el,{
134 | x:0,
135 | width: 0,
136 | },
137 | {
138 | x:"30%",
139 | width:"100%",
140 | duration:1,
141 | ease:Expo.easeInOut,
142 | scrollTrigger:{
143 | trigger:el,
144 | start:"top center",
145 | end:"bottom top",
146 | toggleActions:"play reverse play reverse"
147 | }
148 | })
149 | },[])
150 | }
151 |
152 | export const useGsapGalleryTitle=(item,trig)=>{
153 | useEffect(()=>{
154 | const el=item.current
155 | gsap.fromTo(el,{
156 | x:"30%",
157 |
158 | },
159 | {
160 | x:0,
161 |
162 | duration:1,
163 | ease:Expo.easeInOut,
164 | scrollTrigger:{
165 | trigger:trig.current,
166 | start:"top center",
167 | end:"bottom top",
168 | toggleActions:"play reverse play reverse"
169 | }
170 | })
171 | },[])
172 | }
173 |
174 | export const useGsapGalleryCatagory=(item,trig)=>{
175 | useEffect(()=>{
176 | const el=item.current
177 | gsap.fromTo(el,{
178 | x:"-100%",
179 |
180 | },
181 | {
182 | x:0,
183 | duration:1,
184 | ease:Expo.easeInOut,
185 | scrollTrigger:{
186 | trigger:trig.current,
187 | start:"top center",
188 | end:"bottom top",
189 | toggleActions:"play reverse play reverse"
190 | }
191 | })
192 | },[])
193 |
194 | }
195 |
196 |
197 | export const useGsapFooterHeadLine=(item,trig)=>{
198 | useEffect(()=>{
199 | const el= item.current;
200 | gsap.fromTo(el,
201 | {
202 | y:"-100%"
203 | },
204 | {
205 | y:0,
206 | duration:1,
207 | scrollTrigger:{
208 | trigger:trig.current,
209 | toggleActions:"play"
210 | }
211 |
212 | })
213 | })
214 | }
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@200;300;400;500;600;700&family=Karla:wght@300;400;500;600;700&display=swap');
3 |
4 | @import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Syncopate:wght@400;700&display=swap');
5 |
6 | @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;,700;800;900&family=Karla:wght@300;400;500;600;700&display=swap');
7 | :root{
8 | --color-primary:#d53f41;
9 | --color-dark: #626262;
10 | --color-darker: #464646;
11 | --color-light: #dbd8d6;
12 | --color-lighter:#f5f0ec;
13 | }
14 | *{
15 | margin: 0;
16 | padding: 0;
17 | list-style:none;
18 | text-decoration: none;
19 | box-sizing: border-box;
20 | }
21 | html,body{
22 | overflow-x: hidden;
23 | }
24 | html{
25 | font-size: 62.5%;
26 | }
27 | body{
28 | font-family: 'Poppins', sans-serif;
29 | font-size: 2rem;
30 | font-weight: 400;
31 | line-height: 1.7;
32 | letter-spacing: 1px;
33 | background-color: var(--color-lighter);
34 | color: var(--color-darker);
35 | }
36 | .wrapper{
37 | margin: 0 5vw;
38 | }
39 | section{
40 | padding: 10vw 0;
41 | }
42 | .section-title{
43 | font-family: "Syncopate", sans-serif;
44 | font-size: 1.5rem;
45 | padding-bottom:5vw ;
46 | text-transform: lowercase;
47 | color: var(--color-primary);
48 | }
49 | .min-h-100{
50 | min-height: 100vh;
51 | }
52 | .navbar{
53 | display: flex;
54 | justify-content: space-between;
55 | align-items: flex-start;
56 | padding: 2rem 0;
57 | font-family: "Syncopate", sans-serif;
58 | font-size: 1.5rem;
59 | text-transform: lowercase;
60 | }
61 | .links,
62 | .blog-link{
63 | font-weight: 700;
64 | }
65 | .links a,
66 | .blog-link a{
67 | color: var(--color-dark);
68 | position: relative;
69 | }
70 | .links a::after,
71 | .blog-link a::after{
72 | content: "";
73 | width: 0%;
74 | height: 0.2rem;
75 | position: absolute;
76 | top: 50%;
77 | left:50%;
78 | transform: translate(-50%,-50%);
79 | background-color: var(--color-primary);
80 | transition: 0.5s;
81 | }
82 |
83 | .links a:hover::after,
84 | .blog-link a:hover::after{
85 | width: 120%;
86 | }
87 | .logo a{
88 | color: var(--color-darker);
89 | }
90 |
91 | /* hero section */
92 | section.hero{
93 | padding-bottom: 7.5vw
94 | }
95 | .hero{
96 | font-family: 'Bai+Jamjuree',sans-serif;
97 | text-transform: uppercase;
98 | text-align: center;
99 | font-size: 10vw;
100 | line-height: 1.2;
101 | min-height: 100vh;
102 | color: var(--color-darker);
103 | display: flex;
104 | flex-direction: column;
105 | justify-content: center;
106 | align-items: center;
107 | position: relative;
108 |
109 | }
110 | .ethereal,
111 | .canvas{
112 | position: relative;
113 | }
114 | .ethereal span,
115 | .canvas span{
116 | position: absolute;
117 | top: 0;
118 | left: 0;
119 | right: 0;
120 | bottom: 0;
121 | width: 100%;
122 | height: 100%;
123 | background-color: var(--color-lighter);
124 | }
125 |
126 | .photos{
127 | position: absolute;
128 | top: 0;
129 | right: 0;
130 | left: 0;
131 | bottom: 0;
132 | z-index: 1;
133 | display: grid;
134 | grid-template-columns: repeat(7 ,1fr);
135 | grid-template-rows: repeat(5, 1fr);
136 | }
137 | .photo{
138 | width: 100%;
139 | height: 100%;
140 | background-position: center;
141 | background-repeat: no-repeat;
142 | background-size: cover;
143 | overflow: hidden;
144 | }
145 | .photo.one{
146 | grid-column: 1;
147 | grid-row: 2;
148 | }
149 | .photo.two{
150 | grid-column: 5;
151 | grid-row: 1;
152 | }
153 | .photo.three{
154 | grid-column:4;
155 | grid-row: 3;
156 | }
157 |
158 | .photo.four{
159 | grid-column: 2;
160 | grid-row: 5;
161 | }
162 | .photo.five{
163 | grid-column: 7;
164 | grid-row: 4;
165 | }
166 |
167 | .features{
168 | display: grid;
169 | grid-template-columns: 30% auto;
170 | align-items: center;
171 | gap: 10rem;
172 | }
173 | .feature-text{
174 | letter-spacing: 5px;
175 | font-weight: 500 ;
176 | }
177 | .features img{
178 | width: 100%;
179 | }
180 | .features-l,
181 | .features-r
182 | {
183 | display: flex;
184 | flex-direction: column;
185 | gap: 1rem;
186 | position: relative;
187 | }
188 | .features-shutter-l,
189 | .features-shutter-r{
190 | position: absolute;
191 | z-index: 1;
192 | height: 100%;
193 | width: 100%;
194 | top: 0;
195 | bottom: 0;
196 | right: 0;
197 | left: 0;
198 | background-color: var(--color-lighter);
199 | }
200 |
201 | .about p{
202 | font-size: 3vw;
203 | line-height: 1.5;
204 | }
205 | .about p:last-child{
206 | margin-top:3vw;
207 | }
208 | .gallery .section-title{
209 | margin-left: 5vw;
210 | }
211 | .gallery-wrapper{
212 | display: grid;
213 | grid-template-columns: 1fr;
214 | justify-items: center;
215 | gap: 10vw;
216 | padding: 10vw;
217 | background-color: var(--color-primary);
218 | }
219 | .gallery-item{
220 | position: relative;
221 | width: 50%;
222 |
223 | }
224 | .gallery-item-title{
225 | position: absolute;
226 | top: 10%;
227 | left: -50%;
228 | font-family: 'Bai+Jamjuree',sans-serif;
229 | font-size: 8vw;
230 | line-height: 1.2;
231 | text-transform: uppercase;
232 | color: var(--color-lighter);
233 | z-index: 1;
234 | mix-blend-mode: color-dodge;
235 |
236 |
237 | }
238 | .gallery-item-catagory{
239 | position: absolute;
240 | left: 0;
241 | bottom: -5%;
242 | text-transform: uppercase;
243 | color: var(--color-lighter);
244 | letter-spacing: 10px;
245 | }
246 | .gallery-item-image{
247 | background-position: center;
248 | background-repeat: no-repeat;
249 | background-size: cover;
250 | width: 100%;
251 | height: 100vh;
252 | }
253 | .footer{
254 | text-align: center;
255 |
256 | }
257 | .footer h1{
258 | font-family: 'Bodoni Moda', serif;
259 | text-transform: lowercase;
260 | font-size: 10vw;
261 | color:var(--color-primary)
262 | }
--------------------------------------------------------------------------------
20 |
21 | 
25 |
26 |