feat: added blog section and header animations

GDGVIT · Aug 12, 2023 · 539ccaf · 539ccaf
1 parent da7ec9e
commit 539ccaf
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 35 deletions.
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className={`${unbounded.variable} ${neue_machina.variable} text-[10px] md:text-[16px]`} >
-      <body>{children}</body>
+      <body className='overflow-hidden'>{children}</body>
     </ html>
   )
 }
diff --git a/web/app/page.tsx b/web/app/page.tsx
@@ -7,15 +7,20 @@ import Image from 'next/image'
 import Section from '@/components/Section'
 import Icon from '@/components/Icons'
 import socials from "@/content/social.json"
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { motion, useScroll } from "framer-motion"
 import FameCard from '@/components/FameCard'
 import { useHorizontalScroll } from '@/hooks/useHorizontalScroll'
 import TeamCard from '@/components/TeamCard'
-import team_members from "@/team_members.json"
-import projects from "@/projects.json"
+import team_members from "@/content/team_members.json"
+import projects from "@/content/projects.json"
 import ProjectCard from '@/components/ProjectCard'
+import blogs from "@/content/blogs.json"
+import BlogListItem from '@/components/BlogListItem'
 export default function Home() {
   const [page, setPage] = useState("home");
+  const mainRef = useRef<HTMLElement>(null)
+  const { scrollY } = useScroll({ container: mainRef })
   const setIntersecting = useCallback((page: string) => {
     setPage(page)
   }, [setPage])
@@ -24,44 +29,48 @@ export default function Home() {
     console.log(page)
   }, [page])
 
