add new site

Irtiza90 · May 30, 2024 · f6b4f9c · f6b4f9c
1 parent d56d493
commit f6b4f9c
Show file tree

Hide file tree

Showing 18 changed files with 754 additions and 0 deletions.
diff --git a/CV-Irtiza Babar.pdf b/CV-Irtiza Babar.pdf
diff --git a/images/About pic1.jpg b/images/About pic1.jpg
diff --git a/images/bg-pic.jpg b/images/bg-pic.jpg
diff --git a/images/bg.jpg b/images/bg.jpg
diff --git a/images/close.png b/images/close.png
diff --git a/images/fiverr.jpg b/images/fiverr.jpg
diff --git a/images/github.png b/images/github.png
diff --git a/images/iot.jpg b/images/iot.jpg
diff --git a/images/land-invaders.jpg b/images/land-invaders.jpg
diff --git a/images/linkedin.png b/images/linkedin.png
diff --git a/images/mail.png b/images/mail.png
diff --git a/images/menu.png b/images/menu.png
diff --git a/images/surveilance-car.png b/images/surveilance-car.png
diff --git a/images/tft.jpg b/images/tft.jpg
diff --git a/images/upwork.png b/images/upwork.png
diff --git a/images/web-dev.jpg b/images/web-dev.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Irtiza Babar</title>
+  <link rel="stylesheet" href="./style.css">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <div id="header">
+    <div class="container">
+      <nav>
+        <h1 class="text-white">Irtiza Babar</h1>
+        <ul id="sidemenu">
+          <li><a href="#header">Home</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#services">Services</a></li>
+          <li><a href="#portfolio">Portfolio</a></li>
+          <li><a href="#contact">Contact</a></li>
+          <img src="Images/close.png" onclick="closemenu()" alt="" width="20" height="20" class="icon">
+        </ul>
+        <img src="Images/menu.png" onclick="openmenu()" alt="" width="20" height="20" class="icon">
+      </nav>
+      <div class="header-text">
+        <h1 style="font-size: 7rem;">
+          <i>
+            <span style="color: lightgoldenrodyellow;">Hi!, I'm</span>
+            <span style="color: blue">Irtiza</span>
+          </i>
+        </h1>
+      </div>
+    </div>
+  </div>
+
+  <!-- -----------------about me section------------------- -->
+  <div id="about">
+    <div class="container">
+      <div class="row">
+        <div class="about-col-1">
+          <img src="images/About pic1.jpg">
+        </div>
+        <div class="about-col-2">
+          <h1 class="text-white sub-title">About Me</h1>
+          <p class="text-light">
+            Full Stack Developer experienced in both front- & back-end web development. I specialize in creating user-friendly designs that are optimized for SEO and accessibility with close attention to detail, providing a friendly experience for the user.
+          </p>
+          <p class="text-light">I not only design and develop websites but also regularly test them to maintain their performance and fixing any issues that arise. I also prioritize clean and organized code to make sure that it's easy to read and maintain.</p>
+
+          <div class="tab-titles">
+            <p class="tab-links text-white active-link" onclick="opentab('profile')">Personal Information</p>
+            <p class="tab-links text-white" onclick="opentab('skills')">Skills</p>
+            <p class="tab-links text-white" onclick="opentab('education')">Education & Certifications</p>
+          </div>
+
+          <div class="tab-contents active-tab" id="profile">
+            <ul>
+              <li>
+                <div class="section-heading text-white">Name</div>
+                <i class="text-light">Irtiza Babar</i>
+              </li>
+              <li>
+                <div class="section-heading text-white">Date of Birth</div>
+                <i class="text-light">21<sup>st</sup>-07-2005</i>
+              </li>
+            </ul>
+          </div>
+
+          <div class="tab-contents" id="skills">
+            <ul>
+              <li>
+                <div class="section-heading text-white">Web Design</div>
+                <i>Figma, Canva, WebFlow, Wix</i>
+              </li>
+
+              <li>
+                <div class="section-heading text-white">Web Development</div>
+                <i>HTML, CSS, JavaScript, Bootstrap, jQuery, TailwindCSS</i>
+              </li>
+
+              <li>
+                <div class="section-heading text-white">Back-End Development</div>
+                <i>Python, PHP, Laravel, Golang, C++, MySQL</i>
+              </li>
+
+              <li>
+                <div class="section-heading text-white">Software & Tools</div>
+                <i>MS Office, Git, Github, Bitbucket(CI/CD), VSCode, Linux</i>
+              </li>
+
+              <li>
+                <div class="section-heading text-white">Interested In</div>
+                <i>React, Dart, Flutter</i>
+              </li>
+            </ul>
+          </div>
+
+          <div class="tab-contents" id="education">
+            <ul>
+              <li>
+                <div class="section-heading text-white">Aptech</div>
+                <i>HDSE (Higher Diploma in Software Engineering) - Present</i>
+              </li>
+              <li>
+                <div class="section-heading text-white">Aptech</div>
+                <i>IoT (Internet of Things) - Present</i>
+              </li>
+              <li>
+                <div class="section-heading text-white">The Allied Academy</div>
+                <i>Matriculation (Computer Science)</i>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ------------------------services-------------------- -->
+
+    <div id="services">
+      <div class="container">
+        <h1 class="sub-title">My Services</h1>
+        <div class="services-list">
+          <div>
+            <img src="./images/web-dev.jpg" alt="Web Development" height="160px">
+            <h2>Web Development</h2>
+            <p>
+              I provide complete web development services, focusing on designing and building websites with strong backends and smooth API integrations. I create custom designs that match your brand and work well on all devices.
+            </p>
+            <p>Using modern liraries like TailwindCSS & Bootstrap, I develop user-friendly interfaces, and build secure backends with technologies like Laravel or Flask. I also integrate APIs to add extra functionality, delivering a comprehensive solution for your web development requirements.</p>
+          </div>
+
+          <div>
+            <img src="./images/iot.jpg" alt="IoT" height="150px">
+            <h2>IoT Projects</h2>
+            <p>
+              I can create IoT (Internet of Things) projects to match your requirements. Whether it's automating tasks, remote system monitoring, or sensor data collection, I'll design and deploy IoT solutions that fit seamlessly into your workflow. From hardware selection to user-friendly interfaces and robust data analysis, I handle every aspect efficiently.
+            </p>
+          </div>
+
+          <!-- <div>
+                <img src="#" alt="Drawing">
+                <h2>Drawing</h2>
+                <p><i>Sceneries and whatever drives the attention.</i></p>
+            </div> -->
+        </div>
+      </div>
+    </div>
+
+    <!-- -----------------portfolio---------------- -->
+
+    <div id="portfolio">
+      <div class="container">
+        <h1 class="sub-title">My Work</h1>
+        <div class="work-list">
+
+          <div class="work">
+            <img src="./images/surveilance-car.png" alt="home automation">
+            <div class="layer">
+              <h3><strong>Surveillance Car</strong></h3>
+              <p>A surveillance car that can be controlled with phone or PC, equipped with a camera for monitoring.</p>
+              <a href="#"></a>
+            </div>
+          </div>
+
+          <div class="work popup-trigger" data-popup="#popup1">
+            <img src="./images/land-invaders.jpg" alt="water quality" width="300px" height="180px">
+            <div class="layer">
+              <h3><strong>Tank Invaders</strong></h3>
+              <p>A space-invaders like game made fully in core Python, with no external dependencies.</p>
+              <a href="#"></a>
+            </div>
+          </div>
+
+          <div class="work">
+            <img src="./images/tft.jpg" height="180px">
+            <div class="layer">
+              <h3><strong>TooFiftyToo</strong></h3>
+              <p style="line-height: 1.3rem;">A dynamic fashion and blogging website using Laravel for backend functionality, HTML and CSS for structure and styling, and SCSS for enhanced stylesheet management. Aswell as  JS/jQuery for interactive and smooth user experience. Integrated with various APIs for site features, ensuring seamless integration with external services for enhanced functionality and data management. The result is a modern and engaging platform that combines style with substance, catering to both fashion enthusiasts and avid bloggers alike.</p>
+              <a href="#"></a>
+            </div>
+          </div>
+
+        </div>
+        <!-- <a href="#" class="btn">See More</a> -->
+      </div>
+    </div>
+
+    <!-- ----------------------------contact---------------------------- -->
+    <div id="contact">
+      <div class="container">
+        <div class="row" style="justify-content: center; text-align: center;">
+
+          <div class="contact-left">
+            <h1 class="sub-title">Contact Me</h1>
+            <p><i>irtizababar@outlook.com</i> <img src="Images/mail.png" alt="Email" width="30" height="30" style="vertical-align:middle"></p>
+            <div class="social-images">
+              <a href="https://github.com/Irtiza90/"><img src="Images/github.png" style="background: white;border-radius: 8px;" alt="Github" width="30" height="30"></a>
+              <a href="https://www.fiverr.com/irtiza_babar"><img src="Images/fiverr.jpg" alt="Fiverr" width="30" height="30" style="border-radius: 20px;"></a>
+              <a href="https://www.upwork.com/freelancers/~01c0c814302c4d3e04"><img src="Images/upwork.png" alt="Upwork" width="30" height="30" style="border-radius: 20px;"></a>
+              <a href="https://www.linkedin.com/in/irtiza-babar-a3428b22a/"><img src="Images/linkedin.png" alt="Linkedin" width="30" height="30" style="border-radius: 20px;"></a>
+            </div>
+            <a href="./CV-Irtiza Babar.pdf" download target="_blank" class="btn btn2">Download CV</a>
+          </div>
+
+          <!-- <div class="contact-right">
+            <form id="email-form">
+              <input type="email" name="Email" placeholder="Your Email" required>
+              <input type="text" name="Title" placeholder="Subject" required>
+              <textarea name="Message" rows="7" placeholder="Your Message"></textarea>
+              <button type="submit" class="btn btn2">Submit</button>
+            </form>
+            <a href="mailto:" id="mail-link" style="display: none;"></a>
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script>
+    var tablinks = document.getElementsByClassName("tab-links");
+    var tabcontents = document.getElementsByClassName("tab-contents");
+
+    function opentab(tabname) {
+      for (tablink of tablinks) {
+        tablink.classList.remove("active-link");
+      }
+      for (tabcontent of tabcontents) {
+        tabcontent.classList.remove("active-tab");
+      }
+      event.currentTarget.classList.add("active-link");
+      document.getElementById(tabname).classList.add("active-tab");
+    }
+  </script>
+
+  <script>
+    var sidemenu = document.getElementById("sidemenu");
+
+    function openmenu() {
+      sidemenu.style.right = "0";
+    }
+    function closemenu() {
+      sidemenu.style.right = "-200px";
+    }
+  </script>
+
+  <script>
+    $(document).ready(function(){
+      $('.popup-trigger').click(function() {
+        var popupId = $(this).data('popup');
+        $(popupId).css('display', 'block').animate({top: '0%'}, 500);
+      });
+
+      $('.close-btn').click(function() {
+        $(this).closest('.popup').animate({top: '100%'}, 500, function() {
+          $(this).css('display', 'none');
+        });
+      });
+    });
+  </script>
+</body>
+
+</html>