diff --git a/src/css/style.css b/src/css/style.css
index a2ec9651..6ec6edb8 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -46,6 +46,7 @@
 html {
   font-size: 100%;
   scroll-behavior: smooth;
+  overflow-x: hidden;
 }
 
 /* Reset default styling */
@@ -332,3 +333,25 @@ body {
     width: 80%;
   }
 }
+
+.skills{
+
+  gap: 10%;
+  color: black;
+  border-radius: 3%;
+  margin: 0.5%;
+  background-color: #f9f9f9;
+  width: 100%;
+ 
+}
+
+
+.skills img{
+  width: 140px;
+  height: 150px;
+  padding: 15px;
+}
+
+.skillsMarquee.stopped {
+  animation-play-state: paused;
+}
\ No newline at end of file
diff --git a/src/dummy_resume.pdf b/src/dummy_resume.pdf
new file mode 100644
index 00000000..cd9272ab
Binary files /dev/null and b/src/dummy_resume.pdf differ
diff --git a/src/index.html b/src/index.html
index 0c8dcbb8..a4951376 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,297 +1,286 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- Primary Meta Tags -->
-    <title>Portfolio Template - Open source</title>
-    <meta name="title" content="Portfolio Template - Open source" />
-    <meta
-      name="description"
-      content="Build or customize your portfolio website using this super easy template. Free to use if you are a member of the community or a contributor to this project"
-    />
-
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website" />
-    <meta
-      property="og:url"
-      content="https://github.com/CommunityPro/portfolio-html"
-    />
-    <meta property="og:title" content="Portfolio Template - Open source" />
-    <meta
-      property="og:description"
-      content="Build or customize your portfolio website using this super easy template. Free to use if you are a member of the community or a contributor to this project"
-    />
-    <meta
-      property="og:image"
-      content="https://user-images.githubusercontent.com/62628408/150613011-b78a7f5a-0af1-4312-aab0-0022e7258693.png"
-    />
-
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta
-      property="twitter:url"
-      content="https://github.com/CommunityPro/portfolio-html"
-    />
-    <meta property="twitter:title" content="Portfolio Template - Open source" />
-    <meta
-      property="twitter:description"
-      content="Build or customize your portfolio website using this super easy template. Free to use if you are a member of the community or a contributor to this project"
-    />
-    <meta
-      property="twitter:image"
-      content="https://user-images.githubusercontent.com/62628408/150613011-b78a7f5a-0af1-4312-aab0-0022e7258693.png"
-    />
-
-    <!-- Link -->
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="assets/favicon/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="/assets/favicon/favicon-16x16.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="assets/favicon/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="192x192"
-      href="assets/favicon/android-chrome-192x192.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="512x512"
-      href="assets/favicon/android-chrome-512x512.png"
-    />
-    <link rel="icon" type="image/x-icon" href="assets/favicon/favicon.ico" />
-    <link rel="manifest" href="assets/favicon/site.webmanifest" />
-    <link
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
-      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
-      crossorigin="anonymous"
-    />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="stylesheet" href="css/utilities.css" />
-  </head>
-  <body>
-    <header id="hero">
-      <!-- Navbar -->
-      <nav class="navbar">
-        <div class="container">
-          <!-- Logo -->
-          <h1 id="logo">
-            <a href="https://github.com/CommunityPro/portfolio-html"
-              ><img src="./assets/logo.png" alt="Your Logo"
-            /></a>
-          </h1>
-          <!-- Navbar links -->
-          <ul class="nav-menu">
-            <li><a class="nav-link" href="#projects">PROJECTS</a></li>
-            <li><a class="nav-link" href="#">CONTACT</a></li>
-            <li><a class="nav-link" href="#">BlOG</a></li>
-            <li>
-              <a
-                class="nav-link btn btn-primary"
-                href="https://github.com/CommunityPro/portfolio-html"
-                >RESUME <i class="fas fa-arrow-right"></i
-              ></a>
-            </li>
-
-            <!-- Toggle switch -->
-            <div class="theme-switch">
-              <input type="checkbox" id="switch" />
-              <label class="toggle-icons" for="switch">
-                <img class="moon" src="assets/moon.svg" />
-                <img class="sun" src="assets/sun.svg" />
-              </label>
-            </div>
-            <!-- Hamburger menu -->
-          </ul>
-          <div class="hamburger">
-            <span class="bar"></span>
-            <span class="bar"></span>
-            <span class="bar"></span>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- Primary Meta Tags -->
+  <title>Portfolio Template - Open source</title>
+  <meta name="title" content="Portfolio Template - Open source" />
+  <meta name="description"
+    content="Build or customize your portfolio website using this super easy template. Free to use if you are a member of the community or a contributor to this project" />
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://github.com/CommunityPro/portfolio-html" />
+  <meta property="og:title" content="Portfolio Template - Open source" />
+  <meta property="og:description"
+    content="Build or customize your portfolio website using this super easy template. Free to use if you are a member of the community or a contributor to this project" />
+  <meta property="og:image"
+    content="https://user-images.githubusercontent.com/62628408/150613011-b78a7f5a-0af1-4312-aab0-0022e7258693.png" />
+
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="twitter:url" content="https://github.com/CommunityPro/portfolio-html" />
+  <meta property="twitter:title" content="Portfolio Template - Open source" />
+  <meta property="twitter:description"
+    content="Build or customize your portfolio website using this super easy template. Free to use if you are a member of the community or a contributor to this project" />
+  <meta property="twitter:image"
+    content="https://user-images.githubusercontent.com/62628408/150613011-b78a7f5a-0af1-4312-aab0-0022e7258693.png" />
+
+  <!-- Link -->
+  <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/android-chrome-192x192.png" />
+  <link rel="icon" type="image/png" sizes="512x512" href="assets/favicon/android-chrome-512x512.png" />
+  <link rel="icon" type="image/x-icon" href="assets/favicon/favicon.ico" />
+  <link rel="manifest" href="assets/favicon/site.webmanifest" />
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+    integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="stylesheet" href="css/utilities.css" />
+</head>
+
+<body>
+  <header id="hero">
+    <!-- Navbar -->
+    <nav class="navbar">
+      <div class="container">
+        <!-- Logo -->
+        <h1 id="logo">
+          <a href="https://github.com/CommunityPro/portfolio-html"><img src="./assets/logo.png" alt="Your Logo" /></a>
+        </h1>
+        <!-- Navbar links -->
+        <ul class="nav-menu">
+          <li><a class="nav-link" href="#projects">PROJECTS</a></li>
+          <li><a class="nav-link" href="#">CONTACT</a></li>
+          <li><a class="nav-link" href="#">BlOG</a></li>
+          <li>
+            <a class="nav-link btn btn-primary" href="javascript:void(0);" onclick="downloadResume()">
+              RESUME <i class="fas fa-arrow-right"></i>
+            </a>
+          </li>
+
+          <!-- Toggle switch -->
+          <div class="theme-switch">
+            <input type="checkbox" id="switch" />
+            <label class="toggle-icons" for="switch">
+              <img class="moon" src="assets/moon.svg" />
+              <img class="sun" src="assets/sun.svg" />
+            </label>
           </div>