+  useEffect(() => {
+    console.log(scrollY)
+  }, [scrollY])
+
   return (
-    <main>
+    <main ref={mainRef} className='h-[100vh] overflow-scroll'>
       <Navbar theme={page === "home" ? 'light' : "dark"} />
       <Section color="dark" page="home" setIntersecting={setIntersecting}>
 
-        <div className='flex flex-col lg:flex-row w-[100%] h-[50%] items-center sticky top-0 left-0'>
+        <motion.div initial={{ y: 200 }} animate={{ y: 0 }} transition={{ duration: 2 }} className='flex flex-col-reverse lg:flex-row w-[100%] h-[100vh] items-center relative top-0 left-0'>
           <div className='relative flex-[0.5] lg:flex-1 w-[80%] h-[100%]'>
-            <div className='absolute lg:min-w-[26vw] w-[20%] h-[50%] left-[50%] -translate-x-[50%]  bottom-0'>
+            <div className='absolute lg:min-w-[26vw] w-[75%] sm:w-[40%] h-[50%] left-[50%] -translate-x-[50%]  bottom-0'>
               <Image className='absolute bottom-0' src={hqImage} layout="responsive" alt='Heaquarters Image' />
               <Image className='absolute bottom-[80%] left-3' src={cylinder} layout='responsive' alt='cylinder' />
             </div>
           </div>
           <div className='flex-1'>
-            <div className='w-[90%] lg:w-[80%] h-[80%] text-center flex flex-col lg:text-right mx-auto'>
-              <h1 className='font-sans text-[3.5rem] font-extrabold text-pastel_red mb-5'>
+            <div className='w-[90%] lg:w-[80%] h-[80%] text-center flex flex-col items-center justify-center lg:text-right mx-auto'>
+              <h1 className='font-sans text-[2.5rem] md:text-[3.5rem] font-extrabold text-pastel_red mb-5'>
                 WE ARE GDSC-VIT
               </h1>
-              <p className='mb-10 font-mono text-3xl md:text-2xl'>
+              <p className='mb-10 font-mono text-xl md:text-2xl'>
                 We think slightly out of the box, we believe that a club’s resources must not only be channeled into conducting events but also to propagate learning and teaching, symbiotically.
                 <br /> <br />
                 That said, we conduct two Flagship events, namely, DevFest and WomenTechies, and tons of insightful workshops!
               </p>
-              <div className='m-auto lg:m-0 self-end max-w-[700px] w-[100%] flex justify-evenly lg:justify-between'>
+              <div className='mx-auto lg:m-0 self-end max-w-[700px] w-[100%] flex justify-evenly lg:justify-between'>
                 {socials.map((social, i) => <Icon key={"soc" + i} {...social} />)}
               </div>
             </div>
           </div>
-        </div>
+        </motion.div>
       </Section>
       <Section color='blue' page='fame' setIntersecting={setIntersecting}>
-        <div className='sticky top-0 left-0 w-full py-[8vh] text-dark'>
-          <div className='w-[100vw] lg:w-[30vw] lg:min-w-[600px] mx-auto'>
-            <h1 className='font-sans text-[3rem] font-extrabold text-center tracking-wider'>WALL OF FAME</h1>
+        <div className='top-0 left-0 w-full py-[8vh] text-dark'>
+          <motion.div initial={{ scale: 1.5 }} whileInView={{ scale: 1 }} viewport={{ once: false, amount: 1 }} transition={{ duration: 1 }} className='w-[100vw] lg:w-[30vw] lg:min-w-[600px] mx-auto'>
+            <h1 className='font-sans text-[3rem] font-extrabold text-center tracking-wider' >WALL OF FAME</h1>
             <p className='font-mono text-xl tracking-[1.8rem] ml-10 text-center'>ACHIEVEMENTS</p>
-          </div>
+          </motion.div>
         </div>
-        <div className='text-dark mt-[20vh] top-[50vh] -translate-y-[50%] left-[50%] sticky'>
-          <div className='flex justify-center sm:justify-start w-[90vw] mx-auto overflow-scroll'>
+        <div className='text-dark mt-[20vh] top-[50vh] -translate-y-[50%] left-[50%] '>
+          <div className='flex justify-start w-[90vw] mx-auto overflow-scroll'>
             <FameCard title={<>Best Club <br /> Award 2019</>} />
             <FameCard title={<>Best Club <br /> Award 2019</>} />
             <FameCard title={<>Best Club <br /> Award 2019</>} />
@@ -73,40 +82,59 @@ export default function Home() {
         </div>
       </Section>
       <Section color='green' page='events' setIntersecting={setIntersecting}>
-        <div className='sticky top-0 left-0 w-full py-[8vh] text-dark'>
-          <div className='w-[100vw] lg:w-[30vw] lg:min-w-[600px] mx-auto'>
+        <div className='top-0 left-0 w-full py-[8vh] text-dark'>
+          <motion.div initial={{ scale: 1.5 }} whileInView={{ scale: 1 }} viewport={{ once: false, amount: 1 }} transition={{ duration: 1 }} className='w-[100vw] lg:w-[30vw] lg:min-w-[600px] mx-auto'>
             <h1 className='font-sans text-[3rem] font-extrabold text-center tracking-wider'>EVENTS</h1>
-          </div>
+          </motion.div>
         </div>
-        <div className='text-dark mt-[20vh] top-[50vh] -translate-y-[50%] left-[50%] sticky'>
+        <div className='text-dark mt-[20vh] top-[50vh] -translate-y-[50%] left-[50%] '>
           <div className='flex justify-start w-[90vw] mx-auto overflow-scroll'>
           </div>
         </div>
       </Section>
       <Section color='yellow' page='fame' >
-        <div className='sticky top-0 left-0 w-full py-[8vh] text-dark'>
-          <div className='w-[100vw] lg:w-[30vw] lg:min-w-[600px] mx-auto'>
+        <div className=' top-0 left-0 w-full py-[8vh] text-dark'>
+          <motion.div initial={{ scale: 1.5 }} whileInView={{ scale: 1 }} viewport={{ once: false, amount: 1 }} transition={{ duration: 1 }} className='w-[100vw] lg:w-[30vw] lg:min-w-[600px] mx-auto'>
             <h1 className='font-sans text-[3rem] font-extrabold text-center tracking-wider'>MEET THE TEAM</h1>
-          </div>
+          </motion.div>
         </div>
-        <div className='text-dark mt-[20vh] top-[50vh] -translate-y-[50%] left-[50%] sticky'>
-          <div className='flex justify-center sm:justify-start w-[90vw] mx-auto overflow-scroll'>
+        <div className='text-dark mt-[20vh] top-[50vh] -translate-y-[50%] left-[50%] '>
+          <div className='flex justify-start w-[90vw] mx-auto overflow-scroll'>
             {team_members.map((mem, i) => <TeamCard key={"mem" + i} title={mem.name} img={mem.img} subtitle={mem.position} />)}
           </div>
         </div>
       </Section>
-      <Section color='pastel_red' page='fame' >
-        <div className='sticky top-0 left-0 w-full py-[8vh] text-dark'>
-          <div className='w-[100vw] lg:w-[30vw] lg:min-w-[600px] mx-auto'>
+      <Section color='pastel_red' page='projects' >
+        <div className=' top-0 left-0 w-full py-[8vh] text-dark'>
+          <motion.div initial={{ scale: 1.5 }} whileInView={{ scale: 1 }} viewport={{ once: false, amount: 1 }} transition={{ duration: 1 }} className='w-[100vw] lg:w-[30vw] lg:min-w-[600px] mx-auto'>
             <h1 className='font-sans text-[3rem] font-extrabold text-center tracking-wider'>Projects</h1>
-          </div>
+          </motion.div>
         </div>
-        <div className='text-dark mt-[20vh] top-[50vh] -translate-y-[50%] left-[50%] sticky'>
-          <div className='flex justify-center sm:justify-start w-[90vw] mx-auto overflow-scroll'>
+        <div className='text-dark mt-[20vh] top-[50vh] -translate-y-[50%] left-[50%] '>
+          <div className='flex justify-start w-[90vw] mx-auto overflow-scroll'>
             {projects.map((proj, i) => <ProjectCard key={"mem" + i} {...proj} />)}
           </div>
         </div>
       </Section>
+      <Section color='blue' page='blogs' >
+
+        <div className='flex flex-col md:flex-row p-5 h-[100vh] items-center'>
+          <div className='flex-1 hidden md:block'>
+            <Image src="/blogs.svg" alt="" width={500} height={500} layout='responsive' />
+          </div>
+          <div className='w-full p-5 text-black md:flex-1 h-fit'>
+            <div className='flex flex-col'>
+              <motion.h1 className='text-black font-sans text-[3rem] font-extrabold tracking-wider'>Blogs</motion.h1>
+              <div className='self-center flex-1 block m-2 max max-h-[50vh] aspect-square md:hidden'>
+                <Image src="/blogs.svg" alt="" width={300} height={300} layout='responsive' />
+              </div>
+
+              <div className='flex flex-col overflow-scroll h-fit max-h-[60vh]'>{blogs.map((blog, i) => <BlogListItem key={"blog" + i} {...blog} />)}</div>
+            </div>
+          </div>
+        </div>
+
+      </Section>
     </main >
   )
 }
