HeroFrame 011440 × 900

ShivrajsinhZala.

H1 · Archivo 900 · 112% padding 0 · margin 16

I turn designs into fast, animated, production-ready websites — true to the file and smooth on every screen.

Frontend developer at Just Digital Gurus. WordPress, Webflow, Squarespace and Shopify for client work; React, Next.js and Astro with GSAP when it has to move.

Start a project → See the work

DCL Flip this page between Design, Code and Live — or use the toolbar below.

portrait.webp1 : 1

Shivrajsinh Zala — black and white cutout portrait on yellow

Role: Frontend Developer
Studio: Just Digital Gurus
Based: Rajkot, India
Shipped: 30+ websites
Status: Available

hero.tsxTSX

export default function Hero() {  useGSAP(() => {    gsap.from('.hero__name', {      fontVariationSettings: "'wdth' 62, 'wght' 100",      duration: 1.4, ease: 'expo.out'    });  });  return <Selection handles>    <h1>Shivrajsinh Zala.</h1>  </Selection>;}

ProcessFrame 02

Specto ship.

01Spec
I read the Figma file like a contract — spacing, type scale, every hover and empty state.
02Build
Semantic, responsive code on the right platform: WordPress, Webflow, Shopify or React.
03Animate
Motion with GSAP and ScrollTrigger that guides the eye instead of getting in the way.
04Ship
Fast, accessible and SEO-ready at launch — and maintained long after.

craftdesign.studio — wireframe

1280 64 col 6/12 24

Craft Design Studio — the finished website

Live

process.tsTS

const steps = ['spec', 'build', 'animate', 'ship'];gsap.timeline({  scrollTrigger: { trigger: '#process', pin: true, scrub: 1 }})  .to('.redline', { scaleX: 1 })      // spec  .to('.codepane', { xPercent: 0 })  // build  .from('.block', { y: 40 })      // animate  .to('.shot', { clipPath: 'inset(0)' }); // ship

Selected workFrame 03

Selectedwork(03)

Client work lives under NDA, so these are products I designed, built and shipped myself. Client sites I can show are in the index below.

01 / PWALive

ST Tracker

Live GSRTC bus tracking for Gujarat — real-time positions, stop ETAs and push alerts in an installable web app.

Role: Design · Build · Ship
Stack: Node.js · SQLite · Web Push

Open the app ↗

02 / Web appIn use

LoanFlow

Loan management for a working financier — accounts, EMIs, ledgers and payment collection in one dashboard.

Role: Design · Build
Stack: Next.js · Prisma · Razorpay

Open LoanFlow ↗

03 / Full-stackLive

WebCraft

A visual website builder — drag sections in, style them, publish. Editor, renderer and backend built end to end.

Role: Product · Full-stack
Stack: React · Vite · Node.js

Try the builder ↗

work.tsxTSX

const featured = projects.filter(p => p.mine);return featured.map((p, i) => (  <Case key={p.slug} index={i + 1}    reveal="scan" {...p} />));// → ST Tracker, LoanFlow, WebCraft

All workLayers · 14

Everylayer(14)

Client sites, products and experiments — hover a layer to preview it.

LayersPage · Work

ST TrackerPWA · Node.js

layers.tsTS

layers.forEach((row, i) => {  row.addEventListener('pointerenter', () => {    preview.show(i);   // crossfade + scale    row.classList.add('is-on');  });});

ComponentsFrame 05 · 3 main components

What Ibuild

Component 01

Websites

Marketing sites and stores on the platform your team can actually run — themed, fast and easy to edit.

WordPressWebflowSquarespaceShopify

Component 02

Custom builds

Web apps and bespoke front ends from Figma — dashboards, builders, PWAs and Chrome extensions.

ReactNext.jsAstroNode.js

Component 03

Motion

Scroll-driven storytelling, page transitions and micro-interactions that feel considered, not decorative.

GSAPScrollTriggerLenis

components.tsTS

export const services = {  websites: ['WordPress', 'Webflow', 'Squarespace', 'Shopify'],  custom:   ['React', 'Next.js', 'Astro', 'Node.js'],  motion:   ['GSAP', 'ScrollTrigger', 'Lenis'],};

AboutFrame 06

Hi, I’mShivrajsinh

A frontend developer in Rajkot who cares about the last 10% — the spacing, the easing, the state nobody designed.

At Just Digital Gurus I build and maintain client websites end to end, from Figma hand-off to launch. Outside client work I build my own products to learn the parts of the stack I don’t touch every day.

Version history4 versions

v3.0Frontend DeveloperJust Digital Gurus, RajkotFeb 2025 — now
★Rising Star awardJust Digital Gurus2025
v2.0MCAB H Gardi College of Engineering & Technology (GTU)2023 — 2025
v1.0BCAOMVVIM College (Saurashtra University)2020 — 2023

about.jsonJSON

{  "name": "Shivrajsinh Zala",  "role": "Frontend Developer",  "studio": "Just Digital Gurus",  "since": 2025,  "cares_about": ["spacing", "easing", "edge cases"]}

ContactFrame 07

Let’s shipyour next site.

~/your-projectzsh

❯ npx ship your-project

✓ Figma file read

✓ Responsive build

✓ Motion pass (GSAP)

✓ Accessibility + SEO checks

▲ Live at your-domain.com

hello@shivrajsinh.in ↗

LinkedIn GitHub Instagram Telegram

SZLeave a comment on your project

contact.tsTS

await ship(yourProject, {  from: 'figma',  to: 'production',  motion: true,  maintained: true,});