diff --git a/src/index.html b/src/index.html
index 9d1ed5a94..fca37f0f8 100755
--- a/src/index.html
+++ b/src/index.html
@@ -40,6 +40,17 @@
+
diff --git a/src/index.js b/src/index.js
index ce4db5e77..5439889f5 100755
--- a/src/index.js
+++ b/src/index.js
@@ -4,3 +4,26 @@ import { targetElements, defaultProps } from "./data/scrollRevealConfig";
initScrollReveal(targetElements, defaultProps);
initTiltEffect();
+
+document.addEventListener("DOMContentLoaded", function () {
+ const navbar = document.querySelector(".navbar");
+ let lastScrollTop = 0;
+
+ window.addEventListener("scroll", function () {
+ let scrollTop = window.scrollY;
+
+ if (scrollTop > 50) {
+ navbar.classList.add("scrolled");
+ } else {
+ navbar.classList.remove("scrolled");
+ }
+
+ if (scrollTop > lastScrollTop) {
+ navbar.classList.add("hidden");
+ } else {
+ navbar.classList.remove("hidden");
+ }
+
+ lastScrollTop = scrollTop;
+ });
+ });
\ No newline at end of file
diff --git a/src/sass/layout/_navbar.scss b/src/sass/layout/_navbar.scss
new file mode 100644
index 000000000..842d1f401
--- /dev/null
+++ b/src/sass/layout/_navbar.scss
@@ -0,0 +1,58 @@
+.navbar {
+ position: fixed;
+ width: 100%;
+ top: 0;
+ left: 0;
+ padding: 15px 0;
+ z-index: 1000;
+ transition: background 0.3s ease-in-out, top 0.3s ease-in-out;
+ background: transparent;
+
+ .container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .nav-logo {
+ color: #000000;
+ font-size: 2rem;
+ font-weight: bold;
+ text-decoration: none;
+ }
+
+ .nav-menu {
+ list-style: none;
+ display: flex;
+ gap: 20px;
+
+ li {
+ display: inline;
+ }
+
+ .nav-link {
+ font-family:Montserrat;
+ color: #149cb7;
+ text-decoration: none;
+ font-size: 1.4rem;
+ transition: color 0.3s;
+ font-weight: 400;
+
+ &:hover {
+ color: #0d00ff;
+ }
+ }
+ }
+
+ }
+
+ .navbar.scrolled {
+ background: rgba(255, 255, 255, 0.8);
+ }
+
+ .navbar.hidden {
+ top: -100px;
+ }
+
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index ee11896f8..525967d82 100755
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -11,6 +11,7 @@
@import "./sass/layout/footer";
@import "./sass/layout/sections";
+@import "./sass/layout/navbar";
@import "./sass/sections/about";
@import "./sass/sections/contact";