[feat] add loading screen and bar

app/(root)/layout.js

@@ -1,9 +1,5 @@
-import "../globals.css";
+"use client"
 import Sidebar from "@/components/Sidebar";
-import { config } from "@fortawesome/fontawesome-svg-core";
-import "@fortawesome/fontawesome-svg-core/styles.css";
-config.autoAddCss = false;
-
 export const metadata = {
 	title: "Create Next App",
 	description: "Generated by create next app",

app/(root)/loading.js

@@ -1,7 +1,11 @@
 export default function Loading() {
 	return (
-    <div className="flex justify-center items-center h-screen w-screen bg-gray-900">
+		<>
-      <h1 className="text-4xl text-gray-100">Loading...</h1>
+			(
+			<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
+				<h1 className="text-4xl text-gray-900">Loading...</h1>
 			</div>
 			)
+		</>
+	);
 }

app/(root)/page.js

@@ -4,6 +4,7 @@ import Image from "next/image";
 import "../globals.css";
 import { motion } from "framer-motion";
 import Link from "next/link";
+
 // components
 import Button from "@/components/Button";
 import Me from "../../public/img/me.jpg";
@@ -23,6 +24,8 @@ const MyPage = () => {
 		scrollingSpeed: 1000,
 		licenseKey: "gplv3-license",
 		menu: "#sidebar",
+		lockAnchors: false,
+		
 	};
 
 	return (
@@ -168,7 +171,7 @@ const MyPage = () => {
 										interest.
 									</motion.p>
 									<motion.div
-										initial={{ y: 50, opacity: 0 }}
+										initial={{ y: 40, opacity: 0 }}
 										whileInView={{ y: 0, opacity: 1 }}
 										transition={{
 											delay: 0.3,
@@ -203,7 +206,7 @@ const MyPage = () => {
 											type: "spring",
 										}}></motion.div>
 								</div>
-								<div className="z-10 w-full absolute md:w-auto  md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 overflow-hidden py-5">
+								<div className="z-10 w-full absolute md:w-auto  md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 py-5">
 									<motion.h1
 										className="text-black text-5xl md:text-8xl font-bold"
 										initial={{ x: -100, opacity: 0 }}
@@ -227,7 +230,7 @@ const MyPage = () => {
 										done and currently working on.
 									</motion.p>
 									<motion.div
-										initial={{ y: 50, opacity: 0 }}
+										initial={{ y: 40, opacity: 0 }}
 										whileInView={{ y: 0, opacity: 1 }}
 										transition={{
 											delay: 0.3,
@@ -247,7 +250,7 @@ const MyPage = () => {
 								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 									<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
 								</div>
-								<div className="z-10 w-full absolute md:w-auto  md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
+								<div className="z-10 w-full absolute md:w-auto  md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 overflow-hidden">
 									<motion.h1
 										className="text-black text-5xl md:text-8xl font-bold"
 										initial={{ x: -100, opacity: 0 }}
@@ -285,7 +288,7 @@ const MyPage = () => {
 										<motion.a
 											href="#"
 											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
-											initial={{ y: 50, opacity: 0 }}
+											initial={{ y: 40, opacity: 0 }}
 											whileInView={{ y: 0, opacity: 1 }}
 											transition={{
 												y: { delay: 0.1 },
@@ -300,7 +303,7 @@ const MyPage = () => {
 										<motion.a
 											href="#"
 											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
-											initial={{ opacity: 0, y: 50 }}
+											initial={{ opacity: 0, y: 40 }}
 											whileInView={{ opacity: 1, y: 0 }}
 											transition={{
 												y: { delay: 0.2 },
@@ -314,7 +317,7 @@ const MyPage = () => {
 										<motion.a
 											href="#"
 											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
-											initial={{ opacity: 0, y: 50 }}
+											initial={{ opacity: 0, y: 40 }}
 											whileInView={{ opacity: 1, y: 0 }}
 											transition={{
 												y: { delay: 0.3 },
@@ -328,7 +331,7 @@ const MyPage = () => {
 										<motion.a
 											href="#"
 											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
-											initial={{ opacity: 0, y: 50 }}
+											initial={{ opacity: 0, y: 40 }}
 											whileInView={{ opacity: 1, y: 0 }}
 											transition={{
 												y: { delay: 0.4 },
@@ -342,7 +345,7 @@ const MyPage = () => {
 										<motion.a
 											href="#"
 											className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
-											initial={{ opacity: 0, y: 50 }}
+											initial={{ opacity: 0, y: 40 }}
 											whileInView={{ opacity: 1, y: 0 }}
 											transition={{
 												y: { delay: 0.5 },

app/about/loading.js

@@ -0,0 +1,11 @@
+export default function Loading() {
+	return (
+		<>
+			(
+			<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
+				<h1 className="text-4xl text-gray-900">Loading...</h1>
+			</div>
+			)
+		</>
+	);
+}

app/about/page.js

@@ -1,4 +1,5 @@
 "use client";
+import { useEffect } from "react";
 import Link from "next/link";
 import { motion } from "framer-motion";
 import Button from "@/components/Button";
@@ -11,9 +12,9 @@ import Me1 from "@/public/img/me1.jpg";
 import Me2 from "@/public/img/me2.jpg";
 import Me3 from "@/public/img/me3.jpg";
 export default function Page() {
-	// useEffect(() => {
+	useEffect(() => {
-	// 	window.scrollTo(0, 0);
+		window.scrollTo(0, 0);
-	// }, []);
+	}, []);
 
 	return (
 		<>
@@ -21,9 +22,9 @@ export default function Page() {
 				<div className="relative h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10">
 					<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 						<motion.div
-							initial={{ opacity: 1, scale: 1 }}
+							initial={{  scale: 1 }}
-							animate={{ opacity: 1, scale: 1.6 }}
+							animate={{ scale: 1.6 }}
-							transition={{  ease: "easeInOut" }}
+							transition={{  ease: "circOut", duration: 1}}
 							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
 					</div>
 					<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
@@ -38,9 +39,9 @@ export default function Page() {
 							A brief introduction about me and my interest.
 						</p>
 						<motion.div
-							initial={{ opacity: 0, y: 100 }}
+							initial={{ opacity: 0,  }}
-							animate={{ opacity: 1, y: 0 }}
+							animate={{ opacity: 1, }}
-							transition={{ duration: 1 }}
+							transition={{ duration: 0.5, ease: "circOut" }}
 							onClick={() => {
 								window.scrollTo({
 									top: 1000,

app/globals.css

@@ -26,6 +26,7 @@ html {
 body {
 	font-family: 'Poppins', sans-serif !important;
 	color: black;
+	background-color: #f6f6f6;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -84,3 +85,4 @@ a[title]:hover:after {
 	font-size: 0.8rem;
 
 }
+

app/layout.js

@@ -1,20 +1,22 @@
+"use client";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
-import Sidebar from "@/components/Sidebar";
 import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
 config.autoAddCss = false
 
+
+import TopProgressBar from "@/components/TopProgressBar";
+import "./nprogress.css";
 export const metadata = {
 	title: "Create Next App",
 	description: "Generated by create next app",
 };
-
 export default function RootLayout({ children }) {
-
 	return (
 		<html lang="en">
 			<body>
+				<TopProgressBar />
 				<Navbar />
 				{children}
 			</body>

app/nprogress.css

@@ -0,0 +1,84 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: rgb(42, 42, 42);
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 5px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px rgb(147, 147, 147), 0 0 5px rgb(147, 147, 147);
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: rgb(73, 73, 73);
+  border-left-color: rgb(67, 67, 67);
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: fixed;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

app/projects/loading.js

@@ -0,0 +1,11 @@
+export default function Loading() {
+	return (
+		<>
+			(
+			<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
+				<h1 className="text-4xl text-gray-900">Loading...</h1>
+			</div>
+			)
+		</>
+	);
+}

app/projects/page.js

@@ -1,4 +1,5 @@
 "use client";
+import { useEffect } from "react";
 import Link from "next/link";
 import { motion } from "framer-motion";
 import Button from "@/components/Button";
@@ -14,9 +15,9 @@ const projects = () => {
 };
 
 export default function Page() {
-	// useEffect(() => {
+	useEffect(() => {
-	// 	window.scrollTo(0, 0);
+		window.scrollTo(0, 0);
-	// }, []);
+	}, []);
 
 	return (
 		<>
@@ -24,9 +25,9 @@ export default function Page() {
 				<div className="relative h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10">
 					<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 						<motion.div
-							initial={{ opacity: 1, scale: 1 }}
+							initial={{ scale: 1 }}
-							animate={{ opacity: 1, scale: 1.6 }}
+							animate={{ scale: 1.6 }}
-							transition={{  ease: "easeInOut" }}
+							transition={{ duration: 1, ease: "circOut" }}
 							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
 					</div>
 					<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
@@ -44,7 +45,7 @@ export default function Page() {
 						<motion.div
 							initial={{ opacity: 0, y: 100 }}
 							animate={{ opacity: 1, y: 0 }}
-							transition={{ duration: 1 }}
+							transition={{ duration: 0.5, ease: "circOut" }}
 							onClick={() => {
 								window.scrollTo({
 									top: 1000,
@@ -122,7 +123,6 @@ export default function Page() {
 									}}
 									transition={{
 										delay: 0.5,
-										
 									}}
 									className="w-full h-full">
 									<Image
@@ -284,12 +284,9 @@ export default function Page() {
 				{/* view in archive btn */}
 				<div className="flex justify-center items-center flex-col my-5 self-start ">
 					<Button variation="primary">
-					<Link href="projects/archive">
+						<Link href="projects/archive">View In Archive</Link>
-					View In Archive
-					</Link>
 					</Button>
 				</div>
-
 			</main>
 		</>
 	);

components/Hr.jsx

@@ -7,7 +7,7 @@ export default function Hr() {
 				className="bg-gray-700 w-20 h-1 rounded-full mb-2"
 				initial={{
 					opacity: 0,
-					x: -100,
+					x: -50,
 				}}
 				whileInView={{
 					opacity: 1,

components/Navbar.js

@@ -3,8 +3,12 @@ import { useRef, useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import Link from "next/link";
 
-const NavItems = ({ isNavOpen }) => {
+const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 	const [isMobile, setIsMobile] = useState(false);
+
+	  const handleItemClick = () => {
+			setIsNavOpen(false);
+		};
 	const navVariant = {
 		open: (height = 1000) => ({
 			clipPath: `circle(${height + 400}px at calc(100% - 40px) 40px)`,
@@ -74,9 +78,6 @@ if (isMobile) {
 		},
 	};
 
-
-
-
 	return (
 		<>
 			<motion.div
@@ -94,34 +95,66 @@ if (isMobile) {
 							className="text-6xl font-bold text-white">
 							Menu
 						</motion.h1>
-    <Link href="/"> 
+						<a href="/#home">
-      <div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1}>
+							<div
-        <motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
+								onClick={handleItemClick}
+								className="text-2xl font-bold text-white"
+								variants={itemVariants}
+								animate={isNavOpen ? "open" : "closed"}
+								delay={1}>
+								<motion.h2
+									className="text-white"
+									variants={itemVariants}
+									animate={isNavOpen ? "open" : "closed"}>
 									Home
 								</motion.h2>
 							</div>
-    </Link>
+						</a>
 						<Link href="/about">
-      <div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.2}>
+							<div
-        <motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
+								onClick={handleItemClick}
+								className="text-2xl font-bold text-white"
+								variants={itemVariants}
+								animate={isNavOpen ? "open" : "closed"}
+								delay={1.2}>
+								<motion.h2
+									className="text-white"
+									variants={itemVariants}
+									animate={isNavOpen ? "open" : "closed"}>
 									About
 								</motion.h2>
 							</div>
 						</Link>
 						<Link href="/projects">
-      <div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.3}>
+							<div
-        <motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
+								onClick={handleItemClick}
+								className="text-2xl font-bold text-white"
+								variants={itemVariants}
+								animate={isNavOpen ? "open" : "closed"}
+								delay={1.3}>
+								<motion.h2
+									className="text-white"
+									variants={itemVariants}
+									animate={isNavOpen ? "open" : "closed"}>
 									Projects
 								</motion.h2>
 							</div>
 						</Link>
-    <Link href="/contact"> 
+						<a href="/#contact">
-      <div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.4}>
+							<div
-        <motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
+								onClick={handleItemClick}
+								className="text-2xl font-bold text-white"
+								variants={itemVariants}
+								animate={isNavOpen ? "open" : "closed"}
+								delay={1.4}>
+								<motion.h2
+									className="text-white"
+									variants={itemVariants}
+									animate={isNavOpen ? "open" : "closed"}>
 									Contact
 								</motion.h2>
 							</div>
-    </Link>
+						</a>
 					</div>
 				</div>
 			</motion.div>
@@ -141,11 +174,12 @@ const Navbar = () => {
 		<>
 			<nav
 				ref={navRef}
-				className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${isNavOpen ? "bg-transparent" : "bg-gray-50"} inset-0 backdrop-blur-md opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
+				className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${
+					isNavOpen ? "bg-transparent" : "bg-gray-50"
+				} inset-0 backdrop-blur-md opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
 				<div className="">
 					<h1 className="text-2xl">Alvalens</h1>
 				</div>
-				{/* toggler */}
 				<div className="flex flex-row items-center">
 					<button
 						className="burger button flex flex-col justify-center items-center space-y-1.5 "
@@ -170,7 +204,10 @@ const Navbar = () => {
 				</div>
 			</nav>
 			{/* items */}
-			<NavItems isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} />
+			<NavItems
+				isNavOpen={isNavOpen}
+				setIsNavOpen={setIsNavOpen}
+			/>
 		</>
 	);
 };

components/TopProgressbar.jsx

@@ -0,0 +1,64 @@
+import Router from "next/router";
+import NProgress from "nprogress";
+
+let timer;
+let state;
+let activeRequests = 0;
+
+function load() {
+	if (state === "loading") {
+		return;
+	}
+
+	state = "loading";
+
+	timer = setTimeout(() => {
+		NProgress.start();
+	}, 1);
+}
+
+function stop() {
+	if (activeRequests > 0) {
+		return;
+	}
+
+	state = "stop";
+
+	clearTimeout(timer);
+	NProgress.done();
+}
+
+function routeChangeStart() {
+	if (window.location.pathname !== Router.pathname) {
+		load();
+	}
+}
+
+Router.events.on("routeChangeStart", routeChangeStart);
+Router.events.on("routeChangeComplete", stop);
+Router.events.on("routeChangeError", stop);
+
+const originalFetch = window.fetch;
+window.fetch = async function (...args) {
+	if (activeRequests === 0) {
+		load();
+	}
+
+	activeRequests++;
+
+	try {
+		const response = await originalFetch(...args);
+		return response;
+	} catch (error) {
+		return Promise.reject(error);
+	} finally {
+		activeRequests -= 1;
+		if (activeRequests === 0) {
+			stop();
+		}
+	}
+};
+
+export default function TopProgressbar() {
+	return null;
+}

package.json

@@ -20,6 +20,7 @@
     "eslint-config-next": "13.4.19",
     "framer-motion": "^10.16.2",
     "next": "13.4.19",
+    "nprogress": "^0.2.0",
     "postcss": "8.4.28",
     "react": "18.2.0",
     "react-dom": "18.2.0",

pnpm-lock.yaml

@@ -38,6 +38,9 @@ dependencies:
   next:
     specifier: 13.4.19
     version: 13.4.19(react-dom@18.2.0)(react@18.2.0)
+  nprogress:
+    specifier: ^0.2.0
+    version: 0.2.0
   postcss:
     specifier: 8.4.28
     version: 8.4.28
@@ -1896,6 +1899,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}