OtherWeb application
Community information website with heritage map
We built the front end of a community information website for a historic industrial site from an agency's designs: responsive carousels, a project timeline, an FAQ and an interactive heritage map whose hotspots open modals for each preserved building, all delivered through the agency's own repository and QA process.
Problem
The agency needed its design turned into a pixel-accurate, responsive community website quickly, inside its own repository and QA process.
Solution
The team built every section from the design file on the agency's skeleton repo: sticky navigation with anchors, responsive carousels that show three, two or one cards by breakpoint, a quarterly timeline, a single-open FAQ, a history timeline, a community memories section and a feature-flagged empty state for news. The centrepiece is a map with percentage-positioned hotspots that open modals for nine preserved buildings, driven from a typed data array. Work shipped by pull request to a staging deploy and was refined ticket by ticket through the agency's QA, followed by responsive passes and a later cross-browser modal fix.
Key features
- Sticky navigation with section anchors and mobile menu
- Responsive, non-looping carousels with swipe on mobile
- Interactive quarterly project timeline
- Single-open FAQ accordion
- Interactive heritage map with building modals
- Content driven from a typed data file
- Feature-flagged empty state for updates
Tech stack
- Figma
- GitHub
- Lucide icons
- Netlify
- React
- Tailwind CSS
- TypeScript