diff --git a/web/components/BlogListItem.tsx b/web/components/BlogListItem.tsx
@@ -0,0 +1,28 @@
+import Link from 'next/link'
+import React from 'react'
+
+type Props = {
+    name: string,
+    by: string,
+    link: string
+}
+
+const BlogListItem = ({ name, by, link }: Props) => {
+    return (
+        <div className='flex justify-between p-5 border-b-2 border-black first-of-type:border-t-2'>
+            <div className='flex flex-col px-2 text-lg'>
+                <h2>
+                    {name}
+                </h2>
+                <p className='text-sm font-thin'>A blog by {by}</p>
+            </div>
+            <div>
+                <Link href={link} className='whitespace-nowrap'>
+                    View →
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default BlogListItem
diff --git a/web/components/Card.tsx b/web/components/Card.tsx
@@ -9,7 +9,7 @@ interface Props {
 }
 const Card: FC<Props> = ({ children, bg }) => {
     return (
-        <div style={{ backgroundColor: bg || "white" }} className='flex-col p-3 m-2 lg:m-4 min-w-[300px] rounded-md border-2 border-black w-[80vw] sm:max-w-[40vw] lg:max-w-[25vw] xl:max-w-[15vw]'>
+        <div style={{ backgroundColor: bg || "white" }} className='flex-col p-3 m-2 lg:m-4 min-w-[300px] rounded-md border-2 border-black w-[80vw] sm:max-w-[40vw] lg:max-w-[25vw] xl:max-w-[15vw] h-fit'>
             {children}
         </div>
     );

diff --git a/web/components/Section.tsx b/web/components/Section.tsx
@@ -36,7 +36,7 @@ const Section: FC<Props> = ({ children, color, page, setIntersecting }) => {
     }, [ref.current])
 
     return (
-        <section className={`relative w-[100vw] text-white h-[200vh] snap-y`} style={{ backgroundColor: fullConfig?.theme?.colors![color as keyof typeof fullConfig.theme.colors] as string || "dark" }} ref={ref} >
+        <section className={`relative w-[100vw] text-white min-h-[100vh] h-fit snap-y`} style={{ backgroundColor: fullConfig?.theme?.colors![color as keyof typeof fullConfig.theme.colors] as string || "dark" }} ref={ref} >
             {children}
         </section >
     );

diff --git a/web/content/blogs.json b/web/content/blogs.json
@@ -0,0 +1,37 @@
+[
+  {
+    "name": "Brain Maps Into Building a Technology",
+    "by": "Suhani",
+    "link": "https://asdasd.com"
+  },
+  {
+    "name": "Brain Maps Into Building a Technology",
+    "by": "Suhani",
+    "link": "https://asdasd.com"
+  },
+  {
+    "name": "Brain Maps Into Building a Technology",
+    "by": "Suhani",
+    "link": "https://asdasd.com"
+  },
+  {
+    "name": "Brain Maps Into Building a Technology",
+    "by": "Suhani",
+    "link": "https://asdasd.com"
+  },
+  {
+    "name": "Brain Maps Into Building a Technology",
+    "by": "Suhani",
+    "link": "https://asdasd.com"
+  },
+  {
+    "name": "Brain Maps Into Building a Technology",
+    "by": "Suhani",
+    "link": "https://asdasd.com"
+  },
+  {
+    "name": "Brain Maps Into Building a Technology",
+    "by": "Suhani",
+    "link": "https://asdasd.com"
+  }
+]
diff --git a/web/projects.json → web/content/projects.json b/web/projects.json → web/content/projects.json
diff --git a/web/team_members.json → web/content/team_members.json b/web/team_members.json → web/content/team_members.json