+          <!-- Hamburger menu -->
+        </ul>
+        <div class="hamburger">
+          <span class="bar"></span>
+          <span class="bar"></span>
+          <span class="bar"></span>
         </div>
-      </nav>
+      </div>
+    </nav>
+
+    <section class="header-container">
+      <img class="profile-image" src="assets/profile-image.svg" alt="" />
+      <h1>Hi I'm Franklin</h1>
 
-      <section class="header-container">
-        <img
-          class="profile-image"
-          src="assets/profile-image.svg"
-          alt=""
-        />
-        <h1>Hi I'm Franklin</h1>
-
-        <div class="content-text">
-          <h2>Building digital</h2>
-          <h2>products, brands, and experience.</h2>
-
-          <p>
-            A Frontend Developer and Visual Designer with experience in web
-            design, brand identity and product design.
-          </p>
-        </div>
-        <a
-          href="https://github.com/CommunityPro/portfolio-html"
-          class="btn btn-secondary"
-          target="_blank"
-          >Connect With Me</a
-        >
-      </section>
-    </header>
-
-    <!-- Projects -->
-    <section id="projects" class="project-container container">
-      <div class="division"></div>
       <div class="content-text">
-        <h2>Projects</h2>
-        <p>Check out some of my personal and paid projects</p>
+        <h2>Building digital</h2>
+        <h2>products, brands, and experience.</h2>
+
+        <p>
+          A Frontend Developer and Visual Designer with experience in web
+          design, brand identity and product design.
+        </p>
       </div>
+      <a href="https://github.com/CommunityPro/portfolio-html" class="btn btn-secondary" target="_blank">Connect With
+        Me</a>
+    </section>
+  </header>
 
