diff --git a/.gitignore b/.gitignore
index 030c44e..e9e2268 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,10 @@
 # Ignore node_modules directory
 node_modules/
 
+#Just for now
+# /BackEnd/
+
+yarn.lock
 # Ignore macOS specific files
 .DS_Store
 
diff --git a/.hintrc b/.hintrc
index b082298..649ad06 100644
--- a/.hintrc
+++ b/.hintrc
@@ -11,4 +11,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..74c06b3
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "msedge",
+            "request": "launch",
+            "name": "Open index.html",
+            "file": "/Users/ndevu/Desktop/Project/MY BRAND/My-BRAND/index.html"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index cc7f04c..8be1477 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
     "liveServer.settings.port": 5501,
     "files.autoSave": "afterDelay",
-    "editor.mouseWheelZoom": true
+    "editor.mouseWheelZoom": true,
+    "CodeGPT.apiKey": "CodeGPT Plus Beta"
 }
\ No newline at end of file
diff --git a/README.md b/README.md
index e7cf4cc..18edb8f 100644
--- a/README.md
+++ b/README.md
@@ -14,20 +14,20 @@ As a Full Stack Developer, I am committed to delivering seamless and innovative
 - **Web Development:** Crafting responsive and user-centric websites with captivating frontend interfaces and robust backend architectures.
 - **UX Design:** Elevate your digital presence with intuitive and visually engaging user experiences.
 
-## Deployment Status
-
-[![Netlify Status](https://api.netlify.com/api/v1/badges/a9e4b7ce-1ea6-45f4-8bb2-95563b978c99/deploy-status)](https://app.netlify.com/sites/ndevuspace/deploys)
-
 ## Contact
 
 Do you have questions or want to connect with me? Reach out on my social media platforms or through the [contact form](#fragment) on my portfolio.
 
 - LinkedIn: [Ndevu-LinkedIn](www.linkedin.com/in/jean-paul-elisa)
 - Twitter: [@Ndevu-Twitter](https://twitter.com)
-- Email: <niyokwizerwajeanpaulelisa@gmail.com>
+- Email: < niyokwizerwajeanpaulelisa@gmail.com>
 
 Feel free to explore my code and creations. Let's build something amazing together!
 
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
+
+ <!-- git push origin fixingDeploymentErros
+ 
+ git credential-manager erase -->
diff --git a/config.js b/config.js
new file mode 100644
index 0000000..9ee53eb
--- /dev/null
+++ b/config.js
@@ -0,0 +1,2 @@
+
+export const BASE_URL ="http://localhost:6090"
diff --git a/images/gith.png b/images/gith.png
new file mode 100644
index 0000000..2d8b53f
Binary files /dev/null and b/images/gith.png differ
diff --git a/images/github.png b/images/github.png
new file mode 100644
index 0000000..7a054cb
Binary files /dev/null and b/images/github.png differ
diff --git a/images/githubog.png b/images/githubog.png
new file mode 100644
index 0000000..d1af190
Binary files /dev/null and b/images/githubog.png differ
diff --git a/images/project/GRE.jpg b/images/project/GRE.jpg
new file mode 100644
index 0000000..8dfe701
Binary files /dev/null and b/images/project/GRE.jpg differ
diff --git a/images/project/e-commerce.jpg b/images/project/e-commerce.jpg
new file mode 100644
index 0000000..8ae49a5
Binary files /dev/null and b/images/project/e-commerce.jpg differ
diff --git a/images/project/green.jpg b/images/project/green.jpg
new file mode 100644
index 0000000..d6bee6b
Binary files /dev/null and b/images/project/green.jpg differ
diff --git a/index.html b/index.html
index 1b117e0..35854d8 100644
--- a/index.html
+++ b/index.html
@@ -8,16 +8,12 @@
     <link rel="stylesheet" type="text/css" href="styles/common.css">
     <link rel="stylesheet" type="text/css" href="styles/header.css">
     <link rel="stylesheet" type="text/css" href="styles/footer.css">
-    <link rel="stylesheet" type="text/css" href="styles/filters.css">
     <link rel="stylesheet" type="text/css" href="styles/introduction.css">
     <link rel="stylesheet" type="text/css" href="styles/abaut.css">
     <link rel="stylesheet" type="text/css" href="styles/service.css">
     <link rel="stylesheet" type="text/css" href="styles/project.css">
     <link rel="stylesheet" type="text/css" href="styles/blogs.css">
-    <link rel="stylesheet" type="text/css" href="styles/subscribe.css">
     <link rel="stylesheet" type="text/css" href="styles/contact.css">
-    <link rel="stylesheet" type="text/css" href="styles/comment.css">
-    <link rel="stylesheet" type="text/css" href="styles/likeCommentAndShare.css">
     
     <!-- LINK FOR LIKE ICON  -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -27,33 +23,41 @@
     
       <!-- LINK FOR SHARE ICON -->
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-      
 
-    <link rel="icon" type="image/png" href="../images/logo1.png">
+      <!-- lINK FOR ROBOTO -->
+      <!-- <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> -->
+
+    <link rel="icon" type="image/png" href="./images/logo1.png">
 
     <title>NdevuSpace</title>
   </head>
   <body>
     <header>
        <div class="logo">
-        <a href="index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a>
+        <a href="index.html" target="_self">
+          <img src="./images/logo1.png" alt="logo">
+        </a>
       </div>
-        <div class="">
+      <button id="theme">Dark</button> 
+        <div class="naviga">
+
+          <input type="checkbox" id="sidebar-active">
+          <label for="sidebar-active" class="open-sidebar-button">
+            <svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
+          </label>
+          <label id="overlay" for="sidebar-active"></label>
+
           <div class="navigation flex-row"> 
             <a href="./views/skills.html">Skills</a>
-            <a href="./views/about.html">About</a>
-            <a href="./views/hire_me.html">Hire me</a>
-            <a href="./views/services.html">Service</a>
+            <a href="#aboutme">About</a>
             <a href="./views/blogs.html">Blogs</a>
             <a href="#contactme">Contact me</a>
             <a href="./views/projects.html">Portfolio</a>
-            <a href="./views/profile_view.html">
-              <div class="admin">
-                <img src="../images/mypic.png" alt="My Picture">
-             </div>
-            </a>
+            <a href="./views/experience.html">Experience</a>
           </div>
-          <button class="menu-btn"><img src="../images/menu.png" alt="Menu"></button>
+          
         </div>
       </header>
 
@@ -64,8 +68,8 @@ <h1 class="big_one">Welcome to my Digital space!</h1>
                 
         <h2 class="bigg">I'm Ndevu!</h2>
   
-          <h4>And I'm Software Developer, Web Developer,  UI/UX Designer, and I act as a Full stack developer in both.  
-          </h4>
+          <h1>A passionate Full Stack Software Developer.  
+          </h1>
   
         <div class="haveYou">
           <p>Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn 
@@ -75,18 +79,22 @@ <h4>And I'm Software Developer, Web Developer,  UI/UX Designer, and I act as a F
           goes hand in hands with my development skills.
         </p>
         </div>
-        <br>
-        <br>
           <div class="minded">
             <p>"In the world of rapid changes in technology it is crucial and 
              important to be prepared for any change in tech by working with minded developer."
             </p>
             </div>
+            <br>
+            <br>
+            <div class="social">
+              <a href="https://www.linkedin.com/in/jean-paul-elisa"><img src="./images/linkedin-logo.png"  class="social-biglogo" alt="linkedin link"></a>
+              <a href="https://github.com/Ndevu12"><img src="./images/gith.png" class="social-github" alt="linkedin link"></a>
+            </div>
       </div>
       
       <div class="face">
         <div class="mypic">
-            <img src="../images/mypic.png" alt="My Picture">
+            <img src="./images/mypic.png" alt="My Picture">
          </div>
          <p>
            Do you want to get insight directly on my Skills and Specifications?
@@ -99,341 +107,255 @@ <h4>And I'm Software Developer, Web Developer,  UI/UX Designer, and I act as a F
 
       <section id="aboutme" class="intro-about">
         <div class="coding-image">
-          <img src="../images/technology.jpg" alt="Coding&Tech">
+          <img src="./images/technology.jpg" alt="Coding&Tech">
         </div>
-        <div class="about-class">
+        <div class="about-class"> 
           <h1 class="btn">About <span class="yell">Me</span></h1>
-          <h4>Full stack Developer</h4>
+          <h4> Software Engineer | Wed Developer | UX/UI Design | Junior DevOps | Full stack Developer </h4>
           <p>
             Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving. 
             My journey in the world of technology has equipped me with a diverse set of skills, 
             allowing me to bring ideas to life through elegant and efficient code.
           </p>
-            <a href="about.html">
-              <button id="abt" class="download-about"> 
-               See more
-              </button>
-            </a>
         </div>
       </section>
        
       <!-- Service section-->
-      <h1 class="btn">Our <span class="yell">Services</span></h1>
       <section class="intro-service">
-        
+      <h1 class="btn">Top <span class="yell">Skills</span></h1>
+      <div class="intro-service-container">
+        <div class="container">
+          
         <article>
-          <div class="ux-design">
-             <div class="ux">
-                <img src="../images/UX design.jfif" alt="Coding&Tech">
+          <div class="service">
+             <div class="Insides_ervice">
+                <img src="./images/UX design.jfif" alt="Coding&Tech">
               </div>
-            <h2>UX-UI Design</h2>
+            <h2>Enterpreneurship</h2>
            <p>
             Elevate your digital presence with intuitive and visually engaging UX design. 
-            From wireframing to prototyping, I create interfaces that are not only beautiful but also ensure a smooth and delightful user journey. 
-            Let's transform your concepts into user-friendly experiences.
+            From wireframing to prototyping.
             </p>
           </div>
         </article>
       
         <article>
-          <div class="full-stack-dev">
-             <div class="full-stack">
-                 <img src="../images/full.jfif" alt="Coding&Tech">
+          <div class="service">
+             <div class="Insides_ervice">
+                 <img src="./images/full.jfif" alt="Coding&Tech">
               </div>
               <h2>Full stack Developer</h2>
                 <p>
-                   I bring a holistic approach as a Full Stack Developer, proficient in both front-end and back-end development. 
-                   My expertise spans various languages and frameworks, ensuring the creation of robust and interactive digital solutions.
+                   I bring a holistic approach as a Full Stack Developer, proficient in both front-end and back-end development.
                 </p>
-                    <a href="services.html">
-                      <button id="servicesId" class="download-my-cv"> 
-                        More services
-                      </button>
-                    </a>
             </div>
           </article>
       
         <article>
-          <div class="web-dev">
-              <div class="web">
-               <img src="../images/web.jfif" alt="Coding&Tech">
+          <div class="service">
+              <div class="Insides_ervice">
+               <img src="./images/web.jfif" alt="Coding&Tech">
               </div>
-              <h2>Web Development</h2>
+              <h2>Software Project management</h2>
             <p>
               Experience seamless digital solutions with my web development services. 
-              I specialize in crafting responsive and user-centric websites, 
-              delivering captivating frontend interfaces and structuring robust backend architectures.
+              I specialize in crafting responsive.
             </p>
           </div>
         </article>
+
+        </div>
+        <div class="more">
+        <a href="services.html">
+          <button id="servicesId" class="download-my-cv"> 
+            More services
+          </button>
+        </a>
+        <br>
+      </div>
+    </div>
       </section>
 
       <!-- Project section-->
-      <h1 class="btn">Our <span class="yell">Project</span></h1>
       <section class="intro-project"> 
+        <br>
+        <h1 class="btn">Our <span class="yell">Project</span></h1>
+        <div class="intro-project-container">
+          <div class="container">
         <article>
-          <div class="simple-shell">
+          <div class="project-card">
              <div class="sample">
-                <img src="../images/shell.jfif" alt="Unix shell image">
+                <img src="./images/shell.jfif" alt="Unix shell image">
               </div>
             <h2 class="shell">Simple Shell</h2>
-           <p class="unix">
+           <p>
             Built a user-friendly Unix-like shell with core features like command parsing and process execution.
             </p>
           </div>
         </article>
       
         <article>
-          <div class="airbnb">
+          <div class="project-card">
              <div class="sample">
-                 <img src="../images/airbnb.png" alt="AirBnB image">
+                 <img src="./images/airbnb.png" alt="AirBnB image">
               </div>
               <h2 class="air">AirBnB Clone</h2>
-                <p class="bnb">
+                <p>
                   Contributed to an AirBnB clone, focusing on UI design, 
                   search, booking functionalities, and secure transactions.
                 </p>
-                <a href="projects.html">
-                <button id="pro_projectId" class="download-my-cv"> 
-                  More Projects
-               </button>
-              </a>
             </div>
           </article>
       
         <article>
-          <div class="monty">
+          <div class="project-card">
               <div class="sample">
-               <img src="../images/monty.jfif" alt="Monty image">
+               <img src="./images/monty.jfif" alt="Monty image">
               </div>
               <h2 class="mon">Monty</h2>
-            <p class="byte">
+            <p class="">
               Designed a Monty Bytecode language interpreter, showcasing my 
               problem-solving skills in handling stacks, queues, and complex operations.
             </p>
           </div>
         </article>
+        
+      </div>
+
+        <div class="more">
+          <a href="projects.html">
+            <button id="pro_projectId" class="download-my-cv"> 
+              More Projects
+           </button>
+           </a>
+        </div>
+      </div>
       </section>
 
             <!-- Blog section-->
-            <h1 class="btn">Recently <span class="yell">Blogs</span></h1>
             <section class="intro-blog"> 
-
-              <div class="blog_section1">
+              <h1 class="btn">Recently <span class="yell">Blogs</span></h1>
+              <div class="blog-container">
               <article>
-                <div class="embark" >
                 <div class="post" data-post-id="7712">
-                  <p class="article-title"><u><a href="#">Embracing the Coding Adventure: 
-                    My Journey into Full Stack Development</a></u>
-                  </p>
-                 <p class="uni content">
+                  <h4 class="article-title">Embracing the Coding Adventure: 
+                    My Journey into Full Stack Development
+                  </h4>
+                 <p class="blog_content">
                   Embarking on the path of Full Stack Development was a thrilling adventure filled with challenges, 
-                  victories, and continuous learning. In this blog, I'll share the pivotal moments, 
-                  from the initial curiosity that sparked my interest to the milestones that shaped my coding journey. 
-                  Join me as I reflect on the lessons learned, the technologies mastered, 
-                  and the passion that fuels my commitment to creating innovative solutions........
+                  victories........
                   </p>
-                  <div class="description"></div>
-
-                  <div class="post-ratings-containers">
-                    <div class="post-rating">
-                      <span class="post-rating-button material-icons">thumb_up</span>
-                      <span class="post-rating-count">0</span>
-                    </div>
-
-                    <div class="post-commenting">    
-                      <a href="comments_page.html" rel="Comment Page">    
-                      <span class="post-commenting-button material-icons">comment</span>
-                      <span class="post-commenting-count">0</span>
-                      </a>
-                    </div>
-
-                    <div class="post-sharing">
-                      <span class="post-sharing-button material-icons">share</span>
-                      <span class="post-sharing-count">0</span>
-                    </div>
-                  </div>
                 </div>
-              </div>
+                <div class="blog-photo">
+                  <img src="./images/shell.jfif" alt="AirBnB image">
+                </div>
               </article>
             
-              
               <article>
-                <div class="unknown">
                   <div class="post" data-post-id="7711">
-                     <p class="article-title"><u><a href="#">
+                     <h4 class="article-title">
                       Navigating the Unknown: Lessons from Building a Simple Shell</a></u>
-                     </p>
-                      <p class="bn">
+                     </h4>
+                      <p class="blog_content">
                         Building a Simple Shell was more than just a coding project; 
-                        it was a journey into the heart of operating systems and command-line interfaces. In this blog post, 
-                        I'll delve into the challenges I faced, the strategies I employed to tackle them, and the valuable 
-                        lessons learned along the way. From parsing commands to handling signals, 
-                        discover the insights gained from navigating the unknown territories of shell development...
+                        it was a journey into the heart of operating systems and command-line interfaces....
                       </p>
-                      <div class="post-ratings-containers">
-                        <div class="post-rating">
-                          <span class="post-rating-button material-icons">thumb_up</span>
-                          <span class="post-rating-count">0</span>
-                        </div>
-
-                        <div class="post-commenting">    
-                          <a href="comments_page.html" rel="Comment Page">    
-                          <span class="post-commenting-button material-icons">comment</span>
-                          </a>
-                        </div>
-    
-                        <div class="post-sharing">
-                          <span class="post-sharing-button material-icons">share</span>
-                          <span class="post-sharing-count">0</span>
-                        </div>
-                     </div>
-                  </div>
+                      <div class="blog-photo">
+                        <img src="./images/mypic.png" alt="AirBnB image">
+                      </div>
                 </div>
                 </article>
-              </div>
-             
-            
-              <div class="blog_section2">
+
               <article>
-                <div class="digital">
                   <div class="post" data-post-id="7713">
-                  <p class="article-title">
-                    <u><a href="#">
+                  <h4 class="article-title">
                       Crafting Digital Experiences: The Art of UI Design in Full Stack Development
-                    </a></u>
-                  </p>
-                    <p class="byt">
+                  </h4>
+                    <p class="blog_content">
                     UI design is not just about aesthetics; it's about creating a seamless and intuitive user experience. 
-                    In this blog, I'll share my insights into the art of UI design in Full Stack Development. 
-                    From choosing color palettes to ensuring responsiveness, I'll discuss the principles and practices that elevate a 
-                    web application's user interface. Join me in exploring the balance between functionality and aesthetics, 
-                    and the satisfaction that comes from crafting digital experiences that users love........
+                    In this blog, I'll share my insights into the art of UI design in Full Stack Development........
                   </p>
-                  
-                  <div class="post-ratings-containers">
-                    <div class="post-rating">
-                      <span class="post-rating-button material-icons">thumb_up</span>
-                      <span class="post-rating-count">0</span>
-                    </div>
-                  
-
-                  <div class="post-commenting">
-                    <a href="comments_page.html" rel="Comment Page">      
-                    <span class="post-commenting-button material-icons">comment</span></a> 
+                  <div class="blog-photo">
+                    <img src="./images/mypic.png" alt="AirBnB image">
                   </div>
-
-                  <div class="post-sharing">
-                    <span class="post-sharing-button material-icons">share</span>
-                    <span class="post-sharing-count">0</span>
-                  </div>
-                </div>
-
-                 </div>
                 </div>
               </article>
-            </div>
 
-            <a href="blogs.html">
-              <button id="projectId" class="download-my-cv"> 
-                More Blogs
-             </button>
-            </a>
-            </section>
-            <br>
-            <br>
-            <br>
-
-
-            <!-- subscribe section -->
-            <section class="intro-sub">
               <article>
-               <div class="pre-sub">
-                 Subscribe to my SPACE to get notified every time there is an update!
+                <div class="post" data-post-id="7713">
+                <h4 class="article-title">
+                    Crafting Digital Experiences: The Art of UI Design in Full Stack Development
+                </h4>
+                  <p class="blog_content">
+                  UI design is not just about aesthetics; it's about creating a seamless and intuitive user experience. 
+                  In this blog, I'll share my insights into the art of UI design in Full Stack Development........
+                </p>
+                <div class="blog-photo">
+                  <img src="./images/mypic.png" alt="AirBnB image">
                 </div>
-              </article>
+              </div>
+            </article>
+            </div>
+
+            <div class="more">
+              <a href="blogs.html">
+                <button id="projectId" class="download-my-cv"> 
+                  More Blogs
+               </button>
+              </a>
+            </div>
 
-              <article>
-               <div class="sub-entry" id="sub_entry">
-                 <input class="get-email" type="text" value="Email" required>
-                 <button id="cantactId_int" class="edit_button"> 
-                   Subscribe
-                  </button>
-               </div>
-              </article>
             </section>
 
-            <br>
-              <br>
-              <br>
             <!-- contact me section -->
             <section id="contactme" class="intro-contact">
-               <h1 class="my"><span class="yell">Contact</span> Me</h1>
-                  <input class="message" type="text" value="Write the message here">
-                  <input class="get-email" type="text" value="Email Address">
-                 <button type='submit' id="subId" class="download_cv"> 
+               <h1 class="btn"><span class="yell">Contact</span> Me</h1>
+               <div class="contactme-container">
+                  <textarea class="message" type="text">Write the message here</textarea>
+                  <input class="get-email" type="email" placeholder="Enter your Email Address">
+                 <button type='submit' id="subId" class="download-my-cv"> 
                    Submit
                   </button>
+                </div>
               </section>
-              <br>
-              <br>
-              <br>
 
      <!-- Footer section-->
     <footer>
-      <div class="logo">
-        <a href="index.html" target="_self">
-        <img src="../images/logo1.png" alt="logo">
-      </a>
-      </div>
-
-         <!-- link for my social medias -->
-         <div class="socialmedia"><img src="../images/linkedin-logo.png" alt="linkin link">
-           <img src="../images/twitter-logo.png" alt="twitter link">
-         </div>
+      <div class="footer-container">
+        <div class="logo">
+          <a href="index.html" target="_self">
+          <img src="./images/logo1.png" alt="logo">
+          <p>NdevuSpace</p>
+        </a>
+        </div>
 
-      <div class="footerdesc">
-             <!-- connecting point -->
-            <div class="connection">
-               <h2>Connect with me:</h2>
+        <div class="footer-navigate">
+          <p>Navigations:</p>
+          <ul>
+          <li><a href="index.html" target="_self">Home</a></li>
+          <li><a href="./views/projects.html" target="_self">Projects</a></li>
+          <li><a href="./views/blogs.html" target="_self">Blogs</a></li>
+          <li><a href="index.html#contactme" target="_self">Contact me</a></li>
+        </ul>
+        </div>
 
-                <ul>
-                   <li> niyokwizerwajeanpaulelisa@gmail.com</li>
-                   <li>www.linkedin.com/in/jean-paul-elisa</li>
-                   <li>www.GitHub.com/Ndevu12</li>
-                 </ul>
-              </div>
-                <!-- blogs -->
-               <div class="blogs-section">
-                 <h2>Blogs:</h2>
-                    <ul>
-                    <li>My Journey into Full Stack Development</li>
-                    <li>Lessons from Building a Simple Shell</li>
-                    <li>The Art of UI Design in Full Stack Development</li>
-                  </ul>
-               </div>
-      
-                 <!-- my work -->
-                    <div class="my-work">
-                       <h2>Explore My Work:</h2>
-                       <ul> 
-                         <li>Simple shell</li>
-                         <li>AirBnB Clone</li>
-                         <li>Monty</li>
-                        </ul>
-                     </div>
-                   </div>
-                      <div class="footcopyright">
-                  ©2024 | Ndevu | Full Stack Developer | Gikondo-Kigali
-                     </div>    
+          <!-- link for my social medias -->
+          <div class="socialmedia">
+            <div class="connect">
+              <p>Connect with me:</p>
+            </div>
+            <div class="social">
+              <a href="https://www.linkedin.com/in/jean-paul-elisa"><img src="./images/linkedin-logo.png"  class="social-biglogo" alt="linkedin link"></a>
+              <a href="https://github.com/Ndevu12"><img src="./images/gith.png" class="social-github" alt="linkedin link"></a>
+            </div>
+          </div>
+      </div>
+            <div class="footcopyright">
+              <h5>©2024 | Ndevu | Full Stack Software Developer | Gikondo-Kigali</h5>
+            </div>    
     </footer>
 
         <!-- SCRIPTS -->
-    <script src="../scripts/like.js" defer></script> 
-    <script src="../scripts/share.js" defer></script>
-    <script src="../scripts/comment.js" defer></script>
-     <script src="scripts/subscribe.js" defer></script>
-     <script src="scripts/contact_me.js" defer></script>
-     <script src="scripts/ToggleMenu.js" defer></script>
+     <script src="./scripts/contact_me.js" defer></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 0c39079..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,3168 +0,0 @@
-{
-  "name": "my-brand",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "my-brand",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "express": "^4.18.3",
-        "mongoose": "^8.2.2",
-        "nodemon": "^3.1.0"
-      },
-      "devDependencies": {
-        "@11ty/eleventy": "^2.0.1"
-      }
-    },
-    "node_modules/@11ty/dependency-tree": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-2.0.1.tgz",
-      "integrity": "sha512-5R+DsT9LJ9tXiSQ4y+KLFppCkQyXhzAm1AIuBWE/sbU0hSXY5pkhoqQYEcPJQFg/nglL+wD55iv2j+7O96UAvg==",
-      "dev": true
-    },
-    "node_modules/@11ty/eleventy": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-2.0.1.tgz",
-      "integrity": "sha512-t8XVUbCJByhVEa1RzO0zS2QzbL3wPY8ot1yUw9noqiSHxJWUwv6jiwm1/MZDPTYtkZH2ZHvdQIRQ5/SjG9XmLw==",
-      "dev": true,
-      "dependencies": {
-        "@11ty/dependency-tree": "^2.0.1",
-        "@11ty/eleventy-dev-server": "^1.0.4",
-        "@11ty/eleventy-utils": "^1.0.1",
-        "@11ty/lodash-custom": "^4.17.21",
-        "@iarna/toml": "^2.2.5",
-        "@sindresorhus/slugify": "^1.1.2",
-        "bcp-47-normalize": "^1.1.1",
-        "chokidar": "^3.5.3",
-        "cross-spawn": "^7.0.3",
-        "debug": "^4.3.4",
-        "dependency-graph": "^0.11.0",
-        "ejs": "^3.1.9",
-        "fast-glob": "^3.2.12",
-        "graceful-fs": "^4.2.11",
-        "gray-matter": "^4.0.3",
-        "hamljs": "^0.6.2",
-        "handlebars": "^4.7.7",
-        "is-glob": "^4.0.3",
-        "iso-639-1": "^2.1.15",
-        "kleur": "^4.1.5",
-        "liquidjs": "^10.7.0",
-        "luxon": "^3.3.0",
-        "markdown-it": "^13.0.1",
-        "micromatch": "^4.0.5",
-        "minimist": "^1.2.8",
-        "moo": "^0.5.2",
-        "multimatch": "^5.0.0",
-        "mustache": "^4.2.0",
-        "normalize-path": "^3.0.0",
-        "nunjucks": "^3.2.3",
-        "path-to-regexp": "^6.2.1",
-        "please-upgrade-node": "^3.2.0",
-        "posthtml": "^0.16.6",
-        "posthtml-urls": "^1.0.0",
-        "pug": "^3.0.2",
-        "recursive-copy": "^2.0.14",
-        "semver": "^7.3.8",
-        "slugify": "^1.6.6"
-      },
-      "bin": {
-        "eleventy": "cmd.js"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
-    "node_modules/@11ty/eleventy-dev-server": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-1.0.4.tgz",
-      "integrity": "sha512-qVBmV2G1KF/0o5B/3fITlrrDHy4bONUI2YuN3/WJ3BNw4NU1d/we8XhKrlgq13nNvHoBx5czYp3LZt8qRG53Fg==",
-      "dev": true,
-      "dependencies": {
-        "@11ty/eleventy-utils": "^1.0.1",
-        "chokidar": "^3.5.3",
-        "debug": "^4.3.4",
-        "dev-ip": "^1.0.1",
-        "finalhandler": "^1.2.0",
-        "mime": "^3.0.0",
-        "minimist": "^1.2.8",
-        "morphdom": "^2.7.0",
-        "please-upgrade-node": "^3.2.0",
-        "ssri": "^8.0.1",
-        "ws": "^8.13.0"
-      },
-      "bin": {
-        "eleventy-dev-server": "cmd.js"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
-    "node_modules/@11ty/eleventy-utils": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.2.tgz",
-      "integrity": "sha512-Zy2leMK1DQR6Q6ZPSagv7QpJaAz9uVbb+RmVetYFp3foMeQtOSZx7w2u5daRFmP+PeNq9vO9H4xtBToYFWZwHA==",
-      "dev": true,
-      "dependencies": {
-        "normalize-path": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
-    "node_modules/@11ty/lodash-custom": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
-      "integrity": "sha512-Mqt6im1xpb1Ykn3nbcCovWXK3ggywRJa+IXIdoz4wIIK+cvozADH63lexcuPpGS/gJ6/m2JxyyXDyupkMr5DHw==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/11ty"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
-      "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
-      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.23.4",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@iarna/toml": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
-      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
-      "dev": true
-    },
-    "node_modules/@mongodb-js/saslprep": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.1.5.tgz",
-      "integrity": "sha512-XLNOMH66KhJzUJNwT/qlMnS4WsNDWD5ASdyaSH3EtK+F4r/CFGa3jT4GNi4mfOitGvWXtdLgQJkQjxSVrio+jA==",
-      "dependencies": {
-        "sparse-bitfield": "^3.0.3"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@sindresorhus/slugify": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz",
-      "integrity": "sha512-V9nR/W0Xd9TSGXpZ4iFUcFGhuOJtZX82Fzxj1YISlbSgKvIiNa7eLEZrT0vAraPOt++KHauIVNYgGRgjc13dXA==",
-      "dev": true,
-      "dependencies": {
-        "@sindresorhus/transliterate": "^0.1.1",
-        "escape-string-regexp": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@sindresorhus/transliterate": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-0.1.2.tgz",
-      "integrity": "sha512-5/kmIOY9FF32nicXH+5yLNTX4NJ4atl7jRgqAJuIn/iyDFXBktOKDxCvyGE/EzmF4ngSUvjXxQUQlQiZ5lfw+w==",
-      "dev": true,
-      "dependencies": {
-        "escape-string-regexp": "^2.0.0",
-        "lodash.deburr": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@sindresorhus/transliterate/node_modules/escape-string-regexp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@types/minimatch": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
-      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
-      "dev": true
-    },
-    "node_modules/@types/webidl-conversions": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
-      "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA=="
-    },
-    "node_modules/@types/whatwg-url": {
-      "version": "11.0.4",
-      "resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-11.0.4.tgz",
-      "integrity": "sha512-lXCmTWSHJvf0TRSO58nm978b8HJ/EdsSsEKLd3ODHFjo+3VGAyyTp4v50nWvwtzBxSMQrVOK7tcuN0zGPLICMw==",
-      "dependencies": {
-        "@types/webidl-conversions": "*"
-      }
-    },
-    "node_modules/a-sync-waterfall": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
-      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==",
-      "dev": true
-    },
-    "node_modules/abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
-    },
-    "node_modules/accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "dependencies": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/any-promise": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz",
-      "integrity": "sha512-lqzY9o+BbeGHRCOyxQkt/Tgvz0IZhTmQiA+LxQW8wSNpcTbj8K+0cZiSEvbpNZZP9/11Gy7dnLO3GNWUXO4d1g==",
-      "dev": true
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
-      "dependencies": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "node_modules/array-differ": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
-      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
-    },
-    "node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/arrify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
-      "dev": true
-    },
-    "node_modules/assert-never": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz",
-      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==",
-      "dev": true
-    },
-    "node_modules/async": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
-      "dev": true
-    },
-    "node_modules/babel-walk": {
-      "version": "3.0.0-canary-5",
-      "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
-      "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.9.6"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-    },
-    "node_modules/bcp-47": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-1.0.8.tgz",
-      "integrity": "sha512-Y9y1QNBBtYtv7hcmoX0tR+tUNSFZGZ6OL6vKPObq8BbOhkCoyayF6ogfLTgAli/KuAEbsYHYUNq2AQuY6IuLag==",
-      "dev": true,
-      "dependencies": {
-        "is-alphabetical": "^1.0.0",
-        "is-alphanumerical": "^1.0.0",
-        "is-decimal": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/bcp-47-match": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-1.0.3.tgz",
-      "integrity": "sha512-LggQ4YTdjWQSKELZF5JwchnBa1u0pIQSZf5lSdOHEdbVP55h0qICA/FUp3+W99q0xqxYa1ZQizTUH87gecII5w==",
-      "dev": true,
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/bcp-47-normalize": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-1.1.1.tgz",
-      "integrity": "sha512-jWZ1Jdu3cs0EZdfCkS0UE9Gg01PtxnChjEBySeB+Zo6nkqtFfnvtoQQgP1qU1Oo4qgJgxhTI6Sf9y/pZIhPs0A==",
-      "dev": true,
-      "dependencies": {
-        "bcp-47": "^1.0.0",
-        "bcp-47-match": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.11.0",
-        "raw-body": "2.5.2",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/body-parser/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/body-parser/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/bson": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/bson/-/bson-6.5.0.tgz",
-      "integrity": "sha512-DXf1BTAS8vKyR90BO4x5v3rKVarmkdkzwOrnYDFdjAY694ILNDkmA3uRh1xXJEl+C1DAh8XCvAQ+Gh3kzubtpg==",
-      "engines": {
-        "node": ">=16.20.1"
-      }
-    },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/character-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
-      "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==",
-      "dev": true,
-      "dependencies": {
-        "is-regex": "^1.0.3"
-      }
-    },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/commander": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-    },
-    "node_modules/constantinople": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
-      "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.6.0",
-        "@babel/types": "^7.6.1"
-      }
-    },
-    "node_modules/content-disposition": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "dependencies": {
-        "safe-buffer": "5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/dependency-graph": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
-      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
-    "node_modules/destroy": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/dev-ip": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
-      "integrity": "sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A==",
-      "dev": true,
-      "bin": {
-        "dev-ip": "lib/dev-ip.js"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/doctypes": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
-      "dev": true
-    },
-    "node_modules/dom-serializer": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/dom-serializer/node_modules/entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
-    "node_modules/domhandler": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.2.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-      "dev": true,
-      "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
-    },
-    "node_modules/ejs": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
-      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
-      "dev": true,
-      "dependencies": {
-        "jake": "^10.8.5"
-      },
-      "bin": {
-        "ejs": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/entities": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
-      "dependencies": {
-        "prr": "~1.0.1"
-      },
-      "bin": {
-        "errno": "cli.js"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/express": {
-      "version": "4.18.3",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.3.tgz",
-      "integrity": "sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==",
-      "dependencies": {
-        "accepts": "~1.3.8",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
-        "content-disposition": "0.5.4",
-        "content-type": "~1.0.4",
-        "cookie": "0.5.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
-    "node_modules/express/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/express/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/express/node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
-    },
-    "node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-      "dev": true,
-      "dependencies": {
-        "is-extendable": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fastq": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/filelist": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
-      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
-      "dev": true,
-      "dependencies": {
-        "minimatch": "^5.0.1"
-      }
-    },
-    "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/filelist/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
-      "dependencies": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "statuses": "2.0.1",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/finalhandler/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/finalhandler/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
-    },
-    "node_modules/gray-matter": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
-      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
-      "dev": true,
-      "dependencies": {
-        "js-yaml": "^3.13.1",
-        "kind-of": "^6.0.2",
-        "section-matter": "^1.0.0",
-        "strip-bom-string": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/hamljs": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/hamljs/-/hamljs-0.6.2.tgz",
-      "integrity": "sha512-/chXRp4WpL47I+HX1vCCdSbEXAljEG2FBMmgO7Am0bYsqgnEjreeWzUdX1onXqwZtcfgxbCg5WtEYYvuZ5muBg==",
-      "dev": true
-    },
-    "node_modules/handlebars": {
-      "version": "4.7.8",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
-      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.5",
-        "neo-async": "^2.6.2",
-        "source-map": "^0.6.1",
-        "wordwrap": "^1.0.0"
-      },
-      "bin": {
-        "handlebars": "bin/handlebars"
-      },
-      "engines": {
-        "node": ">=0.4.7"
-      },
-      "optionalDependencies": {
-        "uglify-js": "^3.1.4"
-      }
-    },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
-      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/htmlparser2": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
-      "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
-      "dev": true,
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.2",
-        "domutils": "^2.8.0",
-        "entities": "^3.0.1"
-      }
-    },
-    "node_modules/http-equiv-refresh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-1.0.0.tgz",
-      "integrity": "sha512-TScO04soylRN9i/QdOdgZyhydXg9z6XdaGzEyOgDKycePeDeTT4KvigjBcI+tgfTlieLWauGORMq5F1eIDa+1w==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/ignore-by-default": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
-      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA=="
-    },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-    },
-    "node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/is-alphabetical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
-      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
-      "dev": true,
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/is-alphanumerical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
-      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
-      "dev": true,
-      "dependencies": {
-        "is-alphabetical": "^1.0.0",
-        "is-decimal": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-core-module": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
-      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
-      "dependencies": {
-        "hasown": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-decimal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
-      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
-      "dev": true,
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/is-expression": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
-      "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "node_modules/is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-json": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz",
-      "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==",
-      "dev": true
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/is-promise": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
-      "dev": true
-    },
-    "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
-    },
-    "node_modules/iso-639-1": {
-      "version": "2.1.15",
-      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.15.tgz",
-      "integrity": "sha512-7c7mBznZu2ktfvyT582E2msM+Udc1EjOyhVRE/0ZsjD9LBtWSm23h3PtiRh2a35XoUsTQQjJXaJzuLjXsOdFDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/jake": {
-      "version": "10.8.7",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
-      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
-      "dev": true,
-      "dependencies": {
-        "async": "^3.2.3",
-        "chalk": "^4.0.2",
-        "filelist": "^1.0.4",
-        "minimatch": "^3.1.2"
-      },
-      "bin": {
-        "jake": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/js-stringify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
-      "dev": true
-    },
-    "node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/jstransformer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
-      "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
-      "dev": true,
-      "dependencies": {
-        "is-promise": "^2.0.0",
-        "promise": "^7.0.1"
-      }
-    },
-    "node_modules/junk": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz",
-      "integrity": "sha512-3KF80UaaSSxo8jVnRYtMKNGFOoVPBdkkVPsw+Ad0y4oxKXPduS6G6iHkrf69yJVff/VAaYXkV42rtZ7daJxU3w==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/kareem": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.5.1.tgz",
-      "integrity": "sha512-7jFxRVm+jD+rkq3kY0iZDJfsO2/t4BBPeEb2qKn2lR/9KhuksYk5hxzfRYWMPV8P/x2d0kHD306YyWLzjjH+uA==",
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
-    "node_modules/kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/kleur": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
-      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/linkify-it": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
-      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
-      "dev": true,
-      "dependencies": {
-        "uc.micro": "^1.0.1"
-      }
-    },
-    "node_modules/liquidjs": {
-      "version": "10.10.1",
-      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.10.1.tgz",
-      "integrity": "sha512-h699VW79OLoshCTjFF02tmRCrd8t/E49LSIsjLwlg4k0TbMVjxsCRXVUEsURXbfKl3HUln2cShlDQCrSNm2YaA==",
-      "dev": true,
-      "dependencies": {
-        "commander": "^10.0.0"
-      },
-      "bin": {
-        "liquid": "bin/liquid.js",
-        "liquidjs": "bin/liquid.js"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/liquidjs"
-      }
-    },
-    "node_modules/list-to-array": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
-      "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==",
-      "dev": true
-    },
-    "node_modules/lodash.deburr": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
-      "integrity": "sha512-m/M1U1f3ddMCs6Hq2tAsYThTBDaAKFDX3dwDo97GEYzamXi9SqUpjWi/Rrj/gf3X2n8ktwgZrlP1z6E3v/IExQ==",
-      "dev": true
-    },
-    "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/luxon": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
-      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/markdown-it": {
-      "version": "13.0.2",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
-      "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1",
-        "entities": "~3.0.1",
-        "linkify-it": "^4.0.1",
-        "mdurl": "^1.0.1",
-        "uc.micro": "^1.0.5"
-      },
-      "bin": {
-        "markdown-it": "bin/markdown-it.js"
-      }
-    },
-    "node_modules/markdown-it/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
-    "node_modules/maximatch": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
-      "integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==",
-      "dev": true,
-      "dependencies": {
-        "array-differ": "^1.0.0",
-        "array-union": "^1.0.1",
-        "arrify": "^1.0.0",
-        "minimatch": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/maximatch/node_modules/array-differ": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-      "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/maximatch/node_modules/array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-      "dev": true,
-      "dependencies": {
-        "array-uniq": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/maximatch/node_modules/arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
-      "dev": true
-    },
-    "node_modules/media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/memory-pager": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
-      "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg=="
-    },
-    "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.2",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/mime": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
-      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-      "dev": true,
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      }
-    },
-    "node_modules/mongodb": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.3.0.tgz",
-      "integrity": "sha512-tt0KuGjGtLUhLoU263+xvQmPHEGTw5LbcNC73EoFRYgSHwZt5tsoJC110hDyO1kjQzpgNrpdcSza9PknWN4LrA==",
-      "dependencies": {
-        "@mongodb-js/saslprep": "^1.1.0",
-        "bson": "^6.2.0",
-        "mongodb-connection-string-url": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=16.20.1"
-      },
-      "peerDependencies": {
-        "@aws-sdk/credential-providers": "^3.188.0",
-        "@mongodb-js/zstd": "^1.1.0",
-        "gcp-metadata": "^5.2.0",
-        "kerberos": "^2.0.1",
-        "mongodb-client-encryption": ">=6.0.0 <7",
-        "snappy": "^7.2.2",
-        "socks": "^2.7.1"
-      },
-      "peerDependenciesMeta": {
-        "@aws-sdk/credential-providers": {
-          "optional": true
-        },
-        "@mongodb-js/zstd": {
-          "optional": true
-        },
-        "gcp-metadata": {
-          "optional": true
-        },
-        "kerberos": {
-          "optional": true
-        },
-        "mongodb-client-encryption": {
-          "optional": true
-        },
-        "snappy": {
-          "optional": true
-        },
-        "socks": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/mongodb-connection-string-url": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mongodb-connection-string-url/-/mongodb-connection-string-url-3.0.0.tgz",
-      "integrity": "sha512-t1Vf+m1I5hC2M5RJx/7AtxgABy1cZmIPQRMXw+gEIPn/cZNF3Oiy+l0UIypUwVB5trcWHq3crg2g3uAR9aAwsQ==",
-      "dependencies": {
-        "@types/whatwg-url": "^11.0.2",
-        "whatwg-url": "^13.0.0"
-      }
-    },
-    "node_modules/mongoose": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.2.2.tgz",
-      "integrity": "sha512-6sMxe1d3k/dBjiOX4ExNTNOP0g1x0iq8eXyg+ttgIXM3HLnQ0IUyXRwVVAPFFY6O4/8uYN5dB0Ec72FrexbPpw==",
-      "dependencies": {
-        "bson": "^6.2.0",
-        "kareem": "2.5.1",
-        "mongodb": "6.3.0",
-        "mpath": "0.9.0",
-        "mquery": "5.0.0",
-        "ms": "2.1.3",
-        "sift": "16.0.1"
-      },
-      "engines": {
-        "node": ">=16.20.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mongoose"
-      }
-    },
-    "node_modules/mongoose/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-    },
-    "node_modules/moo": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
-      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
-      "dev": true
-    },
-    "node_modules/morphdom": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.2.tgz",
-      "integrity": "sha512-Dqb/lHFyTi7SZpY0a5R4I/0Edo+iPMbaUexsHHsLAByyixCDiLHPHyVoKVmrpL0THcT7V9Cgev9y21TQYq6wQg==",
-      "dev": true
-    },
-    "node_modules/mpath": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz",
-      "integrity": "sha512-ikJRQTk8hw5DEoFVxHG1Gn9T/xcjtdnOKIU1JTmGjZZlg9LST2mBLmcX3/ICIbgJydT2GOc15RnNy5mHmzfSew==",
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/mquery": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/mquery/-/mquery-5.0.0.tgz",
-      "integrity": "sha512-iQMncpmEK8R8ncT8HJGsGc9Dsp8xcgYMVSbs5jgnm1lFHTZqMJTUWTDx1LBO8+mK3tPNZWFLBghQEIOULSTHZg==",
-      "dependencies": {
-        "debug": "4.x"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "node_modules/multimatch": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
-      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
-      "dev": true,
-      "dependencies": {
-        "@types/minimatch": "^3.0.3",
-        "array-differ": "^3.0.0",
-        "array-union": "^2.1.0",
-        "arrify": "^2.0.1",
-        "minimatch": "^3.0.4"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/mustache": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
-      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
-      "dev": true,
-      "bin": {
-        "mustache": "bin/mustache"
-      }
-    },
-    "node_modules/negotiator": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
-    },
-    "node_modules/nodemon": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz",
-      "integrity": "sha512-xqlktYlDMCepBJd43ZQhjWwMw2obW/JRvkrLxq5RCNcuDDX1DbcPT+qT1IlIIdf+DhnWs90JpTMe+Y5KxOchvA==",
-      "dependencies": {
-        "chokidar": "^3.5.2",
-        "debug": "^4",
-        "ignore-by-default": "^1.0.1",
-        "minimatch": "^3.1.2",
-        "pstree.remy": "^1.1.8",
-        "semver": "^7.5.3",
-        "simple-update-notifier": "^2.0.0",
-        "supports-color": "^5.5.0",
-        "touch": "^3.1.0",
-        "undefsafe": "^2.0.5"
-      },
-      "bin": {
-        "nodemon": "bin/nodemon.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/nodemon"
-      }
-    },
-    "node_modules/nodemon/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/nodemon/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/nopt": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
-      "dependencies": {
-        "abbrev": "1"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/nunjucks": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
-      "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
-      "dev": true,
-      "dependencies": {
-        "a-sync-waterfall": "^1.0.0",
-        "asap": "^2.0.3",
-        "commander": "^5.1.0"
-      },
-      "bin": {
-        "nunjucks-precompile": "bin/precompile"
-      },
-      "engines": {
-        "node": ">= 6.9.0"
-      },
-      "peerDependencies": {
-        "chokidar": "^3.3.0"
-      },
-      "peerDependenciesMeta": {
-        "chokidar": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/nunjucks/node_modules/commander": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
-      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/parse-srcset": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
-      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
-      "dev": true
-    },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
-    },
-    "node_modules/path-to-regexp": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
-      "dev": true
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/please-upgrade-node": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
-      "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
-      "dev": true,
-      "dependencies": {
-        "semver-compare": "^1.0.0"
-      }
-    },
-    "node_modules/posthtml": {
-      "version": "0.16.6",
-      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz",
-      "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==",
-      "dev": true,
-      "dependencies": {
-        "posthtml-parser": "^0.11.0",
-        "posthtml-render": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
-    "node_modules/posthtml-parser": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
-      "integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==",
-      "dev": true,
-      "dependencies": {
-        "htmlparser2": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/posthtml-render": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz",
-      "integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==",
-      "dev": true,
-      "dependencies": {
-        "is-json": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/posthtml-urls": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/posthtml-urls/-/posthtml-urls-1.0.0.tgz",
-      "integrity": "sha512-CMJ0L009sGQVUuYM/g6WJdscsq6ooAwhUuF6CDlYPMLxKp2rmCYVebEU+wZGxnQstGJhZPMvXsRhtqekILd5/w==",
-      "dev": true,
-      "dependencies": {
-        "http-equiv-refresh": "^1.0.0",
-        "list-to-array": "^1.1.0",
-        "parse-srcset": "^1.0.2",
-        "promise-each": "^2.2.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
-      "dependencies": {
-        "asap": "~2.0.3"
-      }
-    },
-    "node_modules/promise-each": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/promise-each/-/promise-each-2.2.0.tgz",
-      "integrity": "sha512-67roqt1k3QDA41DZ8xi0V+rF3GoaMiX7QilbXu0vXimut+9RcKBNZ/t60xCRgcsihmNUsEjh48xLfNqOrKblUg==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^0.1.0"
-      }
-    },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true
-    },
-    "node_modules/pstree.remy": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
-      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w=="
-    },
-    "node_modules/pug": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz",
-      "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==",
-      "dev": true,
-      "dependencies": {
-        "pug-code-gen": "^3.0.2",
-        "pug-filters": "^4.0.0",
-        "pug-lexer": "^5.0.1",
-        "pug-linker": "^4.0.0",
-        "pug-load": "^3.0.0",
-        "pug-parser": "^6.0.0",
-        "pug-runtime": "^3.0.1",
-        "pug-strip-comments": "^2.0.0"
-      }
-    },
-    "node_modules/pug-attrs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
-      "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
-      "dev": true,
-      "dependencies": {
-        "constantinople": "^4.0.1",
-        "js-stringify": "^1.0.2",
-        "pug-runtime": "^3.0.0"
-      }
-    },
-    "node_modules/pug-code-gen": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz",
-      "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==",
-      "dev": true,
-      "dependencies": {
-        "constantinople": "^4.0.1",
-        "doctypes": "^1.1.0",
-        "js-stringify": "^1.0.2",
-        "pug-attrs": "^3.0.0",
-        "pug-error": "^2.0.0",
-        "pug-runtime": "^3.0.0",
-        "void-elements": "^3.1.0",
-        "with": "^7.0.0"
-      }
-    },
-    "node_modules/pug-error": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz",
-      "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==",
-      "dev": true
-    },
-    "node_modules/pug-filters": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
-      "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
-      "dev": true,
-      "dependencies": {
-        "constantinople": "^4.0.1",
-        "jstransformer": "1.0.0",
-        "pug-error": "^2.0.0",
-        "pug-walk": "^2.0.0",
-        "resolve": "^1.15.1"
-      }
-    },
-    "node_modules/pug-lexer": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
-      "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
-      "dev": true,
-      "dependencies": {
-        "character-parser": "^2.2.0",
-        "is-expression": "^4.0.0",
-        "pug-error": "^2.0.0"
-      }
-    },
-    "node_modules/pug-linker": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
-      "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
-      "dev": true,
-      "dependencies": {
-        "pug-error": "^2.0.0",
-        "pug-walk": "^2.0.0"
-      }
-    },
-    "node_modules/pug-load": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
-      "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
-      "dev": true,
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "pug-walk": "^2.0.0"
-      }
-    },
-    "node_modules/pug-parser": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
-      "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
-      "dev": true,
-      "dependencies": {
-        "pug-error": "^2.0.0",
-        "token-stream": "1.0.0"
-      }
-    },
-    "node_modules/pug-runtime": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
-      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==",
-      "dev": true
-    },
-    "node_modules/pug-strip-comments": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
-      "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
-      "dev": true,
-      "dependencies": {
-        "pug-error": "^2.0.0"
-      }
-    },
-    "node_modules/pug-walk": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
-      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==",
-      "dev": true
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/recursive-copy": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/recursive-copy/-/recursive-copy-2.0.14.tgz",
-      "integrity": "sha512-K8WNY8f8naTpfbA+RaXmkaQuD1IeW9EgNEfyGxSqqTQukpVtoOKros9jUqbpEsSw59YOmpd8nCBgtqJZy5nvog==",
-      "dev": true,
-      "dependencies": {
-        "errno": "^0.1.2",
-        "graceful-fs": "^4.1.4",
-        "junk": "^1.0.1",
-        "maximatch": "^0.1.0",
-        "mkdirp": "^0.5.1",
-        "pify": "^2.3.0",
-        "promise": "^7.0.1",
-        "rimraf": "^2.7.1",
-        "slash": "^1.0.0"
-      }
-    },
-    "node_modules/resolve": {
-      "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
-      "dependencies": {
-        "is-core-module": "^2.13.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "node_modules/section-matter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
-      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
-      "dev": true,
-      "dependencies": {
-        "extend-shallow": "^2.0.1",
-        "kind-of": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/semver-compare": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
-      "dev": true
-    },
-    "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
-      "dependencies": {
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "mime": "1.6.0",
-        "ms": "2.1.3",
-        "on-finished": "2.4.1",
-        "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/send/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/send/node_modules/debug/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/send/node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/send/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-    },
-    "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
-      "dependencies": {
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.18.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/set-function-length": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
-      "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
-      "dependencies": {
-        "define-data-property": "^1.1.2",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.3",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/side-channel": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "object-inspect": "^1.13.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/sift": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/sift/-/sift-16.0.1.tgz",
-      "integrity": "sha512-Wv6BjQ5zbhW7VFefWusVP33T/EM0vYikCaQ2qR8yULbsilAT8/wQaXvuQ3ptGLpoKx+lihJE3y2UTgKDyyNHZQ=="
-    },
-    "node_modules/simple-update-notifier": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
-      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
-      "dependencies": {
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/slash": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-      "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/slugify": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
-      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sparse-bitfield": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
-      "integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
-      "dependencies": {
-        "memory-pager": "^1.0.2"
-      }
-    },
-    "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-      "dev": true
-    },
-    "node_modules/ssri": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
-      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
-      "dev": true,
-      "dependencies": {
-        "minipass": "^3.1.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/strip-bom-string": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
-      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/token-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
-      "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==",
-      "dev": true
-    },
-    "node_modules/touch": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
-      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
-      "dependencies": {
-        "nopt": "~1.0.10"
-      },
-      "bin": {
-        "nodetouch": "bin/nodetouch.js"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-      "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
-      "dependencies": {
-        "punycode": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dependencies": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/uc.micro": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
-      "dev": true
-    },
-    "node_modules/uglify-js": {
-      "version": "3.17.4",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
-      "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "uglifyjs": "bin/uglifyjs"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/undefsafe": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
-      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA=="
-    },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/void-elements": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
-      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/webidl-conversions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-url": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-13.0.0.tgz",
-      "integrity": "sha512-9WWbymnqj57+XEuqADHrCJ2eSXzn8WXIW/YSGaZtb2WKAInQ6CHfaUUcTyyver0p8BDg5StLQq8h1vtZuwmOig==",
-      "dependencies": {
-        "tr46": "^4.1.1",
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/with": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
-      "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.9.6",
-        "@babel/types": "^7.9.6",
-        "assert-never": "^1.2.1",
-        "babel-walk": "3.0.0-canary-5"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/wordwrap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
-      "dev": true
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
-    },
-    "node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    }
-  }
-}
diff --git a/package.json b/package.json
deleted file mode 100644
index 8988426..0000000
--- a/package.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "name": "my-brand",
-  "version": "1.0.0",
-  "description": "This is my portfolio website",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "eleventy && mkdir -p public && cp -r _site/* public/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Ndevu12/My-BRAND.git"
-  },
-  "keywords": [
-    "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"
-  ],
-  "author": "Ndevu12",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/Ndevu12/My-BRAND/issues"
-  },
-  "homepage": "https://github.com/Ndevu12/My-BRAND#readme",
-  "devDependencies": {
-    "@11ty/eleventy": "^2.0.1"
-  },
-  "dependencies": {
-    "express": "^4.18.3",
-    "mongoose": "^8.2.2",
-    "nodemon": "^3.1.0"
-  }
-}
diff --git a/scripts/ToggleMenu.js b/scripts/ToggleMenu.js
new file mode 100644
index 0000000..79043fd
--- /dev/null
+++ b/scripts/ToggleMenu.js
@@ -0,0 +1,8 @@
+// const menuButton = document.querySelector('.menu-btn');
+// const menuItems = document.querySelector('.navigation');
+
+// menuButton.addEventListener('click', function() {
+//   console.log('menuButton clicked');
+//   menuItems.classList.toggle('show-menu');
+// });
+
diff --git a/scripts/blogs.js b/scripts/blogs.js
index 2925136..3fdf78f 100644
--- a/scripts/blogs.js
+++ b/scripts/blogs.js
@@ -1,243 +1,55 @@
+import { BASE_URL } from '../config.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.querySelector('.signup');
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+
+    const title = document.querySelector('.blog-header input').value;
+    const content = document.querySelector('#content').value;
+    const description = document.querySelector('#description').value;
+    const category = document.querySelector('#category').value;
+    const tags = document.querySelector('#tags').value;
+    const imageInput = document.querySelector('#article-image');
+    const images = imageInput.files;
+
+    const formData = new FormData();
+    formData.append('title', title);
+    formData.append('content', content);
+    formData.append('description', description);
+    formData.append('category', category);
+    formData.append('tags', tags);
+    for (let i = 0; i < images.length; i++) {
+      formData.append('images', images[i]);
+    }
 
-
-const currentLocationHref = window.location.href;
-const url = new URL(currentLocationHref);
-const id = url.searchParams.get("id");
-
-function formatDate(dateString) {
-  const date = new Date(dateString);
-    const months = ["January", "February", "March", "April", "May",
-        "June", "July", "August", "September", "October", "November", "December",
-  ];
-
-  const monthIndex = date.getMonth();
-  const day = date.getDate();
-  const year = date.getFullYear();
-
-  const formattedDate = `${months[monthIndex]} ${
-    day < 10 ? "0" : ""
-  }${day}, ${year}`;
-
-  return formattedDate;
-}
-
-// get blogs from api
-const loadBlog = async () => {
-  const res = await fetch(
-    `https://my-brand-backend-apis.onrender.com/api/blog/${id}`
-  );
-
-  if (!res.ok) {
-    alert("blog not found");
-    return (window.location.href = "../views/blog.html");
-  }
-
-  const data = await res.json();
-   const currentBlog = data.blogWithComments;
-
-  document.title = currentBlog.title;
-
-  const blogImage = document.querySelector(".blogImage");
-  blogImage.src = `${currentBlog.imageUrl}`;
-
-  const blogTitle = document.querySelector(".blogTitle");
-  blogTitle.innerHTML = currentBlog.title;
-
-  const blogContent = document.querySelector(".content");
-    blogContent.innerHTML = currentBlog.content;
-    
-  const blogDate = document.getElementById("date");
-  blogDate.innerHTML = `${formatDate(currentBlog.date)}`;
-
-  const Author = document.querySelector(".author");
-Author.innerHTML = `${currentBlog.author.name}, ${currentBlog.author.email}`;
-
-  const description = document.querySelector(".description");
-  description.innerHTML = currentBlog.Description;
-    
-  const likes = document.querySelector(".post-rating-count");
-  likes.style.cursor = "pointer";  
-
-  likes.innerHTML = `${currentBlog.likes}`;
-
-  const commentNumber = document.querySelector(".comment-count");
-  commentNumber.innerHTML = currentBlog.comments.length;
-
-  const blogID = document.querySelector("#data-post-id");
-  blogID.value = currentBlog._id;
-};
-
-loadBlog();
-
-// Load all blog
-
-
-i
-// secttion to hundle blogs create operations
-
-const publish = documment.querySelectorAll('#save-publish');
-const draft = document.querySelectorAll('save-as-draft');
-const pendingReview = Document.getElementById('pending-review');
-const discard = document.getElementById('discard');
-const archive = document.getElementById('archive');
-const update = document.querySelectorAll('.update');
-
-// Get values
-const title = document.querySelector('.title').value;
-const content = document.querySelector('#content').value;
-const description = document.querySelector('#Description').value;
-const category = document.querySelector('#dateRange').value;
-const tags = document.querySelector('#tags').value; 
-const author = document.querySelector('#author').value;
-const authorEmail = document.querySelector('#authorEmail').value;
-
-if (!title || !content || !description || !category || !tags || !author || !authorEmail) { 
-  alert("Please fill in all fields");
-  // return;
-}
-let blog = {
-    title: title,
-    content: content,
-    description: description,
-    imageUrl: undefined,
-  author: {
-    name: author,
-    email: authorEmail
-  },
-    category: category,
-    tags: tags,
-    likes: 0,
-    comments: []
-}
-
-publish.addEventListener('click', async (blog) => {
-  console.log('Publish button clicked!');
-
-  // Save the blog post and post it
-  const saved = await saveBlog(blog);
-
-  if (!saved) {
-    alert('Blog not saved');
-    return;
-  }
-  publishBlog(blog);
-});
-
-const saveBlog = async (data) => { 
-  console.log('Saveblog function called!');
-
-    return fetch('https://my-brand-backend-apis.onrender.com/api/blog/create', {
+    try {
+      if (!BASE_URL) {
+        throw new Error('BASE_URL is not provided');
+      }
+      const response = await fetch(`${BASE_URL}/blog/create`, {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(data)
-    })
-      .then(response => {
-        if (response.status === 404) {
-          console.log('Endpoint not found');
-        }
-      if (!response.ok) {
-          const errorMessage = response.json();
-            throw new Error('Network connection was not ok', errorMessage);
-        }
-        return response.json();
-    })
-    .then(data => {
-      console.log('Blog saved Successfully:', data);
-      return true;
-    })
-    .catch((error) => {
-      console.error('Error:', error);
-      return false;
-    });
-}
-
-const publishBlog = async (data) => {
-  console.log('Publish blog function called!');
-  document.querySelector('.article-title').innerHTML = data.title;
-  document.querySelector('.content').innerHTML = data.content;
-  document.querySelector('.post-rating-count').innerHTML = data.likes;
-  document.querySelector('.post-commenting-count').innerHTML = data.comments.length;
-}
-
-// Blog update
-
-const updateBlog = async () => {
-  const currentLocationHref = window.location.href;
-  const url = new URL(currentLocationHref);
-  const id = url.searchParams.get("id");
-  const res = await fetch(
-    `https://my-brand-backend-apis.onrender.com/api/blog/${id}`
-  );
-
-  if (!res.ok) {
-    alert("blog not found");
-    return (window.location.href = "../views/blog.html");
-  }
-  const data = await res.json();
-
-  title.value = data.title;
-  content.value = data.content;
-  description.value = data.Description;
-  category.value = data.category;
-  tags.value = data.tags;
-  author.value = data.author.name;
-  authorEmail.value = data.author.email;
-  
-  update.innerHTML = 'Save changes';
-
-  update.addEventListener('click', saveBlog);
-  
-
-  const isBlogUpdated = updateBlog(id, blog);
-
-  if (!isBlogUpdated) {
-    alert('Blog not updated');
-    return;
-  }
-  console.log('Update button clicked!');
-}
-
-update.addEventListener('click', updateBlog);
-
-// Delete blog section
-
-const deleteButtons = document.querySelectorAll('.delete-button');
-
-deleteButtons.forEach(button => {
-  button.addEventListener('click', (e) => {
-
-    const currentLocationHref = window.location.href;
-    const url = new URL(currentLocationHref);
-    const id = url.searchParams.get("id");
-
-    const isBlogDeleted = deleteBlog(id);
-
-    if (!isBlogDeleted) {
-      alert('Blog not deleted');
-      return;
+        body: formData,
+      });
+
+      const result = await response.json();
+      const statusMessage = document.querySelector('#upload-status');
+      if (response.ok) {
+        alert('Blog created successfully!');
+        statusMessage.textContent = 'Blog created successfully!';
+        statusMessage.classList.add('success');
+        form.reset();
+      } else {
+        alert(`Error: ${result.message}`);
+        statusMessage.textContent = `Error: ${result.message}`;
+        statusMessage.classList.add('error');
+        console.error(`Error: ${result.message}`);
+      }
+    } catch (error) {
+      const statusMessage = document.querySelector('#upload-status');
+      statusMessage.textContent = `Error: ${error.message}`;
+      statusMessage.classList.add('error');
+      console.error(`Error: ${error.message}`);
     }
-    console.log('Delete button clicked!');
   });
 });
-
-const deleteBlog = async (id) => {
-  return fetch(`https://my-brand-backend-apis.onrender.com/api/blog/delete/${id}`, {
-    method: 'DELETE'
-  })
-   .then(response => {
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-      return response.json();
-    })
-   .then(data => {
-      console.log('Blog deleted Successfully:', data);
-    })
-   .catch((error) => {
-      console.error('Error:', error);
-    });
-}
-
-export { currentBlog } 
\ No newline at end of file
diff --git a/scripts/cn.js b/scripts/cn.js
deleted file mode 100644
index 814ed80..0000000
--- a/scripts/cn.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// files tho hundle blogs related operations
-
-const publish = documment.getElementById('save-publish');
-const draft = document.getElementById('save-as-draft');
-const pendingReview = Document.getElementById('pending-review');
-const discard = document.getElementById('discard');
-const archive = document.getElementById('archive');
-
-publish.addEventListener('click', () => {
-    // Save the blog post and post it
-    saveBlog();
-    publishBlog();
-    saveBlogAsDraft();
-});
-
-let blog = {
-    title: title.value,
-    content: content.value,
-    description: Description.value,
-    imageUrl: undefined,
-    author: '',
-    category: category.value,
-    tags: tags.value,
-    likes: 0,
-    comments: []
-}
\ No newline at end of file
diff --git a/scripts/comment.js b/scripts/comment.js
deleted file mode 100644
index 6a50d8a..0000000
--- a/scripts/comment.js
+++ /dev/null
@@ -1,214 +0,0 @@
-// JAVASCRIPT codes for the COMMENT buttons
-
-import { currentBlog } from "./blogs";
-
-// CODES FOR USER COMMENTS FORM 
-const USERID = {
-    name: null,
-    identity: null,
-    image: null,
-    message: null,
-    date: null
-  }
-  
-  const userComment = document.querySelector(".usercomment");
-  const publishBtn = document.querySelector("#publish");
-  const comments = document.querySelector(".comments");
-  const userName = document.querySelector(".user");
-  const notify = document.querySelector(".notifyinput");
-  const postCommentingButton = document.querySelectorAll(".post-commenting-button");
-  
-  // postCommentingButton.addEventListener("click",
-  
-  userComment.addEventListener("input", e => {
-    if (!userComment.value || !userName.value) {
-      publishBtn.setAttribute("disabled", "disabled");
-      publishBtn.classList.remove("abled")
-    } else {
-      publishBtn.removeAttribute("disabled");
-      publishBtn.classList.add("abled")
-    }
-  })
-
-const addComment = async () =>{
-    
-  if (!userComment.value || !userName.value) {
-    alert("Please enter a comment or a name.");
-    return;
-  }
-  
-    USERID.name = userName.value;
-      USERID.image = "../images/anonymous.png"
-    USERID.message = userComment.value;
-  USERID.date = new Date().toLocaleString();
-
-  const newComment = {
-    commenterName: userName.value,
-    comment: userComment.value
-  }
-
-  const url =
-  "https://my-brand-backend-apis.onrender.com/api/comments";
-
-try {
-  const response = await fetch(url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(newComment),
-  });
-
-  if (!response.ok) {
-    
-    const resError = await response.json();
-    showToaster(resError.error, 5000);
-  }
-
-  if (response.ok) {
-    
-    const data = await response.json();
-    showToaster(data.message, 3000);
-    setTimeout(() => {
-      window.location.reload();
-    }, 3000);
-  }
-} catch (error) {
-  
-  showToaster("oops something goes wrong", 3000);
-}
-  
-    let published =
-      `<div class="parents">
-        <img src="${USERID.image}">
-        <div>
-            <h1>${USERID.name}</h1>
-            <p>${USERID.message}</p>
-            <div class="engagements">
-              <img src="../images/like.png" id="like">
-              <img src="../images/share.png" alt=""></div>
-            <span class="date">${USERID.date}</span>
-        </div>    
-    </div>`
-  
-    comments.innerHTML += published;
-  userComment.value = "";
-  userName.value = "";
-    publishBtn.classList.remove("abled")
-  
-    let commentsNum = document.querySelectorAll(".parents").length;
-    document.getElementById("comment").innerHTML = commentsNum;
-    document.querySelector(".post-commenting-count").innerHTML = commentsNum;
-  }
-  
-  publishBtn.addEventListener("click", addComment);
-  
-
-  const loadComment = () => {
-    const currentBlogComments = currentBlog.comments;
-
-    if (currentBlogComments.length > 0) {
-      for (let i = 0; i < currentBlogComments.length; i++) {
-        comments.innerHTML = `<div class="parents">
-        <img src="${USERID.image}">
-        <div>
-            <h1>${USERID.name}</h1>
-            <p>${USERID.message}</p>
-            <div class="engagements">
-              <img src="../images/like.png" id="like">
-              <img src="../images/share.png" alt=""></div>
-            <span class="date">${USERID.date}</span>
-        </div>    
-      </div>`;
-      }
-    }
-  };
-loadComment();
-  
-  
-  //on top GO BACK button onclick event
-  document.getElementById("goBackBtn").addEventListener("click", goBack);
-
-// Function to navigate back in the browser's history
-function goBack() {
-    window.history.back();
-}
-
-//on bottom GO BACK button onclick event
-document.getElementById("goBack").addEventListener("click", goBack);
-
-// // Function to navigate back in the browser's history
-// function goBack() {
-//     window.history.back();
-// }
-
-//JAVASCRIPT codes for the COMMENT buttons
-
-// CODES FOR USER COMMENTS
-
-// const USERID = {
-//     name: null,
-//     identity: null,
-//     image: null,
-//     message: null,
-//     date: null
-// }
-
-// const userComment = document.querySelector(".usercomment");
-// const publishBtn = document.querySelector("#publish");
-// const comments = document.querySelector(".comments");
-// const userName = document.querySelector(".user");
-// const notify = document.querySelector(".notifyinput");
-
-//     userComment.addEventListener("input", e => {
-//         if(!userComment.value) {
-//             publishBtn.setAttribute("disabled", "disabled");
-//             publishBtn.classList.remove("abled")
-//         }else {
-//             publishBtn.removeAttribute("disabled");
-//             publishBtn.classList.add("abled")
-//         }
-//     })
-
-//     function addPost() {
-//         if(!userComment.value) return;
-//         USERID.name = userName.value;
-//         if(USERID.name === "Anonymous") {
-//             USERID.identity = false;
-//             USERID.image = "../images/anonymous.png"
-//         }else {
-//             USERID.identity = true;
-//             USERID.image = "../images/user.png"
-//         }
-
-//         USERID.message = userComment.value;
-//         USERID.date = new Date().toLocaleString();
-//         let published = 
-//         `<div class="parents">
-//             <img src="${USERID.image}">
-//             <div>
-//                 <h1>${USERID.name}</h1>
-//                 <p>${USERID.message}</p>
-//                 <div class="engagements">
-// 				<img src="../images/like.png" id="like">
-// 				<img src="../images/share.png" alt=""></div>
-//                 <span class="date">${USERID.date}</span>
-//             </div>    
-//         </div>`
-
-//         comments.innerHTML += published;
-//         userComment.value = "";
-//         publishBtn.classList.remove("abled")
-
-//         let commentsNum = document.querySelectorAll(".parents").length;
-//         document.getElementById("comment").innerHTML = commentsNum;
-//         document.getElementsByClassName("post-commenting-count").innerHTML = commentsNum;
-
-//     }
-
-//     publishBtn.addEventListener("click", addPost);
-
-
-
-  
-
diff --git a/scripts/like.js b/scripts/like.js
deleted file mode 100644
index dc8959c..0000000
--- a/scripts/like.js
+++ /dev/null
@@ -1,62 +0,0 @@
-//JAVASCRIPT codes for the LIKE buttons
-
-document.querySelectorAll(".post").forEach(post => {
-
-	const currentLocationHref = window.location.href;
-	const url = new URL(currentLocationHref);
-	const id = url.searchParams.get("id");
-
-	const ratings = post.querySelectorAll(".post-rating");
-	const likeRating = ratings[0];
-
-	ratings.forEach(rating => {
-		const button = rating.querySelector(".post-rating-button");
-
-		button.addEventListener("click", async () => {
-			if (rating.classList.contains("post-rating-selected")) {
-				return;
-			}
-			try {
-				const response = await fetch(
-				  `https://my-brand-backend-apis.onrender.com/api/blog/like/${id}`,
-				  {
-					method: "PUT",
-					headers: {
-					  "Content-Type": "application/json",
-					},
-				  }
-				);
-		  
-				if (!response.ok) {
-				  const resError = await response.json();
-				  showToaster(resError.error, 5000);
-				}
-		  
-				if (response.ok) {
-					const data = await response.json();
-					const likeCount = data.likes;
-					querySelector(".post-rating-count").textContent = likeCount;
-				  setTimeout(() => {
-					window.location.reload();
-				  }, 3000);
-				}
-			  } catch (error) {
-				console.log(error);
-			  }
-
-			ratings.forEach(rating => {
-				if (rating.classList.contains("post-rating-selected")) {
-					const count = rating.querySelector(".post-rating-count");
-
-					count.textContent = Math.max(0, Number(count.textContent) - 1);
-					rating.classList.remove("post-rating-selected");
-				}
-			});
-			rating.classList.add("post-rating-selected");
-
-			const like = likeRating === rating;
-			const response = await fetch(`/posts/${id}/${like}`);
-			const body = await response.json();
-		});
-	});
-});
diff --git a/scripts/newBlog.js b/scripts/newBlog.js
new file mode 100644
index 0000000..4018b96
--- /dev/null
+++ b/scripts/newBlog.js
@@ -0,0 +1,15 @@
+// Select file input and status message container
+const fileInput = document.getElementById('article-image');
+const statusMessage = document.getElementById('upload-status');
+
+fileInput.addEventListener('change', () => {
+  if (fileInput.files.length > 0) {
+    statusMessage.textContent = "Image(s) uploaded successfully!";
+    statusMessage.classList.remove('error');
+    statusMessage.classList.add('success');
+  } else {
+    statusMessage.textContent = "No image selected. Please upload an image.";
+    statusMessage.classList.remove('success');
+    statusMessage.classList.add('error');
+  }
+});
diff --git a/scripts/share.js b/scripts/share.js
index 7af0925..66e46f7 100644
--- a/scripts/share.js
+++ b/scripts/share.js
@@ -32,4 +32,4 @@ document.querySelectorAll(".post").forEach(post => {
 			const body = await response.json();
 		});
 	});
-});
\ No newline at end of file
+});
diff --git a/scripts/signin_and_signup.js b/scripts/signin_and_signup.js
index 1887da5..92d957e 100644
--- a/scripts/signin_and_signup.js
+++ b/scripts/signin_and_signup.js
@@ -2,6 +2,8 @@
 ////////// SIGN UP ////////
 ////////////////////////////////////
 
+// import dotenv from 'dotenv';
+
 // Function to handle the signup process
 const signUp = async () => {
     var email = document.querySelector('.email').value;
@@ -51,7 +53,8 @@ const signUp = async () => {
 
     // create account in database
     try {
-        const response = await fetch('https://my-brand-backend-apis.onrender.com/api/user/signup', {
+        const url = SERVER_URL;
+        const response = await fetch({url}/'user/signup', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -109,7 +112,8 @@ const signIn = async () => {
     }
 
 try { 
-    const response = await fetch('https://my-brand-backend-apis.onrender.com/api/user/login', {
+    const url = SER
+    const response = await fetch({url}/'user/login', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
diff --git a/scripts/skills.js b/scripts/skills.js
new file mode 100644
index 0000000..1d86eca
--- /dev/null
+++ b/scripts/skills.js
@@ -0,0 +1,16 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+  const sections = document.querySelectorAll(".skills-section");
+  sections.forEach((section, index) => {
+    setTimeout(() => {
+      section.setAttribute("data-animate", section.dataset.effect);
+    }, index * 500); 
+  });
+
+  const cards = document.querySelectorAll(".card");
+  cards.forEach((card, index) => {
+    setTimeout(() => {
+      card.setAttribute("data-animate", card.dataset.effect);
+    }, index * 200); 
+   });
+});
diff --git a/scripts/theme.js b/scripts/theme.js
new file mode 100644
index 0000000..e64130d
--- /dev/null
+++ b/scripts/theme.js
@@ -0,0 +1,5 @@
+const ThemeButton = document.getElementById('theme');
+
+const changeTheme = (e) => {
+    
+}
\ No newline at end of file
diff --git a/styles/abaut.css b/styles/abaut.css
index cad7a13..79d23e7 100644
--- a/styles/abaut.css
+++ b/styles/abaut.css
@@ -8,47 +8,23 @@
 
 .intro-about {
   background-color: rgb(27, 24, 35);
-  /* border: 1px solid red !important; */
   display : flex;
   flex-flow : row wrap;
   justify-content : center;
   align-items: center !important;
   margin: auto;
   border-radius: 15px;
-  /* justify-content : space-around; */
-  width : 95%;
+  width : 100%;
   }
 
   .intro-about div {
-    /* border: 1px solid red !important; */
-  width : 50%;
-  }
-
-  .intro-about button {
-  color : black;
-  background-color : rgb(255, 255, 255);
-  font-family : bold;
-  border : none;
-  border-radius : 4em;
-  text-align : center;
-  font-size : 1em;
-  height : 2em;
-  margin : 12px 30px;
-  min-width : 0.2em;
-  }
-
-  .intro-about button:hover {
-  color : black !important ;
-  font-family : bold;
-  background-color : rgb(231, 229, 201);
-  cursor : pointer;
+  width: 40%;
   }
 
   .coding-image {
-    /* border: 1px solid red !important; */
     padding: 10px;
     align-items: center;
-    max-width : 100%;
+    max-width : 95%;
     margin: auto;
   }
 
@@ -56,31 +32,16 @@
   border-radius : 15%;
   max-width : 100%;
   height : auto;
-  /* margin-left : 2em; */
   }
 
   .intro-about .about-class {
-    /* border: 1px solid red !important; */
     width: 50%;
    margin: auto;
    align-items: center;
   text-align : center;
-  /* height: auto; */
   padding: 20px;
   }
 
-  .about-class p, h1, h2, h3, h5 {
-  font-size : x-large;
-  font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  text-align : left;
-  }
-
-  .intro-about h4 {
-  font-size : x-large;
-  font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  text-align : center;
-  }
-
   .about-class a {
   color : yellow;
   text-decoration : none;
@@ -100,18 +61,13 @@
         } 
   
         .intro-about .about-class { 
-  
           align-items: center;
           justify-content: center;  
           margin: 5px;
           font-size: medium;
           width: 95%;
-          padding: 0;
+          padding: 20px;
       } 
-  
-      /* .intro-about .face {
-        margin: 5px;
-      }  */
     } 
     
     @media screen and (max-width: 700px) {
@@ -133,70 +89,5 @@
       .intro-about article {
         width: 100%;
       } 
-  
-      /* .introduction .face {
-        margin: 5px;
-      }  */
     }
 
-
-/*
-============ + +  \+ + +  + /+ + =========
-============ + +  + \+ +  /+ + + =========
-============ + -+  -+ \+ +  +- +- + =========
-============ + +  + +/ \+  + + + =========
-============ + +  +/ + +  \+ + + =========
-*/
-
-
-/*=========== styling about.html file ======*/
-
-
-  .about_page {
-  display : flex;
-  flex-flow : row wrap;
-  justify-content : center;
-  /* justify-content : space-around; */
-  width : 95%;
-  margin: auto;
-  }
-  
-  .about_page div {
-  width : 40em;
-  }
-
-  .about_page_class p, h1, h2, h3, h5 {
-  font-size : x-large;
-  font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  text-align : left;
-  }
-
-  .about_page h4 {
-  font-size : x-large;
-  font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  text-align : center;
-  }
-
-  .about_page_class a {
-  color : yellow;
-  text-decoration : none;
-  }
-
-  .about_page_class {
-  background-color : rgb(28, 28, 42);
-  /* margin-left : 2.5em; */
-  margin-bottom : 2.5em;
-  text-align : center;
-  padding : 0.5em;
-  border : solid 1px;
-  border-radius : 15px;
-  margin-top : 1em;
-  }
-
-  .me_big {
-  font-size : xx-large;
-  font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  text-align : center;
-  }
-
-  
\ No newline at end of file
diff --git a/styles/all_articles.css b/styles/all_articles.css
index 1614904..352d2b9 100644
--- a/styles/all_articles.css
+++ b/styles/all_articles.css
@@ -2,7 +2,9 @@
     margin: 1em;
 } */
 
-.article_board {
+
+
+.article_board { 
     margin-top: 1em;
     margin-bottom: 1em;
     text-align: center;
@@ -15,24 +17,21 @@
 }
 
 .article_categories {
-    background-color: #2B3048;
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    text-align: center;
-   /* margin-left: 1em; */
-   border-radius: 20px;
-   margin-top: 1em;
+   margin-top: 2rem;
    margin-bottom: 1em;
-   border: 2px solid grey;
-   /* height: 3em; */
+   border-bottom: 3px solid #916868;
+   padding-bottom: 1rem;
+   gap: 10px;
   }
 
   .article_categories a {
-    /* height: 5em; */
     border-radius: 10px;
     background-color: #181b2a;
-    /* border: 1px solid #ff5a5f; */
+    padding: 10px;
   }
 
   .article_categories h3, h4 {
@@ -53,20 +52,39 @@
     color: rgb(237, 241, 22) !important;
 }
 .on_the_way {
-    margin: 1em;
-    background-color: #2B3048;
-    border: 3px solid grey; 
-    border-radius: 15px;
-    padding: 1em;
-    width: 20%;
-    
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: start;
+  margin: 1em;
+  background-color: #2B3048;
+  border: 3px solid grey; 
+  border-radius: 15px;
+  padding: 1em;
+  width: 20%;
+  gap: 1em;
+}
+
+.search-filter {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+  gap: 1rem;
 }
 
-.on_the_way h3 {
-    padding-top: 2em;
-    padding-bottom: 2em;
+.search-filter input {
+  width: 80%;
+  padding: 0.5rem;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+.on_the_way .state {
     text-align: center;
-    
+    background-color: #2B3048;
+    color: rgb(196, 179, 255); 
+    border: 0;
+    cursor: pointer;
 }
 
 .calarify {
@@ -119,43 +137,33 @@
     padding-bottom: 1em;
     color: yellow ;
     font-style: normal ;
-    font-family: 'Arial Narrow Bold', sans-serif;
+    font-family: 'Roboto', sans-serif;
     font-size: x-large; 
   }
 
-
-  /* styling edit_button classes */
- .edit_button{
-    width: auto;
-    height: 40px;
-    color: white !important;
-    background-color: #2f2b2b;
-    border-radius: 20px;
-    border: 1px solid #916868;
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-    font-size: 1.1em;
-  }
-  
-  .edit_button:hover {
-    background-color: #101426;
-    color: rgb(224, 193, 16) !important;
-  }
-
   .choice_article {
     margin: 2em;
     justify-content: space-around;
-    /* margin-left: 1em; */
-    /* border: 1px solid #916868; */
   }
 
-  .articles_storage p, h1, h2, h3, h4, h5{
-  
-    font-size: x-large;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    /* text-align: left; */
-}
+    /* styling edit_button classes */
+    .edit_button{
+      width: auto;
+      height: 40px;
+      color: white !important;
+      background-color: #2f2b2b;
+      border-radius: 20px;
+      border: 1px solid #916868;
+      padding: 10px;
+      margin: 10px;
+      text-align: center;
+      font-size: 1.1em;
+    }
+    
+    .edit_button:hover {
+      background-color: #101426;
+      color: rgb(224, 193, 16) !important;
+    }  
 
      /* Align intro_service class as screen gets smaller */
      @media only screen and (max-width: 1000px) {
@@ -165,17 +173,10 @@
         margin: auto;
         align-items: center;
         justify-content: center;
-        border: 1px solid red;
       }
     
-      .articles_storage .on_the_way {
-        width: 80%;
-      }
       .articles_storage p, h1, h2, h3, h4, h5{
-  
         font-size: medium;
-        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        /* text-align: left; */
     }
     
       .articles_storage div {
@@ -224,19 +225,13 @@
         justify-content: center;
       }
 
-      .articles_storage p, h1, h2, h3, h4, h5{
-  
-        font-size: large;
-        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    }
-
       .articles_storage div {
         display: block;
         /* margin: auto; */
         align-items: center;
         justify-content: center;
           width: 90%;
-        } 
+        }   
   
         .articles_storage .calarify { 
   
@@ -248,23 +243,13 @@
           padding-right: 5px;
       } 
   
-      /* .intro-about .face {
-        margin: 5px;
-      }  */
-
       li {
         padding: .5em;
         padding-left: 5px; 
         font-size: larger;
       }
 
-      
-      .articles_storage p, h1, h2, h3, h4, h5{
   
-        font-size: larger;
-        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    }
-
     .recently_uploaded, .all_others {
       width: 95%;
       /* border: 3px solid grey; */
diff --git a/styles/analytics.css b/styles/analytics.css
index c350b10..7c4dc93 100644
--- a/styles/analytics.css
+++ b/styles/analytics.css
@@ -1,5 +1,7 @@
 /*======== Styling analytics ============*/
 
+
+
 /* styling analysis class */
 .Analysis {
     display: flex;
diff --git a/styles/blogs.css b/styles/blogs.css
index f007946..047e811 100644
--- a/styles/blogs.css
+++ b/styles/blogs.css
@@ -5,440 +5,204 @@
  * styling header of every section [down]
 */
 
+
+
 /* intro-blog flexbox */
 .intro-blog {
     display: flex; 
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    width: 95%;
-     /* background-color: rgb(36, 36, 64);  */
-    /* border: 1px solid #ff5a5f;   */
+    width: 100%;
     margin: auto;
+    /* border: 1px solid red; */
 }
 
-.intro-blog .blog_section1 {
+.intro-blog .blog-container {
   display: flex;
   flex-flow: row wrap;
+  align-items: center;
   justify-content: center;
-  justify-content: space-around;
-  width: 100%;
-  padding: 0;
-  /* border: 1px solid #ff5a5f;   */
+  width: 98%;
 }
 
-
-.intro-blog .blog_section2 {
+.intro-blog .blog-container .blog-photo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
   width: 100%;
-  /* padding: 2em; */
-  /* border: 1px solid #ff5a5f;   */
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-.digital {
-  width: 100%;
-  /* border: 1px solid #ff5a5f;  */
+  height: 250px;
 }
 
-.digital .post .post-ratings-container{
-  /* display: flex;
-  flex-flow: row wrap;
-	align-items: center;
-	cursor: default;
-    align-items: left; */
-  width: 100%;
-  
+.intro-blog .blog-container .blog-photo img {
+  max-width: 60%;
+  height: 100%;
+  border-radius: 5px;
 }
 
-
-
-  /* Article style */
-  .blog_section1 article {
-    padding-left: 20px;
-    padding-right: 20px;
+   .intro-blog .blog-container article {
+    padding: 20px;
+    border-radius: 15px;
     align-items: center;
-      /* border: 1px solid #ff5a5f;    */
-    width: 50%;
+    width: 40%;
+    margin: auto;
+    margin-top: 1rem;
+    background-color: #1a1e32;
+    border: 1px solid rgb(33, 33, 54);
+    box-shadow: 9px 4px 6px rgba(163, 163, 163, 0.1);
   }
 
-  .blog_section1 .embark .unknown {
-    /* border: 1px solid #ff5a5f; */
-    width: 100%;
+  .intro-blog .blog-container article .post{
+    padding: 10px;
   }
 
-  /* styling my blog header*/
-.my {
-    margin-top: 1em;
-}
 
-/* creating a custom dot for articles*/
-.article-title {
-    position: relative;
+.choice {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  margin: auto;
+  margin-bottom: 1rem;
+  justify-content: space-around; 
 }
 
- .article-title::before {
+.choice a {
+    padding: 1em;
+    background-color: #2B3048;
 
-    content: "•"; /* Unicode character for a bullet point */
-    font-size: 1.5em; /* the size of the dot */
-    margin-right: 0.5em; /* Adjust the spacing between the dot and the word */
-    color: #ffffff; /* Adjust the color of the dot */
 }
+   
+ 
 
-.intro-blog a {
-    color: #ffffff;
-    font-size: 1.2em;
-    font-family: 'Times New Roman', Times, serif;
+.blogs-categories a {
+  color: #fff;
+  margin: 0 10px;
+  font-weight: bold;
+  font-size: 1rem;
 }
 
-/* Styling interaction subclass*/
-.intro-blog .interaction {
-    /* border: 1px solid #ff5a5f;  */
-    width: 90%;
-}
- 
-.blog_section1 .interaction img {
-    margin-left: .5rem;
-    margin-right: .5rem;
-    justify-content: space-between;
-    border-radius: 50%;
-    max-width: 6%;
-    /* border: 1px solid #ff5a5f; */
+.blogs-categories a:hover {
+  text-decoration: underline;
 }
 
-.digital .interaction img {
-  max-width: 3%;
-  margin-left: .5rem;
-  margin-right: .5rem;
-  justify-content: space-between;
-  border-radius: 50%;
+.blogs-container {
+  display: flex;
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
 }
 
-.interaction img:hover {
-    cursor: pointer
+.sidebar {
+  width: 20%;
+  background-color: #15122b;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-/* styling header of every section*/
-.yell {
-    color: rgb(243, 209, 15);
+.sidebar h3, .sidebar p {
+  margin-bottom: 1.3rem;
 }
- /* Align intro_service class as screen gets smaller */
- @media only screen and (max-width: 1000px) {
-  .intro-about {
-    display: block;
-    font-size: medium;
-    width: 95%;
-  }
-
-  .intro-blog article {
-    display: block;
-      width: 100%;
-    } 
-
-    .intro-about div { 
-
-      align-items: center;
-      justify-content: center;  
-      margin: 5px;
-      font-size: medium;
-      width: 95%;
-      padding: 0;
-  } 
-
-  .blog_section1 .interaction img,
-  .blog_section2 .interaction img {
-      margin-left: .5rem;
-      margin-right: .5rem;
-      justify-content: space-between;
-      border-radius: 50%;
-      max-width: 6%;
-      /* border: 1px solid #ff5a5f; */
-  }
-  
-  .digital .interaction img {
-    max-width: 6%;
-    margin-left: .5rem;
-    margin-right: .5rem;
-    justify-content: space-between;
-    border-radius: 50%;
-  } 
-  
-  .interaction img:hover {
-      cursor: pointer
-  }
-} 
 
-@media screen and (max-width: 700px) {
-  .intro-blog  {  
-    display: block; 
-    /* flex-direction: column; */
-    width: 95%;
-    margin: 5px;
-  }
-
-  .intro-blog div { 
-  flex-direction: column;  
-  align-items: center;
-  justify-content: center;  
-  margin: 5px;
-  font-size: medium;
-} 
-
-  .intro-blog article {
-    width: 100%;
-  } 
-  .intro-blog .interaction {
-    /* border: 1px solid #ff5a5f;  */
-    width: 100%;
-}
- 
-.blog_section1 .interaction img,
-.blog_section2 .interaction img {
-    margin-left: .5rem;
-    margin-right: .5rem;
-    justify-content: space-between;
-    border-radius: 50%;
-    max-width: 10%;
-    /* border: 1px solid #ff5a5f; */
+.sidebar a {
+  font-size: 0.9rem;
+  color: #b3b3b3;
 }
 
-.digital .interaction img {
-  max-width: 10%;
-  margin-left: .5rem;
-  margin-right: .5rem;
-  justify-content: space-between;
-  border-radius: 50%;
-} 
-
-.interaction img:hover {
-    cursor: pointer
-}
+.main-content {
+  width: 75%;
+  margin-left: 5%;
 }
 
-
-
-/*
-============ + +  \+ + +  + /+ + =========
-============ + +  + \+ +  /+ + + =========
-============ + -+  -+ \+ +  +- +- + =========
-============ + +  + +/ \+  + + + =========
-============ + +  +/ + +  \+ + + =========
-*/
-
-
-/*=========== styling blog.html file======*/
-
-
-* {
-    box-sizing: border-box;
-  }
-  
-  /* Style the body */
-  body {
-    /* background-color: #101426; */
-    font-family: Arial;
-    /* margin: 0; */
-  }
-
-  .blogs_categories{
-    background-color: #2B3048;
-   display: flex;
-   justify-content: space-around;
-   flex-flow: row wrap;
-   text-align: center;
-   margin-left: 1em;
-   border-radius: 20px;
-   margin: auto;
-   border: 2px solid grey;
-   /* height: 3em; */
-  }
-
-  .blogs_categories a {
-    /* height: 5em; */
-    border-radius: 10px;
-    background-color: #181b2a;
-    /* border: 1px solid #ff5a5f; */
-  }
-
-  .blogs_categories h3, h4 {
-    padding-left: .5em;
-    padding-right: .5em;
-  }
-/* Column container */
-.row {  
-    border: 3px solid #574344; 
-    display: flex;
-    flex-wrap: wrap;
-    height: auto;
-  }
-/*
-* Deal with blog photos
-*/
-  .post .blogPhoto {
-    margin-top: 50px;
-    width: 100%;
-    border: 1px solid red;
-    display: none;
-    /* max-height: 200px;
-    overflow: hidden; */
-  }
-  
-  .blogPhoto img {
-    /* max-width: 100%; 
-    max-height: 100%;  */
-    /* width: 16em; 
-    height: 16em;
-    border-radius: 5px; */
-    display: none;
-  } 
-
-  /* Create three unequal columns that sits next to each other */
-  /* two Sidebars/one in between column */
-  .side {
-    flex: 15%;
-    background-color: #212134;
-    color: white;
-    padding: 20px;
-  }
-
-/* controling all a content*/
-a {
-    text-decoration: none;
-    color: white;
+.search-filter {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+  gap: 1rem;
 }
 
-a:hover {
-    color: yellow;
+.search-filter input {
+  width: 80%;
+  padding: 0.5rem;
+  border-radius: 4px;
+  border: 1px solid #ddd;
 }
 
-.dash a{
-    color: yellow !important;
-  }
-
-  /* Main column */
-  .main {
-    border-top: 4px solid #9B9BA7;
-    flex: 80%;
-    background-color: #101426;
-    color: white;
-    padding-left: 20px;
-    padding-right: 15px;
-    padding-top: 0;
-    margin-top: 0;
-    /* display: flex; */
-    /* flex-direction: row;  */
-  }
-
-  
-  .deep {
-    display: block;
-    justify-content: space-between;
-    align-items: center; 
-   }
-
-   .top {
-    display: flex;
-    justify-content: space-between;
-    align-items: center; 
-   }
-.choice {
+.article_categories {
   display: flex;
+  justify-content: space-around;
   flex-flow: row wrap;
-  justify-content: center;
-  margin: auto;
-    /* margin-top: 50px;
-    margin-bottom: .5em; */
-    justify-content: space-around; 
+  text-align: center;
+  margin-top: 2rem;
+  margin-bottom: 1em;
+  border-bottom: 3px solid #916868;
+  padding-bottom: 1rem;
+  gap: 10px
+ }
+
+ .article_categories a {
+   border-radius: 10px;
+   background-color: #181b2a;
+   padding: 10px;
+ }
+ 
+.blog-posts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
 }
 
-.choice a {
-    padding: 1em;
-    background-color: #2B3048;
-
+.blog-post {
+  background-color: #12132c;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: transform 0.3s;
 }
-   
-/* styling for individual items if needed */
-.top .blogtitle {
-    flex: 1; /* Equal width for all items within .top and .deep */
-    margin-right: 20px; /*margin between items */
-}
-
 
-.top .searchfilter {
-    flex: 0;
-    margin-right: 0;
+.blog-post:hover {
+  transform: translateY(-5px);
 }
 
-.top .blogtitle .b {
-    margin-top: 0;
-    padding-top: 0;
-    /* border: 1px solid red; */
-
+.blog-post img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
 }
 
-.searchfilter {
- /* height: 2.5em; */
- border-radius: 10px;
- background-color: #2B3048;
- display: flex;
- justify-content: space-between;
- align-items: center;
- /* border: 1px solid red; */
+.blog-post h2 {
+  color: #c2bfbf;
+  font-size: 1.2rem;
+  margin: 0.5rem;
 }
 
-.searchfilter img{
-    /* margin-left:  .5em;  */
-    border-radius: 10px;
+.blog-post p {
+  margin: 0.5rem;
+  color: #949393;
 }
 
-.searchfilter input {
-    background-color: #2B3048;
-    border: 0;
-    color: white !important;
-    font-size: small;
-    margin-left: 0;
-    border-radius: 10px;
-    height: 100%;
+.blog-post .read-more {
+  display: inline-block;
+  margin: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: #746f6f;
+  color: #fff;
+  border-radius: 20px;
+  border: 1px solid #916868;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
 }
 
-
-.top img,
-.deep img{
-    margin-bottom: 1em;
-    margin-top: 1em;
-    width: 2em;
+.blog-post .read-more:hover {
+  background-color: #2f2b2b;
+  color: rgb(224, 193, 16);
 }
 
-    .side p, h3 {
-    margin-top: 30px;
-    margin-bottom: 30px;
-  }
-
-
-
-  
-
-  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 700px) {
-    .row {   
-      flex-direction: column;
-    }
-
-    .side {
-      width: 95%;
-      padding: 2px;
-      /* margin: 52px; */
-    }
-
-     .main{
-      flex-direction: column;
-      width: 95%;
-      padding: 0;
-      margin: 7px;
-    }
+  .intro-blog .blog-container article {
+    width: 70%;
   }
-  
-  
 
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/styles/comment.css b/styles/comment.css
deleted file mode 100644
index f156f09..0000000
--- a/styles/comment.css
+++ /dev/null
@@ -1,214 +0,0 @@
-/* styling comment icon */
-.comment_page { 
-    display: flex;  
-    align-items: center; 
-    justify-content: center; 
-    margin-top: 1em;
-    margin-bottom: 1em;
-    box-sizing: border-box;
-    
-}
-a {
-    color: #d3a2a2;
-    text-decoration: none;
-}
-
- .comments-container {
-	display: flex; 
-    width: 50%;
-    align-items: center;
-    justify-content: center;
-    flex-flow: row wrap;
-    background-color: #272831;
-    padding-left: .5em;
-    padding-right: .5em;
-    border: 1px solid #272831;
-    border-radius: 5px;
-  } 
-
-
-.post-commenting-selected > .post-commenting-button,
-.post-commenting-selected > .post-commenting-count {
-	color: yellow;
-}
-
-.post-commenting-button {
-	margin-right: 6px;
-	cursor: pointer;
-	color: #54b2ce;
-}
-
-.post-commenting:not(.post-commenting-selected) > .post-commenting-button:hover {
-	color: #d3a2a2;
-}
-
-/* section for commenting  */
-.container {
-    background: #14172c;
-    padding: 20px;
-    font-family: monospace;
-    width: 70%;
-    box-shadow: 0 0 5px #000;
-}
-
-.head {
-    text-transform: uppercase;
-    margin-bottom: 20px;
-}
-
-.text {
-    margin: 5px 0;
-    font-family: sans-serif;
-    font-size: 0.9em;
-}
-
-.commentbox {
-    display: flex;
-    align-items: center; 
-    justify-content: center; 
-    box-sizing: border-box;
-    justify-content: space-around;
-    flex-flow: row wrap;
-    padding: 5px;
-}
-
-
-.commentbox > img {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    /* float: left; */
-    margin-right: 20px;
-    object-fit: cover;
-    object-position: center;
-}
-
-.content {
-    width: 100%;
-}
-
-.user {
-	width: 70%;
-    border: none;
-    outline: none;
-    margin: 5px 0;
-    color: #cecbcb;
-    margin-left: 20px;
-    padding: 10px;
-    background-color: #14172c;
-}
-
-.commentinput > input {
-    border: none;
-    padding: 5px;
-    padding-left: 0;
-    outline: none;
-    border-bottom: 2px solid rgb(203, 205, 172);
-    margin-bottom: 10px;
-    width: 95%;
-    background-color: #14172c;
-    color: #fff;
-}
-
-.buttons {
-    display: flex;
-    justify-content: space-between;
-    flex-flow: row wrap;
-    align-items: center;
-    color: #808080;
-}
-
-.buttons > button {
-    padding: 5px 10px;
-    background: lightgrey;
-    color: #808080;
-    text-transform: uppercase;
-    border: none;
-    outline: none;
-    border-radius: 3px;
-    cursor: pointer;
-}
-
-.buttons > button.abled {
-    background: rgb(236, 205, 49);
-    color: #fff;
-}
-
-.policy {
-    margin: 20px 0;
-    font-size: 0.8em;
-    font-family: Arial, sans-serif;
-    color: #808080;
-}
-
-.policy a {
-    text-decoration: none;
-    color: rgb(187, 176, 56);
-}
-
-.notify {
-    margin-right: 10px;
-    display: flex;
-    align-items: center;
-}
-
-.notify > input {
-    margin-right: 5px;
-    border: 2px solid #0e0d1b;
-}
-
-.parents {
-    font-family: Arial, sans-serif;
-    display: flex;
-    margin-bottom: 30px;
-}
-
-.parents h1 {
-    font-size: 0.9em;
-}
-
-.parents p {
-    margin: 10px 0;
-    font-size: 0.9em;
-}
-
-.container input {
-    background-color: #272831;
-	color: #fff;
-}
-.parents > img {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 20px;
-    object-fit: cover;
-    object-position: center;
-}
-
-.engagements {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.engagements img {
-    width: 20px;
-
-}
-
-.engagements img:nth-child(1) {
-    margin-right: 10px;
-    width: 25px;
-}
-
-.date {
-    color: #808080;
-    font-size: 0.8em;
-}
-
-@media screen  and (max-width: 700px) {
-    .comments-container {
-        width: 90%;
-    }
-    
-}
\ No newline at end of file
diff --git a/styles/common.css b/styles/common.css
index 1e5f765..e62dec7 100644
--- a/styles/common.css
+++ b/styles/common.css
@@ -1,19 +1,53 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 body {
     /* border: 1px solid red; */
     margin: 0;
     width: 98%;
     margin-left: auto;
     margin-right: auto;
-    background-color: rgb(22, 22, 44);
+    background-color: rgb(14, 14, 31);
     color: white;
-    /* font-size: 1em; */
-    font-family: Circular, "Helvetica Neue", Arial, sans-serif;
+    font-family:'Roboto', sans-serif;
+}
+
+ a {
+    color: white;
+    text-decoration: none;
+}
+
+ h1, h2, h3, h4, h5{
+    font-size: x-large; 
+    
 }
 
-p, h1, h2, h3, h4, h5{
-  
-    font-size: larger;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    /* text-align: left; */
+p {
+    font-size: large;
 }
 
+/* Download my cv button style */
+.download-my-cv {
+    height: auto;
+    color: rgb(255, 255, 255);
+    background-color: #2f2b2b;
+    border-radius: 20px;
+    border: 1px solid #916868;
+    padding: 10px;
+    text-align: center;
+    font-family: bold;
+    font-size: 17px;
+    min-width: 150px;
+    width: 20%;
+    transition: background-color 0.3s;
+    }
+    
+    /* Download my cv button hover opacity */
+    .download-my-cv:hover {
+      background-color: #101426;
+      color: rgb(224, 193, 16);
+      width: 21%;
+      font-size: medium;
+      cursor : pointer;
+    }
+  
\ No newline at end of file
diff --git a/styles/contact.css b/styles/contact.css
index b201758..1454a6c 100644
--- a/styles/contact.css
+++ b/styles/contact.css
@@ -2,6 +2,7 @@
  * === intro-contact class style ===
  */
 
+
 /* intro-sub flexbox */
 .intro-contact  {
     display: flex;
@@ -10,54 +11,48 @@
     align-items: center;
     text-align: center;
     width: 95%;
-    margin: auto;
-    border: 1px solid;  
+    margin: auto; 
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    border-radius: 15px;
+  }
+
+  .intro-contact .contactme-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
     border-radius: 15px;
+    padding: 20px;
   }
 
    /* Article style */
-   .intro-contact  .message{
+   .intro-contact .contactme-container .message{
     /* border: 1px solid #ff5a5f;   */
     align-items: center;
-    background-color: #213541;
-    color: white;
-    border-radius: 15px;
+    background-color: #c5c7d5;
+    color: rgb(0, 0, 0);
+    border-radius: 5px;
     width: 75%;
     height: 209px;
     margin: 0 auto;
+    font-size: x-large;
   }
 
-  .intro-contact input {
-    background-color: #213541;
-    border-radius: 15px;
+  .intro-contact .contactme-container input {
+    background-color: #c5c7d5;
+    border-radius: 5px;
     border: 0;
-    width: 9em;
-    font-size: medium;
+    width: 75%;
+    font-size: large;
     margin-top: 1em;
-    /* margin-right: 4em; */
     padding: 1em;
+    color: rgb(0, 0, 0);
+    text-align: center;
+    margin-bottom: 1.3rem;
 }
 
-.get-email {
-    background-color: #213541;
-    color: white;
-    border-radius: 15px;
-    width: 9em;
-    font-size: medium;
-    margin-top: 1em;
-    margin-bottom: 1em; /* Added margin-bottom */
-    padding: 1em;
-    text-align: center; /* Center the text inside .get-email */
-  }
-  
-  .download_cv {
-    background-color: #4C3D3D;
-    color: white;
-    text-align: center;
-    border-radius: 15px;
-    border: 0;
-    padding: 1em 2em;
-    font-size: medium;
-    cursor: pointer;
-    margin-bottom: 1em; /* Added margin-bottom */
-  }
+  
\ No newline at end of file
diff --git a/styles/dashboard.css b/styles/dashboard.css
index c26d11e..394b8ef 100644
--- a/styles/dashboard.css
+++ b/styles/dashboard.css
@@ -5,11 +5,11 @@
   }
   
   /* Style the body */
-  body {
+  /* body {
     background-color: #101426;
     font-family: Arial;
     margin: 0;
-  }
+  } */
 
   
 /* Column container */
@@ -80,7 +80,7 @@ a:hover {
     color: white;
     padding: 20px;
     display: flex;
-    flex-direction: column; /* Adjust the flex direction to column */
+    flex-direction: column;
   }
 
   .top,
@@ -89,7 +89,7 @@ a:hover {
     flex-flow: row wrap;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px; /* Add some margin between .top and .deep */
+    margin-bottom: 20px;
    }
 
    
@@ -99,8 +99,8 @@ a:hover {
 .deep .time,
 .deep .subscribers,
 .deep .cv {
-    flex: 1; /* Equal width for all items within .top and .deep */
-    margin-right: 20px; /* Add some margin between items */
+    flex: 1;
+    margin-right: 20px;
 }
 
 .deep .time, 
diff --git a/styles/experience.css b/styles/experience.css
new file mode 100644
index 0000000..c9aa6cb
--- /dev/null
+++ b/styles/experience.css
@@ -0,0 +1,103 @@
+.experience-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+  }
+  
+  .experience-container {
+    text-align: center;
+    max-width: 900px;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    animation: fade-in 1.2s ease-in-out;
+  }
+  
+  .intro-section {
+    margin-bottom: 40px;
+  }
+  
+  .experience-section {
+    margin-top: 40px;
+  }
+  
+  .experience-cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+  }
+  
+  .experience-card {
+    border: 1px solid #9f84c2;
+    border-radius: 10px;
+    padding: 20px;
+    width: 260px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    transform: translateY(20px);
+    opacity: 0;
+    transition: all 0.8s ease-out;
+  }
+  
+  .experience-card h3 {
+    margin-bottom: 10px;
+  }
+  
+  .experience-card p {
+    font-size: 14px;
+    color: #d8d3d5;
+  }
+  
+  [data-animate="fade-up"] {
+    opacity: 1;
+    transform: translateY(0);
+    animation: fade-up 0.8s ease-out;
+  }
+  
+  [data-animate="slide-right"] {
+    opacity: 1;
+    transform: translateX(0);
+    animation: slide-right 0.8s ease-out;
+  }
+  
+  [data-animate="zoom-in"] {
+    opacity: 1;
+    transform: scale(1);
+    animation: zoom-in 0.8s ease-out;
+  }
+  
+  /* Animations */
+  @keyframes fade-up {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes slide-right {
+    from {
+      transform: translateX(-20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes zoom-in {
+    from {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  
\ No newline at end of file
diff --git a/styles/filters.css b/styles/filters.css
deleted file mode 100644
index e69de29..0000000
diff --git a/styles/footer.css b/styles/footer.css
index 1a30475..3fa09c9 100644
--- a/styles/footer.css
+++ b/styles/footer.css
@@ -1,132 +1,99 @@
+
 footer {
-    background-color: rgb(22, 22, 44);
     height: auto;
-    width: 100%;
+    width: 95%;
     border-top: 1px solid #CCCCCC;
     padding-top: .5em;
     align-items: center;
     bottom: 0;
-    color: white;
     line-height: normal;  
 }
 
-.footerdesc ul {
-/* border: 1px red solid ; */
-font-size: small;
-font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+.footer-container {
+  display: flex;
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: center;
 }
 
-
-footer p, h1, h2, h3, h4, h5{
-   width: 95%;
-    font-size: medium;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+.logo {
+  width: 25%;
 }
 
- /* .footer-container {
-  
- } */
-footer .logo, .socialmedia {
-    margin-left: 20px;
+.footer-navigate {
+  display: flex;
+  justify-content: space-around;
+  flex-flow: column;
+  align-items: center;
+  width: 20%;
+  padding: 10px;
+  /* border: 1px solid blue; */
 }
 
-.footerdesc {
-    width: 100%;
-    bottom: 0;
-    margin: auto;
-    height: auto; 
-    display: flex;
-    justify-content: flex-end;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    /* border: 1px red solid;
-     */
-     
-}
 
 .socialmedia {
-    max-width:15%;
+    max-width:40%;
     height: auto;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
 }
-.socialmedia img {
-    max-width: 20%;
-    height: auto;
+
+.social {
+  width: 50%;
+  /* display: flex;
+  justify-content: center;
+  align-items: center; */
+  gap: 1rem;
 }
 
-.blog-section {
-    /* text-align: center;  */
-   margin: auto;
+.social a {
+  max-width: 10%;
+  height: auto;
 }
 
+.social img {
+    max-width: 10%;
+    margin-right: 2rem;
+    height: auto;
+    border-radius: 5px;
+}
 
 .footcopyright {
-    width: 95%;
-    padding-top: 15px;
-    padding-bottom: 10px;
-    height: 30px;  
-    text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+    width: 100%;
+    height: 60px;  
     border-top: 1px solid #CCCCCC;
 } 
 
+.footcopyright h5 {
+  font-size: small;
+  color: #b1b1b1;
+  text-align: center;
+}
 
 
      /* Align intro_service class as screen gets smaller */
-     @media only screen and (max-width: 1000px) {
+     @media only screen and (max-width: 700px) {
         .footer {
           display: block;
           font-size: medium;
           width: 95%;
         }
-        .footerdesc {
-            display: block;
-            font-size: medium;
-            width: 98%;
-          }
-    
-        footer div {
-          display: block;
-            width: 95%;
-          } 
 
-          .footerdesc div {
-            display: block;
-              width: 98%;
-            } 
-    
-          .intro-service .full-stack-dev { 
-    
-            align-items: center;
-            justify-content: center;  
-            margin: 5px;
-            font-size: medium;
-        } 
-    
-        /* .intro-about .face {
-          margin: 5px;
-        }  */
-      } 
-      
-      @media screen and (max-width: 700px) {
-        .intro-service  {  
-          display: block; 
-          /* flex-direction: column; */
-          width: 95%;
-          margin: 5px;
+        .footer-container {
+          display: flex;
+          justify-content: center;
+          flex-flow: column;
+          align-items: center;
         }
-    
-        .intro-service .full-stack-dev { 
-        flex-direction: column;  
-        align-items: center;
-        justify-content: center;  
-        margin: 5px;
-        font-size: medium;
-    } 
-    
-        .intro-service article {
-          width: 100%;
-        } 
-    
-        /* .introduction .face {
-          margin: 5px;
-        }  */
-      }
\ No newline at end of file
+
+        .footer-container div {
+          width: 80%;
+          margin-bottom: 1rem;
+        }
+      } 
+      
\ No newline at end of file
diff --git a/styles/header.css b/styles/header.css
index 5d28a59..f516231 100644
--- a/styles/header.css
+++ b/styles/header.css
@@ -1,15 +1,19 @@
-  header {
+
+header {
     background-color: rgb(17, 17, 33);
     height: auto;
     width: 100%;
     color: white !important;
     /* border: 1px solid red; */
-    border-bottom: 1px  solid #CCCCCC;
+    border-bottom: 1px  solid #100e1c;
+    box-shadow: 0 5px 5px;
     padding-bottom: .5em;
     padding-top: .5em;
+    padding-right: 10px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    font-family: 'Roboto', sans-serif;
     /* position: fixed; */
 }
 
@@ -35,6 +39,7 @@
 .logo {
     max-width: 30%;
     height: auto;
+    margin-left: 5px;
 }
 
 .admin img{
@@ -62,12 +67,17 @@
 }
 
 
+.naviga label svg {
+  fill: aliceblue;
+}
+
+#sidebar-active{
+  display: none;
+}
+.open-sidebar-button, .close-sidebar-button{
+  display: none;
+}
 
-/* @media screen and (max-width: 700px) {
-    .flex-row {   
-      flex-direction: column;
-    }
-  } */
 
   @media screen and (max-width: 700px) {
     header {
@@ -75,13 +85,54 @@
     }
 
     .flex-row {
-      display: none; /* Hide regular navigation links */
       flex-direction: column;
-      align-items: center;
+      align-items: flex-start;
       gap: 1em;
-      text-align: center;
+      text-align: left;
+
+      position: fixed;
+      top: 0;
+      right: -100%;
+      z-index: 10;
+      width: 200px;
+
+      background-color: rgb(10, 12, 25);
+      box-shadow: -5px 0 40px rgba(0, 0, 0, 0.25);
+      transition: 0.75s ease-out;
+    }
+
+    .flex-row a{
+      box-sizing: border-box;
+      height: auto;
+      width: 80%;
+      padding: 2px 10px;
+      justify-content: flex-start;
+    }
+
+    .open-sidebar-button, .close-sidebar-button{
+      padding: 5px;
+      display: block;
+    }
+
+    #sidebar-active:checked ~ .flex-row{
+      right: 0;
     }
 
+    #sidebar-active:checked ~ #overlay{
+      height: 90vh;
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 9;
+    }
+
+    .naviga label svg:hover {
+      fill: yellow;
+      cursor: pointer;
+    }
+
+
     .logo {
       max-width: 60%;
       height: auto;
@@ -96,29 +147,4 @@
   .menu-items {
     display: none;
   }
-
-  /* .navigation.flex-row {
-    display: flex;
-  } */
-
-    .menu-btn {
-      display: block; /* Show the menu button */
-      background-color: rgb(17, 17, 33);
-      color: white;
-      border: none;
-      padding-left: 5px; 
-      text-align: right;
-      cursor: pointer;
-      font-size: large;
-      margin-right: 0;
-      width: 100%;
-      height: 40%;
-      /* border: 1px solid red; */
-    }
-
-    .menu-btn img{
-      width: 30%;
-      border-radius: 20px;
-    }
-    
-  }
\ No newline at end of file
+  }
diff --git a/styles/hire_me.css b/styles/hire_me.css
deleted file mode 100644
index 2d20996..0000000
--- a/styles/hire_me.css
+++ /dev/null
@@ -1,155 +0,0 @@
-
-  /*=================== HIRE ME PAGE STYLE ========================*/
-
-/*
-============ + +  \+ + +  + /+ + =========
-============ + +  + \+ +  /+ + + =========
-============ + -+  -+ \+ +  +- +- + =========
-============ + +  + +/ \+  + + + =========
-============ + +  +/ + +  \+ + + =========
-*/
-
-/* styling ABOUT page*/
-
-.hire_me_page {
-display: flex;
-flex-flow: row wrap;
-justify-content: center;
-align-items: center;
-margin: auto;
-width: 95%;
-
-}
-
-
-.hire_me_page div {
-  width: 600px;
-} 
-
-
-.hire_me_page_class h1, h2, h3, h5{
-font-size: x-large;
-text-align: center;
-margin: auto;
-color: rgb(208, 213, 214);
-}
-
-.hire_me_page_class p, ul, ol{
-  font-size: x-large;
-  text-align: left;
-  }
-
-  .hire_me_page_class ul, ol{
-    background-color: rgb(22, 22, 22);
-    border-radius: 10px;
-    padding-bottom: 5px;
-    padding-top: 5px;
-    }
-  
-  /* .hire_me_page_class h6 {
-    color: rgb(189, 174, 174);
-  } */
-.hire_me_page_class li {
-  margin-top: 10px !important;
-  margin-bottom: 10px;
-  font-size: large;
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-.hire_me_page h4 {
-font-size: larger;
-text-align: center;
-}
-
-.hire_me_page p{
-  color: rgb(219, 223, 227);
-}
-.hire_me_page_class  a {
-color: rgb(153, 153, 41);
-text-decoration: none;
-}
-
-.hire_me_page_class .believer {
-  font-size: x-large;
-   color: rgb(182, 186, 190);
-   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif,  ;
-}
-
-.hire_me_page_class b {
-color: rgb(161, 122, 70);
-font-size: x-large;
-}
-
-.hire_me_page_class ol li {
-  color: rgb(209, 212, 214);
-  font-size: large;
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-.hire_me_page_class {
-background-color: rgb(22, 22, 33);
-/* margin-left: 2.5em; */
-margin-bottom: 2.5em;
-text-align: center;
-padding: 9px;
-border: 1px solid ;
-border-radius: 15px;
-margin-top: 1em;
-/* border: 1px solid red; */
-}
-
-
-.hire_me_big {
-font-size: xx-large;
-text-align: center;
-}
-
-
-
-  /*=================== FIRST STYLE ========================*/
-
-  /*
-============ + +  \+ + +  + /+ + =========
-============ + +  + \+ +  /+ + + =========
-============ + -+  -+ \+ +  +- +- + =========
-============ + +  + +/ \+  + + + =========
-============ + +  +/ + +  \+ + + =========
-*/
-
-/* STYLING EMPLOYMENT_STAT CLASS */
-
- .employment_stat  .open {
-    font-size: 20px;
-     text-align: center; 
-      color: white;
-      /* border: 1px solid; */
-  }
-  
-  .employment_stat  output {
-    color: yellow !important;
-  }
-
-  .employment_stat {
-    background-color: black;
-    /* width: 50%; */
-    border: 1px solid rebeccapurple !important;
-    border-radius: 20px;
-    /* padding: .5em; */
-  }
-
-  .employment_stat h5 {
-    margin-left: .5em;
-  }
-
-
-  .hire_me_page div {
-    width: 600px;
-  } 
-
-  @media only screen and (max-width: 1000px) {
-    .hire_me_page div {
-      width: 95%;
-    }   
-
-    .employment_stat h5 {
-      margin-left: .5em;
-    }
-  }
\ No newline at end of file
diff --git a/styles/introduction.css b/styles/introduction.css
index 19ad88b..89ba2a0 100644
--- a/styles/introduction.css
+++ b/styles/introduction.css
@@ -3,65 +3,44 @@
  *=====Introduction class styling =====
  */
 
- /* * {
-    box-sizing: border-box;
-  } */
-
 .introduction {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
     width: 100%;
-    /* border: 1px solid red;  */
-}
-
-.big_one, .bigg {
-  font-size: xx-large;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
 }
-
-
-
   
-.introduction div {
-  /* border: 1px solid red;  */
-    width: 40em;
-  } 
 
 .introduction .intro {
-      /* border: 1px solid red;    */
+    /* border: 1px solid green;    */
     align-items: center;
     justify-content: space-between; 
     margin-bottom: 20px;
-    font-size: 1em;
-
+    width: 50%;
 }  
 
 .minded {
-    font-size: 1em;
     flex-wrap: wrap;
     margin-right: 2em;
 }
 
-.minded p {
-  font-size: 20px;
-  font-family:Georgia, 'Times New Roman', Times, serif;
-}
-
 .face {
     justify-content: space-between; 
     margin-bottom: 20px;
     text-align: center;
-    width: auto;
+    max-width: 35%;
+    margin-top: 20px;
     margin-right: 0;
-    margin-left: 2.5em;
+    /* margin-left: 2.5em; */
     margin-bottom: 2.5em;
-    /* border: 1px solid red;   */
      
 }
 
 .face p {
-    text-align: left;
-    font-size: 1.2em;
+    font-size: .9rem;
+    font-weight: 200;
 }
 
 .mypic{
@@ -76,74 +55,49 @@
     /* border: 1px solid red; */
 }
 
-/* Download my cv button style */
-.download-my-cv {
-    color: black;
-    background-color: white;
-    font-family: bold;
-    border: none;
-    border-radius: 4em;
-    text-align: center;
-    font-size: 1em;
-    height: 2em;
-    margin: 12px 30px;
-    min-width: 150px;
-    width: 20%;
-  }
-  
-  /* Download my cv button hover opacity */
-  .download-my-cv:hover {
-    color: black !important;
-    font-family: bold;
-    background-color: rgb(233, 225, 225);
-    cursor: pointer;
-  }
 
    /* Align introduction class as screen gets smaller */
    @media only screen and (max-width: 1000px) {
     .introduction {
+      display: flex;
+      align-items: center;
+      justify-content: center; 
+      flex-direction: column;
       font-size: medium;
       width: 95%;
       margin-top: auto;
-    }
-
-    .introduction div {
-        width: 100%;
-      } 
+      margin-bottom: 2rem;
+    } 
 
       .introduction .intro { 
-
         align-items: center;
         justify-content: center;  
-        margin: 5px;
         font-size: medium;
+        width: 95%;
     } 
 
-    .introduction .face {
-      margin: 5px;
-    } 
   } 
   
   @media screen and (max-width: 700px) {
     .introduction  {   
+      display: flex;
+      align-items: center;
+      justify-content: center;  
       flex-direction: column;
       width: 95%;
-      margin: 5px;
+      padding: .8rem;
     }
 
     .introduction .intro { 
-
     align-items: center;
     justify-content: center;  
-    margin: 5px;
     font-size: medium;
+    width: 95%;
 } 
 
-    .introduction div {
-      width: 100%;
-    } 
+.face {
+  max-width: 80%;
+}
 
-    .introduction .face {
-      margin: 5px;
-    } 
-  }
\ No newline at end of file
+  }
+    
\ No newline at end of file
diff --git a/styles/likeCommentAndShare.css b/styles/likeCommentAndShare.css
deleted file mode 100644
index 0e6ce04..0000000
--- a/styles/likeCommentAndShare.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.post {
-	width: 100%;
-	font-family: 'Lexend', sans-serif;
-	/* border: 1px solid red; */
-}
-
-
-.post-ratings-containers {
-	display: flex;
-	justify-content: start;
-	/* padding: 12px 0; */
-    width: 90%;
-	/* border: 1px solid red; */
-}
-
-/* .post-ratings-containers div {
-	width: 20%;
-	border: 1px solid red;
-} */
-
-.post-rating {
-	display: flex;
-	align-items: center;
-	cursor: default;
-    align-items: left;
-}
-
-.post-rating:not(:last-child) {
-	margin-right: 12px;
-}
-
-.post-rating-selected > .post-rating-button,
-.post-rating-selected > .post-rating-count {
-	color: yellow;
-}
-
-.post-rating-button {
-	margin-right: 6px;
-	cursor: pointer;
-	color: #54b2ce;
-}
-
-.post-rating:not(.post-rating-selected) > .post-rating-button:hover {
-	color: #d89e9e;
-}
-
-/* Button for commenting */
-.post-commenting {
-	display: flex;
-	align-items: center;
-	cursor: default;
-    align-items: center;
-    /* padding-left: .5em; */
-    box-shadow: #54b2ce;
-}
-
-
-/* Button for sharing blog */
-.post-sharing {
-	display: flex;
-	align-items: center;
-	cursor: default;
-    align-items: left;
-}
-
-.post-sharing:not(:last-child) {
-	margin-right: 12px;
-}
-
-.post-sharing-selected > .post-sharing-button,
-.post-sharing-selected > .post-sharing-count {
-	color: yellow;
-}
-
-.post-sharing-button {
-	margin-right: 6px;
-	cursor: pointer;
-	color: #54b2ce;
-}
-
-.post-sharing:not(.post-sharing-selected) > .post-sharing-button:hover {
-	color: #c78989;
-}
-
-
-
-/*======= Styling like button on small screens ===== */
-@media screen and (max-width: 1000px) {
-    .post-ratings-containers {
-		display: flex;
-		flex-direction: row;
-		height: 50%;
-		width: 100%;
-		/* border: 1px solid red; */
-	}
-
-	.post-ratings-containers div {
-        align-items: left;
-	}
-}
-  
-@media screen and (max-width: 700px) {
-	.post-ratings-containers {
-		display: flex;
-		flex-direction: row;
-		height: 50%;
-		width: 100%;
-		/* border: 1px solid red; */
-	}
-	.post-ratings-containers div {
-        align-items: center;
-		/* border: 1px solid red; */
-	}
-}
diff --git a/styles/messages.css b/styles/messages.css
deleted file mode 100644
index 9607544..0000000
--- a/styles/messages.css
+++ /dev/null
@@ -1,226 +0,0 @@
-body {
-    /* border: 1px solid red; */
-    margin: 0;
-}
-.got_to_dashboard {
-  /* border: 1px solid red; */
-  width: 51%;
-  margin: 0;
-}
-.message_board {
-  width: 99%;
-    /* margin-top: 1em;
-    margin-bottom: 1em; */
-    text-align: center;
-    padding-top: .5em;
-    padding-bottom: 1em;
-    background-color: #0d0f16;
-    height: 4em;
-    border-radius: 11px;
-    border: 1px solid grey;
-}
-
-  .messages_storage {
-    width: 100%;
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-around;
-    justify-content: left; 
-    height: auto;
-    /* border: 1px solid #916868; */
-    justify-content: center;
-}
-
-
-.messages_storage h1 {
-    color: rgb(237, 241, 22) !important;
-}
-.on_the_way {
-  flex: 15%;
-    margin: .5em;
-    background-color: #2B3048;
-    border: 3px solid grey; 
-    border-radius: 15px;
-    padding: 10px;
-    width: 15%;
-    
-}
-
-.on_the_way h3 {
-    padding-top: 2em;
-    padding-bottom: 2em;
-    text-align: center;
-    
-}
-
-.differentiate {
-  align-items: center;
-    margin: .5em;
-    border: 3px solid grey;
-    border-radius: 15px;
-    /* padding: 1em; */
-    width: 60%; 
-}
-
-.new_message {
-    width: 95%;
-    /* border: 3px solid grey;  */
-    /* padding-left: 1em; */
-    margin: 1em;
-}
-
-.all_messages {
-    border: 5px solid grey;
-    /* width: %; */
-    font-size: large;
-    padding-left: 1em;
-    align-items:  center;
-    border-radius: 15px;
-}
-
-.image_and_message {
-   display: flex;
-   flex-flow: row wrap; 
-   /* border: 1px solid red; */
-
-}
-
-.image_and_message img {
-    width: 20%;
-    height: auto;
-    border-radius: 50%;
-    /* border: 1px solid red; */
-}
-
-
- p {
-    padding-left: 1.2em;
-    font-size: x-large;
-}
-
-
-.differentiate a {
-    color: rgb(176, 155, 155);
-    text-decoration: none;
-  }
-
-  a {
-    color: white;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: yellow !important;
-  }
-
-  li {
-    padding: 2em;
-    padding-left: 0; 
-    padding-bottom: 1em;
-    color: rgb(232, 140, 10) ;
-    font-style: normal ;
-    font-family: 'Arial Narrow Bold', sans-serif;
-    font-size: x-large; 
-  }
-
-
-  /* styling edit_button classes */
- .edit_button{
-    width: auto;
-    height: 40px;
-    color: white !important;
-    background-color: #2f2b2b;
-    border-radius: 20px;
-    border: 1px solid #916868;
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-    font-size: 1.1em;
-  }
-  
-  .edit_button:hover {
-    background-color: #101426;
-    color: rgb(224, 193, 16) !important;
-  }
-
-  .deal_with_messages {
-    margin: 2em;
-    justify-content: space-around;
-    /* margin-left: 1em; */
-    /* border: 1px solid #916868; */
-  }
-
-    /* Align intro_service class as screen gets smaller */
-    @media only screen and (max-width: 1000px) {
-      .message_board {
-        width: 99%;
-        margin: 0;
-        
-      }
-      .messages_storage {
-        flex-direction: column;
-        width: 100%;
-        
-      }
-      .on_the_way {
-        width: 100%;
-        /* border: 1px solid #916868; */
-      }
-
-      .on_the_way h3 {
-        padding-top: 0;
-        padding-bottom: 0;
-        text-align: center;
-        
-    }
-    .differentiate {
-        display: block;
-        font-size: medium;
-        width: 100%;
-      }
-/*   
-      .intro-service article {
-        display: block;
-          width: 95%;
-        }  */
-       .all_messages {
-              width: 95%;
-       }
-
-    } 
-    
-    @media screen and (max-width: 700px) {
-      .message_board {
-        width: 98%;
-        
-      }
-      .messages_storage {
-        flex-direction: column;
-        width: 95%;
-        
-      }
-      .on_the_way {
-        width: 90%;
-        /* border: 1px solid #916868; */
-      }
-
-      .on_the_way h3 {
-        padding-top: 0;
-        padding-bottom: 0;
-        text-align: center;
-        
-    }
-    .differentiate {
-        display: block;
-        font-size: medium;
-        width: 95%;
-      }
-  
-      .intro-service article {
-        display: block;
-          width: 95%;
-        } 
-       .all_messages {
-              width: 95%;
-       }
-    }
diff --git a/styles/new-article.css b/styles/new-article.css
index 8431ba8..4568220 100644
--- a/styles/new-article.css
+++ b/styles/new-article.css
@@ -1,136 +1,128 @@
-/* =================Styling new-blog class ===========*/
-
-/* new-blog class styling*/
-.new-blog {
-    margin: 2em;
-    width: 95%;
-    text-align: center;
-    display: flex;
-    flex-direction: column; /* Change flex direction to column */
-    align-items: center; /* Center items horizontally */
-    /* border: 1px solid red; */
-}
+/* General Styling */
+/* body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f4f4f4;
+} */
 
-/* styling mradmin class*/
+/* Header Styling */
 .mradmin {
-    background-color: #465F6C;
-    color: #FFD43B;
-    text-align: center;
-    font-size: x-large;
-    height: 90px;
-    padding-top: 10px;
-}
-
-
-/* styling edit_button classes */
-.new-blog .edit_button{
-    width: auto;
-    height: 40px;
-    color: white !important;
-    background-color: #2f2b2b;
-    border-radius: 20px;
-    border: 1px solid #916868;
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-  }
-  
-  .new-blog .edit_button:hover {
-    background-color: #101426;
-    color: rgb(224, 193, 16) !important;
-  }
-
-/* styling input*/
-.new-blog input {
-    background-color: #8B7F7F;
-    border: 0;
-    color: rgb(207, 196, 196) ;
+  background-color: #465F6C;
+  color: #FFD43B;
+  text-align: center;
+  font-size: 24px;
+  height: 90px;
+  padding-top: 20px;
+  margin-bottom: 20px;
+  border-radius: 10px;
 }
 
-.new-blog img {
-    width: 2.2em;
-    border-radius: 15px;  
+/* Form Container */
+.new-blog {
+  margin: 20px auto;
+  padding: 20px;
+  width: 90%;
+  max-width: 800px;
+  background: #898e8f;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-.new-blog .title,
-.new-blog .contentin,
-.new-blog .catego,
-.new-blog .tag {
-    width: 90%; /* Set width to 100% to occupy the full width */
-    margin-bottom: 1em; /* Add some spacing between the elements */
+/* Form Elements */
+.new-blog h3 {
+  color: #333;
+  margin-bottom: 10px;
 }
 
 
-/* .new-blog .title {
-    width: 15em;
-    height: 2em;
-    border-radius: 15px;
-} */
 
-.new-blog .title {
-    height: 2em;
-    border-radius: 15px;
+.new-blog input,
+.new-blog textarea,
+.new-blog select {
+  width: 95%;
+  padding: 10px;
+  margin-bottom: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+  background-color: #ccc;
 }
 
-/* .new-blog .contentin {
-    width: 80%;
-    height: 50px;
-    border-radius: 0 0 40px 40px;
-} */
+.status-message {
+  font-size: 14px;
+  margin-top: 10px;
+}
 
-.new-blog .contentin {
-    height: 90px;
-    border-radius: 5px;
-    padding: 10px;
+.status-message.success {
+  color: green;
 }
 
-/* .new-blog .catego {
-    width: 19em;
-    height: 2em;
-    border-radius: 0 0 20px 20px; 
-} */
+.status-message.error {
+  color: red;
+}
 
-.new-blog .catego,
-.new-blog .tag {
-    height: 2em;
-    border-radius: 5px; 
+textarea.contentin {
+  height: 100px;
 }
 
-/* .new-blog .tag {
-    width: 15em;
-    height: 2em;
-    border-radius: 0 0 20px 20px; 
-} */
+/* Upload Image Section */
+.upload-article-image input {
+  display: none;
+}
 
-/* styles to align buttons horizontally in publish-new-article */
-.new-blog .publish-new-article {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
+.upload-article-image label img {
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+}
+
+.upload-article-image p {
+  margin-bottom: 10px;
+  font-weight: bold;
+  color: #333;
 }
 
-.new-blog button {
-    width: 48%; 
+/* Buttons */
+.new-blog .edit_button {
+  display: inline-block;
+  width: 48%;
+  padding: 10px;
+  background-color: #2f2b2b;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: center;
 }
 
+.new-blog .edit_button:hover {
+  background-color: #101426;
+  color: #FFD43B;
+}
 
+.publish-new-article {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
 
-label {
-    margin-right: 10px;
-  }
+.dashboard-link button {
+  width: 100%;
+  margin-top: 20px;
+  background-color: #465F6C;
+}
 
-  select {
-    padding: 8px;
-    font-size: 16px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    outline: none;
+/* Responsive Design */
+@media (max-width: 600px) {
+  .publish-new-article {
+    flex-direction: column;
   }
 
-  output {
-    background-color: #f5f4f4;
-    font-size: 18px;
-    font-weight: bold;
-    color: rgb(0, 0, 0);
-    width: 2em;
+  .new-blog .edit_button {
+    width: 100%;
   }
+}
diff --git a/styles/notifications.css b/styles/notifications.css
deleted file mode 100644
index 78ee536..0000000
--- a/styles/notifications.css
+++ /dev/null
@@ -1,219 +0,0 @@
-body {
-    /* border: 1px solid red; */
-    margin: 0;
-}
-
-.notification_board {
-     margin-top: 1em;
-    margin-bottom: 1em; 
-    text-align: center;
-    padding-top: .5em;
-    padding-bottom: 1em;
-    background-color: #0d0f16;
-    height: 4em;
-    border-radius: 11px;
-    border: 1px solid grey;
-}
-
-  .notifications_storage {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-around;
-    /* align-items: center;  */
-    /* border: 1px solid #916868; */
-    justify-content: center;
-    /* margin: auto; */
-    width: 95%;
-}
-
-.notifications_storage h1 {
-    color: rgb(237, 241, 22) !important;
-}
-.on_the_way {
-    margin: .5em;
-    background-color: #2B3048;
-    border: 3px solid grey; 
-    border-radius: 15px;
-    padding: 1em;
-    width: 20%;
-    
-}
-
-.on_the_way h3 {
-    padding-top: 2em;
-    padding-bottom: 2em;
-    text-align: center;
-    
-}
-
-.categorization {
-    /* margin: 1em;  */
-    border: 3px solid grey;
-    border-radius: 15px;
-    padding: 1em;
-    width: 60%; 
-}
-
-.new_notifications {
-    width: 90%;
-    /* border: 3px solid grey; */
-    /* padding-left: 1em; */
-    /* margin: 1em; */
-}
-
-.all_notifications {
-    border: 5px solid grey;
-    /* width: %; */
-    font-size: large;
-    /* padding-left: 1em; */
-    align-items:  center;
-    border-radius: 15px;
-}
-
-.image_and_message {
-   display: flex;
-   flex-flow: row wrap; 
-   /* border: 1px solid red; */
-
-}
-
-.image_and_message img {
-    width: 20%;
-    height: auto;
-    border-radius: 50%;
-    /* border: 1px solid red; */
-}
-
-
- p {
-    padding-left: 1.2em;
-    font-size: x-large;
-}
-
-
-.categorization a {
-    color: rgb(176, 155, 155);
-    text-decoration: none;
-  }
-
-  a {
-    color: white;
-    text-decoration: none;
-    
-  }
-
-  a:hover {
-    cursor: pointer;
-    color: yellow !important;
-  }
-
-  li {
-    padding: 2em;
-    padding-left: 0; 
-    padding-bottom: 1em;
-    color: rgb(232, 140, 10) ;
-    font-style: normal ;
-    font-family: 'Arial Narrow Bold', sans-serif;
-    font-size: x-large; 
-  }
-
-
-  /* styling edit_button classes */
- .edit_button{
-    width: auto;
-    height: 40px;
-    color: white !important;
-    background-color: #2f2b2b;
-    border-radius: 20px;
-    border: 1px solid #916868;
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-    font-size: 1.1em;
-  }
-  
-  .edit_button:hover {
-    background-color: #101426;
-    color: rgb(224, 193, 16) !important;
-    cursor: pointer;
-  }
-
-  .deal_with_messages {
-    margin: 2em;
-    justify-content: space-around;
-    /* margin-left: 1em; */
-    /* border: 1px solid #916868; */
-  }
-
-  
-    /* Align intro_service class as screen gets smaller */
-    @media only screen and (max-width: 1000px) {
-      .notification_board {
-        width: 99%;
-        margin: 0;
-        
-      }
-      .notifications_storage {
-        flex-direction: column;
-        width: 100%;
-        
-      }
-      .on_the_way {
-        width: 100%;
-        margin: 0;
-        /* border: 1px solid #916868; */
-      }
-
-    .on_the_way h3 {
-      padding-top: 0;
-      padding-bottom: 0;
-      text-align: center;
-      
-  }
-  
-    .categorization {
-        display: block;
-        font-size: medium;
-        width: 90%;
-      }
-  
-       .all_messages {
-              width: 80%;
-       }
-
-    } 
-    
-    @media screen and (max-width: 700px) {
-      .notification_board {
-        width: 99%;
-        margin: 0;
-        
-      }
-      .notifications_storage {
-        flex-direction: column;
-        width: 100%;
-        
-      }
-      .on_the_way {
-        width: 90%;
-        margin: 0;
-        /* border: 1px solid #916868; */
-      }
-
-    .on_the_way h3 {
-      padding-top: 0;
-      padding-bottom: 0;
-      text-align: center;
-      
-  }
-  
-    .categorization {
-        display: block;
-        font-size: medium;
-        width: 90%;
-      }
-  
-       .all_messages {
-              width: 80%;
-       }
-    }
diff --git a/styles/profile.css b/styles/profile.css
deleted file mode 100644
index 854c3d6..0000000
--- a/styles/profile.css
+++ /dev/null
@@ -1,324 +0,0 @@
-/*======== This file style PROFILE page ===================*/
-
-
-  /* style body of profile page*/
- body {
-  background-color: rgb(0, 0, 0);
-  }  
-
-  /* controling go to dashboard class*/
-   .got_to_dashboard {
-    /* border: 1px solid red; */
-    width: 11em;
-  } 
-
-  /* style anch link */
-a {
-  color: rgb(206, 149, 149);
-  text-decoration: none;
-}
-
-
-/* FOR LIVE VIDEO STYLING */
-#videoOverlay {
-  position: absolute;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  align-items: center;
-  margin-left: 30%;
-  border-radius: 10px;
-  top: 0;
-  left: 0;
-  width: 50%;
-  height: 60%;
-  object-fit: cover;
-  z-index: 1;
-}
-
-
-a h3 {
-  /* border: 1px solid red; */
-  width: 175px;
-}
-
-a h3:hover {
-  color: yellow;
-}
-
-.profile {
-  display: block; 
-  padding-left: 2em;
-  padding-right: 2em;
-  padding-top: 0;
-  background-color: rgb(22, 22, 39);
-  /* border: 1px solid red;  */
-}
-
-.profile_top {
-   /* border: 1px solid red;   */
-  display: flex;
-  /* flex-wrap: wrap; 
-   flex-direction: row;  */
-  /* flex-flow: row wrap;  */
-  justify-content: center;
-  /* border: 1px solid red; */
-}
-
-.profile_image {
-  /* border: 1px solid red;  */
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  /* justify-content: center;  */
-}
-
-
-.edit_about {
-  /* border: 1px solid red; */
-  width: 100%;
-}
-
-
-/* control profile photo */
-.profile_image img {
-  width: 40%;
-  border-radius: 50%;
-}
-
-/* styling edit_button classes */
- .edit_button{
-  width: auto;
-  height: auto;
-  color: white !important;
-  background-color: #2f2b2b;
-  border-radius: 20px;
-  border: 1px solid #916868;
-  padding: 10px;
-  /* margin: 10px; */
-  text-align: center;
-}
-
-.profile_main .remove {
-  width: 3em;
-  height: auto;
-  color: white !important;
-  background-color: #2f2b2b;
-  font-family: bold;
-  font-size: 1em;
-  border-radius: 20px;
-  border: 1px solid #916868;
-  padding: 10px;
-  margin: 10px;
-  text-align: center;
-}
-
-.edit_button:hover {
-  background-color: #101426;
-  color: rgb(224, 193, 16) !important;
-}
-
-span {
-  font-size: 15px;
-  height: auto;
-}
-
-.mypic_and_name {
-  /* border: 1px solid red;  */
-  width: 90%;
-  height: auto;
-}
-
-.mypic_and_name img {
-  margin-left: 4em;
-  height: auto;
-}
-.edit_me {
-  /* border: 1px solid red; */
-  display: flex;
-  flex-flow: row wrap;
-  width: auto; 
-  height: auto;
-}
-
- .change_pic{
-  /* border: 1px solid red; */
-  width: 60%;
-  text-align: center;
-  height: auto;
-}
-
-.change_pic .edit_button{
-  width: auto;
-  margin-top: 10px;
-  /* border: 1px solid red; */
-}
-
-.change_pic input {
-  display: none;
-}
-
-/* ======== Styling profile_main class ===========*/
-.profile_main {
-  display: block;
-  margin-left: 2em;
-  margin-right: 2em;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-   width: 100%; 
-} 
-
-.profile_main .Edication {
-  width: 80%;
-  align-items: center;
-}
-
-.profile_main .Skills {
-  width: 80%;
-  align-items: center;
-}
-
-.profile_main .Experience {
-  width: 80%;
-  align-items: center;
-}
-
-
-
-.profile_main h1 {
-  background-color: #000000;
-  padding-left: 1em;
-  height: 2em;
-  padding-top: .5em;
-  padding-bottom: .5em;
-}
-
-
-.profile_footer {
-  border-top: 1px solid white !important;
-  display: flex;
-  justify-content: center;
-  justify-content: space-around;
-  flex-flow: row wrap;
-  height: auto;
-}
-
-.profile  h4, h6, p {
-  font-size: 20px;
-  /* text-align: left; */
-}
-
-.profile  .edit_about  .change_Employment_status output{
-  color: yellow !important;
-}
-
-label {
-  margin-right: 10px;
-}
-
-select {
-  padding: 8px;
-  font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  outline: none;
-}
-
-output {
-  background-color: #f5f4f4;
-  font-size: 18px;
-  font-weight: bold;
-  color: rgb(0, 0, 0);
-  width: 2em;
-}
-
-
-/*======= Styling profile page on small screens ===== */
-@media screen and (max-width: 1000px) {
-    .profile {   
-      flex-direction: column;
-      padding-left: 20px;
-      padding-right: 20px;
-    }
-
-    .profile_image {
-      width: 100%;
-    }
-
-    .mypic_and_name { 
-      width: 100%;
-    }
-
-    .profile_top {
-      display: block;
-      margin-left: 10px;
-      margin-right: 10px;
-      justify-content: space-around;
-    }
-    img {
-    width: 80%;
-    justify-content: center;
-    }
- 
-    .profile_main {
-      display: block;
-      margin-left: 10px;
-      margin-right: 10px;
-    }
-
-    .profile_footer {
-      display: block;
-      justify-content: center;
-      flex-wrap: wrap;
-  }
-
-  .change_pic {
-    width: auto;
-    margin-left: 30px;
-  }
-}
-  
-@media screen and (max-width: 700px) {
-  .profile {   
-    flex-direction: column;
-    padding-left: .2em;
-    padding-right: .2em;
-  }
-
-  .profile_image {
-    width: 100%;
-  }
-
-  .mypic_and_name { 
-    width: 100%;
-  }
-
-  .profile_top {
-    display: block;
-    margin-left: .5em;
-    margin-right: .5em;
-    justify-content: space-around;
-  }
-  img {
-  width: 80%;
-  justify-content: center;
-  }
-
-  .profile_main {
-    display: block;
-    margin-left: .5em;
-    margin-right: .5em;
-  }
-
-  .profile_footer {
-    display: block;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.change_pic {
-  width: auto;
-  display: block;
-}
-}
diff --git a/styles/profile_view.css b/styles/profile_view.css
deleted file mode 100644
index c035079..0000000
--- a/styles/profile_view.css
+++ /dev/null
@@ -1,219 +0,0 @@
-/*======== This file style PROFILE page ===================*/
-
-
-  /* style body of profile page*/
-  body {
-    background-color: rgb(0, 0, 0);
-    }  
-  
-    /* style anch link */
-  a {
-    color: white;
-    text-decoration: none;
-  }
-  
-  a h3 {
-    /* border: 1px solid red; */
-    width: 175px;
-  }
-  
-  a h3:hover {
-    color: yellow;
-  }
-  
-  .profile_view {
-    display: block; 
-    padding-left: 2em;
-    padding-right: 2em;
-    padding-top: 0;
-    background-color: rgb(22, 22, 39);
-    /* border: 1px solid red; */
-  }
-  
-  .profile_view .profile_top {
-     /* border: 1px solid red;   */
-    display: flex;
-    /* flex-wrap: wrap; 
-     flex-direction: row;  */
-    /* flex-flow: row wrap;  */
-    justify-content: center;
-  }
-  
-  .profile_view .profile_image {
-    /* border: 1px solid red; */
-    display: flex;
-    flex-flow: row wrap;
-    width: 100%;
-    /* justify-content: center;  */
-  }
-  
-  
-  .profile_view .edit_about {
-    /* border: 1px solid red; */
-    width: 100%;
-  }
-  
-  
-  /* control profile photo */
-  .profile_view .profile_image img {
-    width: 40%;
-    border-radius: 50%;
-  }
-  
-  /* styling edit_button classes */
-  .profile_view .edit_button{
-    width: auto;
-    height: 40px;
-    color: white !important;
-    background-color: #2f2b2b;
-    border-radius: 20px;
-    border: 1px solid #916868;
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-  }
-  
-  .profile_view .edit_button:hover {
-    background-color: #101426;
-    color: rgb(224, 193, 16) !important;
-  }
-  
-  .profile_view span {
-    font-size: 15px;
-  }
-  
-  .profile_view .mypic_and_name {
-    /* border: 1px solid red;  */
-    width: 60%;
-  }
-  
-  .profile_view .mypic_and_name img {
-    margin-left: 4em;
-  }
-  .profile_view .edit_me {
-    /* border: 1px solid red; */
-    display: flex;
-    flex-flow: row wrap;
-    width: auto; 
-  }
-  
-   .profile_view .change_pic{
-    /* border: 1px solid red;  */
-    width: 60%;
-    text-align: center;
-  }
-  
-  /* ======== Styling profile_main class ===========*/
-  .profile_view .profile_main {
-    display: block;
-    margin-left: 2em;
-    margin-right: 2em;
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-     width: 100%; 
-  } 
-  
-  .profile_view .profile_main .Edication {
-    width: 80%;
-    align-items: center;
-  }
-  
-  .profile_view .profile_main .Skills {
-    width: 80%;
-    align-items: center;
-  }
-  
-  .profile_view .profile_main .Experience {
-    width: 80%;
-    align-items: center;
-  }
-  
-  .profile_view .profile_main .remove {
-    width: 3em;
-    height: 40px;
-    color: white !important;
-    background-color: #2f2b2b;
-    font-family: bold;
-    font-size: 1em;
-    border-radius: 20px;
-    border: 1px solid #916868;
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-  }
-  
-  .profile_view .edit_button:hover {
-    background-color: #101426;
-    color: rgb(224, 193, 16) !important;
-  }
-  
-  .profile_view .profile_main h1 {
-    background-color: #000000;
-    padding-left: 1em;
-    height: 2em;
-    padding-top: .5em;
-    padding-bottom: .5em;
-  }
-  
-  
-  .profile_view .profile_footer {
-    border-top: 1px solid white !important;
-    display: flex;
-    justify-content: center;
-    justify-content: space-around;
-    flex-flow: row wrap;
-    height: auto;
-  }
-
-  .profile_view  h4, h6, p {
-    font-size: 20px;
-    /* text-align: left; */
-  }
-  
-  .profile_view  output {
-    color: yellow !important;
-  }
-
-  
-
-  /*======= Styling profile page on small screens ===== */
-  @media screen and (max-width: 700px) {
-      .profile_view {   
-        flex-direction: column;
-        padding-left: .2em;
-        padding-right: .2em;
-      }
-  
-      .profile_view .profile_image {
-        width: 100%;
-      }
-  
-      .profile_view .mypic_and_name { 
-        width: 100%;
-      }
-  
-      .profile_view .profile_top {
-        display: block;
-        margin-left: .5em;
-        margin-right: .5em;
-        justify-content: space-around;
-      }
-      .profile_view img {
-      width: 80%;
-      justify-content: center;
-      }
-   
-      .profile_view  .profile_main {
-        display: block;
-        margin-left: .5em;
-        margin-right: .5em;
-      }
-  
-      .profile_view .profile_footer {
-        display: block;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-  }
-    
\ No newline at end of file
diff --git a/styles/project.css b/styles/project.css
index 92b5264..fb7ff99 100644
--- a/styles/project.css
+++ b/styles/project.css
@@ -2,31 +2,39 @@
  * === intro-serviceclass style ===
  */
 
+
 /* intro-service flexbox */
 .intro-project {
+  width: 100%;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  }
+
+  .intro-project-container {
     display: flex;
-    flex-flow: row wrap;
+    flex-flow: column;
+    justify-content: center;
     align-items: center;
+  }
+
+  .intro-project-container .container {
+    display: flex;
+    flex-flow: row wrap;
     justify-content: center;
-    justify-content: space-around;
-    text-align: center;
-    width: 95%;
-    margin: auto;
-    background-color: rgb(5, 5, 13);
-    /* border: 1px solid #ff5a5f;  */
+    align-items: center;
   }
 
     /* Article style */
     .intro-project article {
-      display: flex; 
-      justify-content: center;
         align-items: center;
-        /* border: 1px solid #ff5a5f;  */
-        width: 33%;
+        border: 1px solid rgb(130, 137, 152); 
+        width: 30%;
         margin: auto;
+        border-radius: 10px;
+        padding: 1rem;
+        background-color: #1a1e32;
       }
      
-   
   /* Styling all images of intro-sproject class */
   .intro-project img{
     align-items: center;
@@ -34,165 +42,30 @@
     margin-left: 10px;
     margin-top: 9px;
     max-width: 90%;
-    /* border: 1px solid #ff5a5f; */
   }
 
   .intro-project .sample {
-    /* border: 1px solid red; */
-    width: 100%;
-  }
-
- /* Styling all images of intro-sproject class */
-  .intro-project .airbnb img{
-   align-items: center;
-   width: 100%;
-  }
-
-  .intro-project .airbnb {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-
-  .intro-project .monty {
     width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
   }
 
-  .intro-project .monty img{
-   align-items: center !important; 
-    /* margin-left: 3em; */
-    width: 100%;
-   }
-
-   .intro-project .simple-shell {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    width: 100%;
-   }
-
-   .intro-project .simple-shell img{
+   .intro-project .project-card img{
      align-items: center; 
-    /* margin-left: 3em; */
     width: 100%;
    }
-
-  .intro-project  .mon, .air, .bnb, .shell, .byte, .unix {
-    display: none; 
-    margin-top: 0;
-    padding: 0;
-    text-align: center;
-  }
-
-/* simple-shell class While hovering*/
-.simple-shell:hover {
   
-    img {
-        display: none;
-        transition : opacity 0.9s ease-in-out;
-    }
-    .shell,
-  .unix {
-    display: block;     
-    text-align: center; 
-  }
-
-  .shell {
-    margin-top: 2em;
-    
-  }
-  background-color: rgb(40, 40, 76);
-  border-radius: 6%;
-  padding: 1em;
-}
-
-/* airbnb class While hovering*/
-.airbnb:hover {
-  
-    img {
-        display: none;
-        transition : opacity 0.9s ease-in-out;
-    }
-    .air,
-  .bnb {
-    display: block;     
-    text-align: center; 
-  }
-
-  .air {
-    margin-top: 1em;
-    padding: 1em;
-  }
-  background-color: rgb(28, 28, 54);
-  border-radius: 6%;
-  
-}
-
-/* monty class While hovering*/
-.monty:hover {
-  
-    img {
-        display: none;
-        transition : opacity 0.9s ease-in-out;
-    }
-    
-    .mon,
-  .byte {
-    display: block;     
-    text-align: center; 
-  }
-
-  .mon {
-    margin-top: 2em;
-   
-  }
-  background-color: rgb(33, 33, 47);
-  border-radius: 6%;
-  padding: 1em;
-}
-  
-/* Download my cv button style */
-.airbnb .download-m_cv {
-    margin-top: 1em; 
-    margin-bottom: 2em; 
-    color: black;
-    background-color: rgb(244, 229, 12);
-    font-family: bold;
-    border: none;
-    border-radius: 4em;
-    text-align: center;
-    font-size: 1em;
-    height: 2em;
-    max-width: 60%;
-  }
-  
-  /* Download my cv button hover opacity */
-  .download-cv:hover {
-    color: black !important;
-    font-family: bold;
-    background-color: rgb(255, 255, 255);
-    cursor: pointer;
-  }
-
   
      /* Align introduction class as screen gets smaller */
      @media only screen and (max-width: 1000px) {
       .intro-project {
         display: block;
         font-size: medium;
-        width: 95%;
       }
   
       .intro-project article {
         display: block;
-          width: 95%;
+          width: 70%;
+          margin-top: 1rem;
+          margin-bottom: 1rem;
         } 
   
         .intro-project .div{ 
@@ -202,10 +75,6 @@
           margin: 5px;
           font-size: medium;
       } 
-  
-      /* .intro-about .face {
-        margin: 5px;
-      }  */
     } 
     
     @media screen and (max-width: 700px) {
@@ -213,7 +82,7 @@
         display: block; 
         align-items: center;
         flex-direction: column; 
-        width: 95%;
+        width: 98%;
         margin: 5px;
       }
   
@@ -223,22 +92,20 @@
       justify-content: center;  
       margin: 5px;
       font-size: medium;
-      width: 95%;
+      width: 98%;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
   } 
   
       .intro-project div {
-        width: 95%;
+        width: 98%;
         flex-direction: column;
         align-items: center;
       } 
-  
-      /* .introduction .face {
-        margin: 5px;
-      }  */
     }
 
 
-  /*=================== style for PROJECT PAGE ========================*/
+/*=================== style for PROJECT PAGE ========================*/
 
   /*
 ============ + +  \+ + +  + /+ + =========
@@ -249,220 +116,151 @@
 */
 
 
-
-.projects_page{
+/* Page Container */
+.projects-page {
   display: flex;
-  flex-flow: row wrap;
   justify-content: center;
-  margin: auto;
-  width: 50%;
-  border: 5px solid rgb(1, 1, 1);
-  border-radius: 9px;
-  background-color: rgb(16, 18, 23); 
+  align-items: center;
+  padding: 40px 20px;
 }
 
-.projects_page div {
-  width: 100%;
-} 
-
-.projects_class {
-  border: 2.2px solid rgb(37, 39, 60);
-  margin: 1em;
-  padding: 1em;
-  border-radius: 20px;
+/* Projects Container */
+.projects-container {
+  max-width: 1200px;
   text-align: center;
-  background-color: rgb(15, 15, 27);
+  padding: 20px;
 }
 
-.projects_class .project {
-  padding: 10px;
-  width: 95%;
-  background-color: black;
+/* Introduction Section */
+.project-intro-section {
+  margin-bottom: 40px;
 }
 
-.projects_class .shell-project{
-  background-color: rgb(14, 23, 38);
-  border-radius: 4px;
-  padding: 10px;
-  width: 95%;
-}
-.projects_class .AirBnB-project{
-  background-color: rgb(24, 10, 34);
-  border-radius: 4px;
-  padding: 10px;
-  width: 95%;
-}
-.projects_class .Monty-project{
-  background-color: rgb(23, 22, 33);
-  border-radius: 4px;
-  padding: 10px;
-  width: 95%;
-}
-.projects_class .IT-project{
-  background-color: rgb(15, 26, 28);
-  border-radius: 4px;
-  padding: 10px;
-  width: 95%;
+.project-intro-section p {
+  font-size: 1.2rem;
+  color: #e9e9e9;
+  animation: fade-in 1.2s ease-in-out;
 }
 
-.project .more_about_project {
-  display: none;
+/* Projects Section */
+.projects-section {
+  margin-top: 40px;
 }
 
-.projects_class .offer{
-  background-color: rgb(62, 56, 48);
-  border-radius: 5px;
-  font-size: xx-large;
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  padding: 15px;
-} 
-
-.projects_class p{
- font-size: large;
-  text-align: left;
+.section-title {
+  font-size: 2rem;
+  margin-bottom: 20px;
+  color: #dfd9d9;
 }
 
-.projects_class a {
-color: yellow;
-text-decoration: none;
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
 }
 
-.projects_page button {
-  color: black;
-  background-color: rgb(255, 255, 255);
-  font-family: bold;
-  border: none;
-  border-radius: 4em;
-  text-align: center;
-  font-size: 1em;
-  height: 2em;
-  margin: 12px 30px;
-  min-width: 0.2em;
-  width: auto;
+/* Project Cards */
+.project-page-card {
+  background: #ffffff;
+  border: 1px solid #dcdcdc;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: transform 0.4s, box-shadow 0.4s;
 }
 
-.projects_page button:hover {
-  color: black !important;
-  font-family: bold;
-  background-color: rgb(231, 229, 201);
-  cursor: pointer;
+.project-page-card :hover {
+  transform: translateY(-10px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
 }
 
-/* .offer {
-
-} */
- h1 {
-  font-size: xx-large;
- }
-.sample_project {
-  /* border: 1px solid red; */
-  height: auto;
+.project-thumbnail {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
 }
 
-.sample_project
-  img{
-    width: 80%;
-    align-items: center; 
-   /* margin-left: 3em; */
-   border-radius: 10px;
-  }
-
-  .projects_page p, h1, h2, h3, h4, h5{
-  
-    font-size: x-large;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    /* text-align: left; */
+.project-details {
+  padding: 20px;
 }
 
-.projects_page h1{
-  
-  font-size: xx-large;
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  /* text-align: left; */
+.project-details h3 {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  color: #1f2d74;
 }
 
+.project-details p {
+  font-size: 1rem;
+  margin-bottom: 20px;
+  color: #666;
+} 
 
+.buttoning {
+  display: inline-block;
+  padding: 10px 20px;
+  background: #201747;
+  color: #fff;
+  border-radius: 5px;
+  text-decoration: none;
+  transition: background 0.3s;
+}
 
-  /* on small medias */
-  @media screen and (max-width: 700px) {
-    /* .projects_page div {
-      width: 90%;
-    }  */
-
-    h1 {
-      font-size: x-large;
-     }
+.buttoning:hover {
+  background: #4839b7;
+}
 
+/* Animations */
+[data-animate="zoom-in"] {
+  animation: zoom-in 0.8s ease-out;
+}
 
-   .projects_page{
-    width: 97%;
-     margin: 0;
-     padding: 0;
-     /* border: 5px solid red; */
-    }
-     
-    
-    .projects_class {
-      width: 100%;
-      border-radius: 9px;
-      text-align: center;
-    }
+[data-animate="fade-up"] {
+  animation: fade-up 0.8s ease-out;
+}
 
-    .projects_class .offer{
-      padding: 7px;
-      font-size: x-large;
-    } 
+[data-animate="slide-left"] {
+  animation: slide-left 0.8s ease-out;
+}
 
-    .projects_class p {
-      font-size: larger;
-    }
+@keyframes fade-in {
+  from {
+    opacity: 0;
   }
+  to {
+    opacity: 1;
+  }
+}
 
+@keyframes zoom-in {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 
+@keyframes fade-up {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-   /* .IT-project .it,
-   .AirBnB-project .bnb, 
-   .shell-project .unix, 
-   .mont-project.byte  {
-    display: none; 
-    margin-top: 0;
-    padding: 0;
-    text-align: center;
-  } */
-
-/* simple-shell class While hovering*/
-/* #unix-Id:active {
-    display: block;     
-    text-align: center; 
-  } */
-
-/* airbnb class While hovering*/
-/* #bnb:active {
-    display: block;     
-    text-align: center; 
-  } */
-
-
-/* monty class While hovering*/
-/*
-.monty:hover {
-
-  } */
+@keyframes slide-left {
+  from {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
diff --git a/styles/service.css b/styles/service.css
index d4c356a..836028c 100644
--- a/styles/service.css
+++ b/styles/service.css
@@ -3,46 +3,60 @@
  =============  1. intro-servicet class to be used in INDEX.HTML/homepage
  ============== 2. service_page class which is stand for SERVICE PAGE
  */
-
-
 /*
  * === intro-service class style ===
  */
 
 /* intro-service flexbox */
 .intro-service {
+    width: 100%;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    /* border: solid 1px red; */
+  }
+
+  .intro-service-container {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .intro-service-container .container {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     align-items: center;
-    width: 95%;
-    margin: auto;
-    /* border: 1px solid #ff5a5f;  */
   }
 
 /* ... your existing styles ... */
 
-
-  .intro-service p {
-    font-size: x-large;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  }
   /* Article style */
   .intro-service article {
     align-items: center;
-    /* border: 1px solid #ff5a5f;   */
-    width: 33%;
+    width: 30%;
     margin: auto;
+    padding: 1rem;
+    border-radius: 10px;
+    box-shadow: 0px 3px 3px 0px;
+    height: 350px;
+    background-color: #1a1e32;
   }
    
+  .intro-service .more, .intro-project .more, .intro-blog .more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
   /* Styling all images of intro-service class */
   .intro-service img{
     align-items: center;
     border-radius: 50%;
-    /* margin-left: 4.5em;
-    margin-right: 4.5em; */
     max-width: 80%;
-    /* border: 1px solid #ff5a5f; */
+    display: flex;
+    justify-content: center;
   }
 
   .intro-service h2 {
@@ -50,55 +64,27 @@
     padding: 0;
     text-align: center;
     font-size: x-large;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family:'Roboto', sans-serif;
     
   }
 
-
-  .full-stack-dev .download-my-cv {
+  .service .download-my-cv {
     /* margin-left: 9em; */
     align-items: center;
   }
-
-   /* ux-design style*/
-   .intro-service  .ux-design {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: .5em;
-    /* border: 1px solid #ff5a5f; */
-    color: #ffffff;
-    font-size: 1em;
-    height: auto;
-    min-width: 20%;
-  }
   
-
-  .ux-design .ux{
+  .service .Insides_ervice{
     align-items: center; 
     margin-top: 0;
     max-width: 50%;
-    /* padding-right: 15%; */
-    /* border: 1px solid red;    */
-  }
-  
-  /* hovering effect */
-  .ux-design:hover,
-  .web-dev:hover,
-  .full-stack-dev:hover {
-    border: 10px yellow solid;
-    border-radius: 30px;
-    transition: border 500ms ease-in;
   }
       
   /* full stack developer styling*/
-  .intro-service .full-stack-dev{
+  .intro-service .service{
     display: flex;
     flex-direction: column;
     padding: .5em;
     align-items: center;
-    /* border: 1px solid #ff5a5f; */
     color: #ffffff;
     font-size: 1em;
     height: auto;
@@ -106,42 +92,10 @@
     min-width: 20%;
   }
   
-  .full-stack-dev .full-stack{
-    align-items: center;
-    padding-left: 15%;
-    max-width: 50%;
-    /* border: 1px solid red;  */
-  }
-  
-  .full-stack img {
+  /* .service img {
     display: flex;
     justify-content: center;
-    /* text-align: center !important; */
-  }
-
-  /* web development styling */
-  .intro-service .web-dev{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: .5em;
-    /* border: 1px solid #ff5a5f; */
-    color: #ffffff;
-    font-size: 1em;
-    height: auto;
-    /* justify-content: right; */
-    min-width: auto;
-  }
-
-  .web-dev .web{
-    align-items: center;
-    padding: .5em;
-    margin-bottom: 2.5em;
-    max-width: 50%;
-    /* border: 1px solid red;   */
-  }
-
+  } */
 
   /* centering our service header */
   .btn {
@@ -163,15 +117,16 @@
       .intro-service {
         display: block;
         font-size: medium;
-        width: 95%;
+        width: 100%;
       }
   
       .intro-service article {
         display: block;
-          width: 95%;
+          width: 80%;
+          margin-top: 1.5rem;
         } 
   
-        .intro-service .full-stack-dev { 
+        .intro-service .service { 
   
           align-items: center;
           justify-content: center;  
@@ -188,11 +143,11 @@
       .intro-service  {  
         display: block; 
         /* flex-direction: column; */
-        width: 95%;
+        width: 98%;
         margin: 5px;
       }
   
-      .intro-service .full-stack-dev { 
+      .intro-service .service { 
       flex-direction: column;  
       align-items: center;
       justify-content: center;  
@@ -201,7 +156,7 @@
   } 
   
       .intro-service article {
-        width: 100%;
+        width: 70%;
       } 
   
       /* .introduction .face {
@@ -210,7 +165,7 @@
     }
 
 
-  /*++++++++++++ SERVICE PAGE +++++++++++*/
+/*++++++++++++ SERVICE PAGE +++++++++++*/
 
 /*
 ============ + +  \+ + +  + /+ + =========
@@ -250,17 +205,23 @@
   margin-top: 1em;
   padding: 19px;
 }
-.service_class h1, p,  h2, h3, h4{
+.service_class h1,  h2, h3, h4{
   font-size: x-large;
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family:'Roboto', sans-serif;
   text-align: left; 
 }
 
+.service_class p {
+  font-size: large;
+  font-family:'Roboto', sans-serif;
+  text-align: left;
+  color: rgb(255, 252, 252);
+}
 .service_class ul {
   text-align: left;
   font-size: large;
   color: rgb(255, 252, 252);
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family:'Roboto', sans-serif;
 
 }
 
@@ -270,7 +231,7 @@
 }
 /* h1 {
   font-size: x-large;
-  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family:'Roboto', sans-serif;
 } */
 
 .service_class a {
@@ -302,12 +263,16 @@ text-decoration: none;
 }
 
 .servicePhoto img {
-  width: 90%;
-  height: 90%;
+  width: 50%;
+  height: 50%;
   border-radius: 5px;
   border-radius: 15px;
 }
 
+.servicePhoto img:hover {
+  width: 70%;
+  height: 70%;
+}
 .service_class .servicePhoto, h3 {
   display: flex;
   justify-content: center;
diff --git a/styles/settings.css b/styles/settings.css
index d718025..4404828 100644
--- a/styles/settings.css
+++ b/styles/settings.css
@@ -5,26 +5,6 @@ label {
     /* font-size: 2; */
   }
 
-  
-  /* styling edit_button classes */
- .edit_button{
-    width: auto;
-    height: 40px;
-    color: white !important;
-    background-color: #2f2b2b;
-    border-radius: 20px;
-    border: 1px solid #916868;
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-    font-size: 1.1em;
-  }
-  
-  .edit_button:hover {
-    background-color: #101426;
-    color: rgb(224, 193, 16) !important;
-  }
-
   .settings {
     display: flex;
     flex-flow: row wrap;
diff --git a/styles/signin.css b/styles/signin.css
index 99954cb..13fa666 100644
--- a/styles/signin.css
+++ b/styles/signin.css
@@ -35,58 +35,101 @@ a {
  *===== signin class styling in signin.html page =====
  */
 
-.mradmin {
-    background-color: #465F6C;
-    color: #FFD43B;
-    text-align: center;
-    font-size: medium;
-}
-
-/* styling input*/
-.secondstep input {
-    background-color: #8B7F7F;
-    border: 0;
-}
+ .loginPage{
+    background-color: #101426;
+    color: white;
+    padding: 2em;
+    margin: 2em;
+    border-radius: 20px;
+    /* border: 1px solid #916868; */
+    width: 50%;
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+    /* margin-top: 20%; */
+ }
 
+ .loginPage a {
+    color: #d7a333;
+ }
 
- button {
-    color: black;
-    background-color: rgb(255, 255, 255);
-    font-family: bold;
+ input {
+    width: 80%;
+    padding: 10px;
+    margin: 5px 0 22px 0;
+    display: inline-block;
     border: none;
-    border-radius: 4em;
-    text-align: center;
-    font-size: 1em;
-    height: auto;
-    margin: 12px 30px;
-    min-width: 0.2em;
+    background: #1b1e2f;
   }
-  
-  /* See more button hover opacity */
-   button:hover {
-    color: black !important;
-    font-family: bold;
-    background-color: rgb(231, 229, 201);
-    cursor: pointer;
+
+  input[type=text]:focus, input[type=password]:focus {
+    background-color: #ddd;
+    outline: none;
   }
+ 
 
+ .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: auto;
+    background-color: #101426;
+    color: white;
+ }
+
+ .loginContent {
+    width: 50%;
+    height: auto;
+    margin: auto;
+    padding: auto;
+    align-items: center;
+ }
+
+ .data {
+    margin: 1rem;
+    width: 100%;
+    text-align: left;
+ }
 
- .secondstep p, button,
- input,
- h1,
-  h2, 
-  h3, 
-  h4, 
-  h5{
+   Button:hover {
+    background-color: #101426;
+    color: rgb(224, 193, 16) !important;
+  }
   
-    font-size: small;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    /* text-align: left; */
+
+  /* styling edit_button classes */
+ .Button {
+  width: 50%;
+  height: auto;
+  color: white !important;
+  background-color: #2f2b2b;
+  border-radius: 20px;
+  border: 1px solid #916868;
+  padding: 10px;
+  text-align: center;
 }
 
-p {
-  
-    font-size: large;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    /* text-align: left; */
-}
\ No newline at end of file
+.signup {
+    font-size: medium;
+}
+.here {
+    color: #FFD43B;
+}
+
+     /* Align intro_service class as screen gets smaller */
+     @media only screen and (max-width: 1000px) {
+        .loginContent {
+            width: 50%;
+            }
+      } 
+      
+      @media screen and (max-width: 700px) {
+        .loginContent {
+            width: 100%;
+            }
+
+            .loginPage{
+                width: 80%;
+             }
+      } 
\ No newline at end of file
diff --git a/styles/signup.css b/styles/signup.css
deleted file mode 100644
index c23c7a9..0000000
--- a/styles/signup.css
+++ /dev/null
@@ -1,55 +0,0 @@
-/* =================Styling signup class within firststep class===========*/
-
-/* firststep class styling*/
-.firststep {
-    margin: 2em;
-    text-align: center;
-}
-
-/* styling mradmin class*/
-.mradmin {
-    background-color: #465F6C;
-    color: #FFD43B;
-    text-align: center;
-    font-size: medium;
-}
-
-/* styling input*/
-.firststep input {
-    background-color: #8B7F7F;
-    border: 0;
-}
-
-
- button {
-    color: black;
-    background-color: rgb(255, 255, 255);
-    font-family: bold;
-    border: none;
-    border-radius: 4em;
-    text-align: center;
-    font-size: 1em;
-    height: 2em;
-    margin: 12px 30px;
-    min-width: 0.2em;
-  }
-  
-  /* See more button hover opacity */
-   button:hover {
-    color: black !important;
-    font-family: bold;
-    background-color: rgb(231, 229, 201);
-    cursor: pointer;
-  }
-
-  /* control signup class of a paragraph*/
-  /* .sign {
-    font-size: small;
-  } */
-
-  p {
-  
-    font-size: medium;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    /* text-align: left; */
-}
\ No newline at end of file
diff --git a/styles/skills.css b/styles/skills.css
index 8fab71a..e54d1de 100644
--- a/styles/skills.css
+++ b/styles/skills.css
@@ -1,84 +1,156 @@
+.skills-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-.skills_page {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-    /* justify-content: space-around; */
-    margin: auto;
-    width: 95%;
-  
+
+.skills-container {
+  text-align: center; 
+  max-width: 800px;
+  padding: 20px;
+  border-radius: 10px;
+  animation: slide-in 1.2s ease-in-out;
+}
+
+.skills-section {
+  margin-bottom: 40px;
+}
+
+.skills-section .more {
+  font-size: 14px;
+  margin-bottom: 20px;
+  margin-top: auto;
+}
+
+.skills-cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+.skills-cards h3 {
+  /* color: #5843b4; */
+  color: #1f2d74;
+}
+.card {
+  /* background: #fafafa; */
+  border: 1px solid #9f84c2;
+  border-radius: 8px;
+  padding: 20px;
+  width: 200px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  transform: translateY(20px);
+  opacity: 0;
+  transition: all 0.8s ease-out;
+}
+ 
+.card h3 {
+  margin-bottom: 10px;
+}
+ 
+.card ul { 
+  list-style: none;
+  padding: 0;
+}
+
+.card ul li {
+  margin: 5px 0;
+}
+
+[data-animate="fade-in"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.horizontal-scroll {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+  padding: 10px 0;
+}
+
+.horizontal-scroll .item {
+  background: #201747;
+  padding: 10px 20px;
+  border-radius: 20px;
+  font-size: 14px;
+}
+
+.skills-section[data-animate="slide-in"] {
+  animation: slide-in 1.2s ease-in-out forwards;
+  opacity: 0;
+}
+
+.skills-section[data-animate="fade-in"] {
+  animation: fade-in 1.2s ease-in-out forwards;
+  opacity: 0;
+}
+
+.skills-section[data-animate="scale-up"] {
+  animation: scale-up 1.2s ease-in-out forwards;
+  opacity: 0;
+}
+
+.card[data-animate="zoom-in"] {
+  animation: zoom-in 1.2s ease-in-out forwards;
+}
+
+.card[data-animate="rotate-in"] {
+  animation: rotate-in 1.2s ease-in-out forwards;
+}
+
+/* Animations */
+@keyframes slide-in {
+  from {
+    transform: translateX(-50px);
+    opacity: 0;
   }
-  
-  .skills_page div {
-    width: 40em;
-  } 
-  
-  .skills_page_class p, h2, h3, h5{
-    font-size: x-large;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    text-align: left;
+  to {
+    transform: translateX(0);
+    opacity: 1;
   }
+}
 
-  .skills_page_class h1{
-    font-size: x-large;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    text-align: center;
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
   }
+}
 
-  
-  .skills_page h4 {
-    font-size: x-large;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    text-align: center;
+@keyframes scale-up {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
   }
-  
-  .skills_page_class  a {
-    color: yellow;
-    text-decoration: none;
+  to {
+    transform: scale(1);
+    opacity: 1;
   }
-  
-  .skills_page_class li {
-    text-align: left;
-    color: white;
-    font-size: 23px;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
 
+@keyframes zoom-in {
+  from {
+    transform: scale(0.5);
+    opacity: 0;
   }
-  
-  .skills_page_class {
-    background-color: rgb(12, 12, 34);
-    /* margin-left: 2.5em; */
-    margin-bottom: 2.5em;
-    text-align: center;
-    padding: .5em;
-    border: 1px solid ;
-    border-radius: 15px;
-    margin-top: 1em;
-    /* border: 1px solid red;   */
-  }
-  
-  .me_big_b {
-    font-size: xx-large;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    text-align: center;
+  to {
+    transform: scale(1);
+    opacity: 1;
   }
+}
 
-  .edit_button{
-    width: auto;
-    height: 40px;
-    color: white !important;
-    background-color: #2f2b2b;
-    border-radius: 20px;
-    border: 1px solid #916868;
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-    font-size: 1.1em;
-    cursor: pointer;
+@keyframes rotate-in {
+  from {
+    transform: rotate(-45deg);
+    opacity: 0;
   }
-  
-  .edit_button:hover {
-    background-color: #101426;
-    color: rgb(224, 193, 16) !important;
+  to {
+    transform: rotate(0);
+    opacity: 1;
   }
-
+}
diff --git a/styles/subscribe.css b/styles/subscribe.css
deleted file mode 100644
index 60df3e1..0000000
--- a/styles/subscribe.css
+++ /dev/null
@@ -1,128 +0,0 @@
-/*
- * === intro-sub class style ===
- */
-
-/* intro-sub flexbox */
-.intro-sub  {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-    align-items: center;
-    margin-top: 30px;
-    margin: auto;
-    width: 95%;
-    border: 1px solid ;
-    background-color: #1a1a26;
-    border-radius: 15px;
-  }
-
-   /* Article style */
-   .intro-sub  article {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-    align-items: center;
-     /* border: 1px solid #ff5a5f;   */
-    width: 30em;
-  }
-
-  .pre-sub{
-   font-size: 1.2em;
-   margin-top: 30px;
-  }
-
-.get-email {
-    border: 0;
-    background-color: #4C3D3D;
-    color: white !important;
-}
-
-.intro-sub input {
-    border: 0;
-    width: 50%;
-    font-size: smaller !important;
-    margin-top: 1em;
-    margin-right: 0;
-    padding: 1em;
-}
-
-.intro-sub button {
-   margin-left: 0;
-}
-
-
-.edit_button {
-  width: auto;
-  height: 40px;
-  color: white !important;
-  background-color: #2f2b2b;
-  border-radius: 20px;
-  border: 1px solid #916868;
-  padding: 10px;
-  margin: 10px;
-  text-align: center;
-  font-size: 1.1em;
-  cursor: pointer;
-}
-
-.intro-sub .edit_button:hover {
-  background-color: #101426;
-  color: rgb(224, 193, 16) !important;
-  
-}
-
-  
-     /* Align introduction class as screen gets smaller */
-     @media only screen and (max-width: 1000px) {
-      .intro-sub  {
-        display: block;
-        font-size: medium;
-        width: 95%;
-      }
-  
-      .intro-sub  article {
-        display: block;
-          width: 95%;
-        } 
-  
-        .intro-sub  .div{ 
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;  
-          margin: 5px;
-          font-size: medium;
-      } 
-  
-      /* .intro-about .face {
-        margin: 5px;
-      }  */
-    } 
-    
-    @media screen and (max-width: 700px) {
-      .intro-sub   {  
-        display: block; 
-        align-items: center;
-        flex-direction: column; 
-        width: 95%;
-        margin: 5px;
-      }
-  
-      .intro-sub  article { 
-      flex-direction: column;  
-      align-items: center;
-      justify-content: center;  
-      margin: 5px;
-      font-size: medium;
-      width: 95%;
-  } 
-  
-      .intro-sub  div {
-        width: 95%;
-        flex-direction: column;
-        align-items: center;
-      } 
-  
-      /* .introduction .face {
-        margin: 5px;
-      }  */
-    }
\ No newline at end of file
diff --git a/styles/subscribers.css b/styles/subscribers.css
deleted file mode 100644
index af83cc9..0000000
--- a/styles/subscribers.css
+++ /dev/null
@@ -1,147 +0,0 @@
-
-
-.subscription_board {
-  /* width: 95%; */
-    margin-top: 1em;
-    margin-bottom: 1em;
-    align-items: center;
-    padding-top: .5em;
-    padding-bottom: 1em;
-    background-color: #0d0f16;
-    height: 4em;
-    border-radius: 11px;
-    border: 1px solid grey;
-}
-
-  .subscription_storage {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    justify-content: center; 
-    align-items: center;
-    /* border: 1px solid #916868; */
-    margin: auto;
-    width: 50%;
-}
-
-.subscription_storage h1 {
-    color: rgb(237, 241, 22) !important;
-}
-
-
-.insight {
-    /* margin: 1em; */
-    border: 3px solid grey;
-    border-radius: 15px;
-    padding: 1em;
-    width: 95%; 
-}
-
-.new_message {
-    width: 100%;
-    /* border: 3px solid grey; */
-    /* padding-left: 1em;
-    margin: 1em; */
-}
-
-.all_messages {
-    border: 5px solid grey;
-    width: 95%; 
-    font-size: large;
-    padding-left: 1em;
-    align-items:  center;
-    border-radius: 15px;
-}
-
-.image_and_message {
-   display: flex;
-   flex-flow: row wrap; 
-   margin-top: 1em;
-   /* border: 1px solid red; */
-
-}
-
-.image_and_message img {
-    width: 20%;
-    height: auto;
-    border-radius: 50%;
-    /* border: 1px solid red; */
-}
-
- p {
-    padding-left: 1.2em;
-    font-size: x-large;
-}
-
-
-.insight a {
-    color: rgb(245, 237, 237);
-    text-decoration: none;
-  }
-
-  a {
-    color: white;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: yellow !important;
-  }
-
-  li {
-    padding: 2em;
-    padding-left: 0; 
-    padding-bottom: 1em;
-    color: rgb(232, 140, 10) ;
-    font-style: normal ;
-    font-family: 'Arial Narrow Bold', sans-serif;
-    font-size: x-large; 
-  }
-
-
-  /* styling edit_button classes */
- .edit_button{
-    width: auto;
-    height: 40px;
-    color: white !important;
-    background-color: #2f2b2b;
-    border-radius: 20px;
-    border: 1px solid #916868;
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-    font-size: 1.1em;
-  }
-  
-  .edit_button:hover {
-    background-color: #101426;
-    color: rgb(224, 193, 16) !important;
-  }
-
-  .deal_with_messages {
-    margin: 2em;
-    justify-content: space-around;
-    /* margin-left: 1em; */
-    /* border: 1px solid #916868; */
-  }
-
-
-   /* Align intro_service class as screen gets smaller */
-   @media only screen and (max-width: 1000px) {
-    .subscription_storage {
-      font-size: medium;
-      width: 95%;
-    }
-  } 
-  
-  @media screen and (max-width: 700px) {
-    .subscription_storage {
-      font-size: medium;
-      width: 95%;
-    }
-
-    .insight {
-      width: 90%;
-    }
-  }
-
diff --git a/views/about.html b/views/about.html
deleted file mode 100644
index e11703d..0000000
--- a/views/about.html
+++ /dev/null
@@ -1,150 +0,0 @@
-<!--===== This is about page =======-->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/header.css">
-    <link rel="stylesheet" type="text/css" href="../styles/abaut.css">
-    <link rel="stylesheet" type="text/css" href="../styles/footer.css">
-
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-    <header>
-         <div class="logo"><a href="../index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a></div>
-         <div class="">
-          <div class="../views/navigation flex-row"> 
-            <a href="../views/skills.html">Skills</a>
-            <a href="../views/about.html">About</a>
-            <a href="../views/hire_me.html">Hire me</a>
-            <a href="../views/services.html">Service</a>
-            <a href="../views/blogs.html">Blogs</a>
-            <a href="../index.html#contactme">Contact me</a>
-            <a href="../views/projects.html">Portfolio</a>
-            <a href="../views/profile_view.html" target="_self">
-              <div class="admin">
-                <img src="../images/mypic.png" alt="My Picture">
-             </div>
-            </a>
-          </div>
-         </div>
-      </header>
-
-      <section class="about_page">
-        <div class="about_page_class">
-          <h1 class="me_big">About Me</h1>
-          <h4>Am a Full stack Software Developer,
-            Web Developer, and UX Designer.
-          </h4>
-          <p>
-            Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving. 
-            My journey in the world of technology has equipped me with a diverse set of skills, 
-            allowing me to bring ideas to life through elegant and efficient code.
-            </p>
-            <br>
-
-            <h1>Mission and Objectives</h1>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-            <br>
-
-            <h1>Education</h1>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-
-            <ul>
-              <li>
-                <p>Bacholor's Degree in BIT at University of Rwanda in progress.</p>
-              </li>
-              <li>
-                <P>Software Engineering online.</P>
-              </li>
-              <li>
-                <p>web development at Andela in progress</p>
-              </li>
-            <li>
-              <p>Foundation in UX design (theory) at Coursera by Google</p>
-            </li>
-            <li>
-              <p>Advanced Diploma in Mathematics, Computer Science and Economics (MCE)</p>
-            </li>
-          </ul>
-
-            <h1>
-              Experience
-            </h1>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-
-            <h5>For more about my Experiences you can take a look on my works on</h5>
-            <ul>
-              <li><p>Portfolio tab on the above navigation Ribbon or click <a href="../views/projects.html" target="_self">here</a>.</p></li>
-              <li><p><a href="https://github.com/Ndevu12?tab=repositories" target="_self">GitHub</a> for a sets of works</p></li>
-            </ul>
-        </div>
-      </section>
-
-      
-                 <!-- Footer section-->
-      <footer>
-          <div class="logo">
-            <img src="../images/logo1.png" alt="logo">
-        </div>
-
-         <!-- link for my social medias -->
-         <div class="socialmedia"><img src="../images/linkedin-logo.png" alt="linkin link">
-           <img src="../images/twitter-logo.png" alt="twitter link">
-         </div>
-
-          <div class="footerdesc">
-             <!-- connecting point -->
-            <div class="connection">
-               <h2>Connect with me:</h2>
-
-                <ul>
-                   <li> niyokwizerwajeanpaulelisa@gmail.com</li>
-                   <li>www.linkedin.com/in/jean-paul-elisa</li>
-                   <li>www.GitHub.com/Ndevu12</li>
-                 </ul>
-              </div>
-                <!-- blogs -->
-               <div class="blogs-section">
-                 <h2>Blogs:</h2>
-                    <ul>
-                    <li>My Journey into Full Stack Development</li>
-                    <li>Lessons from Building a Simple Shell</li>
-                    <li>The Art of UI Design in Full Stack Development</li>
-                  </ul>
-               </div>
-      
-                 <!-- my work -->
-                    <div class="my-work">
-                       <h2>Explore My Work:</h2>
-                       <ul> 
-                         <li>Simple shell</li>
-                         <li>AirBnB Clone</li>
-                         <li>Monty</li>
-                        </ul>
-                     </div>
-                   </div>
-                     <div class="footcopyright">
-                        ©2024 | Ndevu | Full Stack Developer | Gikondo-Kigali
-                     </div>    
-    </footer>
-    </body>
-    </html>
\ No newline at end of file
diff --git a/views/all_articles.html b/views/all_articles.html
index 1867cf3..7fc5b61 100644
--- a/views/all_articles.html
+++ b/views/all_articles.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../styles/common.css">
     <link rel="stylesheet" type="text/css" href="../styles/all_articles.css">
 
-    <link rel="icon" type="image/png" href="../images/logo1.png">
+    <link rel="icon" type="image/png" href="./images/logo1.png">
     <title>NdevuSpace</title>
   </head>
   <body>
@@ -17,26 +17,33 @@
     <div class="got_to_dashboard">
       <a href="../views/dashboard.html" target="_self"><h3><u>Back to DashBoard</u></h3></a>
     </div>
+    <div class="search-filter">
+      <input type="text" placeholder="Search by title">
+      <button id="search-button" class="download-my-cv"> 
+        Search
+     </button>
+    </div>
+
      <div class="article_board">
       <h1>Article Board</h1>
      </div>
 
-    <div class="article_categories">
-        <a href="#" target="_self"><h2>Categories:</h2></a>
-        <a href="#" target="_self"><h3>Pgrogramming</h3></a>
-        <a href="#" target="_self"><h3>Business</h3></a>
-        <a href="#" target="_self"><h3>Critical thinking</h3></a>
-        <a href="#" target="_self"><h3>Social Life</h3></a>
-        <a href="#" target="_self"><h3>Technology</h3></a>
-        <a href="#" target="_self"><h3>Science</h3></a>
-      </div>
+     <div class="article_categories">
+      <a href="#" target="_self">Programming</a>
+      <a href="#" target="_self">Business</a>
+      <a href="#" target="_self">Critical thinking</a>
+      <a href="#" target="_self">Social Life</a>
+      <a href="#" target="_self">Technology</a>
+    </div>
 
     <div class="articles_storage">
 
       <div class="on_the_way">
-        <h3><a href="#" target="_self">Pending review</a></h3>
-        <h3><a href="#" target="_self">Draft</a></h3>
-        <h3><a href="#" target="_self">Archived</a></h3>
+        <button id="Recently" class="state">Recently</button>
+        <button id="Published" class="state">Published</button>
+        <button id="Unpublished" class="state">Unpublished</button>
+        <button id="Draft" class="state">Draft</button>
+        <button id="Archived" class="state">Archived</button>
       </div>
     
         <div class="calarify">
@@ -504,23 +511,13 @@ <h1>All articles</h1>
      </button>
     </a>
 
-     <a href="index.html">
+     <a href="../index.html">
      <button id="home1" class="edit_button"> 
       Home
    </button></a>
         </div>
     </div>
-    <p>
-      <a href="http://jigsaw.w3.org/css-validator/check/referer">
-          <img style="border:0;width:88px;height:31px"
-              src="http://jigsaw.w3.org/css-validator/images/vcss"
-              alt="Valid CSS!" >
-      </a>
-  </p>
-
-  // scripts
+  
   <script src="../scripts/blogs.js" defer></script>
-  <script src="../scripts/like.js" defer></script>
-  <script src="../scripts/comment.js" defer></script>
     </body>
     </html>
\ No newline at end of file
diff --git a/views/analytics.html b/views/analytics.html
deleted file mode 100644
index ba019ba..0000000
--- a/views/analytics.html
+++ /dev/null
@@ -1,159 +0,0 @@
-<!--===== This is Analytics page =======-->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/analytics.css">
-
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-
-    <div class="got_to_dashboard">
-        <a href="../views/dashboard.html" target="_self"><h3>Back to DashBoard</h3></a>
-      </div>
-
-    <div class="analytics_header">
-        <h1>Analytics</h1>
-    </div>
-    
-    <div class="details">
-        <div class="clasif">
-        <article>
-            <div class="blog_analysis">
-                <h2>Blogs analysis</h2>
-                <div class="most_viewed">
-                    <h3>5 Most viewed Articles</h3>
-                    <ul>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                    </ul>
-                </div>
-                <div class="most_liked">
-                    <h3>5 Most liked Article</h3>
-                    <ul>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                    </ul>
-                </div>
-                <div class="most_shared">
-                    <h3>5 Most shared Article</h3>
-                    <ul>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                        <li><a href="#">Embracing the Coding Adventure: My Journey into Full Stack Development</a></li>
-                    </ul>
-                </div>
-            </div>
-        </article>
-    </div>
-  <!-- classify class for second layout -->
-            <div class="classify">
-                <article>
-            <div class="visits">
-                <h2>visitors</h2>
-                <div class="total_visitors">
-                    <label for="dateRange">Select Date Range:</label>
-                    <select id="total" name="dateRange">
-                      <option value="7">Last 7 Days</option>
-                      <option value="14">Last 14 Days</option>
-                      <option value="30">Last 1 Month</option>
-                      <option value="60">Last 2 Months</option>
-                      <option value="90">Last 3 Months</option>
-                    </select>
-
-                    <p>Total visitors: 
-                    <output id="Total-visitors">1000</output>
-                    </p>
-                </div>
-
-                <div class="total_visitors">
-                    <h3>Time they spent on space</h3>
-                    <p>Total Time <span class="hours">(in Hours)</span>: 
-                        <output id="total_visitors">10</output>
-                        </p>
-                </div>
-            </div>
-        </article>
-
-        <article>
-            <div class="subscribers">
-                <h2>Subscribers</h2>
-
-                <div class="total_visitors">
-                    <label for="visitors">Select Date Range:</label>
-                    <select id="visitors" name="dateRange">
-                      <option value="7">Last 7 Days</option>
-                      <option value="14">Last 14 Days</option>
-                      <option value="30">Last 1 Month</option>
-                      <option value="60">Last 2 Months</option>
-                      <option value="90">Last 3 Months</option>
-                    </select>
-
-                    <p>Total Subscribers: 
-                    <output id="Total_Subscribers">1000</output>
-                    </p>
-                </div>
-            </div>
-        </article>
-
-        <article>
-            <div class="its_position">
-                <h2>Space status</h2>
-                <div class="overview">
-                    <h4>Space overview on 100% for each:</h4>
-                    <label for="dateRange">Select analysis option:</label>
-                    <select id="dateRange" name="dateRange">
-                      <option value="7">Last 7 Days</option>
-                      <option value="14">Last 14 Days</option>
-                      <option value="30">Last 1 Month</option>
-                      <option value="60">Last 2 Months</option>
-                      <option value="90">Last 3 Months</option>
-                    </select>
-
-                    <p>Subscriptions: 
-                        <output id="Subscriptions">1000</output>
-                    </p>
-                    <p>Blogs impression: 
-                        <output id="Blogs_impression">1000</output>
-                    </p>
-                    <p>Movement: 
-                         <output id="Movement">1000</output>
-                    </p>
-                    <p>Direct messaged me vi contact me: 
-                        <output id="Direct_messaged">1000</output>
-                    </p>
-                    <p>Reports: 
-                        <output id="Reports">1000</output>
-                    </p>
-
-                    <p>Total Subscribers: 
-                    <output id="Total_Sub">1000</output>
-                    </p>                    
-                </div>
-            </div>
-        </article>
-    </div>
-    </div>
-
-    <div class="got_to_dashboard">
-        <a href="../views/analytics.html" target="_self"><h3>Back to top</h3></a>
-        <a href="../styles/dashboard.css" target="_self"><h3>Back to DashBoard</h3></a>
-      </div>
-      
-    </body>
-    </html>
\ No newline at end of file
diff --git a/views/blogs.html b/views/blogs.html
index ad71677..877fa72 100644
--- a/views/blogs.html
+++ b/views/blogs.html
@@ -30,361 +30,134 @@
     
 </head>
 <body>
-    <header>
-        <div class="logo"><a href="../index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a></div>
-        <div class="">
-         <div class="navigation flex-row"> 
-           <a href="../views/skills.html">Skills</a>
-           <a href="../views/about.html">About</a>
-           <a href="../views/hire_me.html">Hire me</a>
-           <a href="../views/services.html">Service</a>
-           <a href="../views/blogs.html">Blogs</a>
-           <a href="../index.html#contactme">Contact me</a>
-           <a href="../views/projects.html">Portfolio</a>
-           <a href="../views/profile_view.html" target="_self">
-            <div class="admin">
-              <img src="../images/mypic.png" alt="My Picture">
-           </div>
-           </a>
-         </div>
+  <header>
+    <div class="logo">
+     <a href="../index.html" target="_self">
+       <img src="../images/logo1.png" alt="logo">
+     </a>
+   </div>
+   <button id="theme">Dark</button> 
+     <div class="naviga">
+
+       <input type="checkbox" id="sidebar-active">
+       <label for="sidebar-active" class="open-sidebar-button">
+         <svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
+       </label>
+       <label id="overlay" for="sidebar-active"></label>
+
+       <div class="navigation flex-row"> 
+         <a href="./skills.html">Skills</a>
+         <a href="../index.html#aboutme">About</a>
+         <a href="./blogs.html">Blogs</a>
+         <a href="../index.html#contactme">Contact me</a>
+         <a href="./projects.html">Portfolio</a>
+         <a href="./experience.html">Experience</a>
+       </div>
+       
+     </div>
+   </header>
+
+     <div class="article_categories">
+      <a href="#" target="_self">Programming</a>
+      <a href="#" target="_self">Business</a>
+      <a href="#" target="_self">Critical thinking</a>
+      <a href="#" target="_self">Social Life</a>
+      <a href="#" target="_self">Technology</a>
+    </div>
+
+     <main class="blogs-container">
+      <aside class="sidebar">
+        <h3><a href="#">Recently</a></h3>
+        <p><a href="#">Popular</a></p>
+        <p><a href="#">All Blogs</a></p>
+      </aside>
+  
+      <section class="main-content">
+        <div class="search-filter">
+          <input type="text" placeholder="Search by title">
+          <button id="search-button" class="download-my-cv"> 
+            Search
+         </button>
+        </div>
+  
+        <div class="blog-posts">
+          <article class="blog-post">
+            <img src="https://via.placeholder.com/300x200" alt="Coding Adventure">
+            <h2><a href="#">Embracing the Coding Adventure</a></h2>
+            <p>Embarking on the path of Full Stack Development was a thrilling adventure...</p>
+            <button class="read-more">Read More</button>
+          </article>
+  
+          <article class="blog-post">
+            <img src="https://via.placeholder.com/300x200" alt="Simple Shell Development">
+            <h2><a href="#">Navigating the Unknown: Lessons from Building a Simple Shell</a></h2>
+            <p>Building a Simple Shell was more than just a coding project...</p>
+            <button class="read-more">Read More</button>
+          </article>
+  
+          <article class="blog-post">
+            <img src="https://via.placeholder.com/300x200" alt="UI Design">
+            <h2><a href="#">Crafting Digital Experiences: The Art of UI Design</a></h2>
+            <p>UI design is not just about aesthetics; it's about creating a seamless...</p>
+            <button class="read-more">Read More</button>
+          </article>
+  
+          <article class="blog-post">
+            <img src="https://via.placeholder.com/300x200" alt="Full Stack Journey">
+            <h2><a href="#">The Journey of a Full Stack Developer</a></h2>
+            <p>Discover the milestones and challenges of becoming a Full Stack Developer...</p>
+            <button class="read-more">Read More</button>
+          </article>
         </div>
-     </header>
+      </section>
+    </main>
 
-     <div class="blogs_categories">
-      <a href="#" target="_self"><h3>Categories:</h3></a>
-      <a href="#" target="_self" id="programming"><h4>Pgrogramming</h4></a>
-      <a href="#" target="_self" id="Business"><h4>Business</h4></a>
-      <a href="#" target="_self" id="CriticalThinking"><h4>Critical thinking</h4></a>
-      <a href="#" target="_self" id="socialLife"><h4>Social Life</h4></a>
-      <a href="#" target="_self" id="Technology"><h4>Technology</h4></a>
-      <a href="#" target="_self" id="Science"><h4>Science</h4></a>
+    <div class="more_blogs">
+      <button id="bt" class="download-my-cv"> 
+        More blogs
+     </button>
     </div>
 
-    <!-- The flexible grid (content) -->
-<div class="row">
-     
-    <!-- left layout-container -->
-    <div class="side">
-      <h3 class="dash"><a href="#" target="_self">Recently</a></h5>    
-      <p class="new"><a href="#" target="_self">Popular</a></p>
-      <p class="delarticle"><a href="#" target="_self">All Blogs</a></p>
+    <div class="choice">
+      <a href="#top">Back to top</a>
     </div>
-    
-    <!-- in between big layout-container -->
-    <div class="main">
-        <div class="top">
-            <div class="blogtitle">
-                <h1 class="b">Blogs</h1>
-            </div>
 
-             <div class="searchfilter">
-            <a href="#" target="_self"><img src="../images/search.jfif" alt="search icon"></a>
-              <input type="text" value="  Search" method="get">
-           </div>
+     <!-- Footer section-->
+     <footer>
+      <div class="footer-container">
+        <div class="logo">
+          <a href="../index.html" target="_self">
+          <img src="../images/logo1.png" alt="logo">
+          <p>NdevuSpace</p>
+        </a>
         </div>
 
-      <div class="deep">
-        <div class="embark">
-          <div class="post" data-post-id="7712">
-            <div class="blogPhoto">
-              <img src="../images/blogImages/coding adventure.png" alt="Technology">
-            </div>
-            <p class="article-title"><u><a href="#" class="blogTitle">Embracing the Coding Adventure: 
-              My Journey into Full Stack Development</a></u>
-            </p>
-            <p class="author"></p>
-            <p class="date"></p>
-            <div class="blogImage"></div>
-           <p class="uni" class="content">
-            Embarking on the path of Full Stack Development was a thrilling adventure filled with challenges, 
-            victories, and continuous learning. In this blog, I'll share the pivotal moments, 
-            from the initial curiosity that sparked my interest to the milestones that shaped my coding journey. 
-            Join me as I reflect on the lessons learned, the technologies mastered, 
-            and the passion that fuels my commitment to creating innovative solutions........
-            <div class="description"></div>
-            </p>
-            <div class="post-ratings-containers">
-              <div class="post-rating">
-                <span class="post-rating-button material-icons">thumb_up</span>
-                <span class="post-rating-count">0</span>
-              </div>
-
-              <div class="post-commenting">    
-                <a href="../views/../views/comments_page.html" rel="Comment Page">    
-                <span class="post-commenting-button material-icons">comment</span>
-                <span class="commentNumer">0</span>
-                </a>
-              </div>
-
-              <div class="post-sharing">
-                <span class="post-sharing-button material-icons">share</span>
-                <span class="post-sharing-count">0</span>
-              </div>
-
-            </div>
-          </div>
+        <div class="footer-navigate">
+          <p>Navigations:</p>
+          <ul>
+          <li><a href="../index.html" target="_self">Home</a></li>
+          <li><a href="./views/projects.html" target="_self">Projects</a></li>
+          <li><a href="./views/blogs.html" target="_self">Blogs</a></li>
+          <li><a href="index.html#contactme" target="_self">Contact me</a></li>
+        </ul>
         </div>
 
-          <div class="unknown">
-            <div class="post" data-post-id="7722">
-              <div class="blogPhoto">
-                <img src="../images/blogImages/gra.jfif" alt="Technology">
-              </div>
-            <p class="article-title"><u><a href="#" class="blogTitle">
-             Navigating the Unknown: Lessons from Building a Simple Shell</a></u>
-            </p>
-            <p class="author"></p>
-            <p class="date"></p>
-             <p class="bn" class="content">
-               Building a Simple Shell was more than just a coding project; 
-               it was a journey into the heart of operating systems and command-line interfaces. In this blog post, 
-               I'll delve into the challenges I faced, the strategies I employed to tackle them, and the valuable 
-               lessons learned along the way. From parsing commands to handling signals, 
-               discover the insights gained from navigating the unknown territories of shell development..........
-             </p>
-             <div class="post-ratings-containers">
-              <div class="post-rating">
-                <span class="post-rating-button material-icons">thumb_up</span>
-                <span class="post-rating-count">0</span>
-              </div>
-
-              <div class="post-commenting">    
-                <a href="../views/comments_page.html" rel="Comment Page">    
-                <span class="post-commenting-button material-icons">comment</span>
-                </a>
-              </div>
-
-              <div class="post-sharing">
-                <span class="post-sharing-button material-icons">share</span>
-                <span class="post-sharing-count">0</span>
-              </div>
-            </div>
-         </div>
-      </div>
-
-         <div class="digital">
-          <div class="post" data-post-id="7312">
-            <div class="blogPhoto">
-              <img src="../images/blogImages/programming.jfif" alt="Technology">
-            </div>
-            <p class="article-title" >
-              <u><a href="#" class="blogTitle">
-                Crafting Digital Experiences: The Art of UI Design in Full Stack Development
-              </a></u>
-            </p>
-            <p class="author"></p>
-            <p class="date"></p>
-              <p class="byt" class="content">
-              UI design is not just about aesthetics; it's about creating a seamless and intuitive user experience. 
-              In this blog, I'll share my insights into the art of UI design in Full Stack Development. 
-              From choosing color palettes to ensuring responsiveness, I'll discuss the principles and practices that elevate a 
-              web application's user interface. Join me in exploring the balance between functionality and aesthetics, 
-              and the satisfaction that comes from crafting digital experiences that users love........
-            </p>
-            <div class="post-ratings-containers">
-              <div class="post-rating">
-                <span class="post-rating-button material-icons">thumb_up</span>
-                <span class="post-rating-count">0</span>
-              </div>
-
-              <div class="post-commenting">    
-                <a href="../views/comments_page.html" rel="Comment Page">    
-                <span class="post-commenting-button material-icons">comment</span>
-                </a>
-              </div>
-
-              <div class="post-sharing">
-                <span class="post-sharing-button material-icons">share</span>
-                <span class="post-sharing-count">0</span>
-              </div>
+          <!-- link for my social medias -->
+          <div class="socialmedia">
+            <div class="connect">
+              <p>Connect with me:</p>
             </div>
+            <div class="social">
+              <a href="https://www.linkedin.com/in/jean-paul-elisa"><img src="../images/linkedin-logo.png"  class="social-biglogo" alt="linkedin link"></a>
+              <a href="https://github.com/Ndevu12"><img src="../images/gith.png" class="social-github" alt="linkedin link"></a>
             </div>
           </div>
-
-          <div class="digital">
-            <div class="post" data-post-id="7711">
-              <div class="blogPhoto">
-                <img src="../images/blogImages/functional.png" alt="Technology">
-              </div>
-            <p class="article-title">
-              <u><a href="#" class="blogTitle">
-                Crafting Digital Experiences: The Art of UI Design in Full Stack Development
-              </a></u>
-              <p class="author"></p>
-              <p class="date"></p>
-            </p>
-              <p class="byt" class="content">
-              UI design is not just about aesthetics; it's about creating a seamless and intuitive user experience. 
-              In this blog, I'll share my insights into the art of UI design in Full Stack Development. 
-              From choosing color palettes to ensuring responsiveness, I'll discuss the principles and practices that elevate a 
-              web application's user interface. Join me in exploring the balance between functionality and aesthetics, 
-              and the satisfaction that comes from crafting digital experiences that users love........
-            </p>
-            <div class="post-ratings-containers">
-              <div class="post-rating">
-                <span class="post-rating-button material-icons">thumb_up</span>
-                <span class="post-rating-count">0</span>
-              </div>
-
-              <div class="post-commenting">    
-                <a href="../views/comments_page.html" rel="Comment Page">    
-                <span class="post-commenting-button material-icons">comment</span>
-                </a>
-              </div>
-
-              <div class="post-sharing">
-                <span class="post-sharing-button material-icons">share</span>
-                <span class="post-sharing-count">0</span>
-              </div>
-            </div>
-            </div>
-          </div>
-
-          <div class="digital">
-            <div class="post" data-post-id="7711">
-              <div class="blogPhoto">
-                <img src="../images/blogImages/social.jfif" alt="Social lifie">
-              </div>
-            <p class="article-title">
-              <u><a href="#" class="blogTitle">
-                Crafting Digital Experiences: The Art of UI Design in Full Stack Development
-              </a></u>
-            </p>
-            <p class="author"></p>
-            <p class="date"></p>
-              <p class="byt" class="content">
-              UI design is not just about aesthetics; it's about creating a seamless and intuitive user experience. 
-              In this blog, I'll share my insights into the art of UI design in Full Stack Development. 
-              From choosing color palettes to ensuring responsiveness, I'll discuss the principles and practices that elevate a 
-              web application's user interface. Join me in exploring the balance between functionality and aesthetics, 
-              and the satisfaction that comes from crafting digital experiences that users love........
-            </p>
-            <div class="post-ratings-containers">
-              <div class="post-rating">
-                <span class="post-rating-button material-icons">thumb_up</span>
-                <span class="post-rating-count">0</span>
-              </div>
-
-              <div class="post-commenting">    
-                <a href="../views/comments_page.html" rel="Comment Page">    
-                <span class="post-commenting-button material-icons">comment</span>
-                </a>
-              </div>
-
-              <div class="post-sharing">
-                <span class="post-sharing-button material-icons">share</span>
-                <span class="post-sharing-count">0</span>
-              </div>
-            </div>
-          </div>
-          </div>
-
-          <div class="digital">
-            <div class="post" data-post-id="27711">
-              <div class="blogPhoto">
-                <img src="../images/blogImages/tech.jfif" alt="Technology">
-              </div>
-            <p class="article-title">
-              <u><a href="#" class="blogTitle">
-                Crafting Digital Experiences: The Art of UI Design in Full Stack Development
-              </a></u>
-            </p>
-            <p class="author"></p>
-            <p class="date"></p>
-              <p class="byt" class="content">
-              UI design is not just about aesthetics; it's about creating a seamless and intuitive user experience. 
-              In this blog, I'll share my insights into the art of UI design in Full Stack Development. 
-              From choosing color palettes to ensuring responsiveness, I'll discuss the principles and practices that elevate a 
-              web application's user interface. Join me in exploring the balance between functionality and aesthetics, 
-              and the satisfaction that comes from crafting digital experiences that users love........
-            </p>
-            <div class="post-ratings-containers">
-              <div class="post-rating">
-                <span class="post-rating-button material-icons">thumb_up</span>
-                <span class="post-rating-count">0</span>
-              </div>
-
-              <div class="post-commenting">    
-                <a href="../views/comments_page.html" rel="Comment Page">    
-                <span class="post-commenting-button material-icons">comment</span>
-                </a>
-              </div>
-
-              <div class="post-sharing">
-                <span class="post-sharing-button material-icons">share</span>
-                <span class="post-sharing-count">0</span>
-              </div>
-            </div>
-            </div>
-            </div>
-          </div>
- 
-          <br>
-          <br>
-          <div class="choice">
-            <a href="blogs.html">Back to top</a>
-            <a href="#">Recently</a>
-            <a href="#">Popular</a> 
-            <a href="#">All Blogs</a>
-          </div>
-    </div>
-
-  </div>
-</div>
-
-
-            <!-- Footer section-->
-            <footer>
-                <div class="logo">
-                    <a href="index.html">
-                  <img src="../images/logo1.png" alt="logo">
-                </a>
-              </div>
-      
-               <!-- link for my social medias -->
-               <div class="socialmedia"><img src="../images/linkedin-logo.png" alt="linkin link">
-                 <img src="../images/twitter-logo.png" alt="twitter link">
-               </div>
-      
-                <div class="footerdesc">
-                   <!-- connecting point -->
-                  <div class="connection">
-                     <h2>Connect with me:</h2>
-      
-                      <ul>
-                         <li> niyokwizerwajeanpaulelisa@gmail.com</li>
-                         <li>www.linkedin.com/in/jean-paul-elisa</li>
-                         <li>www.GitHub.com/Ndevu12</li>
-                       </ul>
-                    </div>
-                      <!-- blogs -->
-                     <div class="blogs-section">
-                       <h2>Blogs:</h2>
-                          <ul>
-                          <li>My Journey into Full Stack Development</li>
-                          <li>Lessons from Building a Simple Shell</li>
-                          <li>The Art of UI Design in Full Stack Development</li>
-                        </ul>
-                     </div>
-            
-                       <!-- my work -->
-                          <div class="my-work">
-                             <h2>Explore My Work:</h2>
-                             <ul> 
-                               <li>Simple shell</li>
-                               <li>AirBnB Clone</li>
-                               <li>Monty</li>
-                              </ul>
-                           </div>
-                         </div>
-                           <div class="footcopyright">
-                              ©2024 | Ndevu | Full Stack Developer | Gikondo-Kigali
-                           </div>    
-          </footer>
+      </div>
+            <div class="footcopyright">
+              <h5>©2024 | Ndevu | Full Stack Software Developer | Gikondo-Kigali</h5>
+            </div>    
+    </footer>
                   <!-- SCRIPTS -->
-    <script src="../scripts/like.js" defer></script> 
-    <script src="../scripts/share.js" defer></script>
-    <script src="../scripts/comment.js" defer></script>
-    <script src="../scripts/blogs.js" defer></script>
+<script src="../scripts/blogs.js" defer></script>
 </body>
 </html>
diff --git a/views/comments_page.html b/views/comments_page.html
deleted file mode 100644
index b70db99..0000000
--- a/views/comments_page.html
+++ /dev/null
@@ -1,140 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/header.css">
-    <link rel="stylesheet" type="text/css" href="../styles/footer.css">
-    
-    <!-- LINK FOR LIKE ICON  -->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="../styles/like.css">
-    <!-- LINK FOR COMMENT ICON -->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="../styles/comment.css">
-      <!-- LINK FOR SHARE ICON -->
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-      <link rel="stylesheet" type="text/css" href="../styles/share.css">
-
-    <!-- SCRIPTS -->
-    <script src="../scripts/like.js" defer></script> 
-    <script src="../scripts/share.js" defer></script>
-    <script src="../scripts/comment.js" defer></script>
-    <script src="../scripts/blogs.js" defer></script>
-
-
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-    <header>
-       <div class="logo">
-        <a href="../index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a>
-      </div>
-        <div class="">
-          <div class="navigation flex-row"> 
-            <a href="../views/skills.html">Skills</a>
-            <a href="../views/about.html">About</a>
-            <a href="../views/hire_me.html">Hire me</a>
-            <a href="../views/services.html">Service</a>
-            <a href="../views/blogs.html">Blogs</a>
-            <a href="../index.html#contactme">Contact me</a>
-            <a href="../views/projects.html">Portfolio</a>
-            <a href="../views/profile_view.html">
-              <div class="admin">
-                <img src="../images/mypic.png" alt="My Picture">
-             </div>
-            </a>
-          </div>
-          <button class="menu-btn"><img src="../images/menu.png" alt="My Picture"></button>
-        </div>
-      </header>
-
-
-<button id="goBackBtn">GO BACK</button>
-<div class="comment_page" >
-<div class="comments-container hidden"> 
-    <div class="comment-box"> 
-    <div class="head">
-    <h1>Post a Comment</h1>
-</div>
-    <div><span id="comment">0</span> Comments</div>
-    <div class="text"><p>We are happy to hear from you</p></div>
-    <div class="comments"></div>
-    <div class="commentbox">
-        <img src="../images/user1.png" alt="">
-        <div class="content">
-            <h2>Your name please: </h2>
-            <input type="text" value="" class="user">
-
-            <div class="commentinput">
-                <input type="text" placeholder="Enter comment" class="usercomment">
-                <div class="buttons">
-                    <button type="submit" disabled id="publish">Publish</button>
-                    <div class="notify">
-                        <input type="checkbox" class="notifyinput"> <span>Notify me</span>
-                    </div>
-                </div>
-            </div>
-            <p class="policy">This site is procted by Ndevu and the Global <a href="">privacy policy</a> and <a href="">Terms of Service</a> apply.</p>
-        </div>
-    </div>
-</div>
-</div>
-</div>
-<button id="goBack">GO BACK</button>
-
-  <!-- Footer section-->
-  <footer>
-    <div class="logo">
-      <a href="index.html" target="_self">
-      <img src="../images/logo1.png" alt="logo">
-    </a>
-    </div>
-
-       <!-- link for my social medias -->
-       <div class="socialmedia"><img src="../images/linkedin-logo.png" alt="linkin link">
-         <img src="../images/twitter-logo.png" alt="twitter link">
-       </div>
-
-    <div class="footerdesc">
-           <!-- connecting point -->
-          <div class="connection">
-             <h2>Connect with me:</h2>
-
-              <ul>
-                 <li> niyokwizerwajeanpaulelisa@gmail.com</li>
-                 <li>www.linkedin.com/in/jean-paul-elisa</li>
-                 <li>www.GitHub.com/Ndevu12</li>
-               </ul>
-            </div>
-              <!-- blogs -->
-             <div class="blogs-section">
-               <h2>Blogs:</h2>
-                  <ul>
-                  <li>My Journey into Full Stack Development</li>
-                  <li>Lessons from Building a Simple Shell</li>
-                  <li>The Art of UI Design in Full Stack Development</li>
-                </ul>
-             </div>
-    
-               <!-- my work -->
-                  <div class="my-work">
-                     <h2>Explore My Work:</h2>
-                     <ul> 
-                       <li>Simple shell</li>
-                       <li>AirBnB Clone</li>
-                       <li>Monty</li>
-                      </ul>
-                   </div>
-                 </div>
-                    <div class="footcopyright">
-                ©2024 | Ndevu | Full Stack Developer | Gikondo-Kigali
-                 
-                   </div>    
-  </footer>
-</body>
-</html>
\ No newline at end of file
diff --git a/views/dashboard.html b/views/dashboard.html
index a6e9431..bc1e4a9 100644
--- a/views/dashboard.html
+++ b/views/dashboard.html
@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link rel="stylesheet" type="text/css" href="../styles/common.css">
     <link rel="stylesheet" type="text/css" href="../styles/dashboard.css">
     <link rel="stylesheet" type="text/css" href="../styles/analytics.css">
 
@@ -25,8 +26,6 @@
       <h3 class="dash"><a href="../views/dashboard.html" target="_self"><img src="../images/dashboard.png" alt="logo">Dashboard</a></h5>    
       <p class="all"><a href="../views/all_articles.html" target="_self"><img src="../images/all articles.png" alt="logo">All Articles</a></p>
       <p class="new"><a href="../views/new-article.html" target="_self"><img src="../images/new article.jfif" alt="logo">New Article</a></p>
-      <p class="uparticle"><a href="#" target="_self"><img src="../images/update article.png" alt="logo">Update Article</a></p>
-      <p class="delarticle"><a href="#" target="_self"><img src="../images/delete article.png" alt="logo">Delete Article</a></p>
     </div>
     
     <!-- in between big layout-container -->
@@ -34,7 +33,7 @@ <h3 class="dash"><a href="../views/dashboard.html" target="_self"><img src="../i
         <div class="top">
             <div class="dashboardtitle">
                 <h1>DashBoard</h1>
-                <h5>My Personal Dashboard</h5>
+                <h5>Personal Dashboard</h5>
             </div>
              
            <div class="searchfilter">
@@ -42,27 +41,13 @@ <h5>My Personal Dashboard</h5>
               <input type="text" value="  Search">
            </div>
         </div>
-
+ 
       <div class="deep">
-        <!-- for visitors-->
-        <div class="visitors">
-            <img src="../images/visitor.png" alt="visitors">        
-            <div class="total">100k</div>
-            <p>Total visitors</p>
-        </div>
-
         <!-- for the time they spent on the site -->
         <div class="time">
             <img src="../images/time spent.png" alt="visitors">        
-            <div class="timespent">100 Hours</div>
-            <p>Total Time spent</p>
-        </div>
-        
-        <!-- for  subscribers-->
-        <div class="subscribers">
-            <img src="../images/subscribers.jfif" alt="visitors">        
-            <div class="alltogether">1K</div>
-            <p>New Subscribers</p>
+            <div class="timespent">100</div>
+            <p>Total Blogs</p>
         </div>
 
         <!-- for cv download -->
@@ -72,62 +57,31 @@ <h5>My Personal Dashboard</h5>
             <p>CV download</p>
         </div>
       </div>
-
-      <!-- Analysis class -->
-      <div class="Analysis">
-        <h3>Analytics</h3>
-        <div class="indicators">
-            <!-- <div class="anal"><h3>Analytics</h3></div> -->
-            <div class="spent"><img src="../images/pink.png" alt="Time spent">Time spent</div>
-            <div class="action"><img src="../images/yellow.jfif" alt="Action they took">Actions they took</div>
-            <div class="loyal"><img src="../images/greenish.png" alt="Loyality">Loyality</div>
-            <div class="loyal">Last 7 days</div>
-        </div>
-      </div>
-
-      <!-- Styling Analytics class -->
-      <div class="analytics">
-        <div class="vertical-values left">
-            <div class="times">Times</div>
-            <div>40</div>
-            <div>30</div>
-            <div>20</div>
-            <div>10</div>
-            <div>0</div>
-        </div>
-    
-        <div class="lines"></div>
-        <div class="lines"></div>
-        <div class="lines"></div>
-        <div class="lines"></div>
-        <div class="lines"></div>
-    
-        <div class="vertical-values right">
-            <div>4h</div>
-            <div>3h</div>
-            <div>2h</div>
-            <div>1h</div>
-            <div>0h</div>
-        </div>
-    </div>
-    <div class="bottom-values">
-        <div>Comment</div>
-        <div>Like</div>
-        <div>Subscribers</div>
-        <div>Blogs</div>
-        <div>CV Downloads</div>
-    </div>
+              <!-- Recently blogs-->
+              <div class="blogs">
+                <h3>Recently Blogs</h3>
+                <div class="blog1">
+                    <img src="../images/blog1.jfif" alt="blog1">
+                    <p>How to be a good programmer</p>
+                </div>
+                <div class="blog2">
+                    <img src="../images/blog2.jfif" alt="blog2">
+                    <p>How to be a good programmer</p>
+                </div>
+                <div class="blog3">
+                    <img src="../images/blog3.jfif" alt="blog3">
+                    <p>How to be a good programmer</p>
+                </div>
+            </div>
     </div>
     
     <!-- right layout-container -->
     <div class="behind">
         <p class="profile">
             <a href="messages.html" target="_self"><img src="../images/messages.jfif" alt="message"></a>         
-            <a href="notifications.html" target="_self"><img src="../images/notification.png" alt="notification"></a>       
-            <a href="profile.html" target="_self"><img src="../images/mypic.png" alt="My Picture"></a>
+            <a href="notifications.html" target="_self"><img src="../images/notification.png" alt="notification"></a>
         </p>
 
-        <p class="all"><a href="../views/subscribers.html" target="_self"><img src="../images/Subscribers.jfif" alt="logo">Subscribers</a></p>
         <p class="new"><a href="../views/analytics.html" target="_self"><img src="../images/Analytics.png" alt="logo">Analytics</a></p>
         <p class="uparticle"><a href="../views/settings.html" target="_self"><img src="../images/Settings.png" alt="logo">Settings</a></p>
         <br>
diff --git a/views/experience.html b/views/experience.html
new file mode 100644
index 0000000..5a611cb
--- /dev/null
+++ b/views/experience.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" type="text/css" href="../styles/common.css">
+    <link rel="stylesheet" type="text/css" href="../styles/header.css">
+    <link rel="stylesheet" type="text/css" href="../styles/experience.css">
+    <link rel="stylesheet" type="text/css" href="../styles/footer.css">
+
+    <link rel="icon" type="image/png" href="../images/logo1.png">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+    <title>NdevuSpace</title>
+  </head>
+    <body>
+      <header>
+        <div class="logo">
+         <a href="../index.html" target="_self">
+           <img src="../images/logo1.png" alt="logo">
+         </a>
+       </div>
+       <button id="theme">Dark</button> 
+         <div class="naviga">
+    
+           <input type="checkbox" id="sidebar-active">
+           <label for="sidebar-active" class="open-sidebar-button">
+             <svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
+           </label>
+           <label id="overlay" for="sidebar-active"></label>
+    
+           <div class="navigation flex-row"> 
+             <a href="./skills.html">Skills</a>
+             <a href="../index.html#aboutme">About</a>
+             <a href="./blogs.html">Blogs</a>
+             <a href="../index.html#contactme">Contact me</a>
+             <a href="./projects.html">Portfolio</a>
+             <a href="./experience.html">Experience</a>
+           </div>
+           
+         </div>
+       </header>
+
+<main class="experience-page">
+    <div class="experience-container">
+      <!-- Introduction -->
+      <section id="experience-intro" class="intro-section">
+        <p>Welcome to my experience page! Here, I share my professional journey, including impactful roles and learning experiences that have shaped my career.</p>
+      </section>
+  
+      <!-- Experience Section -->
+      <section id="experiences" class="experience-section">
+        <h2 class="section-title">Professional Experience</h2>
+        <div class="experience-cards">
+          <!-- Andela Experience -->
+          <div class="experience-card" data-animate="fade-up">
+            <h3>Joined Andela ATLP Program</h3>
+            <p>As part of the Andela Technical Leadership Program (ATLP), I enhanced my skills in software development, teamwork, and leadership, focusing on creating scalable and efficient solutions.</p>
+          </div>
+  
+          <!-- ALX SE Experience -->
+          <div class="experience-card" data-animate="slide-right">
+            <h3>ALX Software Engineering</h3>
+            <p>Successfully completed the ALX Software Engineering program with a specialization in backend development. This intensive training strengthened my expertise in modern backend technologies and best practices.</p>
+          </div>
+  
+          <!-- CTO Experience -->
+          <div class="experience-card" data-animate="zoom-in">
+            <h3>Co-Founder and CTO at Global Real Estate</h3>
+            <p>Currently leading the technical development of an innovative platform for buying and selling properties. As CTO, I oversee architectural design, platform development, and team coordination to ensure project success.</p>
+          </div>
+        </div>
+      </section>
+    </div>
+  </main>
+  
+           <!-- Footer section-->
+     <footer>
+      <div class="footer-container">
+        <div class="logo">
+          <a href="../index.html" target="_self">
+          <img src="../images/logo1.png" alt="logo">
+          <p>NdevuSpace</p>
+        </a>
+        </div>
+
+        <div class="footer-navigate">
+          <p>Navigations:</p>
+          <ul>
+          <li><a href="../index.html" target="_self">Home</a></li>
+          <li><a href="./views/projects.html" target="_self">Projects</a></li>
+          <li><a href="./views/blogs.html" target="_self">Blogs</a></li>
+          <li><a href="index.html#contactme" target="_self">Contact me</a></li>
+        </ul>
+        </div>
+
+          <!-- link for my social medias -->
+          <div class="socialmedia">
+            <div class="connect">
+              <p>Connect with me:</p>
+            </div>
+            <div class="social">
+              <a href="https://www.linkedin.com/in/jean-paul-elisa"><img src="../images/linkedin-logo.png"  class="social-biglogo" alt="linkedin link"></a>
+              <a href="https://github.com/Ndevu12"><img src="../images/gith.png" class="social-github" alt="linkedin link"></a>
+            </div>
+          </div>
+      </div>
+            <div class="footcopyright">
+              <h5>©2024 | Ndevu | Full Stack Software Developer | Gikondo-Kigali</h5>
+            </div>    
+    </footer>
+      </body>
+  </html>
diff --git a/views/hire_me.html b/views/hire_me.html
deleted file mode 100644
index 0b97259..0000000
--- a/views/hire_me.html
+++ /dev/null
@@ -1,170 +0,0 @@
-<!--===== This is about page =======-->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/header.css">
-    <link rel="stylesheet" type="text/css" href="../styles/footer.css">
-    <link rel="stylesheet" type="text/css" href="../styles/hire_me.css">
-
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-    <header>
-         <div class="logo"><a href="index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a></div>
-         <div class="">
-          <div class="navigation flex-row"> 
-            <a href="../views/skills.html">Skills</a>
-            <a href="../views/about.html">About</a>
-            <a href="../views/hire_me.html">Hire me</a>
-            <a href="../views/services.html">Service</a>
-            <a href="../views/blogs.html">Blogs</a>
-            <a href="../index.html#contact_me">Contact me</a>
-            <a href="../views/projects.html">Portfolio</a>
-            <a href="../views/profile_view.html" target="_self">
-              <div class="admin">
-                <img src="../images/mypic.png" alt="My Picture">
-             </div>
-            </a>
-          </div>
-         </div>
-      </header>
-
-      <section class="hire_me_page">
-        <div class="hire_me_page_class">
-          <h1 class="hire_me_big">Hire me</h1>
-          <h4> Hard worker.....................
-          </h4>
-
-          <div class="employment_stat">
-            <h5>Employment status:</h5>
-            <p>Already have a job:
-                <output id="selectedvalue">No</output>
-            </p>
-            
-            <h6>Open to work on:</h6>
-            <div class="total_visitors">
-                <p>Part Time jobs:
-                <output id="selectedvalue">Yes</output>
-            </p>
-                <p>Remote jobs: 
-                    <output id="selectedvalue">Yes</output>
-                    </p>
-                    <p>Full time jobs: 
-                        <output id="selectedvalue">No</output>
-                        </p>
-            </div>
-           </div>
-
-          <p>
-            Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving. 
-            My journey in the world of technology has equipped me with a diverse set of skills, 
-            allowing me to bring ideas to life through elegant and efficient code.
-            </p>
-            <br>
-
-            <h1>Mission and Objectives</h1>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-            <br>
-
-            <h1>Education</h1>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-
-            <ul>
-              <li>
-                <p>Bacholor's Degree in BIT at University of Rwanda in progress.</p>
-              </li>
-              <li>
-                <P>Software Engineering online.</P>
-              </li>
-              <li>
-                <p>web development at Andela in progress</p>
-              </li>
-            <li>
-              <p>Foundation in UX design (theory) at Coursera by Google</p>
-            </li>
-            <li>
-              <p>Advanced Diploma in Mathematics, Computer Science and Economics (MCE)</p>
-            </li>
-          </ul>
-
-            <h1>
-              Experience
-            </h1>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-
-            <h5>For more about my Experiences you can take a look on my works on</h5>
-            <ul>
-              <li><p>Portfolio tab on the above navigation Ribbon or click <a href="signin.html" target="_self">here</a>.</p></li>
-              <li><p><a href="https://github.com/Ndevu12?tab=repositories" target="_self">GitHub</a> for a sets of works</p></li>
-            </ul>
-        </div>
-      </section>
-
-      
-                 <!-- Footer section-->
-      <footer>
-          <div class="logo">
-            <img src="../images/logo1.png" alt="logo">
-        </div>
-
-         <!-- link for my social medias -->
-         <div class="socialmedia"><img src="../images/linkedin-logo.png" alt="linkin link">
-           <img src="../images/twitter-logo.png" alt="twitter link">
-         </div>
-
-          <div class="footerdesc">
-             <!-- connecting point -->
-            <div class="connection">
-               <h2>Connect with me:</h2>
-
-                <ul>
-                   <li> niyokwizerwajeanpaulelisa@gmail.com</li>
-                   <li>www.linkedin.com/in/jean-paul-elisa</li>
-                   <li>www.GitHub.com/Ndevu12</li>
-                 </ul>
-              </div>
-                <!-- blogs -->
-               <div class="blogs-section">
-                 <h2>Blogs:</h2>
-                    <ul>
-                    <li>My Journey into Full Stack Development</li>
-                    <li>Lessons from Building a Simple Shell</li>
-                    <li>The Art of UI Design in Full Stack Development</li>
-                  </ul>
-               </div>
-      
-                 <!-- my work -->
-                    <div class="my-work">
-                       <h2>Explore My Work:</h2>
-                       <ul> 
-                         <li>Simple shell</li>
-                         <li>AirBnB Clone</li>
-                         <li>Monty</li>
-                        </ul>
-                     </div>
-                   </div>
-                     <div class="footcopyright">
-                        ©2024 | Ndevu | Full Stack Developer | Gikondo-Kigali
-                     </div>    
-    </footer>
-    </body>
-    </html>
\ No newline at end of file
diff --git a/views/messages.html b/views/messages.html
deleted file mode 100644
index 82a1339..0000000
--- a/views/messages.html
+++ /dev/null
@@ -1,407 +0,0 @@
-<!--===== This is Messages page =======-->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/messages.css">
-
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-   
-    <div class="got_to_dashboard">
-      <a href="dashboard.html" target="_self"><h3><u>Back to DashBoard</u></h3></a>
-    </div>
-     <div class="message_board">
-      <h1>Messages Board</h1>
-     </div>
-
-    <div class="messages_storage">
-
-      <div class="on_the_way">
-        <h3><a href="#" target="_self">New</a></h3>
-        <h3><a href="#" target="_self">Unread</a></h3>
-        <h3><a href="#" target="_self">To day</a></h3>
-        <h3><a href="#" target="_self">This week</a></h3>
-        <h3><a href="#" target="_self">Last week</a></h3>
-        <h3><a href="#" target="_self">Last month</a></h3>
-        <h3><a href="#" target="_self">All</a></h3>
-      </div>
-    
-        <div class="differentiate">
-            <!-- <div class="blog_analysis"> -->
-                
-                <div class="new_message">
-                  <h1>New messages</h1>
-                  <div class="image_and_message">
-                    <a href="#" target="_self">
-                        <img src="../images/mypic.png" alt="My Picture">
-                  <div class="message">
-                    <h3>Jean Paul Elisa</h3>                
-                    <p>
-                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                    </p></a>
-                </div>
-            </div>
-                    <div class="deal_with_messages">
-                      <button id="Delete1" class="edit_button"> 
-                        Delete
-                     </button>
-
-                   <button id="Edit1" class="edit_button"> 
-                    Mark as read
-                 </button>
-
-                 <button id="View1" class="edit_button"> 
-                  Read
-               </button>
-                    </div>
-                    <div class="image_and_message">
-                        <a href="#" target="_self">
-                            <img src="../images/mypic.png" alt="My Picture">
-                      <div class="message">
-                        <h3>Jean Paul Elisa</h3>                
-                        <p>
-                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                        </p></a>
-                    </div>
-
-                      <div class="deal_with_messages">
-                        <button id="Delete2" class="edit_button"> 
-                          Delete
-                       </button>
-  
-                       <button id="Analysis2" class="edit_button"> 
-                        Mark as read
-                     </button>
-  
-                     <button id="Edit2" class="edit_button"> 
-                      Read
-                   </button>
-                      </div>
-                  <div class="image_and_message">
-                    <a href="#" target="_self">
-                        <img src="../images/mypic.png" alt="My Picture">
-                  <div class="message">
-                    <h3>Jean Paul Elisa</h3>                
-                    <p>
-                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                    </p></a>
-                </div>
-
-                        <div class="deal_with_messages">
-                          <button id="Delete3" class="edit_button"> 
-                            Delete
-                         </button>
-    
-                         <button id="Analysis3" class="edit_button"> 
-                          Mark as read
-                       </button>
-    
-                       <button id="Edit3" class="edit_button"> 
-                        Read
-                     </button>
-                        </div>
-                </div>
-                
-                <div class="all_messages">
-                    <h1>All messages:</h1>
-                    <div class="image_and_message">
-                        <a href="#" target="_self">
-                            <img src="../images/mypic.png" alt="My Picture">
-                      <div class="message">
-                        <h3>Jean Paul Elisa</h3>                
-                        <p>
-                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                        </p></a>
-                    </div>
-
-                        <div class="choice_art">
-                          <button id="Delete4" class="edit_button"> 
-                            Delete
-                         </button>
-    
-                         <button id="Analysis4" class="edit_button"> 
-                          Mark as read
-                       </button>
-    
-                       <button id="Edit4" class="edit_button"> 
-                        Read
-                     </button>
-                        </div>
-
-                        <div class="image_and_message">
-                            <a href="#" target="_self">
-                                <img src="../images/mypic.png" alt="My Picture">
-                          <div class="message">
-                            <h3>Jean Paul Elisa</h3>                
-                            <p>
-                              Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                            </p></a>
-                        </div>
-
-                          <div class="choice_art">
-                            <button id="Delete5" class="edit_button"> 
-                              Delete
-                           </button>
-      
-                           <button id="Analysis5" class="edit_button"> 
-                            Mark as read 
-                         </button>
-      
-                         <button id="Edit5" class="edit_button"> 
-                            Read
-                       </button>
-
-                          </div>
-                          <div class="image_and_message">
-                            <a href="#" target="_self">
-                                <img src="../images/mypic.png" alt="My Picture">
-                          <div class="message">
-                            <h3>Jean Paul Elisa</h3>                
-                            <p>
-                              Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                            </p></a>
-                        </div>
-
-                            <div class="choice_art">
-                              <button id="Delete6" class="edit_button"> 
-                                Delete
-                             </button>
-        
-                             <button id="Analysis6" class="edit_button"> 
-                              Mark as read
-                           </button>
-        
-                           <button id="Edit6" class="edit_button"> 
-                            Read
-                         </button>
-    
-                            </div>
-                            <div class="image_and_message">
-                                <a href="#" target="_self">
-                                    <img src="../images/mypic.png" alt="My Picture">
-                              <div class="message">
-                                <h3>Jean Paul Elisa</h3>                
-                                <p>
-                                  Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                </p></a>
-                            </div>
-
-                              <div class="choice_art">
-                                <button id="Delete7" class="edit_button"> 
-                                  Delete
-                               </button>
-          
-                               <button id="Analysis7" class="edit_button"> 
-                                Mark as read
-                             </button>
-          
-                             <button id="Edit7" class="edit_button"> 
-                              Read
-                           </button>
-        
-                              </div> 
-                              <div class="image_and_message">
-                                <a href="#" target="_self">
-                                    <img src="../images/mypic.png" alt="My Picture">
-                              <div class="message">
-                                <h3>Jean Paul Elisa</h3>                
-                                <p>
-                                  Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                </p></a>
-                            </div>
-
-                                <div class="choice_art">
-                                  <button id="Delete8" class="edit_button"> 
-                                    Delete
-                                 </button>
-            
-                                 <button id="Analysis8" class="edit_button"> 
-                                    Mark as read
-                               </button>
-            
-                               <button id="Edit8" class="edit_button"> 
-                                Read
-                             </button>
-    
-                                </div>
-                                <div class="image_and_message">
-                                    <a href="#" target="_self">
-                                        <img src="../images/mypic.png" alt="My Picture">
-                                  <div class="message">
-                                    <h3>Jean Paul Elisa</h3>                
-                                    <p>
-                                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                    </p></a>
-                                </div>
-
-                                  <div class="choice_art">
-                                    <button id="Delete9" class="edit_button"> 
-                                      Delete
-                                   </button>
-              
-                                   <button id="Analysis9" class="edit_button"> 
-                                    Mark as read
-                                 </button>
-              
-                                 <button id="Edit9" class="edit_button"> 
-                                    Read
-                               </button>
-              
-                                  </div>
-                                  <div class="image_and_message">
-                                    <a href="#" target="_self">
-                                        <img src="../images/mypic.png" alt="My Picture">
-                                  <div class="message">
-                                    <h3>Jean Paul Elisa</h3>                
-                                    <p>
-                                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                    </p></a>
-                                </div>
-
-                                    <div class="choice_art">
-                                      <button id="Delete10" class="edit_button"> 
-                                        Mark as read
-                                     </button>
-                
-                                     <button id="Analysis10" class="edit_button"> 
-                                      Read
-                                   </button>
-            
-                                    </div>
-                                    <div class="image_and_message">
-                                        <a href="#" target="_self">
-                                            <img src="../images/mypic.png" alt="My Picture">
-                                      <div class="message">
-                                        <h3>Jean Paul Elisa</h3>                
-                                        <p>
-                                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                        </p></a>
-                                    </div>
-
-                                      <div class="choice_art">
-                                        <button id="Delete11" class="edit_button"> 
-                                          Delete
-                                       </button>
-                  
-                                       <button id="Analysis11" class="edit_button"> 
-                                        Mark as read
-                                     </button>
-                  
-                                     <button id="Edit11" class="edit_button"> 
-                                      Read
-                                   </button>
-                  
-                                      </div>
-                                      <div class="image_and_message">
-                                        <a href="#" target="_self">
-                                            <img src="../images/mypic.png" alt="My Picture">
-                                      <div class="message">
-                                        <h3>Jean Paul Elisa</h3>                
-                                        <p>
-                                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                        </p></a>
-                                    </div>
-
-                                        <div class="choice_art">
-                                          <button id="Delete12" class="edit_button"> 
-                                            Delete
-                                         </button>
-                    
-                                         <button id="Analysis12" class="edit_button"> 
-                                            Mark as read
-                                       </button>
-                    
-                                       <button id="Edit12" class="edit_button"> 
-                                        Read
-                                     </button>
-                
-                                        </div>
-                                        <div class="image_and_message">
-                                            <a href="#" target="_self">
-                                                <img src="../images/mypic.png" alt="My Picture">
-                                          <div class="message">
-                                            <h3>Jean Paul Elisa</h3>                
-                                            <p>
-                                              Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                            </p></a>
-                                        </div>
-                                          <div class="choice_art">
-                                            <button id="Delete13" class="edit_button"> 
-                                              Delete
-                                           </button>
-                      
-                                           <button id="Analysis13" class="edit_button"> 
-                                            Mark as read
-                                         </button>
-                      
-                                         <button id="Edit13" class="edit_button"> 
-                                          Read
-                                       </button>
-                      
-
-                                          </div>
-
-                                          <div class="image_and_message">
-                                            <a href="#" target="_self">
-                                                <img src="../images/mypic.png" alt="My Picture">
-                                          <div class="message">
-                                            <h3>Jean Paul Elisa</h3>                
-                                            <p>
-                                              Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                            </p></a>
-                                        </div>
-
-                        <div class="choice_art">
-                          <button id="Delete14" class="edit_button"> 
-                            Delete
-                         </button>
-    
-                         <button id="Analysis14" class="edit_button"> 
-                            Mark as read
-                       </button>
-    
-                       <button id="Edit14" class="edit_button"> 
-                        Read
-                     </button>
-    
-                        </div>
-                      
-
-                </div>
-            <!-- </div> -->
-        </div>
-
-        <div class="choice_article">
-          
-          <a href="all_articles.html">
-          <button id="Delete15" class="edit_button"> 
-            Back to top
-         </button>
-        </a>
-         <a href="dashboard.html">
-         <button id="go-to-dashboard" class="edit_button"> 
-          Back to dashboard
-       </button>
-       </a>
-       <a href="#">
-       <button id="next" class="edit_button"> 
-        Next
-     </button>
-    </a>
-
-     <a href="index.html">
-     <button id="home1" class="edit_button"> 
-      Home
-   </button></a>
-        </div>
-    </div>
-
-    </body>
-    </html>
\ No newline at end of file
diff --git a/views/new-article.html b/views/new-article.html
index 0a15053..4a52ecf 100644
--- a/views/new-article.html
+++ b/views/new-article.html
@@ -1,111 +1,65 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta naauto !important;iewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/header.css">
-    <!-- <link rel="stylesheet" type="text/css" href="styles/signup.css"> -->
-    <link rel="stylesheet" type="text/css" href="../styles/new-article.css">
-
-    
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-    <header>
-         <div class="logo"><a href="index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a></div>
-         <div class="">
-          <div class="../views/navigation flex-row"> 
-            <a href="../views/skill">Skills</a>
-            <a href="../views/about.html">About</a>
-            <a href="../views/hire_me.html">Hire me</a>
-            <a href="../views/services.html">Service</a>
-            <a href="../views/blogs.html">Blogs</a>
-            <a href="../index.html#contactme">Contact</a>
-            <a href="../views/projects.html">Portfolio</a>
-            <a href="../views/profile_view.html">
-              <div class="admin">
-                <img src="../images/mypic.png" alt="My Picture">
-             </div>
-            </a> 
-          </div>
-         </div>
-      </header>
-      <div class="mradmin">
-        <h1>Create new article</h1>
-      </div>
-
-      <div class="new-blog">
-      <!-- signup class  -->
-      <div class="signup">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="../styles/common.css">
+  <link rel="stylesheet" href="../styles/header.css">
+  <link rel="stylesheet" href="../styles/new-article.css">
+  <link rel="icon" type="image/png" href="../images/logo1.png">
+  <title>NdevuSpace | New Article</title>
+</head>
+<body>
+  <main>
+    <div class="got_to_dashboard">
+      <a href="../views/dashboard.html" target="_self"><h3><u>Back to DashBoard</u></h3></a>
+    </div>
+    <div class="mradmin">
+      <h1>Create New Article</h1>
+    </div>
+    <div class="new-blog">
+      <form id="new-blog-form" class="signup">
         <div class="blog-header">
-            <h3>Title</h3>
-            <input class="title" type="text" value="Write Title of blog here">
+          <h3>Title</h3>
+          <input class="inputField" type="text" placeholder="Write the title of the blog here" required>
         </div>
-
         <div class="content">
-            <h3>Content</h3>
-            <input id="content" class="contentin"  type="text" value="Write content of new blog here">
-
-            <h3>Description</h3>
-            <input id="Description" class="contentin"  type="text" value="Write content of new blog here">
-            
-            <div class="upload-article-image">
-                <p>Upload Image(s)</p>
-                <a href="#" target="_self"><img src="../images/update article.png" alt="logo"></a>
-            </div>
+          <h3>Content</h3>
+          <textarea id="content" class="contentin" placeholder="Write the content of the new blog here" required></textarea>
+          <h3>Description</h3>
+          <textarea id="description" class="contentin" placeholder="Write a short description here" required></textarea>
+          <div class="upload-article-image">
+            <p>Upload Image(s)</p>
+            <input type="file" id="article-image" multiple>
+            <label for="article-image"><img src="../images/update article.png" alt="Upload Image"></label>
+            <p id="upload-status" class="status-message"></p>
+          </div>
         </div>
-
         <div class="blog_category">
-            <h3><u>Blog category</u></h3>
-            <label for="dateRange">Choose Category:</label>
-                    <select id="dateRange" name="dateRange">
-                      <option value="Pgrogramming">Pgrogramming</option>
-                      <option value="Business">Business</option>                   
-                      <option value="Social Life">Social Life</option>
-                      <option value="Technology">Technology</option>
-                      <option value="Science">Science</option>
-                    </select>
-        </div>
-
-        <div class="author">
-          <h3>Author</h3>
-          <input class="tag" id="author" type="text" value="Write Author of this article">
-          <input class="tag" id="authorEmail" type="email" value="Enter email of Author">
+          <h3>Blog Category</h3>
+          <label for="category">.</label>
+          <select id="category" name="category" required>
+            <option value="Programming">Programming</option>
+            <option value="Business">Business</option>
+            <option value="Social Life">Social Life</option>
+            <option value="Technology">Technology</option>
+          </select>
         </div>
-
         <div class="hashtag">
-            <p>#Tags</p>
-            <input class="tag" id="tags" type="text" value="Write #Tags for this article">
-        </div>
-
-        
+          <p>#Tags</p>
+          <input class="inputField" id="tags" type="text" placeholder="Write #Tags for the article" required>
+          </div>
         <div class="publish-new-article">
-            <button id="save-publish" class="edit_button"> 
-                Save and Publish
-             </button>
-
-             <button id="save-as-draft" class="edit_button"> 
-                Save  as draft
-             </button>
-
-             <button id="discard" class="edit_button">
-                Discard/Cancel
-             </button>
+          <button id="save-publish" type="submit" class="edit_button">Save and Publish</button>
+          <button id="save-as-draft" type="button" class="edit_button">Save as Draft</button>
+          <button id="discard" type="reset" class="edit_button">Discard</button>
         </div>
-
-        <a href="dashboard.html" target="_self">
-        <button id="go-to-dashboard" class="edit_button"> 
-            Go to DashBoard
-         </button>
+        <a href="dashboard.html" target="_self" class="dashboard-link">
+          <button id="go-to-dashboard" type="button" class="edit_button">Go to Dashboard</button>
         </a>
-      </div>
-      </div>
-
-      <!-- // SCRIPTS -->
-      <script type="module" src="blogs.js"></script>
-  </body>
-</html>
\ No newline at end of file
+      </form>
+    </div>
+  </main>
+  <script type="module" src="../scripts/blogs.js"></script>
+</body>
+</html>
diff --git a/views/notifications.html b/views/notifications.html
deleted file mode 100644
index 385c2b2..0000000
--- a/views/notifications.html
+++ /dev/null
@@ -1,410 +0,0 @@
-<!--===== This is Analytics page =======-->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/notifications.css">
-
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-   
-    <div class="got_to_dashboard">
-      <a href="../views/dashboard.html" target="_self"><h3><u>Back to DashBoard</u></h3></a>
-    </div>
-     <div class="notification_board">
-      <h1>Notifications Board</h1>
-     </div>
-
-    <div class="notifications_storage">
-
-      <div class="on_the_way">
-        <h3><a href="#" target="_self">New</a></h3>
-        <h3><a href="#" target="_self">Unread</a></h3>
-        <h3><a href="#" target="_self">To day</a></h3>
-        <h3><a href="#" target="_self">This week</a></h3>
-        <h3><a href="#" target="_self">Last week</a></h3>
-        <h3><a href="#" target="_self">Last month</a></h3>
-        <h3><a href="#" target="_self">All</a></h3>
-      </div>
-    
-        <div class="categorization">
-            <!-- <div class="blog_analysis"> -->
-                
-                <div class="new_notifications">
-                  <h1>New Notification</h1>
-                  <div class="image_and_message">
-                    <a href="#" target="_self">
-                        <img src="../images/mypic.png" alt="My Picture">
-                  <div class="message">
-                    <h3>Jean Paul Elisa</h3>                
-                    <p>
-                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                    </p></a>
-                </div>
-            </div>
-                    <div class="deal_with_messages">
-                      <button id="Delete1" class="edit_button"> 
-                        Delete
-                     </button>
-
-                   <button id="Edit1" class="edit_button"> 
-                    Mark as read
-                 </button>
-
-                 <button id="View1" class="edit_button"> 
-                  Read
-               </button>
-                    </div>
-                    <div class="image_and_message">
-                        <a href="#" target="_self">
-                            <img src="../images/mypic.png" alt="My Picture">
-                      <div class="message">
-                        <h3>Jean Paul Elisa</h3>                
-                        <p>
-                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                        </p></a>
-                    </div>
-
-                      <div class="deal_with_messages">
-                        <button id="Delete2" class="edit_button"> 
-                          Delete
-                       </button>
-  
-                       <button id="Analysis2" class="edit_button"> 
-                        Mark as read
-                     </button>
-  
-                     <button id="Edit2" class="edit_button"> 
-                      Read
-                   </button>
-                      </div>
-                  <div class="image_and_message">
-                    <a href="#" target="_self">
-                        <img src="../images/mypic.png" alt="My Picture">
-                  <div class="message">
-                    <h3>Jean Paul Elisa</h3>                
-                    <p>
-                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                    </p></a>
-                </div>
-
-                        <div class="deal_with_messages">
-                          <button id="Delete3" class="edit_button"> 
-                            Delete
-                         </button>
-    
-                         <button id="Analysis3" class="edit_button"> 
-                          Mark as read
-                       </button>
-    
-                       <button id="Edit3" class="edit_button"> 
-                        Read
-                     </button>
-                        </div>
-                </div>
-                <div class="all_notifications">
-                    <h1>All notifications:</h1>
-                    <div class="image_and_message">
-                        <a href="#" target="_self">
-                            <img src="../images/mypic.png" alt="My Picture">
-                      <div class="message">
-                        <h3>Jean Paul Elisa</h3>                
-                        <p>
-                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                        </p></a>
-                    </div>
-
-                        <div class="choice_art">
-                          <button id="Delete4" class="edit_button"> 
-                            Delete
-                         </button>
-    
-                         <button id="Analysis4" class="edit_button"> 
-                          Mark as read
-                       </button>
-    
-                       <button id="Edit4" class="edit_button"> 
-                        Read
-                     </button>
-                        </div>
-
-                        <div class="image_and_message">
-                            <a href="#" target="_self">
-                                <img src="../images/mypic.png" alt="My Picture">
-                          <div class="message">
-                            <h3>Jean Paul Elisa</h3>                
-                            <p>
-                              Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                            </p></a>
-                        </div>
-
-                          <div class="choice_art">
-                            <button id="Delete5" class="edit_button"> 
-                              Delete
-                           </button>
-      
-                           <button id="Analysis5" class="edit_button"> 
-                            Mark as read 
-                         </button>
-      
-                         <button id="Edit5" class="edit_button"> 
-                            Read
-                       </button>
-
-                          </div>
-                          <div class="image_and_message">
-                            <a href="#" target="_self">
-                                <img src="../images/mypic.png" alt="My Picture">
-                          <div class="message">
-                            <h3>Jean Paul Elisa</h3>                
-                            <p>
-                              Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                            </p></a>
-                        </div>
-
-                            <div class="choice_art">
-                              <button id="Delete6" class="edit_button"> 
-                                Delete
-                             </button>
-        
-                             <button id="Analysis6" class="edit_button"> 
-                              Mark as read
-                           </button>
-        
-                           <button id="Edit6" class="edit_button"> 
-                            Read
-                         </button>
-    
-                            </div>
-                            <div class="image_and_message">
-                                <a href="#" target="_self">
-                                    <img src="../images/mypic.png" alt="My Picture">
-                              <div class="message">
-                                <h3>Jean Paul Elisa</h3>                
-                                <p>
-                                  Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                </p></a>
-                            </div>
-
-                              <div class="choice_art">
-                                <button id="Delete7" class="edit_button"> 
-                                  Delete
-                               </button>
-          
-                               <button id="Analysis7" class="edit_button"> 
-                                Mark as read
-                             </button>
-          
-                             <button id="Edit7" class="edit_button"> 
-                              Read
-                           </button>
-        
-                              </div> 
-                              <div class="image_and_message">
-                                <a href="#" target="_self">
-                                    <img src="../images/mypic.png" alt="My Picture">
-                              <div class="message">
-                                <h3>Jean Paul Elisa</h3>                
-                                <p>
-                                  Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                </p></a>
-                            </div>
-
-                                <div class="choice_art">
-                                  <button id="Delete8" class="edit_button"> 
-                                    Delete
-                                 </button>
-            
-                                 <button id="Analysis8" class="edit_button"> 
-                                    Mark as read
-                               </button>
-            
-                               <button id="Edit8" class="edit_button"> 
-                                Read
-                             </button>
-    
-                                </div>
-                                <div class="image_and_message">
-                                    <a href="#" target="_self">
-                                        <img src="../images/mypic.png" alt="My Picture">
-                                  <div class="message">
-                                    <h3>Jean Paul Elisa</h3>                
-                                    <p>
-                                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                    </p></a>
-                                </div>
-
-                                  <div class="choice_art">
-                                    <button id="Delete9" class="edit_button"> 
-                                      Delete
-                                   </button>
-              
-                                   <button id="Analysis9" class="edit_button"> 
-                                    Mark as read
-                                 </button>
-              
-                                 <button id="Edit9" class="edit_button"> 
-                                    Read
-                               </button>
-              
-                                  </div>
-                                  <div class="image_and_message">
-                                    <a href="#" target="_self">
-                                        <img src="../images/mypic.png" alt="My Picture">
-                                  <div class="message">
-                                    <h3>Jean Paul Elisa</h3>                
-                                    <p>
-                                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                    </p></a>
-                                </div>
-
-                                    <div class="choice_art">
-                                      <button id="Delete10" class="edit_button"> 
-                                        Mark as read
-                                     </button>
-                
-                                     <button id="Analysis10" class="edit_button"> 
-                                      Read
-                                   </button>
-            
-                                    </div>
-                                    <div class="image_and_message">
-                                        <a href="#" target="_self">
-                                            <img src="../images/mypic.png" alt="My Picture">
-                                      <div class="message">
-                                        <h3>Jean Paul Elisa</h3>                
-                                        <p>
-                                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                        </p></a>
-                                    </div>
-
-                                      <div class="choice_art">
-                                        <button id="Delete11" class="edit_button"> 
-                                          Delete
-                                       </button>
-                  
-                                       <button id="Analysis11" class="edit_button"> 
-                                        Mark as read
-                                     </button>
-                  
-                                     <button id="Edit11" class="edit_button"> 
-                                      Read
-                                   </button>
-                  
-                                      </div>
-                                      <div class="image_and_message">
-                                        <a href="#" target="_self">
-                                            <img src="../images/mypic.png" alt="My Picture">
-                                      <div class="message">
-                                        <h3>Jean Paul Elisa</h3>                
-                                        <p>
-                                          Meet the mind behind the code! I am a Full Stack Developer with a
-                                           keen eye for detail and a love for problem-solving.   
-                                        </p></a>
-                                    </div>
-
-                                        <div class="choice_art">
-                                          <button id="Delete12" class="edit_button"> 
-                                            Delete
-                                         </button>
-                    
-                                         <button id="Analysis12" class="edit_button"> 
-                                            Mark as read
-                                       </button>
-                    
-                                       <button id="Edit12" class="edit_button"> 
-                                        Read
-                                     </button>
-                
-                                        </div>
-                                        <div class="image_and_message">
-                                            <a href="#" target="_self">
-                                                <img src="../images/mypic.png" alt="My Picture">
-                                          <div class="message">
-                                            <h3>Jean Paul Elisa</h3>                
-                                            <p>
-                                              Meet the mind behind the code! I am a Full Stack Developer with a 
-                                              keen eye for detail and a love for problem-solving.   
-                                            </p></a>
-                                        </div>
-                                          <div class="choice_art">
-                                            <button id="Delete13" class="edit_button"> 
-                                              Delete
-                                           </button>
-                      
-                                           <button id="Analysis13" class="edit_button"> 
-                                            Mark as read
-                                         </button>
-                      
-                                         <button id="Edit13" class="edit_button"> 
-                                          Read
-                                       </button>
-                      
-
-                                          </div>
-
-                                          <div class="image_and_message">
-                                            <a href="#" target="_self">
-                                                <img src="../images/mypic.png" alt="My Picture">
-                                          <div class="message">
-                                            <h3>Jean Paul Elisa</h3>                
-                                            <p>
-                                              Meet the mind behind the code! I am a Full Stack Developer with a 
-                                              
-                                              keen eye for detail and a love for problem-solving.   
-                                            </p></a>
-                                        </div>
-
-                        <div class="choice_art">
-                          <button id="Delete14" class="edit_button"> 
-                            Delete
-                         </button>
-    
-                         <button id="Analysis14" class="edit_button"> 
-                            Mark as read
-                       </button>
-    
-                       <button id="Edit14" class="edit_button"> 
-                        Read
-                     </button>
-    
-                        </div>
-                      
-
-                </div>
-            <!-- </div> -->
-        </div>
-
-        <div class="choice_article">
-          
-          <a href="all_articles.html">
-          <button id="Delete15" class="edit_button"> 
-            Back to top
-         </button>
-        </a>
-         <a href="dashboard.html">
-         <button id="go-to-dashboard" class="edit_button"> 
-          Back to dashboard
-       </button>
-       </a>
-       <a href="#">
-       <button id="next" class="edit_button"> 
-        Next
-     </button>
-    </a>
-
-     <a href="index.html">
-     <button id="home1" class="edit_button"> 
-      Home
-   </button></a>
-        </div>
-    </div>
-
-    </body>
-    </html>
\ No newline at end of file
diff --git a/views/profile.html b/views/profile.html
deleted file mode 100644
index 53d32e9..0000000
--- a/views/profile.html
+++ /dev/null
@@ -1,290 +0,0 @@
-
-
-<!-- blogs.html -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <!-- <link rel="stylesheet" type="text/css" href="styles/dashboard.css"> -->
-   
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/header.css">
-    <link rel="stylesheet" type="text/css" href="../styles/profile.css">
-    
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-
-    <title>NdevuSpace</title>
-    
-</head>
-<body>
-      <div class="got_to_dashboard">
-        <a href="../views/dashboard.html" target="_self"><h3>Back to DashBoard</h3></a>
-      </div>
-    <!-- Profile (content) -->
-    <div class="profile">
-     
-        <h1>Profile</h1>
-        <div class="profile_top">
-            
-           <!-- Profile (content) -->
-<div class="profile">
-  <div class="profile_top">
-      <div class="profile_image">
-          <div class="mypic_and_name">
-              <img id="profileImage" src="../images/mypic.png" alt="My Picture">
-              <div class="edit_me">
-                  <div class="show_me">
-                      <h4>Ndevu Jean Paul Elisa</h4>
-                      <button id="names" class="edit_button">Edit names</button>
-                  </div>
-                  <div class="change_pic">
-                      <p>Change profile photo:</p>
-                      <input type="file" accept="image/*" id="uploadPhotoInput">
-                      <label for="uploadPhotoInput" class="edit_button">Upload a photo</label>
-                      <br>
-                      <button id="Take_a_photo" class="edit_button">Take a photo</button>
-                  </div>
-              </div>
-          </div>
-      </div>
-  </div>
-</div>
-            
-                  <!-- </div> -->
-                
-
-            <div class="edit_about">
-              <div class="about_description">
-                <h1>About <span>(introduction)</span></h1>
-                <h3>Full stack Software Developer, Web Developer, and UX Designer.</h3>
-                <p>Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving. 
-                 My journey in the world of technology has equipped me with a diverse set of skills, 
-                 allowing me to bring ideas to life through elegant and efficient code.
-                </p>
-                <button id="edit_about_id" class="edit_button"> 
-                    Edit about
-                 </button>
-                </div>
-                
-                 <div class="change_Employment_status">
-                  <h5>Change Employment status:</h5>
-                  <p><label for="selectedvalue">Already have a job:</label>
-                        <select id="selectedvalue" name="selectedvalue">
-                          <option value="Yes">Yes</option>
-                          <option value="No">No</option>
-                        </select> 
-                        </p>
-                  <h6>Open to work on:</h6>
-                  <div class="open_to_work">
-                    <p><label for="open_to_work_part_time">Part Time jobs:</label>
-                      <select id="open_to_work_part_time" name="open_to_work_part_time">
-                        <option value="Yes">Yes</option>
-                        <option value="No">No</option>
-                      </select>
-                  </p>
-                      <p><label for="open_to_work_remote">Remote jobs:</label>
-                        <select id="open_to_work_remote" name="open_to_work_remote">
-                          <option value="Yes">Yes</option>
-                          <option value="No">No</option>
-                        </select> 
-                      
-                          </p>
-                          <p>
-                            <label for="open_to_work_full_time">Full time jobs:</label>
-                        <select id="open_to_work_full_time" name="open_to_work_full_time">
-                          <option value="Yes">Yes</option>
-                          <option value="No">No</option>
-                        </select>
-                              
-                              </p>
-                  </div>
-                 </div>
-            </div>
-          </div>
-        
-        <!-- profile_main class -->
-        <div class="profile_main">
-
-            <div class="Edication">
-            <h1>Education</h1>
-            <p>
-                Have you ever wondered about what my mission is really about or who I really Am? 
-                I'm on a mission to turn imaginative concepts into tangible, interactive realities.........
-            </p>
-
-            <ul id="educationList" class="list">
-                <li>
-                  <p>Bacholor's Degree in BIT at University of Rwanda in progress.
-                    <button id="remove_education_0" class="remove"> 
-                        --
-                     </button>
-                  </p>
-                </li>
-                <li>
-                  <P>Software Engineering online.
-                    <button id="remove_education_1" class="remove"> 
-                    -
-                 </button>
-                  </P>
-                </li>
-                <li>
-                  <p>web development at Andela in progress
-                    <button id="remove_education_2" class="remove"> 
-                        --
-                     </button>
-                  </p>
-                </li>
-              <li>
-                <p>Foundation in UX design (theory) at Coursera by Google
-                    <button id="remove_education_3" class="remove"> 
-                        --
-                     </button>
-                </p>
-              </li>
-              <li>
-                <p>Advanced Diploma in Mathematics, Computer Science and Economics (MCE)
-                    <button id="remove_education_4" class="remove"> 
-                        --
-                     </button>
-                </p>
-              </li>
-            </ul>
-
-                <button id="addEducation" class="edit_button"> 
-                    Add new Education
-                 </button>
-          </div>
-
-                <!-- Skills -->
-                    <div class="Skills">
-                    <h1>Skills</h1>
-                    <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? 
-                        I'm on a mission to turn imaginative concepts into tangible, interactive realities.........
-                    </p>
-        
-                    <ul id="skillsList" class="list">
-                        <li>
-                          <p>UX-UI Design
-                            <button id="remove_skill_0" class="remove"> 
-                                --
-                             </button>
-                          </p>
-                        </li>
-                        <li>
-                          <P>Full stack Developer
-                            <button id="remove_skill_1" class="remove"> 
-                            --
-                         </button>
-                          </P>
-                        </li>
-                        <li>
-                          <p>Web Development
-                            <button id="remove_skill_2" class="remove"> 
-                                --
-                             </button>
-                          </p>
-                        </li>
-                      <li>
-                        <p>Problem solving
-                            <button id="remove_skill_3" class="remove"> 
-                                --
-                             </button>
-                        </p>
-                      </li>
-                      <li>
-                        <p>Innovative and Creative
-                            <button id="remove_skill_4" class="remove"> 
-                                --
-                             </button>
-                        </p>
-                      </li>
-                    </ul>
-        
-                        <button id="addSkills" class="edit_button"> 
-                            Add new skills
-                         </button>
-                  </div>
-       
-                <!-- Experience -->
-                    <div class="Experience">
-                    <h1>Experience</h1>
-                    <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? 
-                        I'm on a mission to turn imaginative concepts into tangible, interactive realities.........
-                    </p>
-        
-                    <ul id="experienceList" class="list">
-                        <li>
-                          <p>Simple Shell
-                            <button id="remove_experience_0" class="remove"> 
-                                --
-                             </button>
-                          </p>
-                        </li>
-                        <li>
-                          <P>AirBnB Clone
-                            <button id="remove_experience_1" class="remove"> 
-                            --
-                         </button>
-                          </P>
-                        </li>
-                        <li>
-                          <p>Monty
-                            <button id="remove_2" class="remove"> 
-                                --
-                             </button>
-                          </p>
-                        </li>
-                      <li>
-                        <p>Binary tree
-                            <button id="remove_experience_3" class="remove"> 
-                                --
-                             </button>
-                        </p>
-                      </li>
-                      <li>
-                        <p>IT Support proffessional
-                            <button id="remove_experience_4" class="remove"> 
-                                --
-                             </button>
-                        </p>
-                      </li>
-                    </ul>
-        
-                        <button id="addExperience" class="edit_button"> 
-                            Add new Experience
-                         </button>
-                  </div>
-                </div>
-
-                <div class="got_to_dashboard" id="dashin">
-                  <a href="../views/dashboard.html" target="_self"><h3>Back to DashBoard</h3></a>
-                </div>
-              
-                <!-- SCRIPTS -->
-                <script src="scripts/profileAdmin.js"></script>
-          <!-- Footer section-->
-           <div class="profile_footer">
-            <div class="your_CV">
-                <h3>Upload updated CV</h3>
-                <button id="UPDATED_CV" class="edit_button"> 
-                    Upload CV
-                 </button>
-            </div>
-              
-            <div class="Edit_footer">
-                <h3>Change or Update footer</h3>
-                <button id="Edit_foot" class="edit_button"> 
-                    Edit footer
-                 </button>
-            </div>
-        </div>
-    </div>
-    </body>
-</html>
-
-    
\ No newline at end of file
diff --git a/views/profile_view.html b/views/profile_view.html
deleted file mode 100644
index 3a71c4e..0000000
--- a/views/profile_view.html
+++ /dev/null
@@ -1,266 +0,0 @@
-
-
-<!-- blogs.html -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <!-- <link rel="stylesheet" type="text/css" href="styles/dashboard.css"> -->
-   
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/header.css">
-    <link rel="stylesheet" type="text/css" href="../styles/footer.css">
-    <link rel="stylesheet" type="text/css" href="../styles/profile_view.css">
-    
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-
-    <title>NdevuSpace</title>
-    
-</head>
-<body> <header>
-    <div class="logo">
-     <a href="index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a>
-   </div>
-     <div class="">
-       <div class="navigation flex-row"> 
-         <a href="../views/skills.html">Skills</a>
-         <a href="../views/about.html">About</a>
-         <a href="../views/hire_me.html">Hire me</a>
-         <a href="../views/services.html">Service</a>
-         <a href="../views/blogs.html">Blogs</a>
-         <a href="../index.html#contactme">Contact me</a>
-         <a href="../views/projects.html">Portfolio</a>
-         <a href="../views/signin.html">
-           Login
-         </a>
-       </div>
-       <button class="menu-btn"><img src="../images/menu.png" alt="My Picture"></button>
-     </div>
-   </header>
-    <!-- Profile (content) -->
-    <div class="profile_view">
-     
-        <h1>Profile</h1>
-        <div class="profile_top">
-            
-            <div class="profile_image">
-                <!-- <div class="My Picture"> -->
-                    <div class="mypic_and_name">
-                      <img src="../images/mypic.png" alt="My Picture">
-
-                      <div class="edit_me">
-
-                        <div class="show_me">
-                        <h4>Ndevu Jean Paul Elisa</h4>
-                        <p>Location: <span class="location">Gikondo-Kigali Rwanda</span></p>
-                         </div>                        
-                        </div>
-                       </div>
-                   </div>  
-            
-                  <!-- </div> -->
-                
-
-            <div class="read_about">
-                <h1>About <span>(introduction)</span></h1>
-                <h3>Full stack Software Developer, Web Developer, and UX Designer.</h3>
-                <p>Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving. 
-                 My journey in the world of technology has equipped me with a diverse set of skills, 
-                 allowing me to bring ideas to life through elegant and efficient code.
-                </p>
-                <button id="edit_about_id" class="edit_button"> 
-                    Read more
-                 </button>
-
-                 <div class="Employment_status">
-                    <h5>Employment status:</h5>
-                    <p>Already have a job:
-                        <output id="selectedvalue">No</output>
-                    </p>
-                    
-                    <h6>Open to work on:</h6>
-                    <div class="total_visitors">
-                        <p>Part Time jobs:
-                        <output id="selectedvalue">Yes</output>
-                    </p>
-                        <p>Remote jobs: 
-                            <output id="selectedvalue">Yes</output>
-                            </p>
-                            <p>Full time jobs: 
-                                <output id="selectedvalue">No</output>
-                                </p>
-                    </div>
-                   </div>
-            </div>
-           </div>
-        
-        <!-- profile_main class -->
-        <div class="profile_main">
-
-            <div class="Edication">
-            <h1>Education</h1>
-            <p>
-                Have you ever wondered about what my mission is really about or who I really Am? 
-                I'm on a mission to turn imaginative concepts into tangible, interactive realities.........
-            </p>
-
-            <ul>
-                <li>
-                  <p>Bacholor's Degree in BIT at University of Rwanda in progress.
-                  </p>
-                </li>
-                <li>
-                  <P>Software Engineering online.
-                  </P>
-                </li>
-                <li>
-                  <p>web development at Andela in progress
-                  </p>
-                </li>
-              <li>
-                <p>Foundation in UX design (theory) at Coursera by Google
-                </p>
-              </li>
-              <li>
-                <p>Advanced Diploma in Mathematics, Computer Science and Economics (MCE)
-                </p>
-              </li>
-            </ul>
-
-                <button id="edit_Education" class="edit_button"> 
-                   View Education in detail
-                 </button>
-          </div>
-
-                <!-- Skills -->
-                    <div class="Skills">
-                    <h1>Skills</h1>
-                    <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? 
-                        I'm on a mission to turn imaginative concepts into tangible, interactive realities.........
-                    </p>
-        
-                    <ul>
-                        <li>
-                          <p>UX-UI Design
-                          </p>
-                        </li>
-                        <li>
-                          <P>Full stack Developer
-                          </P>
-                        </li>
-                        <li>
-                          <p>Web Development
-                          </p>
-                        </li>
-                      <li>
-                        <p>Problem solving
-                        </p>
-                      </li>
-                      <li>
-                        <p>Innovative and Creative
-                        </p>
-                      </li>
-                    </ul>
-        
-                        <button id="edit_skills" class="edit_button"> 
-                            View more skills
-                         </button>
-                  </div>
-       
-                <!-- Experience -->
-                    <div class="Experience">
-                    <h1>Experience</h1>
-                    <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? 
-                        I'm on a mission to turn imaginative concepts into tangible, interactive realities.........
-                    </p>
-        
-                    <ul>
-                        <li>
-                          <p>Simple Shell
-                          </p>
-                        </li>
-                        <li>
-                          <P>AirBnB Clone
-                          </P>
-                        </li>
-                        <li>
-                          <p>Monty
-                          </p>
-                        </li>
-                      <li>
-                        <p>Binary tree
-                        </p>
-                      </li>
-                      <li>
-                        <p>IT Support proffessional
-                        </p>
-                      </li>
-                    </ul>
-        
-                        <button id="edit_Experience" class="edit_button"> 
-                            View more Experiences
-                         </button>
-                  </div>
-                </div>
-
-  
-     <!-- Footer section-->
-     <footer>
-        <div class="logo">
-          <a href="index.html" target="_self">
-          <img src="../images/logo1.png" alt="logo">
-        </a>
-        </div>
-  
-           <!-- link for my social medias -->
-           <div class="socialmedia"><img src="../images/linkedin-logo.png" alt="linkin link">
-             <img src="../images/twitter-logo.png" alt="twitter link">
-           </div>
-  
-        <div class="footerdesc">
-               <!-- connecting point -->
-              <div class="connection">
-                 <h2>Connect with me:</h2>
-  
-                  <ul>
-                     <li> niyokwizerwajeanpaulelisa@gmail.com</li>
-                     <li>www.linkedin.com/in/jean-paul-elisa</li>
-                     <li>www.GitHub.com/Ndevu12</li>
-                   </ul>
-                </div>
-                  <!-- blogs -->
-                 <div class="blogs-section">
-                   <h2>Blogs:</h2>
-                      <ul>
-                      <li>My Journey into Full Stack Development</li>
-                      <li>Lessons from Building a Simple Shell</li>
-                      <li>The Art of UI Design in Full Stack Development</li>
-                    </ul>
-                 </div>
-        
-                   <!-- my work -->
-                      <div class="my-work">
-                         <h2>Explore My Work:</h2>
-                         <ul> 
-                           <li>Simple shell</li>
-                           <li>AirBnB Clone</li>
-                           <li>Monty</li>
-                          </ul>
-                       </div>
-                     </div>
-                        <div class="footcopyright">
-                   ©2024 | Ndevu | Full Stack Developer | Gikondo-Kigali
-                       </div>  
-                       
-                       // SCRIPTS
-                       <script src="../scripts/signin_and_signup.js" defer></script>
-      </footer>
-    </body>
-</html>
-
-    
\ No newline at end of file
diff --git a/views/projects.html b/views/projects.html
index 97083b9..de5de87 100644
--- a/views/projects.html
+++ b/views/projects.html
@@ -19,250 +19,111 @@
   </head>
   <body>
     <header>
-         <div class="logo"><a href="index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a></div>
-         <div class="">
-          <div class="navigation flex-row"> 
-            <a href="../views/skills.html">Skills</a>
-            <a href="about.html">About</a>
-            <a href="../views/hire_me.html">Hire me</a>
-            <a href="../views/services.html">Service</a>
-            <a href="../views/blogs.html">Blogs</a>
-            <a href="../index.html#contactme">Contact me</a>
-            <a href="../views/projects.html">Portfolio</a>
-            <a href="../views/profile_view.html" target="_self">
-              <div class="admin">
-                <img src="../images/mypic.png" alt="My Picture">
-             </div>
-            </a>
-          </div>
+      <div class="logo">
+       <a href="../index.html" target="_self">
+         <img src="../images/logo1.png" alt="logo">
+       </a>
+     </div>
+     <button id="theme">Dark</button> 
+       <div class="naviga">
+  
+         <input type="checkbox" id="sidebar-active">
+         <label for="sidebar-active" class="open-sidebar-button">
+           <svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
+         </label>
+         <label id="overlay" for="sidebar-active"></label>
+  
+         <div class="navigation flex-row"> 
+           <a href="./skills.html">Skills</a>
+           <a href="../index.html#aboutme">About</a>
+           <a href="./blogs.html">Blogs</a>
+           <a href="../index.html#contactme">Contact me</a>
+           <a href="./projects.html">Portfolio</a>
+           <a href="./experience.html">Experience</a>
          </div>
-      </header>
-
-      <section class="projects_page">
-        <div class="projects_class">
-          <h1 class="offer">Snips of the Works I have done:</h1>
-          <br>
-          
-          <div class="project">
-          <h1>1. Simple Shell</h1>
-
-         <div class="shell-project">
-          <div class="sample_project">
-            <img src="../images/shell.jfif" alt="Unix shell image">
-          </div>
-          <p>
-            Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving. 
-            My journey in the world of technology has equipped me with a diverse set of skills, 
-            allowing me to bring ideas to life through elegant and efficient code.
-            </p>
-            <button id="unix-Id" class="download-cv"> 
-                Read more
-             </button>
-
-            <div class="more_about_project">
-                <p>
-                Built a user-friendly Unix-like shell with core features like command parsing and process execution.
-                Designed a Monty Bytecode language interpreter, showcasing my 
-                problem-solving skills in handling stacks, queues, and complex operations.
-                <br>
-                Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                <p>
-                Designed a Monty Bytecode language interpreter, showcasing my 
-                problem-solving skills in handling stacks, queues, and complex operations.
-                Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                 </p>
-                </p>
+         
+       </div>
+     </header>
+
+      <main class="projects-page">
+        <div class="projects-container">
+          <!-- Introduction -->
+          <section id="projects-intro" class="project-intro-section">
+            <p>Explore my projects where innovation meets creativity. These projects showcase my skills in solving real-world problems with modern technology and thoughtful design.</p>
+          </section>
+      
+          <!-- Projects Section -->
+          <section id="projects" class="projects-section">
+            <h2 class="section-title">My Projects</h2>
+            <div class="projects-grid">
+              <!-- Project Card 1 -->
+              <div class="project-page-card" data-animate="zoom-in">
+                <img src="../images/project/e-commerce.jpg" alt="E-commerce Platform" class="project-thumbnail" />
+                <div class="project-details">
+                  <h3>E-commerce Platform</h3>
+                  <p>A robust platform for online shopping with integrated chatbot support and secure payment gateways.</p>
+                  <a href="#" class="buttoning">View Project</a>
                 </div>
-         </div>
-        </div>
-            <br>
-
-            <div class="project">
-            <h1>2. AirBnB Clone</h1>
-
-            <div class="AirBnB-project">
-            <div class="sample_project">
-                <img src="../images/airbnb.png" alt="AirBnB image">
-             </div>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-            <button id="projectId" class="download-cv"> 
-                Read more
-             </button>
-            <br>
-
-            <div class="more_about_project">
-            <p>
-                Contributed to an AirBnB clone, focusing on UI design, 
-                search, booking functionalities, and secure transactions.
-                <br>
-                Designed a Monty Bytecode language interpreter, showcasing my 
-                problem-solving skills in handling stacks, queues, and complex operations.
-                Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                <p>
-                Designed a Monty Bytecode language interpreter, showcasing my 
-                problem-solving skills in handling stacks, queues, and complex operations.
-                Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                 </p>
-              </p>
-              </div>
-              </div>
-              </div>
-            <br>
-
-            <div class="project">
-            <h1>3. Monty</h1>
-
-            <div class="Monty-project">
-            <div class="sample_project">
-                <img src="../images/monty.jfif" alt="Monty image">
-               </div>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-
-            <button id="proje" class="download-cv"> 
-                Read more
-             </button>
-
-            <div class="more_about_project">
-                <p>
-                Designed a Monty Bytecode language interpreter, showcasing my 
-                problem-solving skills in handling stacks, queues, and complex operations.
-                Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                <p>
-                Designed a Monty Bytecode language interpreter, showcasing my 
-                problem-solving skills in handling stacks, queues, and complex operations.
-                Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                 </p>
-              </p>
-              </div>
-              </div>
-              </div>
-            <br>
-
-            <div class="project">
-            <h1>
-              4. IT Support proffessional
-            </h1>
-
-            <div class="IT-project">
-            <div class="sample_project">
-                <img src="../images/blogImages/technology.jfif" alt="Monty image">
-               </div>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-
-            <button id="proectId" class="download-cv"> 
-                Read more
-             </button>
-
-            <div class="more_about_project">
-                <p>
-                Designed a Monty Bytecode language interpreter, showcasing my 
-                problem-solving skills in handling stacks, queues, and complex operations.
-                Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-
-                Designed a Monty Bytecode language interpreter, showcasing my 
-                problem-solving skills in handling stacks, queues, and complex operations.
-                Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                <p>
-                Designed a Monty Bytecode language interpreter, showcasing my 
-                problem-solving skills in handling stacks, queues, and complex operations.
-                Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                 </p>
-              </p>
-              </div>
               </div>
+      
+              <!-- Project Card 2 -->
+              <div class="project-page-card" data-animate="fade-up">
+                <img src="../images/project/green.jpg" alt="Green Mobility Solution" class="project-thumbnail" />
+                <div class="project-details">
+                  <h3>Green Mobility Solution</h3>
+                  <p>An innovative platform for public transportation, enhancing accessibility and real-time tracking.</p>
+                  <a href="#" class="buttoning">View Project</a>
+                </div>
               </div>
-              <br>
-
-            <h4>For more PROJECTS you can GO TO </h4>
-            <ul>
-              <li><p>Portfolio tab on the above navigation Ribbon or click <a href="signin.html" target="_self">here</a>.</p></li>
-              <li><p><a href="https://github.com/Ndevu12?tab=repositories" target="_self">GitHub</a> for a sets of works</p></li>
-            </ul>
-            <br>
-
-            <div class="choice">
-                <p><span><a href="projects.html">Back to top</a></p>
+      
+              <!-- Project Card 3 -->
+              <div class="project-page-card" data-animate="slide-left">
+                <img src="../images/project//GRE.jpg" alt="Land Trading Platform" class="project-thumbnail" />
+                <div class="project-details">
+                  <h3>Digital Land Platform</h3>
+                  <p>A comprehensive solution for buying and selling properties with instant ownership documentation.</p>
+                  <a href="#" class="buttoning">View Project</a>
+                </div>
               </div>
-
+            </div>
+          </section>
         </div>
-      </section>
-
+      </main>
       
-                 <!-- Footer section-->
-      <footer>
-          <div class="logo">
-            <img src="../images/logo1.png" alt="logo">
+           <!-- Footer section-->
+    <footer>
+      <div class="footer-container">
+        <div class="logo">
+          <a href="../index.html" target="_self">
+          <img src="../images/logo1.png" alt="logo">
+          <p>NdevuSpace</p>
+        </a>
         </div>
 
-         <!-- link for my social medias -->
-         <div class="socialmedia"><img src="../images/linkedin-logo.png" alt="linkin link">
-           <img src="../images/twitter-logo.png" alt="twitter link">
-         </div>
-
-          <div class="footerdesc">
-             <!-- connecting point -->
-            <div class="connection">
-               <h2>Connect with me:</h2>
+        <div class="footer-navigate">
+          <p>Navigations:</p>
+          <ul>
+          <li><a href="../index.html" target="_self">Home</a></li>
+          <li><a href="./views/projects.html" target="_self">Projects</a></li>
+          <li><a href="./views/blogs.html" target="_self">Blogs</a></li>
+          <li><a href="index.html#contactme" target="_self">Contact me</a></li>
+        </ul>
+        </div>
 
-                <ul>
-                   <li> niyokwizerwajeanpaulelisa@gmail.com</li>
-                   <li>www.linkedin.com/in/jean-paul-elisa</li>
-                   <li>www.GitHub.com/Ndevu12</li>
-                 </ul>
-              </div>
-                <!-- blogs -->
-               <div class="blogs-section">
-                 <h2>Blogs:</h2>
-                    <ul>
-                    <li>My Journey into Full Stack Development</li>
-                    <li>Lessons from Building a Simple Shell</li>
-                    <li>The Art of UI Design in Full Stack Development</li>
-                  </ul>
-               </div>
-      
-                 <!-- my work -->
-                    <div class="my-work">
-                       <h2>Explore My Work:</h2>
-                       <ul> 
-                         <li>Simple shell</li>
-                         <li>AirBnB Clone</li>
-                         <li>Monty</li>
-                        </ul>
-                     </div>
-                   </div>
-                     <div class="footcopyright">
-                        ©2024 | Ndevu | Full Stack Developer | Gikondo-Kigali
-                     </div>    
+          <!-- link for my social medias -->
+          <div class="socialmedia">
+            <div class="connect">
+              <p>Connect with me:</p>
+            </div>
+            <div class="social">
+              <a href="https://www.linkedin.com/in/jean-paul-elisa"><img src="../images/linkedin-logo.png"  class="social-biglogo" alt="linkedin link"></a>
+              <a href="https://github.com/Ndevu12"><img src="../images/gith.png" class="social-github" alt="linkedin link"></a>
+            </div>
+          </div>
+      </div>
+            <div class="footcopyright">
+              <h5>©2024 | Ndevu | Full Stack Software Developer | Gikondo-Kigali</h5>
+            </div>    
     </footer>
     </body>
     </html>
\ No newline at end of file
diff --git a/views/quotes.html b/views/quotes.html
deleted file mode 100644
index e69de29..0000000
diff --git a/views/services.html b/views/services.html
deleted file mode 100644
index de152ca..0000000
--- a/views/services.html
+++ /dev/null
@@ -1,140 +0,0 @@
-<!--====== SERVICE PAGE ======-->
-
-<!-- This file is not styled in service.css file at all, it is affected by about file for styling-->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/header.css">
-    <link rel="stylesheet" type="text/css" href="../styles/footer.css">
-    <link rel="stylesheet" type="text/css" href="../styles/service.css">
-
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-    <header>
-         <div class="logo">
-          <a href="index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a>
-        </div>
-         <div class="">
-          <div class="navigation flex-row"> 
-            <a href="../views/skills.html">Skills</a>
-            <a href="../views/about.html">About</a>
-            <a href="../views/hire_me.html">Hire me</a>
-            <a href="../views/services.html">Service</a>
-            <a href="../views/blogs.html">Blogs</a>
-            <a href="../index.html#contactme">Contact me</a>
-            <a href="../views/projects.html">Portfolio</a>
-            <a href="../views/profile_view.html" target="_self">
-              <div class="admin">
-                <img src="../images/mypic.png" alt="My Picture">
-             </div>
-            </a>
-          </div>
-         </div>
-      </header>
-
-      <section class="service_page">
-        <div class="service_class">
-          <h1 class="offers">Services I offer:</h1>
-          <p>
-            I offer wide range of services while focusing on user's experience. Lorem impersum     
-            Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving. 
-            My journey in the world of technology has equipped me with a diverse set of skills, 
-            allowing me to bring ideas to life through elegant and efficient code.
-            </p>
-          <h3>1. Full stack Software Developer</h3>
-          <p>
-            Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving. 
-            My journey in the world of technology has equipped me with a diverse set of skills, 
-            allowing me to bring ideas to life through elegant and efficient code.
-            </p>
-            <br>
-
-            <h3>2. Web Development</h3>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-            <br>
-
-            <h3>3. UX-UI Design</h3>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-
-            <h3>
-              4. IT Support proffessional
-            </h3>
-            <p>
-              Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-              interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-              Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-            </p>
-
-            <h4>For more about my Experiences you can take a look on my works on</h4>
-            <ul>
-              <li><p>Portfolio tab on the above navigation Ribbon or click <a href="projects.html" target="_self">here</a>.</p></li>
-              <li><p><a href="https://github.com/Ndevu12?tab=repositories" target="_self">GitHub</a> for a sets of works</p></li>
-            </ul>
-        </div>
-      </section>
-
-      
-                 <!-- Footer section-->
-      <footer>
-          <div class="logo">
-            <img src="../images/logo1.png" alt="logo">
-        </div>
-
-         <!-- link for my social medias -->
-         <div class="socialmedia"><img src="../images/linkedin-logo.png" alt="linkin link">
-           <img src="../images/twitter-logo.png" alt="twitter link">
-         </div>
-
-          <div class="footerdesc">
-             <!-- connecting point -->
-            <div class="connection">
-               <h2>Connect with me:</h2>
-
-                <ul>
-                   <li> niyokwizerwajeanpaulelisa@gmail.com</li>
-                   <li>www.linkedin.com/in/jean-paul-elisa</li>
-                   <li>www.GitHub.com/Ndevu12</li>
-                 </ul>
-              </div>
-                <!-- blogs -->
-               <div class="blogs-section">
-                 <h2>Blogs:</h2>
-                    <ul>
-                    <li>My Journey into Full Stack Development</li>
-                    <li>Lessons from Building a Simple Shell</li>
-                    <li>The Art of UI Design in Full Stack Development</li>
-                  </ul>
-               </div>
-      
-                 <!-- my work -->
-                    <div class="my-work">
-                       <h2>Explore My Work:</h2>
-                       <ul> 
-                         <li>Simple shell</li>
-                         <li>AirBnB Clone</li>
-                         <li>Monty</li>
-                        </ul>
-                     </div>
-                   </div>
-                     <div class="footcopyright">
-                        ©2024 | Ndevu | Full Stack Developer | Gikondo-Kigali
-                     </div>    
-    </footer>
-    </body>
-    </html>
\ No newline at end of file
diff --git a/views/settings.html b/views/settings.html
deleted file mode 100644
index 1352874..0000000
--- a/views/settings.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!--===== This is Settings page =======-->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/settings.css">
-
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-   
-    <div class="got_to_dashboard">
-      <a href="../views/dashboard.html" target="_self"><h3><u>Back to DashBoard</u></h3></a>
-    </div>
-
-    <div class="settings">
-        <div class="privacy">
-            <h1>Manage Privacy</h1>
-            <div class="access">
-            <h2>Who can see profile information:</h2>
-            <label>
-                <input type="checkbox" id="publicCheckbox" value="public"> Public
-              </label>
-            
-              <label>
-                <input type="checkbox" id="subscribersCheckbox" value="subscribers"> Subscribers
-              </label>
-            </div>
-            
-            <button id="Edit_terms2" class="edit_button"> 
-                Save
-             </button>
-        </div>
-            <div class="sharing_access">
-                <h1>Manage blogs</h1>
-                <div class="access">
-                <h2>Who can share blogs:</h2>
-                <label>
-                    <input type="checkbox" id="publicChec" value="public"> Public
-                  </label>
-                
-                  <label>
-                    <input type="checkbox" id="subscribersCheck" value="subscribers"> Subscribers
-                  </label>
-
-                  <button id="Edit_terms1" class="edit_button"> 
-                    Save
-                 </button>
-            </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="web_management">
-            <h1>Web site management</h1>
-            <div class="manage">
-                <h3>Update Terms and Conditons</h3>
-                <button id="Edit_terms" class="edit_button"> 
-                    Edit
-                 </button>
-            </div>
-        </div>
-    </div>
-
-    </body>
-    </html>
\ No newline at end of file
diff --git a/views/signin.html b/views/signin.html
index b4f2ddc..f44642d 100644
--- a/views/signin.html
+++ b/views/signin.html
@@ -8,68 +8,60 @@
     <link rel="stylesheet" type="text/css" href="../styles/header.css">
     <link rel="stylesheet" type="text/css" href="../styles/signin.css">
 
-    <link rel="icon" type="image/png" href="../images/logo1.png">
+    <link rel="icon" type="image/png" href="./images/logo1.png">
 
     <title>NdevuSpace</title>
   </head>
     <body>
-        <header>
-         <div class="logo"><a href="index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a></div>
-         <div class="">
-          <div class="navigation flex-row"> 
-            <a href="../views/skills.html">Skills</a>
-            <a href="../views/about.html">About</a>
-            <a href="../views/hire_me.html">Hire me</a>
-            <a href="../views/services.html">Service</a>
-            <a href="../views/blogs.html">Blogs</a>
-            <a href="../index.html#contactme">Contact me</a>
-            <a href="../views/projects.html">Portfolio</a>
-            <a href="../views/profile_view.html">
-              <div class="admin">
-                <img src="../images/mypic.png" alt="My Picture">
-             </div>
-            </a>
-          </div>
-         </div>
-        </header>
-        <div class="mradmin">
-          <h1>Sign in Mr. Admin</h1>
-        </div>
-
-        <div class="secondstep">
-           <p>Welcome back Mr Admin we are thrilled  to have you back on your Digital space. 
-              Please let us make sure it is you!
-            </p>
-
-            <div class="signin">
+      <header>
+        <div class="logo">
+         <a href="../index.html" target="_self">
+           <img src="../images/logo1.png" alt="logo">
+         </a>
+       </div>
+       <button id="theme">Dark</button> 
+         <div class="naviga">
     
-                <div class="name">
-                   <p>Display name</p>
-                   <input class="signInDisplayName"  type="text">
-                </div>
+           <input type="checkbox" id="sidebar-active">
+           <label for="sidebar-active" class="open-sidebar-button">
+             <svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
+           </label>
+           <label id="overlay" for="sidebar-active"></label>
     
-                <div class="password">
-                 <p>Enter a passward</p>
-                  <input class="signInPassword" type="text">
-                </div>
-            </div>
+           <div class="navigation flex-row"> 
+             <a href="./skills.html">Skills</a>
+             <a href="../index.html#aboutme">About</a>
+             <a href="./blogs.html">Blogs</a>
+             <a href="../index.html#contactme">Contact me</a>
+             <a href="./projects.html">Portfolio</a>
+             <a href="./experience.html">Experience</a>
+           </div>
+           
+         </div>
+       </header>
 
-            <div class="sign">
-                Click 
-                <button id="signIn" class="signinto"> 
-                   Signin
-                </button> 
-                Already don't have an account?
-                <a href="signup.html">
-                <button id="signUp" class="signinto"> 
-                   Signup
-                </button>
-               </a>
-                Instead!           
+        <div class='loginPage'>
+          <div class="head">
+            <h3>Login</h3>
+          </div>
+          <div class='container'>
+            <div class="loginContent">
+              <div class="data">
+                <h3>User name</h3>
+                <input id="userName" type="text">
+              </div>
+              <div class="data">
+                <h3>Password</h3>
+                <input id="password" type="password">
+              </div>
+              <div class="data">
+                <button class="Button" id="loginButton">Login</button>
+              </div>
+              <p><a href="../views/signup.html">Here</a></p>
             </div>
+          </div>
         </div>
 
-            <!-- SCRIPTS -->
     <script src="../scripts/signin_and_signup.js"></script>
 
     </body>
diff --git a/views/signup.html b/views/signup.html
deleted file mode 100644
index 75975d8..0000000
--- a/views/signup.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/header.css">
-    <link rel="stylesheet" type="text/css" href="../styles/signup.css">
-
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-
-
-
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-    <header>
-         <div class="logo"><a href="index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a></div>
-         <div class="">
-          <div class="navigation flex-row"> 
-            <a href="../views/skills.html">Skills</a>
-            <a href="../views/about.html">About</a>
-            <a href="../views/hire_me.html">Hire me</a>
-            <a href="../views/services.html">Service</a>
-            <a href="../views/blogs.html">Blogs</a>
-            <a href="../index.html#contactme">Contact me</a>
-            <a href="../views/projects.html">Portfolio</a>
-            <a href="../views/profile_view.html" target="_self">
-              <div class="admin">
-                <img src="../images/mypic.png" alt="My Picture">
-             </div>
-            </a>
-          </div>
-         </div>
-      </header>
-      <div class="mradmin">
-        <h1>Sign Up Mr. Admin</h1>
-      </div>
-
-      <div class="firststep">
-      <p>Welcome Mr Admin we are thrilled to start this  journey on your Digital space with you! so, 
-        for your privacy give us some information by filling this form.
-      </p>
-
-      <!-- signup class  -->
-      <form method="post" class="signup">
-        <div class="validemail">
-            <p>Enter  a valid email</p>
-            <input id="email" class="email" type="text">
-        </div>
-
-        <div class="number">
-            <p>Mobile number</p>
-            <input id="phoneNumber" class="getnumber"  type="text">
-        </div>
-
-        <div class="name">
-            <p>Full name</p>
-            <input id="names" class="fullname" type="text">
-        </div>
-
-        <div class="username">
-            <p>Enter a display name</p>
-            <input id="username" class="niky" type="text">
-        </div>
-
-        <div class="passward">
-            <p>Create strong passward</p>
-            <input id="password" class="strongpass" type="text">
-        </div>
-
-        <div class="confirmpass">
-            <p>Confirm passward</p>
-            <input class="confirmstrongpass" type="text">
-        </div>
-      </form>
-
-      <p class="sign">
-        <!-- <a href="dashboard.html" target="_self"> -->
-         <button id="signUp" class="signinto"> 
-            Signup
-         </button> 
-        <!-- </a>  -->
-         Already have an account?
-         <!-- <a href="signin.html" target="_self"> -->
-         <button id="signIn" class="signinto"> 
-            Signin
-         </button>
-        <!-- </a> -->
-         Instead! 
-        </p>
-      </div>
-
-           <!-- SCRIPTS -->
-     <script src="../scripts/signin_and_signup.js"></script>
-     
-  </body>
-</html>
\ No newline at end of file
diff --git a/views/skills.html b/views/skills.html
index fca62a1..4723f86 100644
--- a/views/skills.html
+++ b/views/skills.html
@@ -7,228 +7,159 @@
     <link rel="stylesheet" type="text/css" href="../styles/common.css">
     <link rel="stylesheet" type="text/css" href="../styles/header.css">
     <link rel="stylesheet" type="text/css" href="../styles/skills.css">
-    <link rel="stylesheet" type="text/css" href="../styles/subscribe.css">
     <link rel="stylesheet" type="text/css" href="../styles/footer.css">
 
     <link rel="icon" type="image/png" href="../images/logo1.png">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
     <title>NdevuSpace</title>
   </head>
     <body>
-        <header>
-         <div class="logo"><a href="index.html" target="_self"><img src="../images/logo1.png" alt="logo"></a></div>
-         <div class="">
-          <div class="navigation flex-row"> 
-            <a href="../views/skills.html">Skills</a>
-            <a href="../views/about.html">About</a>
-            <a href="../views/hire_me.html">Hire me</a>
-            <a href="../views/services.html">Service</a>
-            <a href="../views/blogs.html">Blogs</a>
-            <a href="../index.html#contactme">Contact me</a>
-            <a href="../views/projects.html">Portfolio</a>
-            <a href="../views/profile_view.html">
-              <div class="admin">
-                <img src="../images/mypic.png" alt="My Picture">
-             </div>
-            </a>
-          </div>
+      <header>
+        <div class="logo">
+         <a href="../index.html" target="_self">
+           <img src="../images/logo1.png" alt="logo">
+         </a>
+       </div>
+       <button id="theme">Dark</button> 
+         <div class="naviga">
+    
+           <input type="checkbox" id="sidebar-active">
+           <label for="sidebar-active" class="open-sidebar-button">
+             <svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
+           </label>
+           <label id="overlay" for="sidebar-active"></label>
+    
+           <div class="navigation flex-row"> 
+             <a href="./skills.html">Skills</a>
+             <a href="../index.html#aboutme">About</a>
+             <a href="./blogs.html">Blogs</a>
+             <a href="../index.html#contactme">Contact me</a>
+             <a href="./projects.html">Portfolio</a>
+             <a href="./experience.html">Experience</a>
+           </div>
+           
          </div>
-        </header>
-                 
-                <section class="skills_page">
-                  <div class="skills_page_class">
-                    <h1 class="me_big_b">Skills board</h1>
-                    <h4>Welcome to my skills board, here is where you find detailed information about my skills. Enjoy!!
-                    </h4>
-                    <p>
-                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving. 
-                      My journey in the world of technology has equipped me with a diverse set of skills, 
-                      allowing me to bring ideas to life through elegant and efficient code.
-                      </p>
-                      <br>
-                      
-                      <h2>Table of content:</h2>
-                      <h3>Technical skills:</h3>
-                      <ul>
-                        <li><a href="#">UX-UI Design</a></li>
-                        <li><a href="#">Full stack Developer</a></li>
-                        <li><a href="#">Web Development</a></li>
-                        <li><a href="#">IT support specialist</a></li>
-                        <li><a href="#">UX-UI Design</a></li>
-                        <li><a href="#">UX-UI Design</a></li>
-                      </ul>
-
-                      <H3>Soft Skills:</H3>
-                      <ul>
-                        <li><a href="#">Comunnication skills</a></li>
-                        <li><a href="#">Team leadership</a></li>
-                        <li><a href="#">Project managementt</a></li>
-                        <li><a href="#">IT support specialist</a></li>
-                        <li><a href="#">Problem solving skills</a></li>
-                        <li><a href="#">UX-UI Design</a></li>
-                      </ul>
-                     
-                      <h1><u>1. Technical skills:</u></h1>
-                      <br>
-
-                      <h1>UX-UI Design</h1>              
-                      <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                        interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                        Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                      </p>
-                      <br>
-          
-                      <h1>Full stack Developer</h1>
-                      <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                        interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                        Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                      </p>
-          
-                      <h1>
-                        Web Development
-                      </h1>
-                      <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                        interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                        Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                      </p>
-
-                      <h1>
-                        IT support specialist
-                      </h1>
-                      <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                        interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                        Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                      </p>
-                       
-                      <H1><u>2. Soft Skills:</u></H1>
-                      <br>
-                      <h1>
-                        Problem Solving
-                      </h1>
-                      <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                        interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                        Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                      </p>
-
-                      <h1>
-                        Innovative and creative
-                      </h1>
-                      <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                        interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                        Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                      </p>
-
-                      <h1>
-                        Communicatin
-                      </h1>
-                      <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                        interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                        Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                      </p>
-
-                      <h1>
-                        Team Leadership
-                      </h1>
-                      <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                        interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                        Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                      </p>
-
-                      <h1>
-                        Project management
-                      </h1>
-                      <p>
-                        Have you ever wondered about what my mission is really about or who I really Am? I'm on a mission to turn imaginative concepts into tangible, 
-                        interactive realities. Embark on a journey through my code and creations, where each line is a brushstroke on the canvas of innovation. 
-                        Oooh! I didn't talk about my UX/UI design talent and skills but it goes hand in hands with my development skills.
-                      </p>
-          
-                      <h5>For more about my Experiences you can take a look on my works on</h5>
-                      <ul>
-                        <li><p>Portfolio tab on the above navigation Ribbon or click <a href="signin.html" target="_self">here</a>.</p></li>
-                        <li><p><a href="https://github.com/Ndevu12?tab=repositories" target="_self">GitHub</a> for a sets of works</p></li>
-                      </ul>
-                  </div>
-                </section>
-          
-                
-
-            <!-- subscribe section -->
-            <section class="intro-sub">
-              <article>
-               <div class="pre-sub">
-                 Subscribe to my SPACE to get notified every time there is an update!
-                </div>
-              </article>
-
-              <article>
-               <div class="sub-entry">
-                 <input class="get-email" type="text" value="Enter your Email">
-                 <button id="cantactId" class="edit_button">
-                   Subscribe
-                  </button>
-               </div>
-              </article>
-            </section>
-
-
-                 <!-- Footer section-->
-      <footer>
-          <div class="logo">
-            <img src="../images/logo1.png" alt="logo">
+       </header>
+
+<main class="skills-page">
+  <div class="skills-container">    
+    <!-- Introduction --> 
+    <section id="introduction" class="skills-section" data-effect="slide-in">
+      <p>Welcome to my skills page! Here, you'll find an overview of my technical, project management, and entrepreneurial skills. Explore each section to see my expertise in detail.</p>
+    </section>
+
+    <!-- Technical Skills Section -->
+    <section id="technical-skills" class="skills-section" data-effect="fade-in">
+      <h2 class="section-title">Technical Skills</h2>
+      <p class="more">I'm a Full-Stack Developer with expertise in many technologies!</p>
+      <div class="skills-cards">
+        <div class="card" data-effect="zoom-in">
+          <h3>Front-End Development</h3>
+          <ul>  
+            <li>React</li>
+            <li>Tailwind</li>
+            <li>HTML</li>
+            <li>CSS</li> 
+            <li>Redux</li>
+            <li>JavaScript</li>
+            <li>Typescript</li>
+          </ul>
+        </div>
+        <div class="card" data-effect="zoom-in">
+          <h3>Back-End Development</h3>
+          <ul>
+            <li>Node.js</li>
+            <li>Express</li>
+            <li>Typescript</li>
+            <li>Javascript</li>
+            <li>NestJS</li>  
+            <li>Python</li>
+            <li>FastAPI</li>
+            <li>Flask</li>
+            <li>Apollo Server</li>
+            <li>GraphQL API</li>
+            <li>REST API</li>
+          </ul>
+        </div>
+        <div class="card" data-effect="zoom-in">
+          <h3>Databases & ORMs</h3>  
+          <ul>
+            <li>MySQL</li>
+            <li>PostgreSQL</li>
+            <li>MongoDB</li>
+            <li>TypeORM</li>
+            <li>SQLAlchemy</li>
+          </ul>
+        </div>
+        <div class="card" data-effect="zoom-in">
+          <h3>DevOps</h3>
+          <ul>
+            <li>Docker</li>
+            <li>GitHub Actions</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- Project Management Section -->
+    <section id="project-management" class="skills-section" data-effect="scale-up">
+      <h2 class="section-title">Project Management</h2>
+      <div class="horizontal-scroll">
+        <div class="item">Agile (Scrum, Kanban)</div>
+        <div class="item">Trello</div>
+        <div class="item">Jira</div>
+      </div>
+    </section>
+
+    <!-- Entrepreneurial Skills Section -->
+    <section id="entrepreneurial-skills" class="skills-section" data-effect="rotate-in">
+      <h2 class="section-title">Entrepreneurial Skills</h2>
+      <p>I have founded and co-founded multiple companies, showcasing my ability to innovate and lead.</p>
+      <ul>
+        <li>Milestone 1: Founded [Company A]</li>
+        <li>Milestone 2: Co-Founded [Company B]</li>
+      </ul>
+    </section>
+  </div>
+</main>
+
+     <!-- Footer section-->
+     <footer>
+      <div class="footer-container">
+        <div class="logo">
+          <a href="../index.html" target="_self">
+          <img src="../images/logo1.png" alt="logo">
+          <p>NdevuSpace</p>
+        </a>
         </div>
 
-         <!-- link for my social medias -->
-         <div class="socialmedia"><img src="../images/linkedin-logo.png" alt="linkin link">
-           <img src="../images/twitter-logo.png" alt="twitter link">
-         </div>
-
-          <div class="footerdesc">
-             <!-- connecting point -->
-            <div class="connection">
-               <h2>Connect with me:</h2>
+        <div class="footer-navigate">
+          <p>Navigations:</p>
+          <ul>
+          <li><a href="../index.html" target="_self">Home</a></li>
+          <li><a href="./views/projects.html" target="_self">Projects</a></li>
+          <li><a href="./views/blogs.html" target="_self">Blogs</a></li>
+          <li><a href="index.html#contactme" target="_self">Contact me</a></li>
+        </ul>
+        </div>
 
-                <ul>
-                   <li> niyokwizerwajeanpaulelisa@gmail.com</li>
-                   <li>www.linkedin.com/in/jean-paul-elisa</li>
-                   <li>www.GitHub.com/Ndevu12</li>
-                 </ul>
-              </div>
-                <!-- blogs -->
-               <div class="blogs-section">
-                 <h2>Blogs:</h2>
-                    <ul>
-                    <li>My Journey into Full Stack Development</li>
-                    <li>Lessons from Building a Simple Shell</li>
-                    <li>The Art of UI Design in Full Stack Development</li>
-                  </ul>
-               </div>
-      
-                 <!-- my work -->
-                    <div class="my-work">
-                       <h2>Explore My Work:</h2>
-                       <ul> 
-                         <li>Simple shell</li>
-                         <li>AirBnB Clone</li>
-                         <li>Monty</li>
-                        </ul>
-                     </div>
-                   </div>
-                      <div class="footcopyright">
-                 ©2024 | Ndevu | Full Stack Developer | Gikondo-Kigali
-                     </div>    
+          <!-- link for my social medias -->
+          <div class="socialmedia">
+            <div class="connect">
+              <p>Connect with me:</p>
+            </div>
+            <div class="social">
+              <a href="https://www.linkedin.com/in/jean-paul-elisa"><img src="../images/linkedin-logo.png"  class="social-biglogo" alt="linkedin link"></a>
+              <a href="https://github.com/Ndevu12"><img src="../images/gith.png" class="social-github" alt="linkedin link"></a>
+            </div>
+          </div>
+      </div>
+            <div class="footcopyright">
+              <h5>©2024 | Ndevu | Full Stack Software Developer | Gikondo-Kigali</h5>
+            </div>    
     </footer>
 
-        <!-- SCRIPTS -->
-        <script src="scripts/subscribe.js" defer></script>
-        
+    <script src="../scripts/skills.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/views/subscribers.html b/views/subscribers.html
deleted file mode 100644
index 50cafde..0000000
--- a/views/subscribers.html
+++ /dev/null
@@ -1,398 +0,0 @@
-<!--===== This is Subscribers page =======-->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link rel="stylesheet" type="text/css" href="../styles/common.css">
-    <link rel="stylesheet" type="text/css" href="../styles/subscribers.css">
-
-    <link rel="icon" type="image/png" href="../images/logo1.png">
-    <title>NdevuSpace</title>
-  </head>
-  <body>
-   
-    <div class="got_to_dashboard">
-      <a href="../views/dashboard.html" target="_self"><h3><u>Back to DashBoard</u></h3></a>
-    </div>
-
-     <div class="subscription_board">
-      <h1>Subscriptions Board</h1>
-     </div>
-
-    <div class="subscription_storage">
-    
-        <div class="insight">
-            <!-- <div class="blog_analysis"> -->
-                
-                <div class="new_message">
-                  <h1>New subscribtions</h1>
-                  <div class="image_and_message">
-                    <a href="#" target="_self">
-                        <img src="../images/mypic.png" alt="My Picture">
-                  <div class="message">
-                    <h3>Jean Paul Elisa</h3>                
-                    <p>
-                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                    </p></a>
-                </div>
-            </div>
-                    <div class="deal_with_messages">
-                      <button id="Delete1" class="edit_button"> 
-                        Delete
-                     </button>
-
-                   <button id="Edit1" class="edit_button"> 
-                    Mark as read
-                 </button>
-
-                 <button id="View1" class="edit_button"> 
-                  Read
-               </button>
-                    </div>
-                    <div class="image_and_message">
-                        <a href="#" target="_self">
-                            <img src="../images/mypic.png" alt="My Picture">
-                      <div class="message">
-                        <h3>Jean Paul Elisa</h3>                
-                        <p>
-                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                        </p></a>
-                    </div>
-
-                      <div class="deal_with_messages">
-                        <button id="Delete2" class="edit_button"> 
-                          Delete
-                       </button>
-  
-                       <button id="Analysis2" class="edit_button"> 
-                        Mark as read
-                     </button>
-  
-                     <button id="Edit2" class="edit_button"> 
-               1em;   Read
-                   </button>
-                      </div>
-                  <div class="image_and_message">
-                    <a href="#" target="_self">
-                        <img src="../images/mypic.png" alt="My Picture">
-                  <div class="message">
-                    <h3>Jean Paul Elisa</h3>                
-                    <p>
-                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                    </p></a>
-                </div>
-
-                        <div class="deal_with_messages">
-                          <button id="Delete3" class="edit_button"> 
-                            Delete
-                         </button>
-    
-                         <button id="Analysis3" class="edit_button"> 
-                          Mark as read
-                       </button>
-    
-                       <button id="Edit3" class="edit_button"> 
-                        Read
-                     </button>
-                        </div>
-                </div>
-                
-                <div class="all_messages">
-                    <h1>All messages:</h1>
-                    <div class="image_and_message">
-                        <a href="#" target="_self">
-                            <img src="../images/mypic.png" alt="My Picture">
-                      <div class="message">
-                        <h3>Jean Paul Elisa</h3>                
-                        <p>
-                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                        </p></a>
-                    </div>
-
-                        <div class="choice_art">
-                          <button id="Delete4" class="edit_button"> 
-                            Delete
-                         </button>
-    
-                         <button id="Analysis4" class="edit_button"> 
-                          Mark as read
-                       </button>
-    
-                       <button id="Edit4" class="edit_button"> 
-                        Read
-                     </button>
-                        </div>
-
-                        <div class="image_and_message">
-                            <a href="#" target="_self">
-                                <img src="../images/mypic.png" alt="My Picture">
-                          <div class="message">
-                            <h3>Jean Paul Elisa</h3>                
-                            <p>
-                              Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                            </p></a>
-                        </div>
-
-                          <div class="choice_art">
-                            <button id="Delete5" class="edit_button"> 
-                              Delete
-                           </button>
-      
-                           <button id="Analysis5" class="edit_button"> 
-                            Mark as read 
-                         </button>
-      
-                         <button id="Edit5" class="edit_button"> 
-                            Read
-                       </button>
-
-                          </div>
-                          <div class="image_and_message">
-                            <a href="#" target="_self">
-                                <img src="../images/mypic.png" alt="My Picture">
-                          <div class="message">
-                            <h3>Jean Paul Elisa</h3>                
-                            <p>
-                              Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                            </p></a>
-                        </div>
-
-                            <div class="choice_art">
-                              <button id="Delete6" class="edit_button"> 
-                                Delete
-                             </button>
-        
-                             <button id="Analysis6" class="edit_button"> 
-                              Mark as read
-                           </button>
-        
-                           <button id="Edit6" class="edit_button"> 
-                            Read
-                         </button>
-    
-                            </div>
-                            <div class="image_and_message">
-                                <a href="#" target="_self">
-                                    <img src="../images/mypic.png" alt="My Picture">
-                              <div class="message">
-                                <h3>Jean Paul Elisa</h3>                
-                                <p>
-                                  Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                </p></a>
-                            </div>
-
-                              <div class="choice_art">
-                                <button id="Delete7" class="edit_button"> 
-                                  Delete
-                               </button>
-          
-                               <button id="Analysis7" class="edit_button"> 
-                                Mark as read
-                             </button>
-          
-                             <button id="Edit7" class="edit_button"> 
-                              Read
-                           </button>
-        
-                              </div> 
-                              <div class="image_and_message">
-                                <a href="#" target="_self">
-                                    <img src="../images/mypic.png" alt="My Picture">
-                              <div class="message">
-                                <h3>Jean Paul Elisa</h3>                
-                                <p>
-                                  Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                </p></a>
-                            </div>
-
-                                <div class="choice_art">
-                                  <button id="Delete8" class="edit_button"> 
-                                    Delete
-                                 </button>
-            
-                                 <button id="Analysis8" class="edit_button"> 
-                                    Mark as read
-                               </button>
-            
-                               <button id="Edit8" class="edit_button"> 
-                                Read
-                             </button>
-    
-                                </div>
-                                <div class="image_and_message">
-                                    <a href="#" target="_self">
-                                        <img src="../images/mypic.png" alt="My Picture">
-                                  <div class="message">
-                                    <h3>Jean Paul Elisa</h3>                
-                                    <p>
-                                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                    </p></a>
-                                </div>
-
-                                  <div class="choice_art">
-                                    <button id="Delete9" class="edit_button"> 
-                                      Delete
-                                   </button>
-              
-                                   <button id="Analysis9" class="edit_button"> 
-                                    Mark as read
-                                 </button>
-              
-                                 <button id="Edit9" class="edit_button"> 
-                                    Read
-                               </button>
-              
-                                  </div>
-                                  <div class="image_and_message">
-                                    <a href="#" target="_self">
-                                        <img src="../images/mypic.png" alt="My Picture">
-                                  <div class="message">
-                                    <h3>Jean Paul Elisa</h3>                
-                                    <p>
-                                      Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                    </p></a>
-                                </div>
-
-                                    <div class="choice_art">
-                                      <button id="Delete10" class="edit_button"> 
-                                        Mark as read
-                                     </button>
-                
-                                     <button id="Analysis10" class="edit_button"> 
-                                      Read
-                                   </button>
-            
-                                    </div>
-                                    <div class="image_and_message">
-                                        <a href="#" target="_self">
-                                            <img src="../images/mypic.png" alt="My Picture">
-                                      <div class="message">
-                                        <h3>Jean Paul Elisa</h3>                
-                                        <p>
-                                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                        </p></a>
-                                    </div>
-
-                                      <div class="choice_art">
-                                        <button id="Delete11" class="edit_button"> 
-                                          Delete
-                                       </button>
-                  
-                                       <button id="Analysis11" class="edit_button"> 
-                                        Mark as read
-                                     </button>
-                  
-                                     <button id="Edit11" class="edit_button"> 
-                                      Read
-                                   </button>
-                  
-                                      </div>
-                                      <div class="image_and_message">
-                                        <a href="#" target="_self">
-                                            <img src="../images/mypic.png" alt="My Picture">
-                                      <div class="message">
-                                        <h3>Jean Paul Elisa</h3>                
-                                        <p>
-                                          Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                        </p></a>
-                                    </div>
-
-                                        <div class="choice_art">
-                                          <button id="Delete12" class="edit_button"> 
-                                            Delete
-                                         </button>
-                    
-                                         <button id="Analysis12" class="edit_button"> 
-                                            Mark as read
-                                       </button>
-                    
-                                       <button id="Edit12" class="edit_button"> 
-                                        Read
-                                     </button>
-                
-                                        </div>
-                                        <div class="image_and_message">
-                                            <a href="#" target="_self">
-                                                <img src="../images/mypic.png" alt="My Picture">
-                                          <div class="message">
-                                            <h3>Jean Paul Elisa</h3>                
-                                            <p>
-                                              Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                            </p></a>
-                                        </div>
-                                          <div class="choice_art">
-                                            <button id="Delete13" class="edit_button"> 
-                                              Delete
-                                           </button>
-                      
-                                           <button id="Analysis13" class="edit_button"> 
-                                            Mark as read
-                                         </button>
-                      
-                                         <button id="Edit13" class="edit_button"> 
-                                          Read
-                                       </button>
-                      
-
-                                          </div>
-
-                                          <div class="image_and_message">
-                                            <a href="#" target="_self">
-                                                <img src="../images/mypic.png" alt="My Picture">
-                                          <div class="message">
-                                            <h3>Jean Paul Elisa</h3>                
-                                            <p>
-                                              Meet the mind behind the code! I am a Full Stack Developer with a keen eye for detail and a love for problem-solving.   
-                                            </p></a>
-                                        </div>
-
-                        <div class="choice_art">
-                          <button id="Delete14" class="edit_button"> 
-                            Delete
-                         </button>
-    
-                         <button id="Analysis14" class="edit_button"> 
-                            Mark as read
-                       </button>
-    
-                       <button id="Edit14" class="edit_button"> 
-                        Read
-                     </button>
-    
-                        </div>
-                      
-
-                </div>
-            <!-- </div> -->
-        </div>
-
-        <div class="choice_article">
-          
-          <a href="all_articles.html">
-          <button id="Delete15" class="edit_button"> 
-            Back to top
-         </button>
-        </a>
-         <a href="dashboard.html">
-         <button id="go-to-dashboard" class="edit_button"> 
-          Back to dashboard
-       </button>
-       </a>
-       <a href="#">
-       <button id="next" class="edit_button"> 
-        Next
-     </button>
-    </a>
-
-     <a href="index.html">
-     <button id="home1" class="edit_button"> 
-      Home
-   </button></a>
-        </div>
-    </div>
-
-    </body>
-    </html>
\ No newline at end of file