first commit

JavaScript/skills.js

@@ -0,0 +1,152 @@
+// Sample initial data
+const skillsData = [
+    {
+        category: 'Programming Languages',
+        skills: [
+            { name: 'Java', level: 85 },
+            { name: 'JavaScript', level: 80 },
+            { name: 'HTML', level: 90 },
+            { name: 'CSS', level: 85 },
+            { name: 'Kotlin', level: 85 }
+        ]
+    },
+  {
+      category: 'JavaScript Libraries',
+      skills: [
+          { name: 'React.Js', level: 85 },
+          { name: 'Axios', level: 80 }
+      ]
+  },
+  {
+    category: 'Java Libraries',
+    skills: [
+        { name: 'Spring Boot', level: 90 },
+        { name: 'Spring Security', level: 85 },
+        { name: 'Spring JPA', level: 90 }
+    ]
+},
+{
+    category: 'Kotlin Libraries',
+    skills: [
+        { name: 'Jetpack Compose', level: 90 },
+        { name: 'MVVM', level: 85 },
+        { name: 'Navigation', level: 90 },
+        { name: 'Retrofit', level: 60 },
+    ]
+},
+
+{
+    category: 'Databases',
+    skills: [
+        { name: 'MySQL', level: 90 },
+        { name: 'MongoDB Atlas', level: 85 }
+    ]
+},
+  {
+      category: 'Language',
+      skills: [
+          { name: 'Hindi', level: 90 },
+          { name: 'English', level: 85 },
+      ]
+  }
+];
+
+function renderSkills() {
+  const skillsContainer = document.getElementById('skills-container');
+  skillsContainer.innerHTML = ''; 
+
+  skillsData.forEach(category => {
+      const categoryDiv = document.createElement('div');
+      categoryDiv.className = 'skill-category';
+
+      const categoryHeading = document.createElement('h2');
+      categoryHeading.textContent = category.category;
+      categoryDiv.appendChild(categoryHeading);
+
+      const skillsList = document.createElement('div');
+      skillsList.className = 'skill-list';
+
+      category.skills.forEach(skill => {
+          const skillInfo = document.createElement('div');
+          skillInfo.className = 'skill-info';
+
+          const skillItem = document.createElement('p');
+          skillItem.textContent = skill.name;
+
+          const skillPercentage = document.createElement('p');
+          skillPercentage.textContent = skill.level + "%";
+
+          skillInfo.appendChild(skillItem);
+          skillInfo.appendChild(skillPercentage);
+
+          const progressBar = document.createElement('div');
+          progressBar.className = 'progress-bar';
+
+          const progressFill = document.createElement('div');
+          progressFill.className = 'progress-fill';
+          progressFill.style.width = `${skill.level}%`;
+          progressBar.appendChild(progressFill);
+
+          skillsList.appendChild(skillInfo);
+          skillsList.appendChild(progressBar);
+      });
+
+      categoryDiv.appendChild(skillsList);
+      skillsContainer.appendChild(categoryDiv);
+  });
+}
+
+renderSkills();
+
+document.getElementById('addSkillBtn').addEventListener('click', function () {
+  document.getElementById('popup').style.display = 'flex';
+});
+
+// Cancel Button Event
+document.getElementById('cancel').addEventListener('click', function () {
+  document.getElementById('popup').style.display = 'none';
+});
+
+// Form Submission Event
+document.getElementById('skillForm').addEventListener('submit', function (event) {
+  event.preventDefault(); // Prevent form from submitting the traditional way
+
+  const domain = document.getElementById('domain-input').value.trim();
+  const newSkills = [];
+  var skillAccuracyCheck = false;
+  for (let i = 1; i <= 5; i++) {
+      const skillName = document.getElementById(`skill${i}`).value.trim();
+      const skillLevel = document.getElementById(`accuracy${i}`).value.trim();
+
+      if (skillName && skillLevel) {
+          newSkills.push({ name: skillName, level: parseInt(skillLevel) });
+      }
+      else if((skillName && !skillLevel) || (!skillName && skillLevel)){
+       skillAccuracyCheck = true;
+      }
+  }
+  if(skillAccuracyCheck){
+    alert("Either Skill Name or Skill Percentage Missing");
+  }
+  else{
+    if (domain && newSkills.length > 0) {
+      const existingCategory = skillsData.find(category => category.category.toLowerCase() === domain.toLowerCase());
+      if (existingCategory) {
+          existingCategory.skills = existingCategory.skills.concat(newSkills);
+      } else {
+          // Add new category with skills
+          skillsData.push({ category: domain, skills: newSkills });
+      }
+
+      renderSkills();
+      document.getElementById('popup').style.display = 'none'; // Close popup
+      document.getElementById('skillForm').reset(); // Reset the form
+  } else {
+      alert('Please fill in all required fields');
+  }
+
+  }
+
+
+});
+

Note.txt

@@ -0,0 +1 @@
+This site is Responsive for Ipad and IphoneX only

contact.html