-      <article class="project">
-        <!-- Project 1 -->
-        <div href="" class="card">
-          <div class="project-info">
-            <div class="project-bio">
-              <h3>Project One</h3>
-              <p>React, Redux, SASS</p>
-            </div>
-
-            <div class="project-link">
-              <a href="#" target="_blank"><i class="fab fa-github"></i></a>
-              <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
-            </div>
+  <!--Skills-->
+
+  <section id="skills">
+    <div class="division"></div>
+    <div class="content-text">
+      <h2>Skills</h2>
+      <p>Check out my skills</p>
+    </div>
+    <div class="skills">
+      <marquee Scrollamount=10 class="skillsMarquee" onmouseover="stopMarquee()" onmouseout="startMarquee()">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/180px-HTML5_logo_and_wordmark.svg.png">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/180px-CSS3_logo_and_wordmark.svg.png">
+        <img src="https://www.javascripttutorial.net/wp-content/uploads/2021/04/JavaScript-Tutorial.svg">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/180px-Node.js_logo.svg.png">
+        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/180px-React-icon.svg.png">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/C_Programming_Language.svg/570px-C_Programming_Language.svg.png?20201031132917">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/en/thumb/3/30/Java_programming_language_logo.svg/182px-Java_programming_language_logo.svg.png">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/182px-Python-logo-notext.svg.png">
+      </marquee>
+    </div>
+  </section>
+
+
+  <!-- Projects -->
+  <section id="projects" class="project-container container">
+    <div class="division"></div>
+    <div class="content-text">
+      <h2>Projects</h2>
+      <p>Check out some of my personal and paid projects</p>
+    </div>
+
+    <article class="project">
+      <!-- Project 1 -->
+      <div href="" class="card">
+        <div class="project-info">
+          <div class="project-bio">
+            <h3>Project One</h3>
+            <p>React, Redux, SASS</p>
           </div>
-        </div>
 
-        <!-- Project 2 -->
-        <div href="" class="card">
-          <div class="project-info">
-            <div class="project-bio">
-              <h3>Project Two</h3>
-              <p>React, Redux, SASS</p>
-            </div>
-
-            <div class="project-link">
-              <a href="#" target="_blank"><i class="fab fa-github"></i></a>
-              <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
-            </div>
+          <div class="project-link">
+            <a href="#" target="_blank"><i class="fab fa-github"></i></a>
+            <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
           </div>
         </div>
+      </div>
 
-        <!-- Porject 3 -->
-        <div href="" class="card">
-          <div class="project-info">
-            <div class="project-bio">
-              <h3>Project Three</h3>
-              <p>React, Redux, SASS</p>
-            </div>
-
-            <div class="project-link">
-              <a href="#" target="_blank"><i class="fab fa-github"></i></a>
-              <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
-            </div>
+      <!-- Project 2 -->
+      <div href="" class="card">
+        <div class="project-info">
+          <div class="project-bio">
+            <h3>Project Two</h3>
+            <p>React, Redux, SASS</p>
           </div>
-        </div>
 
-        <!-- Project 4 -->
-        <div href="" class="card">
-          <div class="project-info">
-            <div class="project-bio">
-              <h3>Project Four</h3>
-              <p>React, Redux, SASS</p>
-            </div>
-
-            <div class="project-link">
-              <a href="#" target="_blank"><i class="fab fa-github"></i></a>
-              <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
-            </div>
+          <div class="project-link">
+            <a href="#" target="_blank"><i class="fab fa-github"></i></a>
+            <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
           </div>
         </div>
+      </div>
+
+      <!-- Porject 3 -->
+      <div href="" class="card">
+        <div class="project-info">
+          <div class="project-bio">
+            <h3>Project Three</h3>
+            <p>React, Redux, SASS</p>
+          </div>
 
-        <!-- Project 5 -->
-        <div href="" class="card">
-          <div class="project-info">
-            <div class="project-bio">
-              <h3>Project Five</h3>
-              <p>React, Redux, SASS</p>
-            </div>
-
-            <div class="project-link">
-              <a href="#" target="_blank"><i class="fab fa-github"></i></a>
-              <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
-            </div>
+          <div class="project-link">
+            <a href="#" target="_blank"><i class="fab fa-github"></i></a>
+            <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
           </div>
         </div>
+      </div>
 
-        <!-- Project 6 -->
-        <div href="" class="card">
-          <div class="project-info">
-            <div class="project-bio">
-              <h3>Project Six</h3>
-              <p>React, Redux, SASS</p>
-            </div>
-
-            <div class="project-link">
-              <a href="#" target="_blank"><i class="fab fa-github"></i></a>
-              <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
-            </div>
+      <!-- Project 4 -->
+      <div href="" class="card">
+        <div class="project-info">
+          <div class="project-bio">
+            <h3>Project Four</h3>
+            <p>React, Redux, SASS</p>
+          </div>
+
+          <div class="project-link">
+            <a href="#" target="_blank"><i class="fab fa-github"></i></a>
+            <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
           </div>
         </div>
