diff --git a/CV-Irtiza Babar.pdf b/CV-Irtiza Babar.pdf new file mode 100644 index 0000000..b9a6b7b Binary files /dev/null and b/CV-Irtiza Babar.pdf differ diff --git a/images/About pic1.jpg b/images/About pic1.jpg new file mode 100644 index 0000000..5797bd2 Binary files /dev/null and b/images/About pic1.jpg differ diff --git a/images/bg-pic.jpg b/images/bg-pic.jpg new file mode 100644 index 0000000..5a6ffd8 Binary files /dev/null and b/images/bg-pic.jpg differ diff --git a/images/bg.jpg b/images/bg.jpg new file mode 100644 index 0000000..ce951f7 Binary files /dev/null and b/images/bg.jpg differ diff --git a/images/close.png b/images/close.png new file mode 100644 index 0000000..3a2a36d Binary files /dev/null and b/images/close.png differ diff --git a/images/fiverr.jpg b/images/fiverr.jpg new file mode 100644 index 0000000..3b0c5d0 Binary files /dev/null and b/images/fiverr.jpg differ diff --git a/images/github.png b/images/github.png new file mode 100644 index 0000000..b2f83db Binary files /dev/null and b/images/github.png differ diff --git a/images/iot.jpg b/images/iot.jpg new file mode 100644 index 0000000..74b0dd2 Binary files /dev/null and b/images/iot.jpg differ diff --git a/images/land-invaders.jpg b/images/land-invaders.jpg new file mode 100644 index 0000000..e618102 Binary files /dev/null and b/images/land-invaders.jpg differ diff --git a/images/linkedin.png b/images/linkedin.png new file mode 100644 index 0000000..a97d0c6 Binary files /dev/null and b/images/linkedin.png differ diff --git a/images/mail.png b/images/mail.png new file mode 100644 index 0000000..21040b2 Binary files /dev/null and b/images/mail.png differ diff --git a/images/menu.png b/images/menu.png new file mode 100644 index 0000000..91e4c01 Binary files /dev/null and b/images/menu.png differ diff --git a/images/surveilance-car.png b/images/surveilance-car.png new file mode 100644 index 0000000..b67782c Binary files /dev/null and b/images/surveilance-car.png differ diff --git a/images/tft.jpg b/images/tft.jpg new file mode 100644 index 0000000..fa885ac Binary files /dev/null and b/images/tft.jpg differ diff --git a/images/upwork.png b/images/upwork.png new file mode 100644 index 0000000..9910d44 Binary files /dev/null and b/images/upwork.png differ diff --git a/images/web-dev.jpg b/images/web-dev.jpg new file mode 100644 index 0000000..f399db9 Binary files /dev/null and b/images/web-dev.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..d565d2b --- /dev/null +++ b/index.html @@ -0,0 +1,270 @@ + + + + + + + + Irtiza Babar + + + + + + + + + + + +
+
+
+
+ +
+
+

About Me

+

+ 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. +

+

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.

+ +
+

Personal Information

+

Skills

+

Education & Certifications

+
+ +
+
    +
  • +
    Name
    + Irtiza Babar +
    • +
  • +
    Date of Birth
    + 21st-07-2005 +
    • +
+
+ +
+
    +
  • +
    Web Design
    + Figma, Canva, WebFlow, Wix +
    • + +
  • +
    Web Development
    + HTML, CSS, JavaScript, Bootstrap, jQuery, TailwindCSS +
    • + +
  • +
    Back-End Development
    + Python, PHP, Laravel, Golang, C++, MySQL +
    • + +
  • +
    Software & Tools
    + MS Office, Git, Github, Bitbucket(CI/CD), VSCode, Linux +
    • + +
  • +
    Interested In
    + React, Dart, Flutter +
    • +
+
+ +
+
    +
  • +
    Aptech
    + HDSE (Higher Diploma in Software Engineering) - Present +
    • +
  • +
    Aptech
    + IoT (Internet of Things) - Present +
    • +
  • +
    The Allied Academy
    + Matriculation (Computer Science) +
    • +
+
+
+
+
+ + + +
+
+

My Services

+
+
+ Web Development +

Web Development

+

+ 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. +

+

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.

+
+ +
+ IoT +

IoT Projects

+

+ 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. +

+
+ + +
+
+
+ + + +
+
+

My Work

+
+ +
+ home automation +
+

Surveillance Car

+

A surveillance car that can be controlled with phone or PC, equipped with a camera for monitoring.

