Update Code

package.json

@@ -14,7 +14,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
-    "typewriter-effect": "^2.21.0"
+    "typewriter-effect": "^2.21.0",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/components/buffer/buffer.module.css

@@ -1,9 +1,18 @@
-.bufferContainer {
+.bufferLaptop {
   height: 20px;
   display: flex;
   flex-direction: row;
 }
 
-.button {
-  background: white;
+.bufferMobile{
+    height: 40px;
+    background: #11151C;
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+    padding: 5px;
+}
+.github{
+    color:white;
+    cursor: pointer;
 }

src/app/components/buffer/buffer.tsx

@@ -1,7 +1,18 @@
 "use client";
 import styles from "./buffer.module.css";
+import { useMediaQuery } from "usehooks-ts"
+import gitImage from "../../../../public/gitCat.png"
+import Image from "next/image"
 
 function Buffer() {
-  return <div className={styles.bufferContainer}></div>;
+  const isDesctop = useMediaQuery('(min-width: 640px)',{
+      initializeWithValue:false
+  })
+  if (isDesctop) return <div className={styles.bufferLaptop}>Buffer line</div>;
+  return (<div className={styles.bufferMobile}>
+            <a href="https://github.com/RamdaniRamdane" target="_blank">
+                <Image src={gitImage} alt="rey" width={30} height={30}  />
+            </a> 
+          </div>)
 }
 export default Buffer;

src/app/components/linecounter/linecouter.tsx

@@ -1,24 +1,25 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import styles from "./linecouter.module.css";
+import { useWindowSize } from "usehooks-ts";
 
 export default function LineCounter() {
-  const [height, setHeight] = useState(0);
-  const [nums, setNums] = useState(Array.from(Array(60).keys(), (n) => n + 1));
 
-  const handleNums = () => {
-    setHeight(window.innerHeight);
+  const [nums, setNums] = useState([1]);
+  const { height = 0 } = useWindowSize()
+
+  const handleNums = useCallback(() => {
     let nbLines = (height - 15) / 14;
     let arr = [];
     for (let i = 1; i <= Math.ceil(nbLines); i++) {
       arr.push(i);
     }
     setNums(arr);
-  };
-  useEffect(() => {
-    window.addEventListener("resize", handleNums);
-    return () => window.removeEventListener("resize", handleNums);
-  });
+  },[setNums , height])
+
+  useEffect(()=>{
+      handleNums()
+  },[handleNums])
 
   return (
     <>

src/app/components/navbar/navbar.module.css

@@ -4,31 +4,23 @@
   flex-direction: row;
 }
 
-.buttonMove,
 .button {
   color: white;
-  background: #ffaa3350;
-  height: 20px;
+  height: 40px;
   position: absolute;
-  top: 0;
-  left: 200px;
+  top: 5;
+  left: 5;
   cursor: pointer;
-}
-.button {
-  top: 0;
-  left: 0;
+  margin: 5px;
+  z-index: 1;
 }
 
-.buttonMove:hover,
-.button:hover {
-  background: #ffaa3370;
-}
 
-.leftSide {
+.leftSide , .leftSidePhone  {
   background: #080c1299;
   backdrop-filter: blur(8px);
   height: 100vh;
-  width: 200px;
+  width: 250px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -46,7 +38,8 @@
   width: 100%;
   padding: 0;
   display: flex;
-  text-align: start;
+  flex-direction: row ;
+  justify-content:space-between ;
 }
 
 .logo {
@@ -64,11 +57,15 @@
     "Open Sans",
     "Helvetica Neue",
     sans-serif;
-  font-size: 1.8rem;
-  margin-left: 3px;
-  font-weight: 200;
+  font-size: 1.9rem;
+  font-weight: 900;
   color: #eeeeee;
-  margin-bottom: 10px;
+}
+.closebtn{
+    color:white ;
+    font-weight: 200;
+    font-size: 1.8rem;
+    cursor: pointer;
 }
 
 .folderName {
@@ -87,17 +84,19 @@
     "Helvetica Neue",
     sans-serif;
   color: #ffaa33;
-  font-weight: 500;
+  font-weight: 600;
   padding: 5px 0px 0px 20px;
+  font-size: 1.5rem;
 }
 
 .pwdName {
   color: #ff8f40;
-  font-size: 0.9rem;
+  font-size: 1rem;
   font-weight: 300;
   font-style: italic;
   margin-bottom: 5px;
   transition: 0.3s;
+  margin : 5px 0
 }
 
 .pwdName:hover {
@@ -109,6 +108,7 @@
   margin-left: 30px;
   border-left: solid 1px #9993;
   color: #666;
+  font-size: 1.2rem;
 }
 
 .fileName:hover {
@@ -122,4 +122,10 @@
   background: #191e2a90;
   color: #eee;
   transition: 0.3s;
+  font-size: 1.2rem;
+}
+
+.leftSidePhone{
+  width: 300px;
+  box-shadow: 0 0 200px 0px #000;
 }

src/app/components/navbar/navbar.tsx

@@ -7,29 +7,48 @@ import React from "react";
 import { usePathname } from "next/navigation";
 import hamburger from "../../../../public/ham.svg";
 import Image from "next/image";
+import { useMediaQuery } from 'usehooks-ts'
 
 function NavBar() {
-  const [indicatorLeftSide, setIndicatorLeftSide] = useState(-1);
+  const isDesctop = useMediaQuery('(min-width: 640px)' , {
+      initializeWithValue:false 
+  })
+
+
+  const [indicatorLeftSide, setIndicatorLeftSide] = useState( -1 ); 
   const [indicatorAbout, setIndicatorAbout] = useState(1);
   const [indicatorProjects, setIndicatorProjects] = useState(1);
   const [indicatorContact, setIndicatorContact] = useState(1);
   const [indicatorHobies, setIndicatorHobies] = useState(1);
   const route = usePathname();
   const pathname = route;
+
+
+
+  const handleLeftSideDisplay= useCallback(()=> {
+    if(!isDesctop) setIndicatorLeftSide((a) => a * -1);
+  },[isDesctop])
+
+
+
   const handleKeyPress = useCallback((event: KeyboardEvent) => {
     event.key == "t" && handleLeftSideDisplay();
-  }, []);
+  }, [handleLeftSideDisplay]);
 
-  useEffect(() => {
+
+  useEffect(() =>{
     document.addEventListener("keydown", handleKeyPress);
     return () => {
       document.removeEventListener("keydown", handleKeyPress);
     };
   }, [handleKeyPress]);
 
-  function handleLeftSideDisplay() {
-    setIndicatorLeftSide((a) => a * -1);
-  }
+
+
+  useEffect(() => {
+    setIndicatorLeftSide(isDesctop ? 1 : -1);
+  }, [isDesctop]);
+
   function handleAboutClick() {
     setIndicatorAbout((a) => a * -1);
   }
@@ -78,27 +97,28 @@ function NavBar() {
   ];
   return (
     <div className={styles.container}>
-      {indicatorLeftSide > 0 && (
-        <div className={styles.leftSide}>
+      {  indicatorLeftSide > 0  && (
+        <div className={isDesctop ? styles.leftSide : styles.leftSidePhone}>
           <div className={styles.logoContainer}>
-            <h1 className={styles.logo}>REY</h1>
+            <Link href="/" className={styles.logo}>REY</Link>
+            { !isDesctop && (<h1  className={styles.closebtn} onClick = {handleLeftSideDisplay}> x </h1>) }
           </div>
           <ul className={styles.links}>
             <li className={styles.pwdName}>~/personal/portfolio{pathname}</li>
 
             {Folders.map((folder, index) => (
               <div key={index}>
-                <li
+                <a 
                   className={styles.folderName}
                   onClick={() => handleClick(folder.name)}
                 >
                   <BiSolidFolder /> {folder.name}
-                </li>
+                </a>
                 {folder.indicator > 0 && (
                   <>
                     {folder.files.map((file, subindex) => (
                       <div key={subindex}>
-                        <Link href={file.path}>
+                        <Link href={file.path} onClick={handleLeftSideDisplay}>
                           <li
                             className={
                               pathname === file.path
@@ -118,12 +138,11 @@ function NavBar() {
           </ul>
         </div>
       )}
-      <div
-        className={indicatorLeftSide > 0 ? styles.buttonMove : styles.button}
-        onClick={handleLeftSideDisplay}
-      >
-        <Image src={hamburger} alt="tree" width={20} height={20} />
+      { !isDesctop && indicatorLeftSide < 0 && (
+      <div className={styles.button} onClick={handleLeftSideDisplay}>
+        <Image src={hamburger} alt="ham" width={30} height={30} />
       </div>
+      )}
     </div>
   );
 }

src/app/layout.tsx

@@ -21,16 +21,6 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <div className={styles.wrapper}>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
         <main className={styles.container}>
           <div className={styles.leftSide}>
             <NavBar />