Faxraddin

My Work My Shelf My Resume
SAY HELLO jncoicih@gmail.com t/me.com

Frontend
Developer.

I like to craft solid and scalable frontend products with great user experiences.

Highly skilled at progressive enhancement, design systems & UI Engineering. Over a decade of experience building products for clients across several countries.

Design

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.

Engineering

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

Over the
past 3 years,

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.

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.

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.

Prior to hellotax, I was Senior frontend engineering contractor with Pixel2HTML, building JavaScript applications and interfaces for orgs and individuals.

I once also led the frontend team at a Russian startup, Conectar through building multiple React applications into a single robust learning platform.

I buld &
deign stuff

Open source projects, web apps and experimentals.

I write,
sometimes

About design, frontend dev, learning and life.

Send me a message!

Got a question or proposal, or just want
to say hello? Go ahead.

SAY HELLO hello@olaolu.dev t.me/mrolaolu
My Work My Shelf My Resume

© Faxraddin Olawuyi 2022

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; }