681 lines
20 KiB
HTML
681 lines
20 KiB
HTML
|
||
<!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);
|
||
}
|
||
}
|
||
|
||
.char {
|
||
transform: translateY(115px);
|
||
transition: transform .5s;
|
||
}
|
||
|
||
h1 {
|
||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
||
}
|
||
</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" id="title">
|
||
Hello, I’m Basit Ali.
|
||
</h1>
|
||
<h1>
|
||
<span>Software Developer</span>
|
||
</h1 class="display-1">
|
||
<p class="lead">
|
||
I work at <a target='_blank' href='https://rail.town/'>Railtown</a>, a software development company in Canada. Right now I’m 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 I’ve 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+ years of experience working with companies from all over the world. I develop digital products to help businesses and improve people'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>+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>
|
||
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js" integrity="sha512-gsEItzcNkWxfxHjr4BaEZAd9YuRWYjxnj7c/yukcZ0/nWehUb5TjJNyyv1ApCU2DFH/qgw+stFZHPOKnoQnIuQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
<script src="https://unpkg.com/split-type"></script>
|
||
|
||
<script>
|
||
const title = new SplitType('#title');
|
||
gsap.to('.char', {
|
||
y: 0,
|
||
stagger: 0.05,
|
||
delay: 0.2,
|
||
duration: .1
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|