<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/b/cs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<section class="section-top active" id="s1">
<div class="details">
<div class="top">
<h2>Faxraddin</h2>
<div class="lists">
<div class="nav-btn" id="nav-icon1" onclick="document.getElementById('nav-icon1').classList.toggle('open')">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="hide-it">
<div class="hide1">
<div class="p1">
<a class="hide1-btn">My Work</a>
<a class="hide1-btn">My Shelf</a>
<a class="hide1-btn">My Resume</a>
</div>
<div class="p2">
<a class="hide-span">SAY HELLO</a>
<a class="hide-span">[email protected]</a>
<a class="hide-span">t/me.com</a>
</div>
</div>
</div>
</div>
<div class="first-info">
<div class="first-sec">
<h1>Frontend</br> Developer.</h1>
<h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
</div>
<img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
</div>
<div class="some-info">
<div class="a1">
<span>Highly skilled at progressive
enhancement, design systems &
UI Engineering.
</span>
<span>Over a decade of experience
building products for clients
across several countries.
</span>
</div>
<div class="btn-container">
<ul>
<a class="a" href="#s1"><div class="btn"></div></a>
<a class="a" href="#s2"><div class="btn"></div></a>
<a class="a" href="#s3"><div class="btn"></div></a>
<a class="a" href="#s4"><div class="btn"></div></a>
<a class="a" href="#s5"><div class="btn"></div></a>
</ul>
</div>
</div>
</div>
</section>
<section class="what-do" id="s2">
<div class="my-info">
<div class="what-doing" id="i1">
<h1>Design</h1>
<p>
I'm probably not the typical designer positioned behind an Illustrator artboard adjusting pixels, but I design. Immersed in stylesheets tweaking font sizes and contemplating layouts is where you'll find me (~_^). I'm committed to creating fluent user experiences while staying fashionable.
</p>
</div>
<div class="what-doing" id="i2">
<h1>Engineering</h1>
<p>
In building JavaScript applications, I'm equipped with just the right tools, and can absolutely function independently of them to deliver fast, resilient solutions optimized for scale — performance and scalabilty are priorities on my radar
</p>
</div>
</div>
</section>
<section class="exp" id="s3">
<div class="e1">
<div class="exp-info">
<h2>Over the</br> past 3 years,</h2>
<p>I've built products for companies and businesses around the globe ranging from marketing websites to complex solutions and enterprise apps with focus on fast, elegant and accessible user experiences.</p>
<p>Currently, I work at Shopify as a Senior UX Developer and Accessibility advocate crafting thoughtful and inclusive experiences that adhere to web standards for over a million merchants across the world.</p>
<p>Before now, I was Principal Frontend Engineer at hellotax, where I worked on a suite of tools and services tailored at providing fast, automated VAT Registration / filings & Returns solutions for multi-channel sellers across Europe.</p>
<p>Prior to hellotax, I was Senior frontend engineering contractor with Pixel2HTML, building JavaScript applications and interfaces for orgs and individuals.</p>
<p>I once also led the frontend team at a Russian startup, Conectar through building multiple React applications into a single robust learning platform.</p>
</div>
<img class="exp-img" src="/b/images/2634454 copy.pdf">
</div>
</section>
<section class="done" id="s4">
<div class="grid">
<div class="what-done">
<div class="w1">
<h1>I buld & </br> deign stuff</h1>
<p>Open source
projects, web apps
and experimentals.
</p>
<button class="done-btn">see my work ---></button>
</div>
<div class="w2">
<h1>I write,</br>sometimes</h1>
<p>About design,
frontend dev,
learning and life.
</p>
<button class="done-btn">read my article ---></button>
</div>
</div>
</div>
</section>
<section id="s5" class="send-me">
<div class="send-container">
<div class="send-top">
<h1>Send me a message!</h1>
<p>Got a question or proposal, or just want</br>
to say hello? Go ahead.</p>
</div>
<div class="send-inputs">
<div class="l">
<label>Your Name</label>
<input type="text" placeholder="Enter your name">
</div>
<div class="l">
<label>Email Address</label>
<input type="text" placeholder="Enter your address">
</div>
</div>
<div class="send-final">
<input type="text" placeholder="Hi,i think we have to work together">
<button class="shoot">SHOOT ---></button>
</div>
</div>
</section>
<section class="end-1" id="s6">
<div class="end-container">
<div class="end-info">
<div class="e2" id="ll">
<span>SAY HELLO</span>
<span>[email protected]</span>
<span>t.me/mrolaolu</span>
</div>
<div class="e2">
<span>My Work</span>
<span>My Shelf</span>
<span>My Resume</span>
</div>
</div>
<h2 class="end-link">© Faxraddin Olawuyi 2022</h2>
</div>
</section>
<script src="/b/js.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
scroll-snap-type: y mandatory;
}
html{
scroll-behavior: smooth;
}
.bar1, .bar2, .bar3 {
width: 2.5vw;
height: .35vw;
background-color: #333;
margin: 6px 0;
transition: 0.2s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
section{
scroll-snap-align: start;
}
.section-top{
height: 47vw;
padding-bottom: 10vw;
}
.details{
background-color:#0b2361;
background-repeat: no-repeat;
background-size: 100vw 100%;
}
.top {
display: flex;
justify-content: space-between;
padding: 1vw;
padding-bottom: 6vw;
}
.top h2{
font-size: 2.2vw;
margin: 0;
margin-top: 30px;
margin-left: 60px;
color:#e9ecf4;
position: fixed;
z-index: 3;
}
.nav-btn {
background: none;
border: none;
font-size: 3vw;
cursor: pointer;
position: fixed;
right: 4.5vw;
top:4vw;
z-index: 3;
padding-bottom: 2vw;
}
#l1{
width: 3vw;
}
#l2{
width: 2vw;
}
.first-info{
display: flex;
justify-content: space-between;
width: 70vw;
margin-left: 10vw ;
padding-top: 30px;
}
.first-sec h1{
font-size: 4.4vw;
color: #f1554c;
}
.first-sec h3{
width: 35vw;
margin-top: -2vw;
font-size: 1.5vw;
color:#e9ecf4;
}
.my-img{
width: 24vw;
margin-top: 10px;
}
.a1{
display: flex;
justify-content: space-between;
width: 35vw;
margin-left: 10vw ;
padding-top: 30px;
color:#f1554c;
margin-top: 20px;
padding-bottom: 6.5vw;
font-size: 1.3vw;
}
.a1 span{
width: 45%;
font-size: 1vw;
}
.some-info {
display: flex;
justify-content: space-between;
width: 93vw;
}
.btn-container{
position: fixed;
z-index: 1;
right: 0;
padding-right: 5.5vw;
margin-top: -3vw;
}
.btn-container ul{
display: flex;
flex-direction: column;
align-items: center;
}
.btn{
margin:.7vw;
cursor: pointer;
z-index: 1;
width: .2vw;
height: .2vw;
background-color: black;
transform: rotate(45deg);
border-style:solid;
transition: 0.3s;
}
.what-do{
background-repeat: no-repeat;
background-size: 100vw 100%;
height: 840px;
background-color: #e9ecf4;
}
.my-info{
display: flex;
margin-left: 7vw ;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.what-doing{
width: 50%;
}
.what-doing h1{
font-size: 4vw;
color: #f1554c;
}
.what-doing p{
font-size: 1.2vw;
width: 30vw;
margin-top: -2vw;
color:#0b2361;
}
#i2{
margin-top: 17vw;
margin-left: 1vw;
}
.exp{
height: 840px;
background-color:#0b2361
}
.e1{
display: flex;
justify-content: space-between;
width: 85vw;
padding-top: 1vw;
margin-left: -8vw;
padding-bottom: 2vw;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.exp-info{
display: flex;
flex-direction: column;
margin-left: 10vw;
color: #e9ecf4;
}
.exp-info h2{
font-size: 4.5vw;
margin-bottom: 0;
}
.exp-info p{
width: 25vw;
font-size: 1.1vw;
}
.exp-img{
height: 40vw;
margin-top: 6vw;
}
.done{
height: 840px;
background-color:#e9ecf4;
}
.grid{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.what-done{
display: flex;
margin: auto;
width: 90vw;
height: 40vw;
background-color: whitesmoke;
}
.w1{
width: 50%;
text-align: left;
padding: 5vw;
}
.w2{
width: 50%;
text-align: left;
padding: 5vw;
border-left-style: solid;
border-width: thin;
}
.w1 h1{
font-size: 3.3vw;
color: #f1554c;
}
.w1 p{
font-size: 2vw;
color:#0b2361;
}
.w2 h1{
font-size: 3.3vw;
color: #f1554c;
}
.w2 p{
font-size: 2vw;
color: #0b2361;
}
.done-btn{
background: none;
cursor: pointer;
font-size: 1.3vw;
padding: 1.3vw 5vw 1.3vw 5vw;
margin-top: 3vw;
color: #f1554c;
}
.hide-it{
position: absolute;
transition: 0.2s;
background-color: white;
height: 0;
width: 25vw;
position: fixed;
right: 3vw;
top:3vw;
color: white;
}
.hide1{
display: flex;
flex-direction: column;
}
.p1{
display: flex;
flex-direction: column;
padding-top: 6vw;
padding-left: 2.7vw;
transition: 0.1s;
visibility: hidden;
transition: 0.1;
}
.hide1-btn{
border: none;
background: none;
font-size: 1.4vw;
text-align: left;
padding: 10px;
}
.p2{
display: flex;
flex-direction: column;
padding-top: 6vw;
padding-left: 2.7vw;
transition: 0.1s;
visibility: hidden;
transition: 0.9;
}
.hode-1{
font-size: 1.4vw;
text-align: left;
padding: 10px;
}
.hide-span{
font-size: 1.4vw;
text-align: left;
padding: 10px;
}
.active{
visibility: visible;
height: 34vw;
z-index: 2;
color: black;
}
.active2{
visibility: visible;
}
.btn.active1{
background-color: white;
width: .7vw;
height: .7vw;
transform: rotate(0deg);
border-radius: 4px;
}
#nav-icon1 {
width: 4vw;
height: 3vw;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span {
display: block;
position: absolute;
height: 3px;
width: 3.5vw;
background: black;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 18px;
}
#nav-icon1 span:nth-child(3) {
top: 36px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.send-me{
height: 840px;
background-color: #e9ecf4;
display: flex;
justify-content: center;
align-items: center;
}
.send-top h1{
font-size: 3.3vw;
text-align: center;
color: #f1554c;
}
.send-top p{
font-size: 1.7vw;
color:#0b2361;
text-align: center;
margin-top: -2vw;
padding-bottom: 5vw;
}
.send-inputs{
display: flex;
justify-content: space-between;
width: 50vw;
}
.send-inputs input{
outline: none;
padding: 1vw 0vw 1vw 0vw;
width: 21vw;
height: 2vw;
font-size: 1.3vw;
border-bottom: 5px solid black;
border-width: thin;
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.send-inputs label{
font-size: 1vw;
}
.l{
display: flex;
flex-direction: column;
}
.send-final{
padding-top: 4vw;
width: 50.5vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.send-final input{
background: none;
font-size: 1.3vw;
width: 100%;
outline: none;
padding: 1vw 0vw 1vw 0vw;
height: 2vw;
border-width: thin;
border-bottom: 5px solid black;
background: none;
border-width: thin;
border-top: none;
border-left: none;
border-right: none;
}
.shoot{
border-width: thin;
font-size: 1.3vw;
border-color: black;
margin-top: 4vw;
width: 20vw;
height: 4vw;
background: none;
cursor: pointer;
font-size: 1.3vw;
padding: 1.3vw 5vw 1.3vw 5vw;
}
.end-1{
background-color: #0b2361;
height: 830px;
display: flex;
justify-content: center;
align-items: center;
}
.end-container{
display: flex;
flex-direction: column;
width: 80vw;
}
.end-info{
border-width: thin;
border-bottom: 5px solid #e9ecf4;
background: none;
border-width: thin;
border-top: none;
border-left: none;
border-right: none;
display: flex;
}
.e2{
display: flex;
flex-direction: column;
font-size: 1.5vw;
color: #e9ecf4;
padding: 4vw 0vw 8vw 0vw;
}
.e2 span{
padding-top: 1.5vw;
}
#ll{
margin-top:-3vw;
padding-right: 19vw;
}
.end-link{
color: #e9ecf4;
padding-top: 3vw;
}
