Welcome to π10 labs

Design & coding for
UI/UX Jamstack Shopify Store Building Front End Development AI API Applications Visual Design Small Businesses Website Design Prototyping CMS Template Building Bootstrap Responsive Web Mobile Apps dApps Startups Flat Design Identity Branding Alluring Print Social Media Reach Effective SEO Distributed Web Code Debugging Independence Stackoverflow

I am a highly skilled designer and developer with expertise in UI/UX design: information architecture, wireframes, design thinking, prototyping, usability testing,visual design: graphic design, typography, branding, illustration, Adobe Creative Cloud, print,front end development: HTML, CSS, Javascript, React, Node.js,API-based decoupled CMS: Jamstack, (Netlify, Gatsby, Strapi, OneGraph),e-commerce: Shopify (incl. Tiktok, Facebook, Instagram, Youtube, SEO),the startup community.Resume | Executive Summary | 608-286-9463

Code repositories

1 .type {
2   color:#0000;
3   background:
4   linear-gradient(-90deg,#dcd4e2 5px,#0000 0) 10px 0,
5   linear-gradient(#fffef2 0 0) 0 0;
6   background-size:calc(var(--n)*1ch) 200%;
7   -webkit-background-clip:padding-box,text;
8   background-clip:padding-box,text;
9   background-repeat:no-repeat;
10  animation:
11     b .7s infinite steps(1),
12     t calc(var(--n)*.01s) steps(var(--n)) forwards;
13 animation-iteration-count: infinite;
14 }
15 @keyframes t {
16   from {background-size:0 200%}
18   /* to {transform: translateY(40px); opacity: 0;} */
19 }
20 @keyframes b {
21   50% {background-position:0 -100%,0 0}
22 }
Code challenges for above module: 1) css-only typing effect for code (thanks to: https://codepen.io/t_afif/pen/ExXyXpB), 2) background text child element w/higher stacking order than parent so that background text are clickable links (done w/css animation keyframes where parent z-index is temporarily reduced to 1). [ View code (line 115-278) ]


GM Jr Scouting

Factory on Barclay

Hernandez Roofing


Loft on Broadway



Wild Impact Marketing Group