@@ -0,0 +1,231 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dev Singhal</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/contact.css">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+
+<body>
+
+    <!-- Header Section -->
+    <header>
+        <nav>
+            <ul id="navbar" >
+                <li><a href="index.html">Home</a></li>
+                <li><a href="skills.html">Skills</a></li>
+                <li><a href="#">Education</a></li>
+                <li><a href="#">Projects</a></li>
+                <li><a href="contact.html" class="active">Contact</a></li>
+                <a href="#" id="close"><i class="far fa-times"></i></a>
+            </ul>
+        </nav>
+        <div id="mobile">
+            <i id="bar" class="fas fa-outdent"></i>
+        </div>
+
+    </header>
+
+    <section id="contact-details" class="section-p1">
+        <div class="details">
+            <span>GET IN TOUCH</span>
+            <h2>Visit Or Contact me today</h2>
+            <div>
+                <li>
+                    <i class="fal fa-map"></i>
+                    <p>35-c/4, Janki Flats, Bareilly, Uttar Pradesh 243001</p>
+                </li>
+
+                <li>
+                    <i class="far fa-envelope"></i>
+                    <p>[email protected]</p>
+                </li>
+
+                <li>
+                    <i class="fas fa-phone-alt"></i>
+                    <p>9927906655</p>
+                </li>
+
+                <li>
+                    <i class="far fa-clock"></i>
+                    <p>Anytime</p>
+                </li>
+            </div>
+        </div>
+
+        <div class="map">
+            <iframe
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3511.264791545477!2d79.4210688!3d28.3508431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39a000d460dde1fd%3A0x67a07f0508b44bd!2sJanki%20Flats!5e0!3m2!1sen!2sin!4v1723983688624!5m2!1sen!2sin"
+                    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
+                    referrerpolicy="no-referrer-when-downgrade"></iframe>
+        </div>
+    </section>
+
+
+    <div class="contact-section" id="contact-section">
+        <div class="form-container">
+            <h2>Leave ME Your Info</h2>
+            <form>
+                <label for="name">Your Full Name (Required)</label>
+                <input type="text" id="name" name="name" >
+
+                <label for="email">Your Email (Required)</label>
+                <input type="text" id="email" name="email">
+
+                <label for="subject">Subject</label>
+                <input type="text" id="subject" name="subject">
+
+                <label for="message">Your Message</label>
+                <textarea id="message" name="message" cols="20" rows="8"></textarea>
+
+                <button class="info-button" type="submit" onclick="validate()">SEND MESSAGE</button>
+            </form>
+        </div>
+    </div>
+
+
+
+      <!-- Footer Section -->
+      <footer>
+        <div class="footer-container">
+            <div class="footer-content">
+                    <div class="quick-links">
+                        <h4>Quick Links</h4>
+                        <ul>
+                            <li><a href="index.html">Home</a></li>
+                            <li><a href="skills.html">Skills</a></li>
+                            <li><a href="#">Education</a></li>
+                            <li><a href="#">Projects</a></li>
+                            <li><a href="contact.html">Contact</a></li>
+                        </ul>
+                    </div>
+                    <div class="portfolio-links">
+                        <h4>Portfolio</h4>
+                        <ul>
+                            <li><a href="#">Frontend Development</a></li>
+                            <li><a href="#">Backend Development</a></li>
+                            <li><a href="#">Website Design</a></li>
+                            <li><a href="#">Android Development</a></li>
+                            <li><a href="#">Problem Solving & DSA</a></li>
+                        </ul>
+                    </div>
+                    <div class="connect">
+                        <h4>Connect</h4>
+                        <ul>
+                            <a><li><img src="Images/connect/LinkedIn.png" alt=""></li></a>
+                            <a><li><img src="Images/connect/Instagram.png" alt=""></li></a>
+                            <a><li><img src="Images/connect/Facebook.png" alt=""></li></a>
+                        </ul>
+                    </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2024 Copyright, All Right Reserved</p>
+            </div>
+        </div>
+    </footer>
+
+
+    <script type="text/javascript">
+        $(document).ready(function(){
+             $('.owl-carousel').owlCarousel({
+                 loop: true,
+                 margin: 20,
+                 stagePadding: 200,
+                 dots: true,
+                 responsive: {
+                     0: {
+                         items: 1.3,
+                         stagePadding : 5,
+                         margin: 40
+                     },
+                     600: {
+                         items: 1.3
+                     },
+                     800: {
+                         items: 1
+                     },
+                     1000: {
+                         items: 3,
+                         margin : 15
+                     }
+                 }
+             });
+         });
+         const name = document.getElementById('name');
+         const email = document.getElementById('email');
+         const subject = document.getElementById('subject');
+         const message = document.getElementById('message');
+
+         const validate = () => {
+             var nameCheck = false;
+             var emailCheck = false;
+             if(name.value.trim() == ""){
+           nameCheck =true;
+         }
+         if(email.value.trim() == ""){
+             emailCheck = true;
+         }
+       if(email && nameCheck){
+         event.preventDefault();
+         alert("Fill all the required fields");
+       }
+       else if(!nameCheck && emailCheck){
+         event.preventDefault();
+         alert("Name Required");
+       }
+       else if(nameCheck && !emailCheck){
+         event.preventDefault();
+         alert("Email Required");
+       }
+         else{
+             event.preventDefault();
+             console.log(`
+                Full Name : ${name.value}
+                Email : ${email.value}
+                Subject : ${subject.value}
+                Message : ${message.value}
+                `)
+
+                alert("Information Successfully Submitted!");
+         }
+         }
+
+ const bar = document.getElementById('bar');
+ const nav = document.getElementById('navbar');
+ const close = document.getElementById('close');
+
+ if(bar){
+     bar.addEventListener('click',
+         () =>
+         {
+             nav.classList.add('active');
+         }
+     )
+ }
+
+ if(close){
+     close.addEventListener('click',
+         () =>
+         {
+             nav.classList.remove('active');
+         }
+     )
+ }
+
+
+ </script>
+
+
+</body>
+
+</html>