personal-web/public/index.html

661 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Hugo 0.102.3" />
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-075Y15YXKN"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-075Y15YXKN');
</script>
<title></title>
<style>
.rad-fade-in {
will-change: opacity, transform;
animation-name: rad-fade-in-fallback;
animation-duration: 5s;
animation-fill-mode: both;
}
@keyframes rad-fade-in-fallback {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fonts-loaded .rad-fade-in.rad-waiting {
animation-name: none;
opacity: 0;
}
.fonts-loaded .rad-fade-in.rad-animate {
animation-name: rad-fade-in;
animation-duration: 1.1s;
animation-fill-mode: both;
}
@keyframes rad-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.rad-fade-in-long {
will-change: opacity, transform;
animation-name: rad-fade-in-long-fallback;
animation-duration: 8s;
animation-fill-mode: both;
}
@keyframes rad-fade-in-long-fallback {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fonts-loaded .rad-fade-in-long.rad-waiting {
animation-name: none;
opacity: 0;
}
.fonts-loaded .rad-fade-in-long.rad-animate {
animation-name: rad-fade-in-long;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes rad-fade-in-long {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.rad-fade-down {
will-change: opacity, transform;
animation-name: rad-fade-down-fallback;
animation-duration: 5s;
animation-fill-mode: both;
transform: translateY(-30px);
}
@keyframes rad-fade-down-fallback {
0% {
opacity: 0;
transform: translateY(-30px);
}
75% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fonts-loaded .rad-fade-down.rad-waiting {
animation-name: none;
opacity: 0;
transform: translateY(-30px);
}
.fonts-loaded .rad-fade-down.rad-animate {
animation-name: rad-fade-down;
animation-duration: 1.1s;
}
@keyframes rad-fade-down {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.rad-scale-down {
will-change: opacity, transform;
animation-name: rad-scale-down-fallback;
animation-duration: 5s;
animation-fill-mode: both;
transform-origin: 50% 0;
}
@keyframes rad-scale-down-fallback {
0% {
opacity: 0;
transform: scaleY(0.95);
}
75% {
opacity: 0;
transform: scaleY(0.95);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
.fonts-loaded .rad-scale-down.rad-waiting {
animation-name: none;
opacity: 0;
transform: scaleY(0.95);
}
.fonts-loaded .rad-scale-down.rad-animate {
animation-name: rad-scale-down;
animation-duration: 1.1s;
animation-fill-mode: both;
}
@keyframes rad-scale-down {
0% {
opacity: 0;
transform: scaleY(0.95);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
</style>
<link rel="stylesheet" href="https://rjbasitali.com/css/main.css"/>
<link rel="stylesheet" href="https://rjbasitali.com/css/rad-icons.css"/>
<link rel="stylesheet" href="https://rjbasitali.com/css/custom.css"/>
</head>
<body>
<header class="header fixed-top rad-animation-group" id="header">
<div class="container rad-fade-in">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand" href="https://rjbasitali.com/">
<span>Basit</span>
<span>Ali</span>
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent, #header"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a class="nav-link" href="https://rjbasitali.com/">HOME</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#about"
>ABOUT</a
>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#experience"
>EXPERIENCE</a
>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#contact"
>CONTACT</a
>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="https://blog.rjbasitali.com/"
>BLOG</a
>
</li>
</ul>
</div>
</nav>
</div>
</header>
<section class="rad-showcase rad-showcase--index rad-animation-group rad-fade-down">
<div class="rad-showcase__bg">
<img
class="lozad img-responsive"
src="data:image/gif;base64,R0lGODlhBwACAIAAAP///wAAACH5BAEAAAEALAAAAAAHAAIAAAIDjI9YADs="
data-src="https://rjbasitali.com/img/showcase/showcase.png"
data-srcset="https://rjbasitali.com/img/showcase/showcase.png 1x, https://rjbasitali.com/img/showcase/showcase@2x.png 2x"
alt=""
/>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-8 col-lg-7 col-xl-6">
<h1 class="display-1">
Hello, Im Basit.
<br />
<span
>Software Developer</span
>
</h1>
<p class="lead">
I work at <a target='_blank' href='https://rail.town/'>Railtown</a>, a software development company in Canada. Right now Im working on providing video conferencing and other VoIP solutions using WebRTC, Golang and other cool technologies.
</p>
<a
href="https://rjbasitali.com/#contact"
class="btn btn-primary"
>
<i class="icon-mail-fill"></i>
Contact
</a>
</div>
</div>
<div class="row platform-links">
<div class="col-12">
<a href="https://www.linkedin.com/in/rjbasitali/" target="_blank"
><i class="icon-linkedin-line"></i
></a>
<a href="https://github.com/rjbasitali" target="_blank"
><i class="icon-github-line"></i
></a>
<a href="https://twitter.com/var_p" target="_blank"
><i class="icon-twitter-line"></i
></a>
<a href="https://www.instagram.com/rjbasitali/" target="_blank"
><i class="icon-instagram-line"></i
></a>
<a href="https://www.facebook.com/rjbasitali/" target="_blank"
><i class="icon-facebook-line"></i
></a>
</div>
</div>
</div>
<div class="rad-showcase__bg rad-showcase__bg--mobile">
<img
class="lozad img-responsive"
src="data:image/gif;base64,R0lGODlhBwACAIAAAP///wAAACH5BAEAAAEALAAAAAAHAAIAAAIDjI9YADs="
data-src="https://rjbasitali.com/img/showcase/showcase-mobile.jpg"
alt=""
/>
</div>
</section>
<section class="section rad-animation-group pb-0" id="about">
<div class="container rad-fade-down">
<div class="row d-flex flex-column-reverse flex-md-row">
<div class="about__profile-picture col-12 col-md-6">
<img
class="lozad img-responsive image-left-overflow"
src="data:image/gif;base64,R0lGODlhBwACAIAAAP///wAAACH5BAEAAAEALAAAAAAHAAIAAAIDjI9YADs="
data-src="https://rjbasitali.com/img/who-am-i/user-picture.png"
data-srcset="https://rjbasitali.com/img/who-am-i/user-picture.png 1x, https://rjbasitali.com/img/who-am-i/user-picture@2x.png 2x"
alt="Profile Picture"
/>
</div>
<div class="col-12 col-md-6 my-auto my-auto">
<h2>Who am I?</h2>
<p class="lead">
<p class="lead"> Previously Ive worked with many startups including telehealth, trivia games, logistics and more. </p> <p class="lead"> I generally work with Go and Java for backend, React, Android, Git, Postgres and Linux, the technologies, especially databases can change depending on the needs of the project. </p>
</p>
<a
href="https://rail.town/team/"
target="_blank"
class="btn btn-primary"
>
<i class="icon-smile-fill"></i>
About Me
</a>
</div>
</div>
</div>
</section>
<section class="section section--border-bottom rad-animation-group">
<div class="container">
<div class="row rad-fade-down">
<div class="col-12">
<h2>Education</h2>
<div class="row pt-2 pt-md-4">
<div class="col-12 col-sm-6 mb-4 mb-sm-0">
<div class="education">
<div class="education__date">2012-2016</div>
<div class="education__title">University of Karachi</div>
<div class="education__degree">
Bachelor of Science (BS), Software Engineering
</div>
</div>
</div>
<div class="col-12 col-sm-6 mb-4 mb-sm-0">
<div class="education">
<div class="education__date">2009-2011</div>
<div class="education__title">P.E.C.H.S College</div>
<div class="education__degree">
Intermediate, Pre-Engineering
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="experience" class="section section--border-bottom rad-animation-group">
<div class="container">
<div class="row flex-column-reverse flex-md-row rad-fade-down">
<div class="col-12 col-sm-6 mt-5 mt-sm-0">
<div class="experience">
<div class="experience__date">Dec 2020 - Present</div>
<div class="experience__title">Sr. Software Developer</div>
<div class="experience__company">Railtown Ventures, Canada</div>
</div>
<div class="experience">
<div class="experience__date">Aug 2020 - Dec 2020</div>
<div class="experience__title">Sr. Java Developer</div>
<div class="experience__company">Intigral, Dubai</div>
</div>
<div class="experience">
<div class="experience__date">Apr 2019 - Jul 2020</div>
<div class="experience__title">Sr. Software Engineer</div>
<div class="experience__company">Oraan, Karachi</div>
</div>
<div class="experience">
<div class="experience__date">Apr 2016 - Apr 2019</div>
<div class="experience__title">Sr. Applications Engineer</div>
<div class="experience__company">NextGenI, Karachi</div>
</div>
</div>
<div class="col-12 col-sm-6">
<h2>Experience</h2>
<p class="lead">
Over 7&#43; years of experience working with companies from all over the world. I develop digital products to help businesses and improve people&#39;s lives.
</p>
<a href="https://www.linkedin.com/in/rjbasitali/" class="btn btn-primary"
target="_blank">
<i class="icon-linkedin-fill"></i>
Linkedin
<i class="icon-arrow-right"></i></a>
<a href="https://rjbasitali.github.io" class="btn btn-frameless"
target="_blank">
<i class="icon-profile-fill"></i>
Download My Resume
</a>
</div>
</div>
</div>
</section>
<section class="section rad-animation-group section--border-bottom">
<div class="container">
<h2 class="rad-fade-down">Testimonials</h2>
<div class="row row--padded mb-0 rad-fade-down">
<div class="col-12 col-md-4 mb-5 mb-md-0 testimonial">
<i class="icon-quote"></i>
<p>
Basit Ali has years of experience both as a software developer, and as an entrepreneur. In the Fintech, IoT, Entertainment, and Heath-Tech industries, Basit has both created technology for those industries, as well as helped build companies in those industries. Basit is a highly skilled hard-working software developer with a passion for building scalable systems.
</p>
<div class="testimonial__author">
<img class="lozad testimonial__author-image"
src="data:image/gif;base64,R0lGODlhBwACAIAAAP///wAAACH5BAEAAAEALAAAAAAHAAIAAAIDjI9YADs="
data-src="https://rjbasitali.com/img/testimonials/charles-iliya.png"
data-srcset="https://rjbasitali.com/img/testimonials/charles-iliya.png 1x, https://rjbasitali.com/img/testimonials/charles-iliya@2x.png 2x"
alt="Charles Iliya Krempeaux"/>
<div class="testimonial__author-info">
<h4>Charles Iliya Krempeaux</h4>
<span>Railtown, CEO</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="section section--contact pt-0">
<div class="container">
<div class="contact">
<h2>Contact</h2>
<div class="row pt-2">
<div class="col-12 col-lg-7">
<form action="#" method="">
<div class="row">
<div class="col-12 col-sm-6">
<input type="text" name="" id="full_name"
placeholder="Full Name"/>
</div>
<div class="col-12 col-sm-6">
<input type="text" name="" id="email"
placeholder="Email Address"/>
</div>
</div>
<div class="row pt-4">
<div class="col-12">
<textarea name="" id="message"
cols="30" rows="3" placeholder="Type Your Message Here"></textarea>
</div>
</div>
<div class="row pt-4">
<div class="col-12">
<button type="submit" class="btn btn-primary">
<i class="icon-mail-fill"></i>
Send Message
</button>
</div>
</div>
</form>
</div>
<div class="col-12 col-lg-5 contact__info">
<h4>Phone Number</h4>
<span>&#43;92 (334) 805 42 16</span>
<h4>Email</h4>
<span><a href="mailto:rjbasitali@gmail.com">rjbasitali@gmail.com</a></span>
<h4>Address</h4>
<span>Karachi, Pakistan</span>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__left">
<div class="footer__copy">
© RjBasitAli. All rights reserved.
</div>
</div>
<div class="footer__links">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://rjbasitali.com/">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://rjbasitali.com/">EXPERIENCE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://rjbasitali.com/">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://blog.rjbasitali.com/">BLOG</a>
</li>
</ul>
</div>
<div class="footer__right">
<a href="https://radity.com/"
><img
src="https://rjbasitali.com/"
srcset="https://rjbasitali.com/ 1x, https://rjbasitali.com/ 2x"
alt=""
/></a>
</div>
</div>
</footer>
<script src='https://rjbasitali.com/js/rad-animations.js'></script>
<script src='https://rjbasitali.com/js/library/lozad.min.js'></script>
<script>
window.addEventListener("load", function() {
var observer = window.lozad(".lozad", {
rootMargin: window.innerHeight / 2 + "px 0px",
threshold: 0.01
});
observer.observe();
});
</script>
<script src='https://rjbasitali.com/js/library/jquery-3.3.1.slim.min.js'></script>
<script src='https://rjbasitali.com/js/library/bootstrap.min.js'></script>
<script src='https://rjbasitali.com/js/sticky-header.js'></script>
<script src='https://rjbasitali.com/js/library/smooth-scroll.polyfills.min.js'></script>
<script src='https://rjbasitali.com/js/library/fontfaceobserver.js'></script>
<script>
(function(w) {
if (w.document.documentElement.className.indexOf("fonts-loaded") > -1) {
return;
}
var fontA = new w.FontFaceObserver("Inter", {
weight: 300
});
var fontB = new w.FontFaceObserver("Inter", {
weight: 400
});
var fontC = new w.FontFaceObserver("Inter", {
weight: 500
});
var fontD = new w.FontFaceObserver("Inter", {
weight: 600
});
var fontE = new w.FontFaceObserver("Inter", {
weight: 700
});
var fontF = new w.FontFaceObserver("Inter", {
weight: 900
});
w.Promise.all([fontA.load(), fontC.load(), fontF.load()]).then(function() {
w.document.documentElement.className += " fonts-loaded";
});
})(this);
</script>
<script>
const scroll = new SmoothScroll('a[href*="#"]');
$('a.nav-link').on('click', () => {
const navbar = $('.navbar-collapse');
if (navbar && navbar.hasClass('show')) {
$('.navbar-toggler').click();
}
})
</script>
</body>
</html>