Skip to content

Add Page transition support with framer-motion #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Borrus-sudo wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add Page transition support with framer-motion #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4c8646f
feat: add NotFoundPage
Borrus-sudo Jan 23, 2025
3d2e2b9
refactor: much needed re-organization of code
Borrus-sudo Jan 23, 2025
46336cc
refactor: some more refactor
Borrus-sudo Jan 23, 2025
4fb6513
feat: add page transitions with framer-motion
Borrus-sudo Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 52 additions & 62 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,58 @@
// Enhanced App component with updated styles and layout
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { motion } from 'framer-motion';
import NavbarCard from './Components/NavbarCard';
import Navigation from './Components/Navigation';
import Events from './Components/Events';
import StudentManagement from './Components/Achievements';
import Projects from './Components/Projects';
import './App.css'
import Achievements from './Components/Achievements';
import PastProjects from './Components/PastProjects';
import UpcomingProjects from './Components/UpcomingProjects';
import VerticalTimeline from './Components/Timeline';
import Carousel from './Components/Carousel';
import Hero from './Components/Hero';
import Footer from "./Components/Footer"


const Homepage = () => {
return (
<div>
<Hero />
{/* Text Section between Hero and Carousel */}
<div className="text-center py-8 px-4 md:px-12 bg-opacity-10 text-white">
<h2 className="text-4xl font-semibold mb-4">Welcome to Project X</h2>
<p className="text-xl">
We are an exclusive club at Veermata Jijabai Technological Institute, Mumbai. We provide a collaborative environment for students to learn, grow, and build projects together under mentorship. Explore our achievements, past projects, and upcoming events!
</p>
</div>

<div>
<Carousel />
</div>
</div>
);
};



import {
BrowserRouter as Router,
Routes,
Route,
useLocation,
} from 'react-router-dom';
import { AnimatePresence } from 'framer-motion';

// Routes
import Events from './pages/Events';
import Projects from './pages/Projects';
import Achievements from './pages/Achievements';
import PastProjects from './pages/PastProjects';
import UpcomingProjects from './pages/UpcomingProjects';
import Homepage from './pages/Homepage';
import NotFound from './pages/NotFound';

// Components
import Navigation from './components/Navigation';
import Footer from './components/Footer';

// CSS
import './App.css';

function AnimatedRoutes() {
const location = useLocation();
return (
<AnimatePresence mode="wait">
<Routes location={location} key={location.pathname}>
<Route path="/" element={<Homepage />} />
<Route path="/events" element={<Events />} />
<Route path="/projects" element={<Projects />} />
<Route path="/achievements" element={<Achievements />} />
<Route path="/past-projects" element={<PastProjects />} />
<Route
path="/upcoming-projects"
element={<UpcomingProjects />}
/>
<Route path="*" element={<NotFound />} />
</Routes>
</AnimatePresence>
);
}

function App() {
return (
<div className='bgC'>
<Router>
<Navigation />
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="/events" element={<Events />} />
<Route path="/projects" element={<Projects />} />
<Route path="/achievements" element={<Achievements />} />
<Route path="/past-projects" element={<PastProjects />} />
<Route path="/upcoming-projects" element={<UpcomingProjects />} />
{/* <Route path="/time" element={<VerticalTimeline />} /> */}

{/* <Route path="/" element={<OrderManagement />} /> */}
</Routes>
<Footer />
</Router>
<div>
</div>
</div>
);
return (
<div className="bgC">
<Router>
<Navigation />
<AnimatedRoutes />
<Footer />
</Router>
</div>
);
}

export default App;

{/* <div class="relative h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]"></div></div> */ }
31 changes: 0 additions & 31 deletions src/Components/Achievements.jsx
View file
Open in desktop

This file was deleted.

20 changes: 12 additions & 8 deletions src/Components/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import React from 'react';

const Card = ({ image, text }) => {
return (
<div className="flex items-center justify-center w-full bg-gray-100 shadow-lg rounded-lg p-4">
<img className="w-full md:w-1/2 object-cover rounded-lg" src={image} alt="Card image" />
<div className="w-full md:w-1/2 text-left p-4 md:p-8">
<p className="text-gray-800">{text}</p>
</div>
</div>
);
return (
<div className="flex items-center justify-center w-full bg-gray-100 shadow-lg rounded-lg p-4">
<img
className="w-full md:w-1/2 object-cover rounded-lg"
src={image}
alt="Card image"
/>
<div className="w-full md:w-1/2 text-left p-4 md:p-8">
<p className="text-gray-800">{text}</p>
</div>
</div>
);
};

export default Card;
102 changes: 51 additions & 51 deletions src/Components/Carousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,64 @@
import React, { useEffect, useState } from 'react';

