Skip to content

Commit

Permalink
home
Browse files Browse the repository at this point in the history
  • Loading branch information
imbirdperson committed Aug 23, 2024
1 parent 3be6223 commit ebc85b3
Show file tree
Hide file tree
Showing 17 changed files with 611 additions and 61 deletions.
109 changes: 96 additions & 13 deletions app/page.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
"use client"; // Add this line at the top
import '../style/index.scss';
import { GoArrowDown } from "react-icons/go";
import { GoArrowUpRight } from "react-icons/go";
import Header from '../components/Header';
import Footer from '../components/Footer';
import Lenis from '@studio-freight/lenis';
import { useEffect , useState} from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
// import { ScrollContainer, Animator, batch, FadeIn , Sticky, FadeOut} from 'react-scroll-motion';

export default function Home() {
Expand Down Expand Up @@ -34,6 +38,13 @@ export default function Home() {
<div className='content'>
<div className='home-content'>
<HomeContent/>
<div className='home-content-heading'>
<div className='left'>
FLIMOGRAPHY
</div>
</div>
<FlimographyTable/>
<Footer/>
</div>
</div>
</>
Expand All @@ -46,7 +57,7 @@ const Banner = () => {
const handleScroll = () => {
// Adjust the divisor to control the scroll distance to opacity mapping
const scrollTop = window.scrollY;
const maxScroll = 600; // Maximum scroll distance at which opacity becomes 0
const maxScroll = 800; // Maximum scroll distance at which opacity becomes 0
const newOpacity = Math.max(1 - scrollTop / maxScroll, 0);
setOpacity(newOpacity);
};
Expand Down Expand Up @@ -111,28 +122,64 @@ const WorksData = [
desc:"Nyx is a pipeline tool to maintain visual effect assets and native USD support to create scene assembly file.",
image:"images/piolet.png",
},
]

const FlimographyData = [
{name: "Sonic 3",studio:"paramount", year: '2024', role: "RSP - ADELAIDE | Creature TD", link:""},
{name: "The Knuckles", studio:"Paramount", year: '2024', role: "RSP - ADELAIDE | Creature TD", link:""},
{name: "Monarch: Legacy of Monsters", studio:"Paramount",year: '2023', role: "RSP - ADELAIDE | Creature TD", link:""},
{name: "The Marvels", studio:"Paramount",year: '2023', role: "RSP - ADELAIDE | Creature TD", link:""},
{name: "antman and the wasp quantumania", studio:"Paramount",year: '2022', role: "RSP - ADELAIDE | Creature TD", link:""},
{name: "Harold and the Purple Crayon", studio:"Paramount",year: '2022', role: "RSP - ADELAIDE | Creature TD", link:""},
{name: "The Flash", studio:"Paramount", year: '2022', role: "DNEG - BANGALORE | Creature TD", link:""},
{name: "Cumpa", studio:"Paramount", year: '2021', role: "MPC - BANGALORE | Creature TD", link:""},
{name: "La Brea", studio:"Paramount", year: '2021', role: "MPC - BANGALORE | Creature EFECTS", link:""},
]



const HomeContent = () => {
return (
<>
{WorksData.map((work, index)=>(
<WorkItem
title={work.title}
image={work.image}
role={work.role}
desc={work.desc}
/>
))}
<div className='home-content-mid'>
<div className='left'>
WORKS
</div>
<div className='mid'>
The following are the works from some of my personal projects
</div>
<div className='right'>
<p>SOCIALS</p>
<Link href="#">Instagram</Link>
<Link href="#">YOUTUBE</Link>
<Link href="#"></Link>
</div>
</div>
{WorksData.map((work, index)=>(
<WorkItem
link={work.link}
title={work.title}
image={work.image}
role={work.role}
desc={work.desc}
key={index}
/>
))}
</>
)
}

const WorkItem = ({title, image, role, desc}) => {
const WorkItem = ({link, title, image, role, desc}) => {
return (
<>
<div className='work-item-wrapper'>
<motion.div
className="work-item"
initial={{ opacity: 0, y: 80 }} // Start hidden and slightly below
whileInView={{ opacity: 1, y: 0 }} // Animate to visible and in place
transition={{ duration: 0.6, ease: "easeOut" }} // Smooth transition
viewport={{ once: true, amount: 0.1 }} // Trigger when 30% of the item is in view
>
<Link href={link} className='work-item-wrapper'>
<div className='text'>
<div className='heading'>
{title}
Expand All @@ -153,7 +200,43 @@ const WorkItem = ({title, image, role, desc}) => {
{/* <div className='desc'>
{desc}
</div> */}
</div>
</Link>
</motion.div>
</>
)
}
}


const FlimographyTable = ()=> {
return (
<div className='flim-wrapper'>
{/* <img className='poster' src="/images/adya.png"/> */}
<div className='flimographyTable'>
<div className='content-item'>
SHOWS
</div>
{FlimographyData.map((item, index) => (
<Film key={index} name={item.name} studio={item.studio} role={item.role} year={item.year} link={item.link}/>
))}
</div>
</div>
)
}

const Film = ({name, role, year, link, studio}) => {
return(
<>
<div className='movie-item'>
<div className='movie-name'>
<p> {name} <GoArrowUpRight /></p>
<p className='gray'> {studio}</p>
</div>
<div className='movie-name'>
<p>{role}</p>
<p className='gray'>{year}</p>
</div>
</div>
</>
)
}

21 changes: 21 additions & 0 deletions components/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import Link from 'next/link';
const Footer = () => {
return (
<>
<div className='footer-wrapper'>
<div className='left'>
<p>Hello</p>
</div>
<div className='mid'>
<p>Hello</p>
</div>
<div className='right'>
<p>EMAIL</p>
<p>CONTACT</p>
</div>
</div>
</>
)
}

export default Footer;
38 changes: 23 additions & 15 deletions components/Header.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,31 @@
import Link from 'next/link';
const Header = () => {
return (
<>
<div className="header-wrapper">
<div className="logo">
<b>DEEPAK</b> RAJAN ~ 2024
</div>
<div className="menu-wrapper">
<div className="menu">
WORKS
</div>
<div className="menu">
ART
</div>
<div className="menu">
BLOG
</div>
<div className="menu profile">
PROFILE
<div className="header">

<Link href="/" className="logo">
<b>DEEPAK</b> RAJAN ~ 2024
</Link>
<div className="menu-wrapper">
<Link href="works" className="menu">
WORKS
</Link>
<Link href="art" className="menu">
ART
</Link>
<Link href="https://imbirdperson.gumroad.com/" className="menu">
STORE
</Link>
<Link href="blog" className="menu">
BLOG
</Link>
<Link href="profile" className="menu profile">
PROFILE
</Link>
</div>

</div>
</div>
</>
Expand Down
26 changes: 26 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"dependencies": {
"@studio-freight/lenis": "^1.0.42",
"framer-motion": "^11.3.29",
"lenis": "^1.1.9",
"next": "14.2.5",
"react": "^18",
Expand Down
62 changes: 62 additions & 0 deletions pages/_app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
// "use client"; // Add this line at the top
import '../style/index.scss';
import Header from '../components/Header';
import Lenis from '@studio-freight/lenis';
import { useEffect , useState} from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
const router = useRouter();

useEffect(() => {
const header = document.querySelector('.header');
const menu_wrapper = document.querySelector('.menu-wrapper');
const profile = document.querySelector('.profile');
if (router.pathname.includes('/art')) {
document.body.classList.add('art-background');
if(header){
header.classList.add('art-header');
// header.className = 'art-header';
menu_wrapper.classList.add('art-menu');
profile.classList.add('art-profile');
}

} else {
document.body.classList.remove('art-background');
if(header){
header.classList.remove('art-header');
}
}
}, [router.pathname]);

useEffect(() => {
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Custom easing function
direction: 'vertical', // Can be 'vertical' or 'horizontal'
gestureDirection: 'vertical', // Can be 'vertical' or 'horizontal'
smooth: true,
smoothTouch: false,
touchMultiplier: 2,
});

function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

return () => lenis.destroy(); // Cleanup on unmount
}, []);
return (
<div className='content-main'>
<Header />
<div className='content'>
<Component {...pageProps} />
</div>
</div>
);
}

export default MyApp;
9 changes: 9 additions & 0 deletions pages/art.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const ArtPage = () => {
return(
<>
ART
</>
)
}

export default ArtPage;
10 changes: 10 additions & 0 deletions pages/blog.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import '../style/index.scss';
const BlogPage = () => {
return(
<>
BLOGS
</>
)
}

export default BlogPage;
Loading

0 comments on commit ebc85b3

Please sign in to comment.