Smooth transitioning

src/components/ExploreMore.module.css

@@ -21,6 +21,7 @@ limitations under the License.
     --ifm-button-background-color: white !important;
     --ifm-button-border-radius: 15% 0 / 100% 0;
     margin-bottom: 20px;
+    transition: 0.5s;
 }
 
 .exploreMore:hover {

src/components/Repositories.js

@@ -13,46 +13,57 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import styles from "./Repositories.module.css";
 import clsx from "clsx";
 import Repository from "./Repository";
 import ExploreMore from "./ExploreMore";
 import Paginator from "./Paginator";
 
-function Repositories({reposData, reposConfig, showOnlyFeatured = false}) {
+function Repositories({ reposData, reposConfig, showOnlyFeatured = false }) {
     const allRepos = reposData.filter(repo => showOnlyFeatured ? repo.featured : true)
                               .sort((repo1, repo2) => repo1.name.localeCompare(repo2.name));
     const pageCount = Math.ceil(allRepos.length / reposConfig.repositoriesPerPage);
     const getPageRepos = (page) =>
         allRepos.slice(page * reposConfig.repositoriesPerPage, (page + 1) * reposConfig.repositoriesPerPage);
+
     const [currentRepos, setCurrentRepos] = useState(getPageRepos(0));
+    const [isVisible, setIsVisible] = useState(false);
     const thisElementRef = useRef();
+
     const handlePageClick = (event) => {
+        setIsVisible(false); 
         setCurrentRepos(getPageRepos(event.selected));
-        thisElementRef.current.scrollIntoView()
+        thisElementRef.current.scrollIntoView();
     };
 
+    useEffect(() => {
+        setIsVisible(true); 
+    }, [currentRepos]);
+
     return (
-        <section ref={thisElementRef}
-                 className={clsx(styles.repositoriesSection, showOnlyFeatured && styles.featuredRepositories)}>
-            <CurrentPageRepositories repos={currentRepos}/>
-            <Paginator pageCount={pageCount} handlePageClick={handlePageClick}/>
-            <ExploreMore text={showOnlyFeatured ? reposConfig.exploreMoreText : reposConfig.exploreOnGithubText}
-                         link={showOnlyFeatured ? reposConfig.repositoriesPage.link : reposConfig.githubReposLink}/>
+        <section
+            ref={thisElementRef}
+            className={clsx(styles.repositoriesSection, showOnlyFeatured && styles.featuredRepositories)}
+        >
+            <CurrentPageRepositories repos={currentRepos} isVisible={isVisible} />
+            <Paginator pageCount={pageCount} handlePageClick={handlePageClick} />
+            <ExploreMore
+                text={showOnlyFeatured ? reposConfig.exploreMoreText : reposConfig.exploreOnGithubText}
+                link={showOnlyFeatured ? reposConfig.repositoriesPage.link : reposConfig.githubReposLink}
+            />
         </section>
-    )
+    );
 }
 
-function CurrentPageRepositories({repos}) {
+function CurrentPageRepositories({ repos, isVisible }) {
     return (
-        <div className={clsx('container', styles.repositoriesContainer)}>
+        <div className={clsx('container', styles.repositoriesContainer, { visible: isVisible })}>
             <div className="row">
-                { repos.map(repo => (<Repository key={repo.name} {...repo} />)) }
+                {repos.map(repo => (<Repository key={repo.name} {...repo} />))}
             </div>
         </div>
-    )
+    );
 }
 
-export default Repositories;
+export default Repositories;

src/components/Repositories.module.css

@@ -13,6 +13,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
+html {
+    scroll-behavior: smooth; /* Enable smooth scrolling */
+}
+
 
 .repositoriesSection {
     display: flex;

src/components/Social.module.css

@@ -24,9 +24,13 @@ limitations under the License.
 }
 
 .social .socialColumn {
-    margin-bottom: 1rem;
+    margin-bottom: 1rem; 
+    transition: transform 0.3s; 
 }
 
+.social .socialColumn:hover {
+    transform: scale(1.02); 
+}
 .socialHeaderAndBody {
     --social-border-color: rgb(126, 220, 186);
     --social-border-size: 5px;

src/css/global.css

@@ -62,8 +62,12 @@ limitations under the License.
 }
 .navbar__toggle {
   color: var(--ifm-navbar-link-color);
+  transition: 0.15s;
 }
 
+.navbar__toggle:hover{
+  color: var( --anchor-hover-color);
+}
 /**
  * Menu side bar
  */