added responsiveness

OwaisNazir09 · Jun 22, 2024 · ad13101 · ad13101
commit ad13101
Show file tree

Hide file tree

Showing 15 changed files with 780 additions and 0 deletions.
diff --git a/1000026862-01-01.jpeg.jpg b/1000026862-01-01.jpeg.jpg
diff --git a/2ec35d04d12c81211e494c3f0c74c7df.jpg b/2ec35d04d12c81211e494c3f0c74c7df.jpg
diff --git a/Bank.jpeg b/Bank.jpeg
diff --git a/README.md b/README.md
@@ -0,0 +1,53 @@
+<h1>My Portfolio</h1>
+
+Welcome to my portfolio! This repository contains the source code for my personal portfolio website showcasing my skills, projects, and contact information.
+
+
+Demo :<a href="https://owaisnazir09.github.io/Portfolio/" > myportfolio</a>
+
+## Table of Contents
+
+- [About](#about)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+
+## About
+
+My portfolio is a web-based showcase of my skills, projects, and contact information. It includes sections such as:
+
+- About Me: A brief introduction to who I am and my background.
+- Skills: Details about my programming skills and technologies I'm proficient in.
+- Projects: A collection of projects I've worked on, including descriptions and images.
+- Contact Me: Ways to get in touch with me, such as through email or social media.
+
+## Installation
+
+To set up the project locally, follow these steps:
+
+1. Clone the repository to your local machine:
+
+https://github.com/OwaisNazir09/Portfolio.git
+
+
+2. Navigate to the project directory:
+
+cd portfolio
+
+
+3. Open the `index.html` file in your web browser:
+
+Open index.html
+
+## Usage
+
+Once the project is set up, you can explore my portfolio website locally or deploy it to a web server to make it accessible online. 
+
+## Contributing
+
+If you'd like to contribute to my portfolio, feel free to fork the repository, make your changes, and submit a pull request. Contributions such as bug fixes, enhancements, or new features are welcome!
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).
diff --git a/abtimg.gif b/abtimg.gif
diff --git a/background.jpg b/background.jpg
diff --git a/binfo.jpg b/binfo.jpg
diff --git a/countdown.jpg b/countdown.jpg
diff --git a/download.png b/download.png
diff --git a/gmail.png b/gmail.png
diff --git a/index.html b/index.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale="1.0>    <title>Portfolio</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <nav> 
+        <ul>
+        <li><a href="#section0">Home</a></li>
+        <li><a href="#section1">About me </a></li>
+        <li><a href="#section2">Skills</a></li>
+        <li><a href="#section3">projects</a></li>
+        <li><a href="#section4">Conatct Me</a></li>
+        </ul>
+    </nav>
+
+    <header>
+
+
+
+
+        <section id="section0">
+        <div class="header-content">
+            <picture>
+                <source media="(min-width: 480px)" srcset="background.jpg">
+                <source media="(max-width: 768px)" srcset="background.jpg">
+                <img src="1000026862-01-01.jpeg.jpg" id="bgimg" alt="background image">
+            </picture>
+
+            <h1 id="prt">My Portfolio</h1>
+            <h2 id="name">Owais <br> Nazir</h2>
+        </div>
+       </section>
+
+
+
+
+
+            <section id="section1">
+                    <div id="text">
+                        <div id="upertext">
+                            <h1> Hi there! I'm <span>Owais Nazir</span>  
+                        </div>
+                        <div id="abouttext">
+                            <p>
+                            Passionate frontend developer with a knack for creating engaging 
+                            and user-friendly web experiences. With a mastery in C++,
+                             Java, and Data Structures and Algorithms (DSA), 
+                             I thrive on turning ideas into interactive realities. 
+                             From sleek interfaces to efficient algorithms, 
+                             I love the creative challenge of bringing concepts to life.
+                              When I'm not coding, you'll find me exploring the latest tech trends,
+                               honing my skills, or simply enjoying a good cup of coffee.
+                                Let's connect and build something amazing together!
+                        </p>
+                        </div>
+
+                    </div>
+
+                    <div id ="aboutimage">
+                        <img src="abtimg.gif" id="abtimg" alt="image"> 
+                    </div>
+           </section>
+
+
+        <section id="section2">
+
+            <div id="myskills">
+                <p>My skills</p>
+            </div>
+
+            <div id ="skilldetails">
+                <p>"I am a versatile developer proficient in a range 
+                    of programming languages and technologies. 
+                    With expertise in HTML, CSS, and JavaScript
+                    , I craft engaging and interactive web experiences
+                     that captivate users. Additionally, my proficiency 
+                     extends to backend development with a strong command 
+                     of C++ and Java. Whether it's building sleek interfaces,
+                      implementing complex algorithms, or creating dynamic web
+                       applications, I thrive on the challenge of turning 
+                       ideas into functional and visually appealing solutions
+                       . My passion for coding is matched only by my dedication
+                        to continuous learning and improvement, ensuring 
+                        that I stay at the forefront of technological 
+                        advancements. With a proven track record of delivering 
+                        high-quality projects, I am ready to tackle any coding challenge 
+                    and contribute effectively to any team or project."
+
+                </p>
+            </div>
+            <div class="skills">
+                <div class="skill">
+                    <img src="https://cdn-icons-png.flaticon.com/128/2721/2721267.png" alt="HTML">
+                    <span>HTML</span>
+                </div>
+                <div class="skill">
+                    <img src="https://abrudz.github.io/logos/CPlusPlus.svg" alt="C++">
+                    <span>C++</span>
+                </div>
+                <div class="skill">
+                    <img src="https://abrudz.github.io/logos/JS.svg" alt="JavaScript">
+                    <span>JavaScript</span>
+                </div>
+                <div class="skill">
+                    <img src="https://abrudz.github.io/logos/Java.svg" alt="Java">
+                    <span>Java</span>
+                </div>
+                <br>
+                <div class="skill">
+                    <img src="https://cdn-icons-png.flaticon.com/128/3430/3430130.png" alt="Sql">
+                    <span>sql</span>
+                </div>
+                <br>
+                <div class="skill">
+                    <img src="https://cdn-icons-png.flaticon.com/128/14892/14892311.png" alt="css">
+                    <span>css</span>
+                </div>
+
+            </div>
+
+
+        </section>
+
+        <section id="section3">
+            <div class="card-container">
+                <div class="card">
+                    <div class="project-info">
+                        <img src="istockphoto-871756822-612x612.jpg" alt="carparking">
+                        <div class="project-details">
+                            <div class="project-name">
+                                <p>Car Parking Management</p>
+                            </div>
+                            <div class="project-description">
+                                <p>This C++ car parking management system program efficiently manages parking spaces, allowing users to check availability, reserve spots, and track parked vehicles. It employs C++ features such as data structures and file handling to store and manage parking information. The program offers a user-friendly interface for parking attendants and customers, showcasing my skills in C++ programming for practical applications.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="project-info">
+                        <img src="countdown.jpg" alt="countdown">
+                        <div class="project-details">
+                            <div class="project-name">
+                                <p>Countdown Timer</p>
+                            </div>
+                            <div class="project-description">
+                                <p>This C++ countdown timer program allows users to set a specific time duration and counts down to zero, displaying the remaining time. It utilizes C++ functionalities such as loops and conditional statements to decrement the timer and output the remaining time. The program offers a simple yet effective way to manage time in various applications.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="project-info">
+                        <img src="binfo.jpg" alt="Bingo">
+                        <div class="project-details">
+                            <div class="project-name">
+                                <p>Bingo Game</p>
+                            </div>
+                            <div class="project-description">
+                                <p>This Bingo game program, written in C++, simulates a two-player game where players take turns calling out numbers and marking them on their Bingo cards. The first player to complete five rows or columns wins. It uses C++ features like loops, arrays, and functions to manage the game logic. The program includes functions to generate Bingo cards, display them, and check for winning patterns. It also handles user input for marking numbers and displays the game's progress and results.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div class="card">
+
+                    <div class="project-info">
+                        <img src="Bank.jpeg" alt="bank">
+
+                        <div class="project-details">
+
+                            <div class="project-name">
+                                <p>Bank Management system</p>
+                            </div>
+                            <div class="project-description">
+                                <p>A banking management program built in C++ would typically include functionalities such as account creation, deposit and withdrawal transactions, balance inquiries, and possibly account closure. It would likely use classes to represent accounts, with methods for performing these operations. The program may also include error handling for invalid transactions and input validation to ensure data integrity. Additionally, it might use file handling to store account information persistently.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+
+        <section id="section4">
+        <div id="contactclass">
+            <div id="contactitems">
+                <h1>Conatct Me</h1>
+            </div>
+
+            <div  id="contactitems">
+
+                <p>Do you speak Na'vi? it's ok if you don't,I speak English too.....  </p>
+            </div>
+
+            <div  id="contactitems">
+                <div id="items">
+                    <a href="https://github.com/OwaisNazir09"><img src="download.png" alt="github">follow me github</a>
+
+                </div>
+
+
+                <div id="items">
+                    <a href="https://www.linkedin.com/in/owais-ahmad-a519581a9"> <img src="linkedin.png"  alt="linkedin">Connect with me on LinkedIn  </a>
+                </div>
+                    <div id="items">
+                    <a href="https://www.instagram.com/owais_eeee"> <img src="instagram.png " alt="instaram">Follow me on Instagram</a>
+                </div>
+                    <div id="items">
+                    <a href="mailto:[email protected]"> <img src="gmail.png" alt="gmail">Mail me </a>
+                </div>
+
+            </div>
+
+            </div>
+
+
+        </div>
+    </section>
+
+
+    </header>
+
+
+    <script>
+const container = document.querySelector('.card-container');
+let isDown = false;
+let startX;
+let scrollLeft;
+
+container.addEventListener('mousedown', (e) => {
+    isDown = true;
+    startX = e.pageX - container.offsetLeft;
+    scrollLeft = container.scrollLeft;
+});
+
+container.addEventListener('mouseleave', () => {
+    isDown = false;
+});
+
+container.addEventListener('mouseup', () => {
+    isDown = false;
+});
+
+container.addEventListener('mousemove', (e) => {
+    if (!isDown) return;
+    e.preventDefault();
+    const x = e.pageX - container.offsetLeft;
+    const walk = (x - startX) * 3; // Adjust scrolling speed
+    container.scrollLeft = scrollLeft - walk;
+});
+
+    </script>
+</body>
+</html>
diff --git a/instagram.png b/instagram.png
diff --git a/istockphoto-871756822-612x612.jpg b/istockphoto-871756822-612x612.jpg
diff --git a/linkedin.png b/linkedin.png