Demo of Styles

Front End app developed from a company branded 'lookbook' type 'Demo of Styles' website, originally made for a financial sector client in 2025.

Existing WordPress/PHP site suffered from:

• Slow loading, with one page as low as FCP 3s, LCP 13.6s, CLS 0.342s and a speed index of 3.9s, overall score of 49 on mobile, risking high bounce rates
• Staff finding updates extremely difficult without breaking layouts
• Lack of responsive design: clunky vertical stacking, illegibly small text and inadequate touch targets for critical call to action buttons
• Poor graphic quality: blurry graphics, poor contrast, inconsistent layouts & assets / font sizing and an overall lack of visual consistency

As their business had grown since the original launch, their goals were:

• Faster performance
• Modern branding and professional-standard layouts
• Printable sections
• Flexible component library with a CMS so staff could quickly edit without layout issues

---

Team Structure

2 Developers

• Front End Developer: sole responsibility for design and implementation using React v19 + Typescript in Vite; data populated from .ts files
• Back End Developer: client liaison, build the CMS layer/middleware and migrate existing database

---

Deliverables

Layout

• Default Homepage: video hero section
• Three colorway variants with static hero images
• Animated KPI counter demo
• Wave section divider and thematic page background colors
• Shaped highlight boxes for key headlines
• Printable light-mode sections for on demand PDFs

Performance

• Lighthouse scores improved to 98 - 100 on desktop, 77 - 91 with speed index average of 1.8s on mobile
• Including large video hero

Accessibility

• Audited using WAVE Evaluation Tool & tested with Mac Voice Over screen reader

Technologies & Libraries:

• React 19 (with Typescript in development)
• React Router v7
• DomPurify
• FontAwesome SVG Icons

Self-hosted assets:

• Variable fonts in WOFF/WOFF2
• WebP & AVIF images
• mp4 Video background

---

Outcome

Client approved the work for MVP development, scheduled to begin in late autumn 2025.

---

To run this project locally:

Prerequisites:

• Node.js v18+ or Yarn installed.

Install dependencies:

• npm install or yarn install

Preview in localhost

• npm run dev or yarn dev

© 2025 Ruth Westnidge Brown