A multi-page design agency website built with React, TypeScript, and Vite.
Live site: designo99.netlify.app
- 7 pages — Home, Web Design, App Design, Graphics Design, Our Company, Locations, Contact
- Animated mobile navigation — slide-in menu with Framer Motion, closes on outside click or route change
- Service portfolios — project grids for each design discipline (web, app, graphics) loaded from a local JSON file
- Interactive maps — office locations in Canada, Australia, and the UK rendered with React Leaflet / OpenStreetMap
- Contact form — validated with React Hook Form, shows a success message on submission
- Scroll-to-top — automatically scrolls to the top on every route change
- Responsive layout — mobile-first, with breakpoint-specific assets for phone, tablet, and desktop
- SCSS — modular stylesheets organized by base, layouts, components, and pages
| Tool | Purpose |
|---|---|
| React 18 + TypeScript | UI framework |
| Vite | Build tooling and dev server |
| React Router DOM | Client-side routing |
| Framer Motion | Animations and transitions |
| React Leaflet + Leaflet | Interactive maps |
| React Hook Form | Form state and validation |
| React Icons | Icon library |
| SASS/SCSS | Styling |
npm install
npm run devnpm run build # production build
npm run preview # preview the production build locally
npm run lint # ESLint check