Welcome to π10 labs

Design & coding for
Small Businesses Jamstack Responsive Web Mobile Apps Shopify Startups Distributed Web Bootstrap Qubit applications Stackoverflow

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) ]

Jangobio

Factory on Barclay

Hernandez Roofing

Mixxi

Loft on Broadway

GM Jr Scouting

Diageo

I'm in the process of updating projects (and adding more).