first commit

README.md

@@ -0,0 +1 @@
+# PortFolio

app.js

@@ -0,0 +1,45 @@
+const sections = document.querySelectorAll('.section');
+const sectBtns = document.querySelectorAll('.controlls');
+const sectBtn = document.querySelectorAll('.control');
+const allSections = document.querySelector('.main-content');
+
+
+function PageTransitions(){
+    //Button click active class
+    for(let i = 0; i < sectBtn.length; i++){
+        sectBtn[i].addEventListener('click', function(){
+            let currentBtn = document.querySelectorAll('.active-btn');
+            currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
+            this.className += ' active-btn';
+        })
+    }
+
+    //Sctions Active 
+    allSections.addEventListener('click', (e) =>{
+        const id = e.target.dataset.id;
+        if(id){
+            //remove selected from the other btns
+            sectBtns.forEach((btn) =>{
+                btn.classList.remove('active')
+            })
+            e.target.classList.add('active')
+
+            //hide other sections
+            sections.forEach((section)=>{
+                section.classList.remove('active')
+            })
+
+            const element = document.getElementById(id);
+            element.classList.add('active');
+        }
+    })
+
+    //Toggle theme
+    const themeBtn = document.querySelector('.theme-btn');
+    themeBtn.addEventListener('click',() =>{
+        let element = document.body;
+        element.classList.toggle('light-mode')
+    })
+}
+
+PageTransitions();

files/WExp.json

@@ -0,0 +1,7 @@
+[
+    {
+      "title": "Python Developer Intern",
+      "time": "2023(Sep) - Present",
+      "company": "Alfido Tech",
+      "description": "I have been given the task by Alfdo Tech. There is a total of 3 tasks I need to do every week and submit my responses daily in the video call meeting"
+    } ]

files/certificates.json

@@ -0,0 +1,33 @@
+[
+    {
+      "Title": "Software Engineering Virtual Experience - JP Morgan",
+      "link": "https://drive.google.com/file/d/1DkVc9Ha30j6Oyn76oRceHsAw9LgAqd8a/view?usp=drive_link",
+      "Img_src": "assets/certificate_img/Forage Virtual Internship.png",
+      "certificatedId": "Q2Z4fmuqhq5TABTLA "
+    },
+    {
+        "Title": "SQL Basic Certification - HackerRank",
+        "link": "https://drive.google.com/file/d/1is-OwxL8v4u-dpphn1rmClE1e4StHBlO/view?usp=drive_link",
+        "Img_src": "assets/certificate_img/HackerRank SQL Certificate.png",
+        "certificatedId": "588CAC649906"
+      },
+      {
+        "Title": "Official English Certification - EF SET",
+        "link": "https://www.efset.org/cert/b98LEK",
+        "Img_src": "assets/certificate_img/EF SET English Proficiency.png",
+        "certificatedId": "cert/b98LEK"
+      },
+      {
+        "Title": "Python - Udemy",
+        "link": "https://www.udemy.com/certificate/UC-ea5d264c-9599-4360-8582-85debb72a524/",
+        "Img_src": "assets/certificate_img/Python Certificate.png",
+        "certificatedId": "0004"
+      },
+      {
+        "Title": "Cloud Computing - NPTEL",
+        "link": "https://drive.google.com/file/d/1prnadGEeK0uwrFlhqiczDlfAf4nEzofP/view?usp=sharing",
+        "Img_src": "assets/certificate_img/NPTEL Cloud Computing .jpeg",
+        "certificatedId": "2384382NH0"
+      }
+      ]
+

files/project.json

@@ -0,0 +1,30 @@
+[
+    {
+      "Title": "Hire and Join Website",
+      "link": "https://github.com/IAmSufiyanKhan/Hirejoinweb",
+      "Time": "2023(Aug) - 2023(Sep)",
+      "description": "This website provides end to end human resource management to organization and help them address their critical talent needs by providing comprehensive workforce management form recruitment process.",
+      "img": "assets/projects/Hire and Join Website.png"
+    },
+    {
+        "Title": "FacerecognitionGUIApp",
+        "link": "https://github.com/IAmSufiyanKhan/FacerecognitionGUIApp",
+        "Time": "2023(Feb) - 2023(Apr)",
+        "description": "The app was built using OpenCV libraries and involved analyzing pixel data in real- time .",
+        "img": "assets/projects/FacerecognitionGUIApp.png"
+      },
+    {
+      "Title": "Enterprise_BOT API",
+      "link": "https://github.com/IAmSufiyanKhan/Enterprise_BOT",
+      "Time": "2022(Dec) - 2023(Jan)",
+      "description": "A simple script to post a random Wikipedia article along with the summary to a telegram group using node.js",
+      "img": "assets/projects/Enterprise_BOT API.png"
+    },
+      {
+        "Title": "Student-performance-Detection",
+        "link": "https://github.com/IAmSufiyanKhan/Student-performance-Detection",
+        "Time": "2022(Jun) - 2022(July)",
+        "description": "This is a simple machine learning project using classifiers for predicting factors which affect student grades, using data from CSV file.",
+        "img": "assets/projects/Student-performance-Detection.png"
+      }
+  ]

files/skills.json

