diff --git a/package.json b/package.json index a61dd38..9edb703 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-highlight-words": "^0.20.0", + "react-timeline-animation": "^1.2.3", "refractor": "^4.8.1", "simple-functional-loader": "^1.2.1", "tailwindcss": "^3.3.3" diff --git a/src/app/events/events.json b/src/app/events/events.json new file mode 100644 index 0000000..53c1846 --- /dev/null +++ b/src/app/events/events.json @@ -0,0 +1,38 @@ +[ + { + "date": "10-02-2020", + "title": "GopherCon Africa", + "description": "GoFr received an amazing response at GopherCon Africa! We showcased our seamless database integration, HTTP/gRPC support, observability, and WebSockets.", + "imageSrc": "https://media.discordapp.net/attachments/1230609009162059836/1301136150156677141/1729836948894.jpeg?ex=67620038&is=6760aeb8&hm=4cbee5de4bec5f526b941db402a3d1607c990054c3cf1853edb4934c70f776ba&=&format=webp&width=2160&height=944" + }, + { + "date": "2021", + "title": "Open Source India 2024", + "description": "At Open Source India in Bengaluru, we kicked off with an amazing response at our booth on 23rd and an interactive Developer’s Meet on Oct 24th. It was a pleasure connecting with everyone at our booth, where demos highlighted GoFr’s innovative approach to writing microservices, making backend development simpler and more efficient.", + "imageSrc": "https://media.discordapp.net/attachments/1230609009162059836/1301136149749698650/1729836948365.jpeg?ex=67620038&is=6760aeb8&hm=f43bbf9dacbc631f36dfa7ae4402f61caaddcde1c8e4357236418d11c86d8006&=&format=webp&width=1418&height=1056" + }, + { + "date": "2022", + "title": "GoFr is on a roll with its workshops!", + "description": "Past two months, we’ve hosted workshops at top colleges such as IIT BHU, IIIT Sri City, Thapar University, JIIT Noida, NIT Jalandhar, and NIT Nagpur. At Gravitas in VIT Vellore, we proudly supported the Hack the Hackathon event, where students explored GoFr and contributed innovative ideas to enhance the framework.", + "imageSrc": "https://media.discordapp.net/attachments/1230609050899710052/1301491118780973137/WhatsApp_Image_2024-10-30_at_15.47.27.jpeg?ex=6761f94f&is=6760a7cf&hm=4bc52e39b921aeb00e444522fa49744dcbfa9d6fb7e35b1d3b2c167b6b6111d9&=&format=webp&width=1408&height=1056" + }, + { + "date": "2020", + "title": "GopherCon Africa", + "description": "GoFr received an amazing response at GopherCon Africa! We showcased our seamless database integration, HTTP/gRPC support, observability, and WebSockets.", + "imageSrc": "https://media.discordapp.net/attachments/1230609009162059836/1301136150156677141/1729836948894.jpeg?ex=67620038&is=6760aeb8&hm=4cbee5de4bec5f526b941db402a3d1607c990054c3cf1853edb4934c70f776ba&=&format=webp&width=2160&height=944" + }, + { + "date": "2021", + "title": "Open Source India 2024", + "description": "At Open Source India in Bengaluru, we kicked off with an amazing response at our booth on 23rd and an interactive Developer’s Meet on Oct 24th. It was a pleasure connecting with everyone at our booth, where demos highlighted GoFr’s innovative approach to writing microservices, making backend development simpler and more efficient.", + "imageSrc": "https://media.discordapp.net/attachments/1230609009162059836/1301136149749698650/1729836948365.jpeg?ex=67620038&is=6760aeb8&hm=f43bbf9dacbc631f36dfa7ae4402f61caaddcde1c8e4357236418d11c86d8006&=&format=webp&width=1418&height=1056" + }, + { + "date": "2022", + "title": "GoFr is on a roll with its workshops!", + "description": "Past two months, we’ve hosted workshops at top colleges such as IIT BHU, IIIT Sri City, Thapar University, JIIT Noida, NIT Jalandhar, and NIT Nagpur. At Gravitas in VIT Vellore, we proudly supported the Hack the Hackathon event, where students explored GoFr and contributed innovative ideas to enhance the framework.", + "imageSrc": "https://media.discordapp.net/attachments/1230609050899710052/1301491118780973137/WhatsApp_Image_2024-10-30_at_15.47.27.jpeg?ex=6761f94f&is=6760a7cf&hm=4bc52e39b921aeb00e444522fa49744dcbfa9d6fb7e35b1d3b2c167b6b6111d9&=&format=webp&width=1408&height=1056" + } +] diff --git a/src/app/events/page.jsx b/src/app/events/page.jsx new file mode 100644 index 0000000..4802b43 --- /dev/null +++ b/src/app/events/page.jsx @@ -0,0 +1,12 @@ +'use client' +import React, {useEffect, useRef, useState} from 'react'; +import Events from "@/components/EventsTimeline"; + +const EventsTimeline = () => { + return( + + ) + +}; + +export default EventsTimeline; \ No newline at end of file diff --git a/src/components/AnimatedTimelineItem.jsx b/src/components/AnimatedTimelineItem.jsx new file mode 100644 index 0000000..559a167 --- /dev/null +++ b/src/components/AnimatedTimelineItem.jsx @@ -0,0 +1,103 @@ +import React, { useRef, useEffect, useState } from 'react'; + +const AnimatedTimelineItem = ({ date, title, description, imageSrc, isLeft }) => { + const itemRef = useRef(null); + const [isVisible, setIsVisible] = useState(false); + const [isExiting, setIsExiting] = useState(false); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting) { + setIsVisible(true); + setIsExiting(false); + } else { + setIsVisible(false); + setIsExiting(true); + } + }, + { + threshold: 0.1, + } + ); + + if (itemRef.current) { + observer.observe(itemRef.current); + } + + return () => { + if (itemRef.current) { + observer.unobserve(itemRef.current); + } + }; + }, []); + + const animationStyle = isVisible + ? { + transform: 'translateX(0)', + opacity: 1, + transition: 'all 1s ease-out', + } + : isExiting + ? isLeft + ? { + transform: 'translateX(100px)', + opacity: 0, + transition: 'all 1s ease-out', + } + : { + transform: 'translateX(-100px)', + opacity: 0, + transition: 'all 1s ease-out', + } + : isLeft + ? { + transform: 'translateX(-100px)', + opacity: 0, + } + : { + transform: 'translateX(100px)', + opacity: 0, + }; + + return ( +
+
+
+

{title}

+

{description}

+
+
+
+
+ + {date} + +
+
+ + +
+ {title} +
+
+ ); +}; + +export default AnimatedTimelineItem; diff --git a/src/components/EventsTimeline.jsx b/src/components/EventsTimeline.jsx new file mode 100644 index 0000000..861852e --- /dev/null +++ b/src/components/EventsTimeline.jsx @@ -0,0 +1,23 @@ +import React, { useEffect } from 'react'; +import VerticalTimeline from './VerticalTimeline'; +import events from '../app/events/events.json' + +const EventsTimeline = () => { + useEffect(() => { + if (window.innerWidth >= 768) { + window.scrollBy(0, 70); + } + }, []); + return ( +
+
+

+ Events +

+ +
+
+ ); +}; + +export default EventsTimeline; \ No newline at end of file diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index b7ea7b1..a99b5a7 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -36,6 +36,7 @@ const footerLinks = [ // { title: 'Releases', link: '/releases' }, { title: 'Documentation', link: '/docs' }, { title: 'Blogs', link: 'https://medium.com/gofr', target_blank: true }, + { title: 'Events', link: '/events' } ] function FooterUi() { @@ -44,7 +45,7 @@ function FooterUi() {