Cattech
The site of my hardware business: services, a selectable price list that builds the quote request, and case studies with machine specs, in the visual language of a datasheet.
The context
Cattech is my hardware business: custom PCs and workstations, technical support, repairs and workstation rental, in Padua and across the Veneto. The site had to explain very technical services to people outside the trade and lead to a concrete quote request.
The approach
The visual language comes from hardware: a circuit-board grid, drafting-style corner marks, silkscreen labels and specs laid out like a datasheet, in dark and light themes. Titles use a width-variable font, and a table of glyph widths computes the longest word of every title on the server: text never spills out of its column, at any screen width.
Support is a price list of 18 services in 4 groups: you pick what you need and the site composes the request, through the form or as a pre-written WhatsApp message. The form goes through a server endpoint with a zod schema shared by client and server, a honeypot, a fill-time check and rate limiting; delivery runs through Resend.
Scrolling is Lenis, motion is GSAP with ScrollTrigger and SplitText: pinned sections, services as stacked cards, work on a horizontal track. The libraries load after hydration, the page opening is animated in CSS alone, and with reduced motion everything stays static and readable.
The outcome
Every page is prerendered and served by Vercel, with LocalBusiness structured data for local search, and sitemap and robots generated at build time. It is also where this portfolio sends everything hardware-related.