Add files via upload

Nivesh2003 · Nov 30, 2023 · 06da9c8 · 06da9c8
1 parent 9bfe5c2
commit 06da9c8
Show file tree

Hide file tree

Showing 3 changed files with 583 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nivesh - Portfolio</title>
+    <link rel="stylesheet" href="./style.css"/>
+    <script defer src="./script.js"></script>
+  </head>
+  <body>
+    <!-- Navigation Bar -->
+
+      <div id="home">
+        <div class="profile_name">
+          Nivesh Chaudhary
+          <div class="contact_info">
+            <img src="/WEB/portfolio/projimages/pngwing.com.png"height="23px"width="20px"  alt="https://icons8.com/icon/124377/circled-envelope"/>
+          <a href="https://www.instagram.com/nivesh_3009/?hl=en" target="_blank">nivesh_3009</a>
+        </div>
+        <div style="clear:both;"></div>
+        <div class="contact_info">
+          <img src="/WEB/portfolio/projimages/kindpng_6835434.png"height="23px"width="20px" alt="https://icons8.com/icon/124377/circled-envelope"/>
+          <a href="https://www.linkedin.com/in/nivesh-chaudhary-8b1b69295" target="_blank">Nivesh Chaudhary</a>
+        </div>
+        </div>
+        <nav> <!--Right top corner nav-->
+        <div class="topdiv">
+          <a class="topmenu" href="#about-me">About Me</a>
+          <a class="topmenu" href="#skills">Skills</a>
+          <a class="topmenu" href="#projects">Projects</a>
+          <a class="topmenu" href="#recommendations">Recommendations</a>
+
+
+
+        </div>
+      </div>    
+    </nav>
+
+    <!-- About Me -->
+    <section id="about-me" class="container">
+      <div>
+        <img src="projimages/profilepic.png" class="profile_image"/>
+      </div>
+
+      <div>
+          <h1>
+            Hi, I'm Nivesh! <img src="/WEB/portfolio/projimages/greeting.gif" width="60px"/>
+          </h1>
+          <p>I?</p> <p>I'm</p> <p>just</p> <p>a</p> <p>student</p> <p>navigating</p> <p>the</p> <p>vast</p> <p>universe</p> <p>of</p> <p>computer</p> <p>science.</p>
+<p>Always</p> <p>hungry</p> <p>for</p> <p>new</p> <p>skills</p> <p>and</p> <p>tech</p> <p>knowledge,</p>
+<p>I'm</p> <p>currently</p> <p>tinkering</p> <p>with</p> <p>web</p> <p>development</p> <p>tools</p> <p>to</p> <p>understand</p> <p>the</p> <p>basics.</p>
+<p>This</p> <p>page</p> <p>you're</p> <p>on?</p> <p>It's</p> <p>my</p> <p>humble</p> <p>beginner's</p> <p>project,</p> <p>a</p> <p>little</p> <p>corner</p> <p>of</p> <p>the</p> <p>web</p> <p>where</p> <p>I'm</p> <p>figuring</p> <p>things</p> <p>out.</p>
+<p>To</p> <p>kickstart</p> <p>my</p> <p>journey</p> <p>into</p> <p>web</p> <p>development,</p> <p>I've</p> <p>built</p> <p>this</p> <p>page</p> <p>using</p> <p>HTML,</p> <p>CSS,</p> <p>and</p> <p>JavaScript.</p>
+<p>It's</p> <p>a</p> <p>hands-on</p> <p>approach,</p> <p>allowing</p> <p>me</p> <p>to</p> <p>grasp</p> <p>the</p> <p>fundamentals</p> <p>of</p> <p>creating</p> <p>a</p> <p>digital</p> <p>presence.</p> <p>I'm</p> <p>open</p> <p>to</p> <p>suggestions</p> <p>and</p> <p>eager</p> <p>to</p> <p>learn</p> <p>better</p> <p>practices.</p>
+<p>Feel</p> <p>free</p> <p>to</p> <p>share</p> <p>your</p> <p>ideas</p> <p>or</p> <p>recommend</p> <p>improvements—I'm</p> <p>here</p> <p>to</p> <p>absorb</p> <p>all</p> <p>the</p> <p>wisdom</p> <p>the</p> <p>web</p> <p>development</p> <p>community</p> <p>has</p> <p>to</p> <p>offer.</p>
+
+
+
+
+      </div>
+    </section>
+
+    <!-- Skills -->
+    <section id="skills">
+      <h2>Skills</h2>
+      <div style="clear:both;"></div>
+
+      <div class="all_skills">
+        <div class="skill">
+          <img src="projimages/html5.png"/>
+          <h6>HTML</h6>
+          <p>Basics</p>
+        </div> 
+
+        <div class="skill">
+          <img src="projimages/CSS3.png"/>
+          <h6>CSS</h6>
+          <p>Basics</p>
+        </div>   
+
+        <div class="skill">
+          <img src="projimages/js.jpeg"/>
+          <h6>JavaScript</h6>
+          <p>Learning</p>
+        </div>  
+
+        <div class="skill">
+          <img src="projimages/react.png"/>
+          <h6>React</h6>
+          <p>Learning</p>
+        </div>  
+
+        <div class="skill">
+          <img src="projimages/java.png"/>
+          <h6>Java</h6>
+          <p>Basics</p>
+        </div>  
+
+        <!-- Add more skills here -->
+      </div>
+    </section>
+
+    <!-- Projects -->
+    <section class="projects" id="projects">
+      <h2>
+        Projects
+      </h2>
+      <div style="clear:both;"></div>
+
+        <div id="projects-container" class="projects-container">
+          <div class="project-card">
+            <h3>Basic Calculator Website</h3>
+            <ul>
+              <li>Built a basic web Calculator that performs operations like addition , subtraction , multiplication and division.</li>
+            </ul>
+          </div>
+          <hr>
+          <div class="project-card">
+            <h3>Online store page</h3>
+            <ul>
+              <li>Developed a attractive online store homepage using HTML and CSS</li>
+            </ul>
+          </div>
+          <hr>
+          <div class="project-card">
+            <h3>Unit Convertor</h3>
+            <ul>
+              <li>Developed a single page simple unit convertor which performs conversions of some common units. Used HTML , CSS and JavaScript.</li>
+            </ul>
+          </div>
+    </div>
+    </section>
+    <div style="clear:both;"></div>
+
+
+    <!-- Comments -->
+    <section id="comments">
+      <h2>Comments</h2>
+      <div style="clear:both;"></div>
+      <div class="all_comments" id="all_comments">
+        <div class="comment">
+          <span>&#8220;</span>
+          Working with Nivesh was an absolute game-changer for our team. 
+          Their dedication to learning new technologies and their ability to grasp complex concepts impressed everyone. 
+          He brings a fresh perspective and a can-do attitude to any project.
+
+          <span>&#8221;</span>
+        </div>
+        <div class="comment">
+          <span>&#8220;</span>
+          I had the pleasure of watching Nivesh tackle a web development project from scratch, and I must say, I was thoroughly impressed. 
+          Their ability to troubleshoot issues and find creative solutions is unparalleled. 
+          <span>&#8221;</span>
+        </div>
+        <div class="comment">
+          <span>&#8220;</span>
+          It's not often you come across someone as dedicated and enthusiastic as Nivesh.
+           During our collaboration on a recent coding challenge, I was struck by their tenacity and problem-solving skills.
+          <span>&#8221;</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Comment Form -->
+    <section id="contact">
+      <div class="flex_center">
+        <fieldset>
+          <legend class="introduction">Leave a Comment</legend>          
+          <input type="text" placeholder="Name (Optional)"> <br/>
+          <textarea id="new_comment" cols="500" rows="10" placeholder="Message"></textarea>
+          <div class="flex_center">
+            <button id="recommend_btn" onClick="addComment()">Submit</button>
+          </div>
+        </fieldset>
+      </div>
+    </section>
+
+    <div class="iconbutton">
+      <a href="#home">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" width="63px">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </a>
+    </div>
+
+    <div class="popup" id="popup" class="flex_center">
+      <img src="/WEB/portfolio/projimages/thanx.png" height="100px" width="120px"/>
+      <h3>Thanks for testing this out!!</h3>
+      <button onclick="showPopup(false)">Ok</button>
+    </div>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,32 @@
+function addComment() {
+  // Get the message of the new recommendation
+  let comment = document.getElementById("new_comment");
+  //  Display a pop-up
+  if (comment.value != null && comment.value.trim() != "") {
+    console.log("New comment added");
+    showPopup(true);
+
+
+
+    // Create a new 'recommendation' element 
+    var element = document.createElement("div");
+    element.setAttribute("class","comment");
+    element.innerHTML = "\<span\>&#8220;\</span\>" + comment.value + "\<span\>&#8221;\</span\>";
+
+    document.getElementById("all_comments").appendChild(element); 
+
+
+    comment.value = "";
+  }
+}
+
+function showPopup(bool) {
+  if (bool) {
+    document.getElementById('popup').style.visibility = 'visible'
+  } else {
+    document.getElementById('popup').style.visibility = 'hidden'
+  }
+}
+var paragraph = document.getElementById('hover-paragraph');
+
+// Add event listeners for mouseover and mouseout