diff --git a/HoverCard/index.html b/HoverCard/index.html
index 7b71308..259bac5 100644
--- a/HoverCard/index.html
+++ b/HoverCard/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Hover Card</title>
     <style>
           @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 * {
@@ -97,7 +97,7 @@
         </div>
 
         <div class="project-content">
-            <h3>Project Name 
+            <h3> Name 
                 <i><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="25" height="22" viewBox="0 0 34 22" fill="none">
                 <path d="M23.1429 1.46899L32.6667 10.9976L23.1429 20.5238M1.71428 10.9999H32.6667" stroke="white"
                     stroke-width="2.38095" stroke-linecap="round" stroke-linejoin="round" />
diff --git a/Portfolio/Image/FormValidation.png b/Portfolio/Image/FormValidation.png
new file mode 100644
index 0000000..99cf240
Binary files /dev/null and b/Portfolio/Image/FormValidation.png differ
diff --git a/Portfolio/Image/calculator.png b/Portfolio/Image/calculator.png
new file mode 100644
index 0000000..e6cc81a
Binary files /dev/null and b/Portfolio/Image/calculator.png differ
diff --git a/Portfolio/Image/clock.png b/Portfolio/Image/clock.png
new file mode 100644
index 0000000..7d15dd0
Binary files /dev/null and b/Portfolio/Image/clock.png differ
diff --git a/Portfolio/Image/colorChange.png b/Portfolio/Image/colorChange.png
new file mode 100644
index 0000000..9fb3c97
Binary files /dev/null and b/Portfolio/Image/colorChange.png differ
diff --git a/Portfolio/Image/javasciprt-projectwebp.webp b/Portfolio/Image/javasciprt-projectwebp.webp
new file mode 100644
index 0000000..b8b813c
Binary files /dev/null and b/Portfolio/Image/javasciprt-projectwebp.webp differ
diff --git a/Portfolio/Image/nvidiaLandingPage.png b/Portfolio/Image/nvidiaLandingPage.png
new file mode 100644
index 0000000..d3e62c1
Binary files /dev/null and b/Portfolio/Image/nvidiaLandingPage.png differ
diff --git a/Portfolio/Image/payPalLandingPage.png b/Portfolio/Image/payPalLandingPage.png
new file mode 100644
index 0000000..fee474d
Binary files /dev/null and b/Portfolio/Image/payPalLandingPage.png differ
diff --git a/Portfolio/Image/project-png.jpg b/Portfolio/Image/project-png.jpg
new file mode 100644
index 0000000..7d63da5
Binary files /dev/null and b/Portfolio/Image/project-png.jpg differ
diff --git a/Portfolio/Image/realStateLandingPage.png b/Portfolio/Image/realStateLandingPage.png
new file mode 100644
index 0000000..fe19da0
Binary files /dev/null and b/Portfolio/Image/realStateLandingPage.png differ
diff --git a/Portfolio/Image/responsiveLandiingPage.png b/Portfolio/Image/responsiveLandiingPage.png
new file mode 100644
index 0000000..e02aaf2
Binary files /dev/null and b/Portfolio/Image/responsiveLandiingPage.png differ
diff --git a/Portfolio/Image/stopWatch.png b/Portfolio/Image/stopWatch.png
new file mode 100644
index 0000000..c1b0368
Binary files /dev/null and b/Portfolio/Image/stopWatch.png differ
diff --git a/Portfolio/Vector-1.svg b/Portfolio/Vector-1.svg
new file mode 100644
index 0000000..db14340
--- /dev/null
+++ b/Portfolio/Vector-1.svg
@@ -0,0 +1,3 @@
+<svg width="42" height="41" viewBox="0 0 42 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0001 0.166687C18.2642 0.166687 15.5551 0.705557 13.0275 1.75253C10.4999 2.7995 8.20324 4.33408 6.26869 6.26863C2.36168 10.1756 0.166748 15.4747 0.166748 21C0.166748 30.2084 6.14591 38.0209 14.4167 40.7917C15.4584 40.9584 15.7917 40.3125 15.7917 39.75V36.2292C10.0209 37.4792 8.79175 33.4375 8.79175 33.4375C7.83341 31.0209 6.47925 30.375 6.47925 30.375C4.58341 29.0834 6.62508 29.125 6.62508 29.125C8.70841 29.2709 9.81258 31.2709 9.81258 31.2709C11.6251 34.4375 14.6876 33.5 15.8751 33C16.0626 31.6459 16.6042 30.7292 17.1876 30.2084C12.5626 29.6875 7.70841 27.8959 7.70841 19.9584C7.70841 17.6459 8.50008 15.7917 9.85425 14.3125C9.64591 13.7917 8.91675 11.625 10.0626 8.81252C10.0626 8.81252 11.8126 8.25002 15.7917 10.9375C17.4376 10.4792 19.2292 10.25 21.0001 10.25C22.7709 10.25 24.5626 10.4792 26.2084 10.9375C30.1876 8.25002 31.9376 8.81252 31.9376 8.81252C33.0834 11.625 32.3542 13.7917 32.1459 14.3125C33.5001 15.7917 34.2917 17.6459 34.2917 19.9584C34.2917 27.9167 29.4167 29.6667 24.7709 30.1875C25.5209 30.8334 26.2084 32.1042 26.2084 34.0417V39.75C26.2084 40.3125 26.5417 40.9792 27.6042 40.7917C35.8751 38 41.8334 30.2084 41.8334 21C41.8334 18.2641 41.2945 15.5551 40.2476 13.0274C39.2006 10.4998 37.666 8.20318 35.7315 6.26863C33.7969 4.33408 31.5003 2.7995 28.9727 1.75253C26.445 0.705557 23.736 0.166687 21.0001 0.166687Z" fill="white"/>
+</svg>
diff --git a/Portfolio/Vector.svg b/Portfolio/Vector.svg
new file mode 100644
index 0000000..6f3cbde
--- /dev/null
+++ b/Portfolio/Vector.svg
@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.375 0.125C4.7174 0.125 3.12769 0.78348 1.95558 1.95558C0.78348 3.12769 0.125 4.7174 0.125 6.375V37.625C0.125 39.2826 0.78348 40.8723 1.95558 42.0444C3.12769 43.2165 4.7174 43.875 6.375 43.875H37.625C39.2826 43.875 40.8723 43.2165 42.0444 42.0444C43.2165 40.8723 43.875 39.2826 43.875 37.625V6.375C43.875 4.7174 43.2165 3.12769 42.0444 1.95558C40.8723 0.78348 39.2826 0.125 37.625 0.125H6.375ZM9.81875 13.5531C10.8092 13.5531 11.759 13.1597 12.4594 12.4594C13.1597 11.759 13.5531 10.8092 13.5531 9.81875C13.5531 8.82833 13.1597 7.87848 12.4594 7.17815C11.759 6.47782 10.8092 6.08438 9.81875 6.08438C8.82833 6.08438 7.87848 6.47782 7.17815 7.17815C6.47782 7.87848 6.08438 8.82833 6.08438 9.81875C6.08438 10.8092 6.47782 11.759 7.17815 12.4594C7.87848 13.1597 8.82833 13.5531 9.81875 13.5531ZM12.9438 37.0406V16.4813H6.69375V37.0406H12.9438ZM17.0937 16.4813H23.3438V19.2344C24.2656 17.7906 26.2906 15.8469 30.0563 15.8469C34.55 15.8469 36.9906 18.825 36.9906 24.4906C36.9906 24.7625 37.0156 26.0031 37.0156 26.0031V37.0375H30.7656V26.0062C30.7656 24.4906 30.4469 21.5125 27.0781 21.5125C23.7063 21.5125 23.4219 25.2563 23.3438 27.7063V37.0375H17.0937V16.4813Z" fill="white"/>
+</svg>
diff --git a/Portfolio/index.html b/Portfolio/index.html
new file mode 100644
index 0000000..f00e690
--- /dev/null
+++ b/Portfolio/index.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Porfolio</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="mouse"></div>
+    <div class="portfolio">
+        <div class="navigate">
+        <div class="portfolio-heading">
+        <h1>Goutam Marko</h1>
+        <h2>Front End Engineer</h2>
+        <p>"Programming isn't about what you know; it's about what you can figure out." - <span style="font-weight: bolder;">  Chris Pine</span></p>
+        </div>
+        <div class="nav-seciton">
+            <li><span></span>ABOUT</li>
+            <!-- <li><span></span>EXPERIANCE</li> -->
+            <li><span></span>PROJECT</li>
+        </div>
+        <div class="social-link">
+           <a href="https://github.com/Siddharthmarko" target="_blank"><li> <img src="./Vector-1.svg" alt=""></li></a>
+           <a href="https://www.linkedin.com/in/goutam-marko-671823193/" target="_blank"><li><img src="./Vector.svg" alt=""></li></a>
+        </div>
+    </div>
+
+    <!-- card  -->
+    <div class="right">
+        <div>
+            <p class="about">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem molestiae voluptatem maiores harum alias reiciendis, sed officia iusto exercitationem illo architecto assumenda, consequuntur dolorum ipsam excepturi? Iusto ipsa amet dolorem?
+            </p>
+        </div>
+        <div class="main-project">
+<a href="https://siddharthmarko.github.io/Javascript-Project/Stopwatch/index.html" target="_blank">
+    <div class="box">
+        <div class="project-img">
+            <img src="/Image/stopWatch.png" width="100%" alt="">
+        </div>
+
+        <div class="project-content">
+            <h3>Stop Watch
+                <i><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="22" viewBox="0 0 34 22"
+                        fill="none">
+                        <path d="M23.1429 1.46899L32.6667 10.9976L23.1429 20.5238M1.71428 10.9999H32.6667"
+                            stroke="white" stroke-width="2.38095" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg></i>
+            </h3>
+            <p>A web application that uses HTML, CSS, and JavaScript to display the elapsed time in hours, minutes, seconds, and
+            milliseconds.
+            </p>
+            <div class="project-tech">
+                <button>Html</button>
+                <button>Css</button>
+                <button>Javascript</button>
+            </div>
+        </div>
+    </div>
+</a>
+<a href="https://siddharthmarko.github.io/Javascript-Project/Calculator/index.html" target="_blank">
+    <div class="box">
+        <div class="project-img">
+            <img src="Image/calculator.png" width="100%" alt="">
+        </div>
+
+        <div class="project-content">
+            <h3>Calculator
+                <i><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="22" viewBox="0 0 34 22"
+                        fill="none">
+                        <path d="M23.1429 1.46899L32.6667 10.9976L23.1429 20.5238M1.71428 10.9999H32.6667"
+                            stroke="white" stroke-width="2.38095" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg></i>
+            </h3>
+
+            <p>A web application that uses HTML, CSS, and JavaScript to perform basic arithmetic operations.</p>
+
+            <div class="project-tech">
+                <button>Html</button>
+                <button>Css</button>
+                <button>Javascript</button>
+            </div>
+        </div>
+    </div>
+</a>
+<a href="https://siddharthmarko.github.io/Javascript-Project/FormValidation/index.html" target="_blank">
+    <div class="box">
+        <div class="project-img">
+            <img src="Image/FormValidation.png" width="100%" alt="">
+        </div>
+
+        <div class="project-content">
+            <h3>Sign up Form with validation
+                <i><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="22" viewBox="0 0 34 22"
+                        fill="none">
+                        <path d="M23.1429 1.46899L32.6667 10.9976L23.1429 20.5238M1.71428 10.9999H32.6667"
+                            stroke="white" stroke-width="2.38095" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg></i>
+            </h3>
+
+            <p>A web application that utilizes HTML, CSS, and JavaScript to create a sign-up form with validation to ensure user-entered information is accurate and complete. </p>
+
+            <div class="project-tech">
+                <button>Html</button>
+                <button>Css</button>
+                <button>Javascript</button>
+            </div>
+        </div>
+    </div>
+</a>
+        </div>
+        
+        <div class="second-project">
+            <a href="https://siddharthmarko.github.io/Javascript-Project/Analog%20clock/index.html" target="_blank"><div class="box">
+                <div class="project-img">
+                    <img src="Image/clock.png" width="100%" alt="">
+                </div>
+            
+                <div class="project-content">
+                    <h3>Real Time Clock
+                        <i><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="22" viewBox="0 0 34 22"
+                                fill="none">
+                                <path d="M23.1429 1.46899L32.6667 10.9976L23.1429 20.5238M1.71428 10.9999H32.6667" stroke="white"
+                                    stroke-width="2.38095" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg></i>
+                    </h3>
+            
+                    <p>Analog clocks tell time the old-fashioned way, while digital clocks tell time the new-fashioned way.</p>
+            
+                    <div class="project-tech">
+                        <button>Html</button>
+                        <button>Css</button>
+                        <button>JavaScript</button>
+                    </div>
+                </div>
+            </div></a>
+            <a href="https://siddharthmarko.github.io/Javascript-Project/Landing%20Pages/page3/Index.html" target="_blank">
+                <div class="box">
+                    <div class="project-img">
+                        <img src="Image/responsiveLandiingPage.png" width="100%" alt="">
+                    </div>
+            
+                    <div class="project-content">
+                        <h3>Responsive landing page
+                            <i><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="22" viewBox="0 0 34 22"
+                                    fill="none">
+                                    <path d="M23.1429 1.46899L32.6667 10.9976L23.1429 20.5238M1.71428 10.9999H32.6667"
+                                        stroke="white" stroke-width="2.38095" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg></i>
+                        </h3>
+            
+                        <p>A website that adapts its layout to different screen sizes and devices for an optimal user experience.
+                        </p>
+            
+                        <div class="project-tech">
+                            <button>Html</button>
+                            <button>Css</button>
+                            <button>JavaScript</button>
+                        </div>
+                    </div>
+                </div>
+            </a>
+            <a href="https://github.com/Siddharthmarko?tab=repositories" target="_blank"><div class="box">
+                <div class="project-img">
+                    <img src="Image/javasciprt-projectwebp.webp" width="100%" alt="">
+                </div>
+            
+                <div class="project-content">
+                    <h3>Javascirpt Project respo
+                        <i><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="22" viewBox="0 0 34 22"
+                                fill="none">
+                                <path d="M23.1429 1.46899L32.6667 10.9976L23.1429 20.5238M1.71428 10.9999H32.6667" stroke="white"
+                                    stroke-width="2.38095" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg></i>
+                    </h3>
+            
+                    <p>you can see more project in the respository</p>
+            
+                    <div class="project-tech">
+                        <button>Html</button>
+                        <button>Css</button>
+                        <!-- <button>JavaScript</button> -->
+                    </div>
+                </div>
+            </div>
+        </a>
+    </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Portfolio/script.js b/Portfolio/script.js
new file mode 100644
index 0000000..ba2eaeb
--- /dev/null
+++ b/Portfolio/script.js
@@ -0,0 +1,5 @@
+    const cursor = document.querySelector('.mouse');
+document.addEventListener('mousemove', (e) => {
+        cursor.style.left = (e.clientX - cursor.clientHeight / 2) + 'px';
+        cursor.style.top = (e.clientY - cursor.clientWidth / 2) + 'px';
+    })
\ No newline at end of file
diff --git a/Portfolio/style.css b/Portfolio/style.css
new file mode 100644
index 0000000..8d5b3d2
--- /dev/null
+++ b/Portfolio/style.css
@@ -0,0 +1,174 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Open Sans', sans-serif;
+}
+body {
+    box-sizing: border-box;
+    background-color: rgba(15, 23, 42);
+    padding: 40px 120px;
+    /* border: 1px solid white; */
+    max-height: 500px;
+}
+a {
+    text-decoration: none;
+}
+.right > div {
+    max-width: 560px;
+}
+.right > div:nth-of-type(1) {
+    margin-bottom: 60px;
+}
+.right {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+.right p {
+    color: #94a3b8;
+    line-height: 200%;
+}
+.box {
+    margin-bottom: 30px;
+}
+h3 {
+    font-size: 16px;
+}
+.project-content p {
+    line-height: 150%;
+    font-size: 14px;
+}
+.mouse {
+    z-index: -1;
+    position: fixed;
+    /* bottom: 0; */
+    height: 1000px;
+    width: 1000px;
+    border-radius: 100%;
+    background: radial-gradient(rgba(29, 79, 216, 0.125), transparent 60%);
+    /* border: 1px solid white; */
+}
+li {
+    list-style: none;
+    }
+    .portfolio {
+        /* padding-top: 80px; */
+    display: flex;
+    justify-content: center;
+    gap: 100px;
+    color: rgba(255, 255, 255, 0.9);
+    width: 100%;
+    height: 100%;
+    }
+    .navigate, 
+    .social-link, 
+    .nav-seciton,
+    .portfolio-heading {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+    .navigate h1 {
+        font-size: 48px;
+    }
+    .navigate h2 {
+        font-size: 20px;
+        margin-left: 10px;
+    }
+    .navigate p {
+        font-size: 18px;
+        color: #94a3b8;
+        margin-top: 18px;
+        line-height: 150%;
+    }
+    .navigate {
+        gap: 80px;
+        /* padding: 40px 0; */
+        position: sticky;
+        top: 90px;
+        justify-content: space-between;
+        max-width: 400px;
+        height: 100%;
+        /* border: 1px solid white; */
+    }
+    .right {
+        padding-top: 50px;
+    }
+    .social-link {
+        flex-direction: row;
+    }
+    .nav-seciton li:hover span { 
+        width: 80px;
+        transition: all 0.2s;
+    }
+    .nav-seciton li:hover { 
+        color: rgba(255, 255, 255, 0.9);
+    }
+    .nav-seciton li {
+        font-size: 12px;
+        letter-spacing: 2px;
+        color: #94a3b8;        
+        font-weight: bold;
+    }
+    .nav-seciton span{
+        display: inline-flex;
+        margin: 5px 16px;
+        height: 1px;
+        width: 32px;
+        background-color: white;
+    }
+    .social-link img{
+        width: 28px;
+    }
+/* box  */
+
+.box {
+    display: flex;
+    gap: 50px;
+    padding: 25px 10px;
+    left: 50%;
+    top: 50%;
+    /* transform: translate(-50%, -50%); */
+    width: 550px;
+    border-radius: 10px;
+    border-top: 2px solid rgb(97 110 147 / 19%);
+    /* border: 1px solid white; */
+}
+.box:hover {
+    background-color: rgb(97 110 147 / 10%);
+}
+.project-img {
+    max-width: 120px;
+}
+.project-content {
+    font-size: 16px;
+}
+.project-tech button{
+    padding: 5px 18px;
+    letter-spacing: 2px;
+    background: rgb(94 234 212 / 14%);
+    border: 0;
+    color: rgb(94, 234, 212);
+    font-weight: bolder;
+    border-radius: 20px;
+}
+.project-content h3 { 
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    color: rgba(255, 255, 255, 0.9);
+}
+.project-content p {
+    color: #a3a3a369;
+    font-weight: bold;
+    margin: 15px 0;
+}
+.box:hover h3 { 
+    gap: 15px;
+    color: rgba(94, 234, 213, 0.734);
+}
+.box:hover .project-img > img { 
+    border: 1px solid white;    
+}
diff --git a/index.html b/index.html
index 0352374..001c3a0 100644
--- a/index.html
+++ b/index.html
@@ -94,11 +94,10 @@
     <div class="container">
         <div class="floating-stack">
             <ol>
-                
                 <li> <a href="Stopwatch/index.html">
                         <dd>Js Stop Watch</dd>
                     </a></li>
-                <li> <a href="FormValidation/index.html"> 
+                <li> <a href="FormValidation/index.html">
                         <dd>SignUpForm</dd>
                     </a></li>
                 <li> <a href="backgroundColourChange/index.html">
@@ -115,7 +114,7 @@
                     </a></li>
                 <li> <a href="Landing Pages/Paypal/Home/index.html">
                         <dd>Paypal Clone</dd>
-                     </a></li>
+                    </a></li>
                 <li> <a href="Landing Pages/page1/index.html">
                         <dd>Figma Design to Code 1</dd>
                     </a></li>
@@ -128,9 +127,17 @@
                 <li> <a href="Landing Pages/page3/Index.html">
                         <dd>Figma Design to Code 3 (Responsive)</dd>
                     </a></li>
+                    <a href="/Portfolio/index.html"></a>
             </ol>
         </div>
     </div>
+    <script>
+        const currentUrl = window.location.href;
+            const baseUrl = currentUrl.substring(0, currentUrl.lastIndexOf("/"));
+            const relativeUrl = "/portfolio/index.html";
+            window.location.href = baseUrl + relativeUrl;
+
+    </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