@@ -0,0 +1,18 @@
+{
+    "C++": 65,
+    "python":80,
+    "java":70,
+    "HTML":75, 
+    "CSS":75, 
+    "JavaScript":40,
+    "Flask":60,
+    "Django":60, 
+    "Bootstrap":60,
+    "TensorFlow":70, 
+    "Scikit-learn":65, 
+    "NumPy":85, 
+    "Pandas":85, 
+    "Matplotlib":50, 
+    "MySQL":70
+
+}

index.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sufiyan Ahmad Khan</title>
+    <link rel="icon" href="assets/portfolio-512.webp" type="image/x-icon" />
+    <link rel="stylesheet" href="styles/styles.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+      integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="main-content">
+    <header class="section sec1 header active" id="home">
+      <div class="header-content">
+        <div class="left-header">
+          <div class="h-shape"></div>
+          <!-- <div class="image">
+                    <img src="img/hero.png" alt="">
+                </div> -->
+        </div>
+        <div class="right-header">
+          <h1 class="name">Hi, I'm <span>Sufiyan Ahmad Khan.</span></h1>
+          <p>
+
+            I'm Computer Science Engineering Graduate from Jamia
+            Hamdard University. I specialize in Software development.
+          </p>
+          <div class="btn-con">
+            <a href="files/Sufiyan Resume upd.pdf" class="main-btn" download>
+              <span class="btn-text">Download Resume</span>
+              <span class="btn-icon"><i class="fas fa-download"></i></span>
+            </a>
+          </div>
+          <a href="https://github.com/IAmSufiyanKhan/" target="_blank">
+          <div class="git-btn">
+
+              <i class="fab fa-github"></i>
+
+          </div>
+        </a>
+        </div>
+      </div>
+    </header>
+    <main>
+
+      <section class="section sec2 about" id="about">
+        <div class="main-title">
+          <h2>About <span>me</span><span class="bg-text">my stats</span></h2>
+        </div>
+        <div class="about-stats">
+          <h4 class="stat-title">My Skills</h4>
+           <div class="progress-bars" id="progress-bars">
+
+          </div> 
+        </div>
+        <h4 class="stat-title">My Work Experience Timeline</h4>
+        <div class="timeline" id="timeline">
+
+
+
+        </div>
+        <h4 class="stat-title">My Personal Projects Timeline</h4>
+        <div class="timeline" id="timelinePro">
+
+        </div>
+      </section>
+      <section class="section sec3" id="portfolio">
+        <div class="main-title">
+          <h2>
+            My <span>Certificates</span><span class="bg-text">My Work</span>
+          </h2>
+        </div>
+        <p class="port-text">
+          Here is some of my certificates that I've earned in various
+          programming languages and Expirences.
+        </p>
+        <div class="portfolios"  id="portfolios">
+
+
+        </div>
+      </section>
+      <section class="section sec4" id="blogs">
+        <div class="blogs-content">
+          <div class="main-title">
+            <h2>
+              My <span>Projects</span><span class="bg-text">My Projects</span>
+            </h2>
+          </div>
+          <div class="blogs" id="project">
+
+          </div>
+        </div>
+      </section>
+      <section class="section sec5 contact" id="contact">
+        <div class="contact-container">
+          <div class="main-title">
+            <h2>
+              Contact <span>Info</span><span class="bg-text">Contact</span>
+            </h2>
+          </div>
+          <div class="contact-content-con">
+            <div class="left-contact">
+              <div class="contact-info">
+                <div class="contact-item">
+                  <div class="icon">
+                    <i class="fas fa-map-marker-alt"></i>
+                    <span>Location:</span>
+                  </div>
+                  <p>New Delhi, India</p>
+                </div>
+                <div class="contact-item">
+                  <div class="icon">
+                    <i class="fas fa-envelope"></i>
+                    <span>Email:</span>
+                  </div>
+                  <a target="_blank" href="mailto:iamahmadsufiyan@gmail.com">
+                  <p>
+
+                    <span>iamahmadsufiyan@gmail.com</span>
+                  </p>
+                </a>
+                </div>
+                <div class="contact-item">
+                  <div class="icon">
+                    <i class="fas fa-mobile"></i>
+                    <span>Mobile Number:</span>
+                  </div>
+                  <a target="_blank" href="tel:+918010982345">
+                  <p>
+                    <span>+91 8010982345</span>
+                  </p>
+                  </a>
+                </div>
+                <div class="contact-item">
+                  <div class="icon">
+                    <i class="fab fa-github"></i>
+                    <span>Github Profile:</span>
+                  </div>
+                  <p>
+                    <span>
+                      <a target="_blank" href="https://github.com/IAmSufiyanKhan">
+                        https://github.com/IAmSufiyanKhan
+                      </a>
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <div class="controlls">
+      <div class="control control-1 active-btn" data-id="home">
+        <i class="fas fa-home"></i>
+      </div>
+      <div class="control control-2" data-id="about">
+        <i class="fas fa-user"></i>
+      </div>
+      <div class="control control-3" data-id="portfolio">
+        <i class="fas fa-certificate"></i>
+      </div>
+      <div class="control control-4" data-id="blogs">
+        <i class="fas fa-project-diagram"></i>
+      </div>
+      <div class="control control-5" data-id="contact">
+        <i class="fas fa-envelope-open"></i>
+      </div>
+    </div>
+
+    <div class="theme-btn">
+      <i class="fas fa-adjust"></i>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+
+
+
+  <script type="module" src="update.js"></script>
+
+  </html>