+ +
+
+ +
+ water quality +
+

Tank Invaders

+

A space-invaders like game made fully in core Python, with no external dependencies.

+ +
+
+ +
+ +
+

TooFiftyToo

+

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.

+ +
+
+ +
+ +
+
+ + +
+
+
+ +
+

Contact Me

+

irtizababar@outlook.com Email

+ + Download CV +
+ + +
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0073afb --- /dev/null +++ b/style.css @@ -0,0 +1,484 @@ +* { + margin: 0; + padding: 0; + font-family: "Lato", sans-serif; + box-sizing: border-box; + + --primary-color: rgb(12, 12, 100); + --light-text-color: #c9c3c3; +} + +html { + scroll-behavior: smooth; +} + +body, html { + margin: 0; + padding: 0; + overflow-x: hidden; +} + +body { + background: linear-gradient(blue, rgb(38, 28, 39), rgb(12, 12, 100)); + /* color: #fff; */ +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Roboto Slab", serif; +} +p { + margin-bottom: 0.75rem; +} + +.container h1 span { + font-size: 4rem; + color: rgb(191, 153, 29); + cursor: pointer; +} + +#header { + width: 100%; + height: 100vh; + background-image: url(./images/bg-pic.jpg); + background-size: cover; + background-position: center; +} +.container { + padding: 10px 10%; +} +nav { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; +} +nav ul li { + display: inline-block; + list-style: none; + margin: 10px 20px; +} +nav ul li a { + color: whitesmoke; + text-decoration: none; + font-size: 20px; + position: relative; + font-weight: 700; +} +nav ul li a::after { + content: ""; + width: 0; + height: 3px; + background: red; + position: absolute; + left: 0; + bottom: -6px; + transition: 0.9s; +} +nav ul li a:hover::after { + width: 100%; +} +.header-text h1 { + font-size: 90px; + margin-top: 300px; + margin-left: 50px; +} + +/* --------------about section------------------ */ +#about { + padding: 40px 0; + color: pink; +} +.row { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.about-col-1 { + flex-basis: 35%; +} +.about-col-1 img { + width: 100%; + border-radius: 15px; +} +.about-col-2 { + flex-basis: 60%; +} +.about-col-2 h1 { + color: white; +} +.about-col-2 p span { + font-size: large; +} +.sub-title { + font-size: 45px; + font-weight: 800; +} +.sub-title.p { + color: blue; +} +.tab-titles { + display: flex; + margin: 20px 0 40px; + color: silver; +} +.tab-titles p { + color: rgb(23, 23, 23); +} +.tab-links { + margin-right: 50px; + font-size: 18px; + font-weight: bolder; + cursor: pointer; + position: relative; +} +.tab-links::after { + content: ""; + width: 0; + height: 3px; + background: pink; + position: absolute; + left: 0; + bottom: -8px; + transition: 0.5s; +} +.tab-links.active-link::after { + width: 100%; +} +.tab-contents ul li { + list-style: none; + margin: 12px 0; +} + +#about .section-heading { + color: white; + font-weight: bold; + margin-bottom: 0.5rem; +} + +.tab-contents ul li * { + color: var(--light-text-color); +} + + +.tab-contents ul li span { + color: white; + font-size: 17px; +} +.tab-contents { + display: none; +} +.tab-contents i { + color: rgb(69, 5, 69); + font-size: large; +} +.tab-contents.active-tab { + display: block; +} +.about-col-2.sub-title .p { + font: 50px; +} + +/* -------------------Services Section------------------------- */ +#services { + padding: 30px 0; +} +.container h1 { + color: white; +} +.services-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 40px; + margin-top: 50px; +} +.services-list div { + background: linear-gradient( + rgb(41 41 189), rgb(12 16 22), rgb(29 35 80) + ); + padding: 40px; + font-size: 13px; + font-weight: 300; + border-radius: 10px; + transition: background 0.5s, transform 0.5s; +} +.services-list div img { + border-radius: 10px; +} +.services-list div h2 { + font-size: 30px; + font-weight: 500; + margin-bottom: 1rem; + margin-top: 1rem; + color: white; +} +.services-list p { + font-size: large; + color: var(--light-text-color); +} +.services-list div a { + text-decoration: none; + font-size: 12px; + margin-top: 20px; + display: inline-block; +} +.services-list div:hover { + background: linear-gradient(blue, rgb(35 65 122), rgb(77 107 145 / 94%)); + transform: translateY(-10px); +} + +/* ---------------Portfolio---------------- */ +#portfolio { + padding: 10px 0; +} +.work-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 40px; + margin-top: 50px; +} +.work { + border-radius: 10xp; + position: relative; + overflow: hidden; +} +.work img { + width: 100%; + border-radius: 20px; + display: block; + height: 300px; + object-fit: cover; + transition: transform 0.5s; + margin-bottom: 30px; +} + +.work:hover .layer { + height: 100%; + border-radius: 0 !important; +} + +.layer { + width: 100%; + height: 0; + background: linear-gradient(blue, rgb(175, 68, 181), rgb(119, 30, 173)); + border-radius: 10px; + position: absolute; + left: 0; + bottom: 0; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + font-size: 14px; + transition: height 0.5s; +} +.layer h3 { + font-weight: 500; + margin-bottom: 20px; +} +.work:hover img { + transform: scale(1.1); + border-radius: 10px; +} +/* .work:hover .layer{ + height: 100%; + border-radius: 9px; +} */ +.btn { + display: table; + margin: 50px auto; + width: fit-content; + background: linear-gradient( + rgb(166, 166, 232), + rgb(211, 156, 211), + rgb(218, 157, 167) + ); + padding: 15px 50px; + border-radius: 10px; + text-decoration: none; + color: black; + transition: background 0.1s; +} +.btn:hover { + background: radial-gradient(blue, purple, pink); +} + +/* --------------------contact-------------- */ +.contact-left { + flex-basis: 35%; +} +.contact-right { + flex-basis: 60%; +} +.contact-left p { + margin-top: 10px; +} +.contact-left p i { + color: var(--light-text-color); + margin-right: 0px; + font-size: 20px; + font-weight: 700; +} +.social-images { + margin-top: 10px; +} +.social-images a { + text-decoration: none; + font-size: 30px; + margin-right: 15px; + color: #ababab; + display: in line-block; + transition: transform 0.5s; +} +.social-images a:hover { + color: #8f1d41; + transform: translateY(-7px); +} +.btn.btn2 { + display: inline-block; + background: linear-gradient(rgb(0 41 255), rgb(0 0 0), rgb(8 13 66)); + /* padding: 7px; */ + margin-top: 20px; + color: white; + /* padding: 7px; */ + margin-top: 20px; +} +.contact-right form { + width: 100%; +} +form input, +form textarea { + width: 100%; + border: 0; + outline: none; + background: #262626; + padding: 10px; + margin: 15px 0; + color: #fff; + font-size: 18px; + border-radius: 7px; +} +form .btn2 { + padding: 14px 60px; + font-size: 20px; + margin-top: 20px; + cursor: pointer; +} +.copyright { + width: 100%; + text-align: center; + padding: 30px 0; + background: black; + font-weight: 500; + margin-top: 20px; + margin-bottom: 0px; + color: #fff; +} + +/* --------------------css fro small screen------------------- */ +nav .icon { + display: none; +} +@media only screen and (max-width: 600px) { + #header { + background-image: url(Images/Agust-D.webp); + } + .header-text { + margin-top: 100%; + font-size: 16px; + } + .header-text h1 { + font-size: 30px; + } + nav .icon { + display: block; + font-size: 25px; + } + nav ul { + background: #8f1d41; + position: fixed; + top: 0; + right: -200px; + width: 200px; + height: 100vh; + padding-top: 50px; + z-index: 2; + transition: right 0.5s; + } + nav ul li { + display: block; + margin: 25px; + } + nav ul .icon { + position: absolute; + top: 25px; + left: 25px; + cursor: pointer; + } + .sub-title { + font-size: 40px; + } + .about-col-1, + .about-col-2 { + flex-basis: 100%; + } + .about-col-1 { + margin-bottom: 30px; + } + .about-col-2 { + font-size: 14px; + } + .contact-left, + .contact-right { + flex-basis: 100%; + } + .copyright { + font-size: 17px; + } +} +#msg { + color: black; + margin-top: -40px; + display: block; +} + +/* popup */ + +.popup { + position: fixed; + top: 100%; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(#292999, rgb(45 21 165), rgb(2 2 6)); + color: white; + display: none; + z-index: 1000; +} +.popup-content { + position: relative; + padding: 20px; +} + +.popup-content:not(.close-btn) { + text-align: center; +} + +.close-btn { + position: absolute; + top: 10px; + right: 20px; + font-size: 30px; + cursor: pointer; +} + +/* utilities */ +.text-light { + color: var(--light-text-color) !important; +} + +.text-white { + color: white !important; +}