First commit

NIRMAL1508 · Aug 13, 2023 · 4c6c834 · 4c6c834
commit 4c6c834
Show file tree

Hide file tree

Showing 23 changed files with 965 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app.js b/app.js
@@ -0,0 +1,25 @@
+const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
+const mobile_menu = document.querySelector('.header .nav-bar .nav-list ul');
+const menu_item = document.querySelectorAll('.header .nav-bar .nav-list ul li a');
+const header = document.querySelector('.header.container');
+
+hamburger.addEventListener('click', () => {
+	hamburger.classList.toggle('active');
+	mobile_menu.classList.toggle('active');
+});
+
+document.addEventListener('scroll', () => {
+	var scroll_position = window.scrollY;
+	if (scroll_position > 250) {
+		header.style.backgroundColor = '#29323c';
+	} else {
+		header.style.backgroundColor = 'transparent';
+	}
+});
+
+menu_item.forEach((item) => {
+	item.addEventListener('click', () => {
+		hamburger.classList.toggle('active');
+		mobile_menu.classList.toggle('active');
+	});
+});
diff --git a/img/20Z267_NIRMAL_M.pdf b/img/20Z267_NIRMAL_M.pdf
diff --git a/img/address.png b/img/address.png
diff --git a/img/background.png b/img/background.png
diff --git a/img/car.png b/img/car.png
diff --git a/img/db.png b/img/db.png
diff --git a/img/email.png b/img/email.png
diff --git a/img/github.png b/img/github.png
diff --git a/img/hackerrank.png b/img/hackerrank.png
diff --git a/img/img-1.png b/img/img-1.png
diff --git a/img/img-2.png b/img/img-2.png
diff --git a/img/inventory.png b/img/inventory.png
diff --git a/img/kaggle.png b/img/kaggle.png
diff --git a/img/linkedin.png b/img/linkedin.png
diff --git a/img/number.png b/img/number.png
diff --git a/img/os.png b/img/os.png
diff --git a/img/parkinson.png b/img/parkinson.png
diff --git a/img/phone.png b/img/phone.png
diff --git a/img/pl.png b/img/pl.png
diff --git a/img/security.png b/img/security.png
diff --git a/index.html b/index.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <title>My Website</title>
+</head>
+
+<body>
+  <!-- Header -->
+  <section id="header">
+    <div class="header container">
+      <div class="nav-bar">
+        <div class="brand">
+          <a href="#hero">
+            <h1><span>NI</span> <span></span>Tech</h1>
+          </a>
+        </div>
+        <div class="nav-list">
+          <div class="hamburger">
+            <div class="bar"></div>
+          </div>
+          <ul>
+            <li><a href="#hero" data-after="Home">Home</a></li>
+            <li><a href="#skills" data-after="Skills">skills</a></li>
+            <li><a href="#projects" data-after="Projects">Projects</a></li>
+            <li><a href="#about" data-after="About">About</a></li>
+            <li><a href="#contact" data-after="Contact">Contact</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- End Header -->
+
+
+  <!-- Hero Section  -->
+  <section id="hero">
+    <div class="hero container">
+      <div>
+        <h1>Hello, <span></span></h1>
+        <h1>My Name is <span></span></h1>
+        <h1>Nirmal M <span></span></h1>
+        <a href="#projects" type="button" class="cta">Portfolio</a>
+      </div>
+    </div>
+  </section>
+  <!-- End Hero Section  -->
+
+  <!-- skill Section -->
+  <section id="skills">
+    <div class="skills container">
+      <div class="skill-top">
+        <h1 class="section-title"><span>S</span>kills</h1>
+        <p></p>
+      </div>
+      <div class="skill-bottom">
+        <div class="skill-item">
+          <div class="icon"><img src="img/pl.png" /></div>
+          <h2>Programming Languages</h2>
+          <p>* C</p>
+          <p>* Python</p>
+          <p>* C++</p>
+        </div>
+        <div class="skill-item">
+          <div class="icon"><img src="img/db.png" /></div>
+          <h2>Database Known</h2>
+          <p>* MySQL</p>
+          <p>* MongoDB</p>
+          <p>* SQLite</p>
+        </div>
+        <div class="skill-item">
+          <div class="icon"><img src="img/os.png" /></div>
+          <h2>Operating System</h2>
+          <p>* Windows</p>
+          <p>* Linux</p>
+          <p>* Mac</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- End skill Section -->
+
+  <!-- Projects Section -->
+  <section id="projects">
+    <div class="projects container">
+      <div class="projects-header">
+        <h1 class="section-title">Recent <span>Projects</span></h1>
+      </div>
+      <div class="all-projects">
+        <div class="project-item">
+          <div class="project-info">
+            <h1>Effective Prediction of Parkinson's Disease</h1>
+            <h2>Python and its Libraries</h2>
+            <p>The optimized Ensemble ML algorithm achieved an impressive accuracy of 94.87%, surpassing traditional models which
+              reached a maximum accuracy of 92.8%</p>
+          </div>
+          <div class="project-img">
+            <img src="img/parkinson.png" alt="img">
+          </div>
+        </div>
+        <div class="project-item">
+          <div class="project-info">
+            <h1>Car Rental System</h1>
+            <h2>MERN Stack</h2>
+            <p>The website enables user registration and facilitates car rentals for specified periods. Admin features allow management of
+              users and rentals (creation, deletion, editing). Securely stored in a database</p>
+          </div>
+          <div class="project-img">
+            <img src="img/car.png" alt="img">
+          </div>
+        </div>
+        <div class="project-item">
+          <div class="project-info">
+            <h1>Number Plate Detection System</h1>
+            <h2>Embedded C and Python</h2>
+            <p>An image processing and pattern recognition system successfully extracts alphanumeric characters from license plates,
+              allowing them to be printed effectively</p>
+          </div>
+          <div class="project-img">
+            <img src="img/number.png" alt="img">
+          </div>
+        </div>
+        <div class="project-item">
+          <div class="project-info">
+            <h1>Inventory Management System </h1>
+            <h2>Java and MySQL</h2>
+            <p>The inventory management system enables users to add, delete, and update products, manage stock, handle customer
+              details and dues, and generate order receipts. User authentication ensures security</p>
+          </div>
+          <div class="project-img">
+            <img src="img/inventory.png" alt="img">
+          </div>
+        </div>
+        <div class="project-item">
+          <div class="project-info">
+            <h1>Security Package</h1>
+            <h2>Python and Streamlit</h2>
+            <p>The security package includes 7 encryption ciphers, image and audio encryption, steganography, background removal, OTP
+              generation, and authentication functionalities for comprehensive protection</p>
+          </div>
+          <div class="project-img">
+            <img src="img/security.png" alt="img">
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- End Projects Section -->
+
+  <!-- About Section -->
+  <section id="about">
+    <div class="about container">
+      <div class="col-left">
+        <div class="about-img">
+          <img src="./img/img-2.png" alt="img">
+        </div>
+      </div>
+      <div class="col-right">
+        <h1 class="section-title">About <span>me</span></h1>
+        <h2>Enthusiastic Developer & Programmer</h2>
+        <p>Passionate and dedicated Computer Science Engineering student with a strong foundation 
+          in programming and development. Eager to apply my technical expertise and problem-solving skills 
+          to contribute to innovative software solutions. I thrive in collaborative environments and enjoy 
+          tackling complex challenges with a proactive and detail-oriented approach. </p>
+        <a href="img/20Z267_NIRMAL_M.pdf" class="cta">Download Resume</a>
+      </div>
+    </div>
+  </section>
+  <!-- End About Section -->
+
+  <!-- Contact Section -->
+  <section id="contact">
+    <div class="contact container">
+      <div>
+        <h1 class="section-title">Contact <span>info</span></h1>
+      </div>
+      <div class="contact-items">
+        <div class="contact-item">
+          <div class="icon"><img src="img/phone.png" /></div>
+          <div class="contact-info">
+            <h1>Phone</h1>
+            <h2>+91 9361404134</h2>
+            <h2>+91 9894957736</h2>
+          </div>
+        </div>
+        <div class="contact-item">
+          <div class="icon"><img src="img/email.png" /></div>
+          <div class="contact-info">
+            <h1>Email</h1>
+            <h2>muthukumaresannirmal@gmail.com</h2>
+            <h2>nirmal15082002@gmail.com</h2>
+          </div>
+        </div>
+        <div class="contact-item">
+          <div class="icon"><img src="img/address.png" /></div>
+          <div class="contact-info">
+            <h1>Address</h1>
+            <h2>Udumalpet, Tamilnadu, India</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- End Contact Section -->
+
+  <!-- Footer -->
+  <section id="footer">
+    <div class="footer container">
+      <div class="brand">
+        <h1><span>NI</span> <span></span>TECH</h1>
+      </div>
+      <h2>Way to Solutions</h2>
+      <div class="social-icon">
+        <div class="social-item">
+          <a href="https://www.linkedin.com/in/nirmal1508" target="_blank"><img src="img/linkedin.png" /></a>
+        </div>
+        <div class="social-item">
+          <a href="https://github.com/NIRMAL1508" target="_blank"><img src="img/github.png" /></a>
+        </div>
+        <div class="social-item">
+          <a target=”_blank” href="https://www.kaggle.com/nirmal15082002" target="_blank"><img src="img/kaggle.png" /></a>
+        </div>
+        <div class="social-item">
+          <a href="https://www.hackerrank.com/NIRMAL1508" target="_blank"><img src="img/hackerrank.png" /></a>
+        </div>
+      </div>
+      <p>Copyright © 2023 NI TECH. All rights reserved</p>
+    </div>
+  </section>
+  <!-- End Footer -->
+  <script src="./app.js"></script>
+</body>
+
+</html>