v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor and update project components for Next.js 15 compatibility (#6)

Browse source 
* refactor: update all modules to latest version

* refactor: update layout to match nextjs 15 convention

* fix: implement TopProgressBar as Client

* fix: remove unnecessary locale prop

* fix: update postcss.config.js export

* fix: comment out styles

* fix: ref usage in useIntersectionObserver and update Navbar

* chore: performance optimizations

* fix: simplify Loading component structure

* refactor: move ProjectCard component and add prop types validation
This commit is contained in:
Alvalen Shafel 2025-03-18 12:39:32 +07:00 • committed by GitHub
parent 481bc8324e
commit 7f0c142dda
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 3422 additions and 2569 deletions
Download patch file Download diff file Expand all files Collapse all files

11
components/ClientTopProgressBar.jsx Normal file
View file

@ -0,0 +1,11 @@
"use client";
import dynamic from "next/dynamic";
const TopProgressBar = dynamic(() => import("@/components/TopProgressbar"), {
ssr: false,
});
export default function ClientTopProgressBar() {
return <TopProgressBar />;
}

20
components/Navbar.jsx
View file

@ -99,7 +99,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
type: "spring",
stiffness: 400,
damping: 40,
},
},
},
};
@ -111,7 +111,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
animate={isNavOpen ? "open" : "closed"}
initial={false}>
<div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[100vh] bg-gray-700 min-w-[100vw] ">
<div className="flex flex-col items-center space-y-8 my-auto mx-0">
<div className="flex flex-col items-center space-y-8 my-auto mx-0 z-50">
{/* title */}
<motion.h1
variants={itemVariants}
@ -119,7 +119,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
className="text-6xl font-bold text-white ">
Menu
</motion.h1>
<a href="/#home">
<Link href="/#home">
<div
className="text-2xl font-bold text-white"
onClick={handleItemClick}>
@ -131,7 +131,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
Home
</motion.h2>
</div>
</a>
</Link>
<Link href="/about">
<div
onClick={handleItemClick}
@ -158,7 +158,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
</motion.h2>
</div>
</Link>
<a href="/#contact">
<Link href="/#contact">
<div
onClick={handleItemClick}
className="text-2xl font-bold text-white">
@ -170,7 +170,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
Contact
</motion.h2>
</div>
</a>
</Link>
</div>
</div>
</motion.div>
@ -209,15 +209,11 @@ const Navbar = () => {
onClick={toggleNav}>
<div
className={`w-10 h-1 bg-black rounded-full transition-all ease duration-300 ${
isNavOpen
? "rotate-45 bg-white translate-y-[2px]"
: ""
isNavOpen ? "rotate-45 bg-white translate-y-[2px]" : ""
}`}></div>
<div
className={`w-10 h-1 bg-black rounded-full transition-all ease duration-300 ${
isNavOpen
? "-rotate-45 -translate-y-2 bg-white"
: ""
isNavOpen ? "-rotate-45 -translate-y-2 bg-white" : ""
}`}></div>
</button>
</div>