# alexshanley.com

> Generated by All in One SEO v5.0.3, this is an llms.txt file, used by LLMs to index the site.

## Sitemaps

- [XML Sitemap](https://alexshanley.com/sitemap.xml): Contains all public & indexable URLs for this website.

## Posts

- [Why scroll-driven animations so good?](https://alexshanley.com/why-scroll-driven-animations-so-good/): Discover why native CSS @scroll-timeline is replacing JavaScript. Learn how to eliminate scroll jank, boost Core Web Vitals, and build off-main-thread motion.
- [Glass UI: and why you should](https://alexshanley.com/glass-ui-and-why-you-should/): Master Glassmorphism on the web. Stop backdrop-filter bleed across stacking contexts using CSS isolation—the architectural fix nobody talks about.
- [The 1% Rule : and why it matters](https://alexshanley.com/elementor-5155/): Design Feb 22, 2026 The 1% rule: obsessing over micro-interactions that matter Alex Shanley 3 min read We spend 99% of our time designing layout grids, selecting typography, and managing state architecture. But the final 1%—the micro-interactions, the subtle easing curves, the specific way a button yields when clicked—is what dictates whether a digital product
- [Scroll animation](https://alexshanley.com/scroll-animation/): JS scroll listeners are a performance tax. Learn how CSS scroll-driven animations replace them with three lines that run jank-free on the compositor.
- [The View Transitions API: App-Like Navigation Without a SPA](https://alexshanley.com/view-transitions-api/): The View Transitions API brings native-app page morphs to plain multi-page sites. Two lines of CSS, no router, no framework — here is how to ship it today.
- [Optical Alignment: When the Math Is Wrong](https://alexshanley.com/optical-alignment/): Perfectly centered is often visibly off. Why play icons, quotation marks, and rounded shapes need optical correction — and how to train your eye to see it.
- [CSS :has() — The Parent Selector Changes How You Architect Styles](https://alexshanley.com/css-has-selector/): For twenty years CSS could only look down the tree. :has() looks up, sideways, and forward — killing a whole class of state-tracking JavaScript.
- [INP: The Metric That Finally Measures How Your Site Feels](https://alexshanley.com/optimizing-inp/): Interaction to Next Paint punishes what users actually hate: taps that do nothing. Here is where INP debt hides and the patterns that pay it down.
- [linear() Easing: Real Springs in Pure CSS](https://alexshanley.com/css-linear-easing/): cubic-bezier can only draw one hump — no bounce, no overshoot-and-settle. The linear() function ends that limit and brings true spring physics to CSS.
- [Container Queries: Components That Own Their Responsiveness](https://alexshanley.com/container-queries/): Media queries ask how big the window is. Container queries ask how big MY box is — the question components actually needed. Sidebars stop breaking cards forever.
- [Fluid Type Scales: Stop Breakpointing Your Typography](https://alexshanley.com/fluid-type-scales/): Font sizes that jump at breakpoints are a relic. clamp() plus viewport units give typography that glides between devices — one line per text style.
- [content-visibility: The Biggest Rendering Win Nobody Ships](https://alexshanley.com/content-visibility/): One CSS property that tells the browser to skip rendering offscreen sections entirely — often halving initial render time on long pages. Here is how to use it safely.
- [FLIP: The Technique Behind Every Smooth Layout Animation](https://alexshanley.com/flip-animations/): You cannot animate layout without jank — unless you invert it. FLIP turns expensive layout changes into cheap transforms, and it powers every smooth reorder you have seen.
- [The Popover API: Tooltips and Menus Without the Library](https://alexshanley.com/popover-api/): Light dismiss, top-layer stacking, focus handling — everything you imported Floating UI for is now two HTML attributes. The Popover API in practice.
- [OKLCH: The Color Space Your Design System Should Have](https://alexshanley.com/oklch-color/): HSL lies: 50% lightness in yellow and blue are wildly different brightnesses. OKLCH makes lightness honest — and makes generated palettes finally look designed.
- [Speculation Rules: Instant Navigation by Betting on the Next Click](https://alexshanley.com/speculation-rules/): The browser can now prerender the next page before the user clicks — entire navigations in 0ms. The Speculation Rules API, and how to bet without wasting bandwidth.
- [Staggered Reveals: Choreography, Not Decoration](https://alexshanley.com/staggered-reveals/): Twelve cards fading in at once reads as one blob. Stagger them 40ms apart and the eye follows a story. The rules of good stagger timing, in CSS.
- [CSS Subgrid: The Alignment Problem Grid Could Not Solve Alone](https://alexshanley.com/css-subgrid/): Cards in a row with misaligned titles, prices, and buttons — the oldest grid frustration. Subgrid lets children align to their grandparent tracks. Solved.
- [Dark Mode Done Properly: It Is Not a Filter](https://alexshanley.com/dark-mode-done-properly/): Inverting colors is not designing a dark theme. Elevation flips from shadows to lightness, saturation must drop, and pure black is a mistake. The real checklist.
- [Font Loading Without the Flash: A 2026 Strategy](https://alexshanley.com/font-loading/): FOUT, FOIT, and layout shift are all self-inflicted. Preload, font-display, and size-adjust fallbacks make web fonts effectively invisible to loading.
- [Scroll Snap: Storytelling in Full-Screen Chapters](https://alexshanley.com/scroll-snap/): Scroll snapping turns a page into chapters — carousels, onboarding flows, full-bleed stories — with pure CSS. And the discipline to know when not to.
- [@property: Typed CSS Variables That Actually Animate](https://alexshanley.com/css-at-property/): Custom properties are strings — which is why animating them snaps instead of tweening. @property gives them types, and suddenly gradients, angles, and numbers interpolate.
- [Whitespace Is Hierarchy: The Cheapest Design Tool You Have](https://alexshanley.com/whitespace-hierarchy/): Before color, weight, or size, spacing tells readers what belongs together. Proximity ratios, spacing scales, and why cramped interfaces feel cheap.
- [Image Formats in 2026: AVIF First, and Fewer Bytes Than You Think](https://alexshanley.com/modern-image-formats/): AVIF is universally supported and half the size of JPEG at equal quality. The modern image stack: format, sizing, priority, and the three attributes that matter.
- [Hover Choreography: Interfaces That Acknowledge You](https://alexshanley.com/hover-choreography/): A good hover state is a conversation: the cursor asks, the element answers, its siblings step back. Group hovers, focus parity, and timing that feels intentional.
- [CSS Anchor Positioning: Tooltips That Position Themselves](https://alexshanley.com/css-anchor-positioning/): Pin any element to any other element, with automatic flipping when space runs out — the layout problem that kept Popper.js alive, now solved in CSS.
- [Border Radius Consistency: The Detail That Exposes Rushed UI](https://alexshanley.com/border-radius-consistency/): Mismatched corner radii are the typo of visual design. Nested radius math, a sane token scale, and why concentric corners feel right.
- [Compositor-Only Animations: The 60fps Contract](https://alexshanley.com/compositor-animations/): transform and opacity animate on a separate thread and cannot jank — everything else can. The rendering pipeline, will-change etiquette, and cheap ways to fake the expensive.
- [A Real prefers-reduced-motion Strategy (Not Just Turning Things Off)](https://alexshanley.com/reduced-motion-strategy/): Reduced motion is not no motion. Which animations to keep, which to swap for crossfades, and how to build it as a system instead of an apology.
- [The dialog Element: Modals You Stop Maintaining](https://alexshanley.com/html-dialog-element/): Focus traps, backdrop, Escape handling, inert background — the modal checklist the platform now does for you. showModal(), ::backdrop, and closedby.
- [Designing Empty States: The First Screen Users Ever See](https://alexshanley.com/designing-empty-states/): Every user meets your product empty before they meet it full. Turning blank screens from dead ends into starting lines — guidance, gradients of emptiness, and tone.
- [The Third-Party Script Diet: Your Site Is Slow Because of Other People](https://alexshanley.com/third-party-scripts/): Analytics, chat widgets, pixels — the median site ships more third-party code than its own. An audit ritual, a facade pattern, and a worker to exile the rest.
- [Form Micro-Interactions: Where Motion Earns Its Keep](https://alexshanley.com/form-micro-interactions/): Forms are where users are most anxious and most honest. Validation timing, the shake that means no, and success states that reward completion.
- [text-wrap: balance and pretty — Typography the Browser Fixes Now](https://alexshanley.com/css-text-wrap/): Lonely last words on headlines, orphans at paragraph ends — line-breaking sins designers fixed by hand for decades. Two CSS values now fix them permanently.

## Pages

- [Home](https://alexshanley.com/): Product-focused Web Developer and UX/UI Designer. I ship scalable fintech, SaaS, & mobile apps, driving growth by bridging business & technical goals.
- [My Blog](https://alexshanley.com/blog/): WritingAll thoughts oncraft & code.Essays on motion, frontend performance, and the 1% details that make interfaces feel premium.AllDesignFrontendMotionPerformance30 articlesLatestFrontendSep 4, 20261 min readtext-wrap: balance and pretty — Typography the Browser Fixes NowLonely last words on headlines, orphans at paragraph ends — line-breaking sins designers fixed by hand for decades. Two CSS values now fix them
- [Projects](https://alexshanley.com/projects/): Interactive 3D portfolio by Alex Shanley featuring 14 diverse web projects, from React and Django apps to corporate WordPress architecture
- [Cuban Coffee Queen](https://alexshanley.com/cuban-coffee-queen/): Graphic design case study: gift card and carrier design for Cuban Coffee Queen, Key West's own coffee roaster from concept to print-ready dieline.
- [MEWS PMS](https://alexshanley.com/mews-pms/): Voucher Connect × Mews — Case Study Voucher Connect× Mews A front-desk interface for redeeming third-party gift vouchers directly against live reservations inside Mews, the hospitality property management platform. The brief: let reception staff validate a guest's voucher code, match it to the correct booking, and apply its balance to the invoice — without leaving
- [We Post You Profit.](https://alexshanley.com/we-post-you-profit/): A graphic design case study for Voucher Connect's postal gift card fulfilment service, covering iconography, layout and print-ready visual direction.
- [Boy to Man ISTD.](https://alexshanley.com/boy-to-man-istd/): An ISTD case study: research into men's mental health shaped Boy Now, an illustrated parenting book with custom typography and full print production.
- [My Profile Redesign](https://alexshanley.com/my-profile-redesign/): My Account Redesign Case Study My Account Redesign. A UX/UI redesign of Voucher Connect's account settings screen, taking a bare legacy form and turning it into a grouped, secure, and genuinely usable settings experience that matches the rest of the redesigned platform. Client Voucher Connect Industry Gift Voucher Platform Role UX / UI Designer Tool
- [My Stores Redesign.](https://alexshanley.com/my-stores-redesign/): My Stores Redesign Case Study My Stores Redesign. A UX/UI redesign of Voucher Connect's account selector screen, the page a merchant lands on straight after login to choose which store they're managing, taken from a functional but flat utility screen to a considered, branded product moment. Client Voucher Connect Industry Gift Voucher Platform Role UX
- [Voucher connect Youtube](https://alexshanley.com/voucher-connect-youtube/): Voucher Connect Youtube Voucher Connect Youtube A running library of edited video content for Voucher Connect, built in Adobe Premiere Pro from raw footage through to a finished, publish-ready cut, with motion graphics and sound design layered in on top of the edit rather than left as an afterthought. Client Voucher Connect Discipline Editing, Motion
- [Healy Pentony Solicitors](https://alexshanley.com/healy-pentony-solicitors/): Healy Pentony Solicitors Case Study Healy Pentony A modern, trust led web presence built for a boutique Dublin law firm, structuring a broad practice spanning commercial and residential property, probate and commercial litigation into clear, distinct paths for private clients, financial institutions and businesses. Client Healy Pentony Solicitors LLP Industry Legal Services Role Web Design
- [efastireland](https://alexshanley.com/efastireland/): EFAST Ireland case study: How technical SEO, WordPress migration, Stripe payments, and SMTP email delivery optimized this emergency training platform.
- [Talisman Metals PLC](https://alexshanley.com/talisman-metals-plc/): See how Alex Shanley engineered a custom WordPress platform for Talisman Metals, featuring live LSE data integrations and automated news feeds.
- [Lightspeed Gift Vouchers](https://alexshanley.com/lightspeed-gift-vouchers/): Explore the Lightspeed Gift Vouchers case study: A custom POS integration featuring Stripe payments, ML fraud prevention, and real-time iPad camera scanning.
- [Redesign of Avoca Wicklow Day Tour](https://alexshanley.com/avoca-wicklow-day-tour/): See how Alex Shanley transformed the Avoca Wicklow Day Tour website into a premium digital experience. Explore the full luxury redesign case study.
- [Voucher Connect Website](https://alexshanley.com/voucher-connect-website/): Explore the Voucher Connect technical redesign: A high-performance SaaS rebuild featuring 90+ PageSpeed scores.
- [Engage Financial Solutions](https://alexshanley.com/engage-financial-solutions/): Engage Financial Solutions — Case Study Engage Financial A high-performance, fully compliant corporate web presence engineered for one of Ireland's leading award-winning financial brokerages. Regulated by the Central Bank of Ireland and operating from Blackrock, Co. Dublin, Engage Financial Solutions required a platform that could serve first-time buyers, mortgage switchers, retirement planners, and business clients
- [Platinum Pilates](https://alexshanley.com/platinum-pilates/): Platinum Pilates — Full Website Build Case Study Platinum Pilates A complete ground-up website build for Ireland's leading Pilates and Physiotherapy brand. Operating across five studio locations and three physiotherapy clinics in Dublin, Platinum Pilates required a Squarespace platform that could elegantly serve a multi-location fitness brand — handling class timetables, tiered pricing, online booking,
- [Northbrook Clinic](https://alexshanley.com/northbrook-clinic/): The Northbrook Clinic — Server Migration & DNS Case Study Northbrook Clinic A server migration and DNS management engagement for one of Dublin's established specialist medical and dental clinics. Founded in 1993 and located in Ranelagh, The Northbrook Clinic operates a referral-based practice with eight specialists across dental and medical disciplines — and requires its
- [Dingle Distillery](https://alexshanley.com/dingle-distillery/): Dingle Distillery — Website Protection & Maintenance Case Study Dingle Distillery A website protection and maintenance engagement for one of Ireland's most celebrated independent distilleries. Nestled on the edge of the Wild Atlantic Way in County Kerry, Dingle Distillery produces award-winning whiskey, gin, and vodka — and relies on dingledistillery.ie as its primary e-commerce, brand,
- [Mosaic Assemblers](https://alexshanley.com/mosaic-assemblers/): Mosaic Assemblers — Web Design, Maintenance & Protection Case Study Mosaic Assemblers A web design, maintenance, and protection engagement for one of Ireland's longest-established specialist mosaic tile suppliers. Founded in 1969, Mosaic Assemblers has built an international reputation for the design and supply of premium mosaic tiles across domestic, leisure, and commercial markets — and
- [Group gift card page](https://alexshanley.com/group-gift-card-page/): Group Gifting UI/UX A deep-dive analysis of the organiser-facing management interface for group gift cards on VoucherConnect — examining information architecture, interaction patterns, usability heuristics, and design opportunities. Product VoucherConnect User Role Gift Organiser Platform Web — Desktop Study Type Heuristic Eval. 01. Product Overview. VoucherConnect is a smart gifting platform where users purchase and
- [Test](https://alexshanley.com/test/): Alex Shanley — Web Design & Development Portfolio All CMS Dev Full Stack UX / UI Graphic Design Animation ↑↓navigate 01 / 14 ↑ swipe to browse ↓ CMS Dev 02 Mobile App 03 Web Design About me ABOUTME. ETHOS I am a Creative Developer based in the digital ether. I build interfaces that feel
- [About](https://alexshanley.com/about/): Meet Alex Shanley: a hybrid product leader who designs, builds, and ships. Specialising in UI/UX, web development, and measurable digital impact.
- [Pawfect Match](https://alexshanley.com/pawfect-match/): Explore Pawfect Match: A full-stack Django application featuring PostgreSQL integration, custom CRUD functionality, and a robust admin management portal.
- [Movie Geek](https://alexshanley.com/movie-geek/): Explore Movie Geek: A full-stack social hub built with Django, React, and PostgreSQL. Features real-time TMDB API integration and a custom meetup engine.
- [Not again - animation](https://alexshanley.com/not-again-animation/): 2D Animation Case Study: "Not Again." Showcasing expertise in Toon Boom Harmony, Adobe After Effects, character rigging, and collaborative production workflows.
- [Headline](https://alexshanley.com/headline/): Explore Alex Shanley's UI/UX and frontend build for Headline, a dynamic digital music discovery platform designed for audiences aged 18-26.
- [Shoreline](https://alexshanley.com/shoreline/): Explore Alex Shanley's brand identity and print collateral design for Shoreline, a new coastal hospitality venue located in Newport-on-Tay, Fife.
- [Contact me](https://alexshanley.com/contact-me/): Ready to build something great? Contact Alex Shanley, a Dublin-based developer, to discuss new projects, consulting roles, or general inquiries.
- [Voucher Connect App](https://alexshanley.com/voucher-connect-app-2/): Voucher Connect App The front-line companion application for the Voucher Connect ecosystem, deployed globally across iOS and Android. Engineered to eliminate the need for expensive proprietary hardware, this application transforms any staff smartphone into a secure, real-time scanner capable of handling complex gift card redemptions, ticket verifications, and multi-tenant loyalty programs with zero additional staffing
- [The Gentleman](https://alexshanley.com/the-gentleman/): The Gentleman A full-stack, bespoke menswear e-commerce platform engineered from scratch. Developed over 4 weeks for University College Dublin (UCD), showcasing advanced Vanilla JavaScript interactivity and meticulous brand execution. Institution University College Dublin Timeline 4 Weeks Role Full-Stack Dev & UI/UX Stack HTML5, CSS3, Vanilla JS The Academic Brief. This project was commissioned as a
- [RedemptionPopup Redesign](https://alexshanley.com/redemptionpopup-redesign/): Redemption Module Redesign. A complete rethink of the voucher redemption flow inside the Voucher Connect merchant dashboard — redesigned for clarity, speed, and operational confidence at the point of redemption. This redesign consolidates a fragmented multi-page process into a single, confident modal. Project Scope Dashboard Modal/Popup Platform Web App (Desktop-First) Role Solo Design + Dev
- [Voucher connect Modernise Log in page](https://alexshanley.com/voucher-connect-modernise-log-in-page/): Voucher Connect Log In Page. The design and UX specification for the modernization of the Voucher Connect dashboard login page. This project represents a focused redesign of the primary entry point used by thousands of businesses globally, introducing a dynamic split-screen layout to build user trust and communicate brand value. Project Name Dashboard Login Modernise

## Elementor Header & Footer Builder

- [Footer](https://alexshanley.com/elementor-hf/footer/): Dublin, IE • 00:00 Got a project in mind? Let's build it. Start a Conversation © 2026 Alex Shanley. All rights reserved. LinkedIn GitHub Download CV

## Categories

- [Uncategorized](https://alexshanley.com/category/uncategorized/)
- [Frontend](https://alexshanley.com/category/frontend/)
- [Motion](https://alexshanley.com/category/motion/)
- [Performance](https://alexshanley.com/category/performance/)
- [Design](https://alexshanley.com/category/design/)