Skip to content

Commit 0d94df1

Browse files
realstomanrealstoman
committed
Animate home projects and about
1 parent e5ea379 commit 0d94df1

File tree

6 files changed

+82
-42
lines changed

6 files changed

+82
-42
lines changed

‎src/App.js

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,28 @@ import Contact from './pages/Contact';
88
import Home from './pages/Home';
99
import Projects from './pages/Projects';
1010
import ProjectSingle from './pages/ProjectSingle';
11+
import { AnimatePresence } from 'framer-motion';
1112

1213
function App() {
1314
return (
1415
<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
1516
<Router>
16-
<ScrollToTop />
17-
<AppHeader />
18-
<Routes>
19-
<Route path="/" element={<Home />} />
20-
<Route path="projects" element={<Projects />} />
21-
<Route
22-
path="projects/single-project"
23-
element={<ProjectSingle />}
24-
/>
17+
<AnimatePresence>
18+
<ScrollToTop />
19+
<AppHeader />
20+
<Routes>
21+
<Route path="/" element={<Home />} />
22+
<Route path="projects" element={<Projects />} />
23+
<Route
24+
path="projects/single-project"
25+
element={<ProjectSingle />}
26+
/>
2527

26-
<Route path="about" element={<About />} />
27-
<Route path="contact" element={<Contact />} />
28-
</Routes>
29-
<AppFooter />
28+
<Route path="about" element={<About />} />
29+
<Route path="contact" element={<Contact />} />
30+
</Routes>
31+
<AppFooter />
32+
</AnimatePresence>
3033
</Router>
3134
</div>
3235
);

‎src/components/projects/ProjectSingle.js

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,35 @@
1+
import { motion } from 'framer-motion';
12
import { Link } from 'react-router-dom';
23

34
const ProjectSingle = ({ title, category, image }) => {
45
return (
5-
<Link
6-
to="/projects/single-project"
7-
className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
8-
aria-label="Single Project"
6+
<motion.div
7+
initial={{ opacity: 0 }}
8+
animate={{ opacity: 1, delay: 1 }}
9+
exit={{ opacity: 0 }}
910
>
10-
<div>
11-
<img
12-
src={image}
13-
className="rounded-t-xl border-none"
14-
alt="Single Project"
15-
/>
16-
</div>
17-
<div className="text-center px-4 py-6">
18-
<p className="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2">
19-
{title}
20-
</p>
21-
<span className="text-lg text-ternary-dark dark:text-ternary-light">
22-
{category}
23-
</span>
24-
</div>
25-
</Link>
11+
<Link
12+
to="/projects/single-project"
13+
className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
14+
aria-label="Single Project"
15+
>
16+
<div>
17+
<img
18+
src={image}
19+
className="rounded-t-xl border-none"
20+
alt="Single Project"
21+
/>
22+
</div>
23+
<div className="text-center px-4 py-6">
24+
<p className="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2">
25+
{title}
26+
</p>
27+
<span className="text-lg text-ternary-dark dark:text-ternary-light">
28+
{category}
29+
</span>
30+
</div>
31+
</Link>
32+
</motion.div>
2633
);
2734
};
2835

‎src/components/projects/ProjectsGrid.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { FiSearch } from 'react-icons/fi';
33
import ProjectSingle from './ProjectSingle';
44
import { ProjectsContext } from '../../context/ProjectsContext';
55
import ProjectsFilter from './ProjectsFilter';
6+
import { motion } from 'framer-motion';
67

78
const ProjectsGrid = () => {
89
const {

‎src/components/shared/AppBanner.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,18 @@ import useThemeSwitcher from '../../hooks/useThemeSwitcher';
22
import { FiArrowDownCircle } from 'react-icons/fi';
33
import developerLight from '../../images/developer.svg';
44
import developerDark from '../../images/developer-dark.svg';
5+
import { motion } from 'framer-motion';
56

67
const AppBanner = () => {
78
const [activeTheme] = useThemeSwitcher();
89

910
return (
10-
<section className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 md:mt-2">
11+
<motion.section
12+
initial={{ opacity: 0 }}
13+
animate={{ opacity: 1 }}
14+
exit={{ opacity: 0 }}
15+
className="flex flex-col sm:justify-between items-center sm:flex-row mt-12 md:mt-2"
16+
>
1117
<div className="w-full md:w-1/3 text-left">
1218
<h1 className="text-2xl lg:text-4xl xl:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase">
1319
Hi, Iam Stoman
@@ -35,7 +41,7 @@ const AppBanner = () => {
3541
alt="Developer"
3642
/>
3743
</div>
38-
</section>
44+
</motion.section>
3945
);
4046
};
4147

‎src/pages/AboutMe.js

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,37 @@ import AboutMeBio from '../components/about/AboutMeBio';
22
import AboutCounter from '../components/about/AboutCounter';
33
import AboutClients from '../components/about/AboutClients.js';
44
import { AboutMeProvider } from '../context/AboutMeContext';
5+
import { motion } from 'framer-motion';
56

67
const About = () => {
78
return (
89
<AboutMeProvider>
9-
<div className="container mx-auto">
10+
<motion.div
11+
initial={{ opacity: 0 }}
12+
animate={{ opacity: 1, delay: 1 }}
13+
exit={{ opacity: 0 }}
14+
className="container mx-auto"
15+
>
1016
<AboutMeBio />
11-
</div>
17+
</motion.div>
1218

1319
{/** Counter without paddings */}
14-
<AboutCounter />
20+
<motion.div
21+
initial={{ opacity: 0 }}
22+
animate={{ opacity: 1, delay: 1 }}
23+
exit={{ opacity: 0 }}
24+
>
25+
<AboutCounter />
26+
</motion.div>
1527

16-
<div className="container mx-auto">
28+
<motion.div
29+
initial={{ opacity: 0 }}
30+
animate={{ opacity: 1, delay: 1 }}
31+
exit={{ opacity: 0 }}
32+
className="container mx-auto"
33+
>
1734
<AboutClients />
18-
</div>
35+
</motion.div>
1936
</AboutMeProvider>
2037
);
2138
};

‎src/pages/ProjectSingle.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,23 @@ import ProjectHeader from '../components/projects//ProjectHeader';
33
import ProjectInfo from '../components/projects/ProjectInfo';
44
import ProjectRelatedProjects from '../components/projects/ProjectRelatedProjects';
55
import { SingleProjectProvider } from '../context/SingleProjectContext';
6+
import { motion } from 'framer-motion';
67

78
const ProjectSingle = () => {
89
return (
9-
<div className="container mx-auto mt-5 sm:mt-10">
10+
<motion.div
11+
initial={{ opacity: 0 }}
12+
animate={{ opacity: 1, delay: 1 }}
13+
exit={{ opacity: 0 }}
14+
className="container mx-auto mt-5 sm:mt-10"
15+
>
1016
<SingleProjectProvider>
1117
<ProjectHeader />
1218
<ProjectGallery />
1319
<ProjectInfo />
1420
<ProjectRelatedProjects />
1521
</SingleProjectProvider>
16-
</div>
22+
</motion.div>
1723
);
1824
};
1925

0 commit comments

Comments
 (0)