add portfolio and add scirpt to outer html file which redirect to thi…

…s portfolio
Siddharthmarko · Nov 24, 2023 · 0027e2c · 0027e2c
1 parent 8b93105
commit 0027e2c
Show file tree

Hide file tree

Showing 18 changed files with 392 additions and 6 deletions.
diff --git 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
diff --git a/Portfolio/Image/calculator.png b/Portfolio/Image/calculator.png
diff --git a/Portfolio/Image/clock.png b/Portfolio/Image/clock.png
diff --git a/Portfolio/Image/colorChange.png b/Portfolio/Image/colorChange.png
diff --git a/Portfolio/Image/javasciprt-projectwebp.webp b/Portfolio/Image/javasciprt-projectwebp.webp
diff --git a/Portfolio/Image/nvidiaLandingPage.png b/Portfolio/Image/nvidiaLandingPage.png
diff --git a/Portfolio/Image/payPalLandingPage.png b/Portfolio/Image/payPalLandingPage.png
diff --git a/Portfolio/Image/project-png.jpg b/Portfolio/Image/project-png.jpg
diff --git a/Portfolio/Image/realStateLandingPage.png b/Portfolio/Image/realStateLandingPage.png
diff --git a/Portfolio/Image/responsiveLandiingPage.png b/Portfolio/Image/responsiveLandiingPage.png
diff --git a/Portfolio/Image/stopWatch.png b/Portfolio/Image/stopWatch.png
diff --git a/Portfolio/Vector-1.svg b/Portfolio/Vector-1.svg
diff --git a/Portfolio/Vector.svg b/Portfolio/Vector.svg
diff --git a/Portfolio/index.html 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>
diff --git a/Portfolio/script.js 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';
+    })