-      </article>
+      </div>
 
-      <a href="#" class="btn btn-secondary"
-        target="_blank" >See More <i class="fas fa-arrow-right"></i
-      ></a>
-    </section>
+      <!-- Project 5 -->
+      <div href="" class="card">
+        <div class="project-info">
+          <div class="project-bio">
+            <h3>Project Five</h3>
+            <p>React, Redux, SASS</p>
+          </div>
 
-    <footer id="footer">
-      <div class="container">
-        <a href="mailto:communitypro47@gmail.com">communitypro47@gmail.com</a>
-        <!-- Social links -->
-        <div class="social">
-          <a href="#" target="_blank"
-            ><img src="./assets/facebook-icon.svg" alt="Facebook"
-          /></a>
-          <a href="#" target="_blank"><img src="./assets/twitter-icon.svg" alt="Twitter" /></a>
-          <a href="#" target="_blank"
-            ><img src="./assets/linkedin-icon.svg" alt="Linkedin"
-          /></a>
-          <a href="#" target="_blank"><img src="./assets/github-icon.svg" alt="GitHub" /></a>
-          <a href="#" target="_blank"
-            ><img src="./assets/hashnode-icon.svg" alt="Hashnode"
-          /></a>
+          <div class="project-link">
+            <a href="#" target="_blank"><i class="fab fa-github"></i></a>
+            <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
+          </div>
         </div>
-        <!-- Attribution -->
-        <div class="attribution">
-          <a
-            href="https://github.com/CommunityPro/portfolio-html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              src="https://user-images.githubusercontent.com/62628408/157202263-9174da24-b19a-4017-9b7c-a1d26ae8f014.svg"
-              alt="attribution"
-              width="150px"
-            />
-          </a>
+      </div>
+
+      <!-- Project 6 -->
+      <div href="" class="card">
+        <div class="project-info">
+          <div class="project-bio">
+            <h3>Project Six</h3>
+            <p>React, Redux, SASS</p>
+          </div>
+
+          <div class="project-link">
+            <a href="#" target="_blank"><i class="fab fa-github"></i></a>
+            <a href="#" target="_blank"><i class="fas fa-globe"></i></a>
+          </div>
         </div>
-        <p>Copyright &copy; Communitypro <span id="datee"></span>, All rights reserved</p>
       </div>
-    </footer>
-    <script src="js/script.js"></script>
-  </body>
-</html>
+    </article>
+
+    <a href="#" class="btn btn-secondary" target="_blank">See More <i class="fas fa-arrow-right"></i></a>
+  </section>
+
+  <footer id="footer">
+    <div class="container">
+      <a href="mailto:communitypro47@gmail.com">communitypro47@gmail.com</a>
+      <!-- Social links -->
+      <div class="social">
+        <a href="#" target="_blank"><img src="./assets/facebook-icon.svg" alt="Facebook" /></a>
+        <a href="#" target="_blank"><img src="./assets/twitter-icon.svg" alt="Twitter" /></a>
+        <a href="#" target="_blank"><img src="./assets/linkedin-icon.svg" alt="Linkedin" /></a>
+        <a href="#" target="_blank"><img src="./assets/github-icon.svg" alt="GitHub" /></a>
+        <a href="#" target="_blank"><img src="./assets/hashnode-icon.svg" alt="Hashnode" /></a>
+      </div>
+      <!-- Attribution -->
+      <div class="attribution">
+        <a href="https://github.com/CommunityPro/portfolio-html" target="_blank" rel="noopener noreferrer">
+          <img
+            src="https://user-images.githubusercontent.com/62628408/157202263-9174da24-b19a-4017-9b7c-a1d26ae8f014.svg"
+            alt="attribution" width="150px" />
+        </a>
+      </div>
+      <p>Copyright &copy; Communitypro <span id="datee"></span>, All rights reserved</p>
+    </div>
+  </footer>
+
+  <script src="js/script.js"></script>
+  <script>
+    function stopMarquee() {
+      const marquee = document.querySelector(".skillsMarquee");
+      marquee.classList.add("stopped");
+    }
+
+    function startMarquee() {
+      const marquee = document.querySelector(".skillsMarquee");
+      marquee.classList.remove("stopped");
+    }
+
+    function downloadResume() {
+      const url = '/dummy resume.pdf'; // Replace with the actual path to your PDF file
+      const fileName = 'your_resume.pdf'; // Replace with the desired file name
+
+      fetch(url)
+        .then(response => response.blob())
+        .then(blob => {
+          saveAs(blob, fileName);
+        })
+        .catch(error => {
+          console.error('Error downloading the file:', error);
+        });
+    }
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file
