From 539ccaf1934fd06ee161db579bdcdf848bcbc398 Mon Sep 17 00:00:00 2001 From: SayarB Date: Sat, 12 Aug 2023 10:05:53 +0530 Subject: [PATCH] feat: added blog section and header animations --- web/app/layout.tsx | 2 +- web/app/page.tsx | 92 ++++++++++++++++++---------- web/components/BlogListItem.tsx | 28 +++++++++ web/components/Card.tsx | 2 +- web/components/Section.tsx | 2 +- web/content/blogs.json | 37 +++++++++++ web/{ => content}/projects.json | 0 web/{ => content}/team_members.json | 0 web/public/blogs.svg | 9 +++ web/public/logo-black.png | Bin 0 -> 8638 bytes 10 files changed, 137 insertions(+), 35 deletions(-) create mode 100644 web/components/BlogListItem.tsx create mode 100644 web/content/blogs.json rename web/{ => content}/projects.json (100%) rename web/{ => content}/team_members.json (100%) create mode 100644 web/public/blogs.svg create mode 100644 web/public/logo-black.png diff --git a/web/app/layout.tsx b/web/app/layout.tsx index 803767a..9ed9e1e 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -20,7 +20,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ) } diff --git a/web/app/page.tsx b/web/app/page.tsx index 5dc00a9..cdf8165 100644 --- 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(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 ( -
+
-
+
-
+
Heaquarters Image cylinder
-
-

+
+

WE ARE GDSC-VIT

-

+

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.

That said, we conduct two Flagship events, namely, DevFest and WomenTechies, and tons of insightful workshops!

-
+
{socials.map((social, i) => )}
-

+
-
-
-

WALL OF FAME

+
+ +

WALL OF FAME

ACHIEVEMENTS

-
+
-
-
+
+
Best Club
Award 2019} /> Best Club
Award 2019} /> Best Club
Award 2019} /> @@ -73,40 +82,59 @@ export default function Home() {
-
-
+
+

EVENTS

-
+
-
+
-
-
+
+

MEET THE TEAM

-
+
-
-
+
+
{team_members.map((mem, i) => )}
-
-
-
+
+
+

Projects

-
+
-
-
+
+
{projects.map((proj, i) => )}
+
+ +
+
+ +
+
+
+ Blogs +
+ +
+ +
{blogs.map((blog, i) => )}
+
+
+
+ +
) } diff --git a/web/components/BlogListItem.tsx b/web/components/BlogListItem.tsx new file mode 100644 index 0000000..eaee9b1 --- /dev/null +++ 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 ( +
+
+

+ {name} +

+

A blog by {by}

+
+
+ + View → + +
+
+ ) +} + +export default BlogListItem \ No newline at end of file diff --git a/web/components/Card.tsx b/web/components/Card.tsx index 964791a..adbde62 100644 --- a/web/components/Card.tsx +++ b/web/components/Card.tsx @@ -9,7 +9,7 @@ interface Props { } const Card: FC = ({ children, bg }) => { return ( -
+
{children}
); diff --git a/web/components/Section.tsx b/web/components/Section.tsx index 1e16f18..f93dc06 100644 --- a/web/components/Section.tsx +++ b/web/components/Section.tsx @@ -36,7 +36,7 @@ const Section: FC = ({ children, color, page, setIntersecting }) => { }, [ref.current]) return ( -
+
{children}
); diff --git a/web/content/blogs.json b/web/content/blogs.json new file mode 100644 index 0000000..45e06d4 --- /dev/null +++ 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 b/web/content/projects.json similarity index 100% rename from web/projects.json rename to web/content/projects.json diff --git a/web/team_members.json b/web/content/team_members.json similarity index 100% rename from web/team_members.json rename to web/content/team_members.json diff --git a/web/public/blogs.svg b/web/public/blogs.svg new file mode 100644 index 0000000..984cfac --- /dev/null +++ b/web/public/blogs.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/public/logo-black.png b/web/public/logo-black.png new file mode 100644 index 0000000000000000000000000000000000000000..649317426d189339866c3fa30d0357c8754001cb GIT binary patch literal 8638 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 QE&u=k07*qoM6N<$f;ji