const Typewriter = ({ texts, delay = 100 }) => {
const [textIndex, setTextIndex] = useState(0);
const [displayText, setDisplayText] = useState('');
const [isDeleting, setIsDeleting] = useState(false);
const [typingSpeed, setTypingSpeed] = useState(delay);
const [textIndex, setTextIndex] = useState(0);
const [displayText, setDisplayText] = useState('');
const [isDeleting, setIsDeleting] = useState(false);
const [typingSpeed, setTypingSpeed] = useState(delay);

useEffect(() => {
const handleTyping = () => {
const currentText = texts[textIndex];
if (isDeleting) {
setDisplayText((prev) => prev.slice(0, prev.length - 1));
setTypingSpeed(delay / 2);
} else {
setDisplayText((prev) => currentText.slice(0, prev.length + 1));
setTypingSpeed(delay);
}
useEffect(() => {
const handleTyping = () => {
const currentText = texts[textIndex];
if (isDeleting) {
setDisplayText((prev) => prev.slice(0, prev.length - 1));
setTypingSpeed(delay / 2);
} else {
setDisplayText((prev) => currentText.slice(0, prev.length + 1));
setTypingSpeed(delay);
}

if (!isDeleting && displayText === currentText) {
setTimeout(() => setIsDeleting(true), 1000);
} else if (isDeleting && displayText === '') {
setIsDeleting(false);
setTextIndex((prev) => (prev + 1) % texts.length);
}
};
if (!isDeleting && displayText === currentText) {
setTimeout(() => setIsDeleting(true), 1000);
} else if (isDeleting && displayText === '') {
setIsDeleting(false);
setTextIndex((prev) => (prev + 1) % texts.length);
}
};

const timer = setTimeout(handleTyping, typingSpeed);
return () => clearTimeout(timer);
}, [displayText, isDeleting, typingSpeed, textIndex, texts, delay]);
const timer = setTimeout(handleTyping, typingSpeed);
return () => clearTimeout(timer);
}, [displayText, isDeleting, typingSpeed, textIndex, texts, delay]);

return <div className="text-white text-3xl">{displayText}</div>;
return <div className="text-white text-3xl">{displayText}</div>;
};

const Carousel = () => {
const images = [
"src/assets/OpenCV.jpg",
"src/assets/Image2.jpg",
"src/assets/Image1.jpg",
"src/assets/Image3.jpg",
"src/assets/Image4.jpg",
];
const images = [
'src/assets/OpenCV.jpg',
'src/assets/Image2.jpg',
'src/assets/Image1.jpg',
'src/assets/Image3.jpg',
'src/assets/Image4.jpg',
];

const [currentIndex, setCurrentIndex] = useState(0);
const [currentIndex, setCurrentIndex] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
}, 3000);
return () => clearInterval(interval);
}, [images.length]);
useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
}, 3000);
return () => clearInterval(interval);
}, [images.length]);

return (
<div className="flex h-[80vh]">
<div className="w-full relative">
<img
src={images[currentIndex]}
alt={`Slide ${currentIndex + 1}`}
className="w-full h-full object-cover rounded-lg transition-all duration-1000 ease-in-out shadow-lg"
/>
{/* <div className="absolute inset-0 flex items-end justify-center p-8 bg-gray-900 bg-opacity-50">
return (
<div className="flex h-[80vh]">
<div className="w-full relative">
<img
src={images[currentIndex]}
alt={`Slide ${currentIndex + 1}`}
className="w-full h-full object-cover rounded-lg transition-all duration-1000 ease-in-out shadow-lg"
/>
{/* <div className="absolute inset-0 flex items-end justify-center p-8 bg-gray-900 bg-opacity-50">
<div className="text-white text-3xl p-4 rounded-lg">
<Typewriter
texts={[
Expand All @@ -68,9 +68,9 @@ const Carousel = () => {
/>
</div>
</div> */}
</div>
</div>
);
</div>
</div>
);
};

export default Carousel;
40 changes: 26 additions & 14 deletions src/Components/CircularCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,33 @@ import React from 'react';
import { useSpring, animated } from 'react-spring';

const CircularCard = ({ image, name, organization, link }) => {
const props = useSpring({ opacity: 1, from: { opacity: 0 } });
const props = useSpring({ opacity: 1, from: { opacity: 0 } });

return (
<a href={link} target="_blank" rel="noopener noreferrer" className="no-underline">

<animated.div style={props} className="flex text-center font-mono flex-col items-center p-6 shadow-lg max-w-xs bg-transparent rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out">
<div className="w-32 h-32 rounded-full overflow-hidden shadow-lg">
<img src={image} alt={name} className="w-full h-full object-cover" />
</div>
<h3 className="mt-4 text-xl font-bold text-purple-200">{name}</h3>
<p className="mt-2 text-cyan-200">{organization}</p>
</animated.div>

</a>
);
return (
<a
href={link}
target="_blank"
rel="noopener noreferrer"
className="no-underline"
>
<animated.div
style={props}
className="flex text-center font-mono flex-col items-center p-6 shadow-lg max-w-xs bg-transparent rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out"
>
<div className="w-32 h-32 rounded-full overflow-hidden shadow-lg">
<img
src={image}
alt={name}
className="w-full h-full object-cover"
/>
</div>
<h3 className="mt-4 text-xl font-bold text-purple-200">
{name}
</h3>
<p className="mt-2 text-cyan-200">{organization}</p>
</animated.div>
</a>
);
};

export default CircularCard;
Loading