About This Project
Finger Lakes Rail’s Vice President of Sales and Marketing reached out to me to help give their website a much-needed refresh. We moved the site onto a new Bootstrap foundation, and what started as a redesign quickly became a collaborative build.
I created the initial Bootstrap template, site layout, and visual direction, refining the colors to better reflect their brand and adding modern touches like a liquid glass-style navigation, video hero, and fully responsive design. I also built SEO, AEO, accessibility, and performance into the foundation from the start.
From there, their VP took the foundation we created and ran with it, using Claude Code to build out additional pages and develop two of the site’s standout features: an interactive Highway Miles to Rail calculator and clickable SVG service maps. We stayed in close consultation throughout the process to keep everything consistent with the original design, responsive across devices, and optimized for search and accessibility.
The result is one of the most technically advanced projects in my portfolio and a great example of what can happen when design, development, AI, and a strong client collaboration all come together.
Tech Stack
Bootstrap CSS JavaScript PHP Claude Code Layout Design Liquid Glass UI Interactive SVG Maps Custom Calculator Tool Video Hero Brand & TypographyLighthouse Scores
Desktop
Mobile
Quick Answers
- What was built?
- A full Bootstrap-based redesign for Finger Lakes Rail, a rail freight, transload, and industrial-growth company, including a video hero, an expanded page set, and new interactive tools.
- What was the role on this project?
- Worked directly with Finger Lakes Rail's Vice President of Sales and Marketing, designing the site's layout, refining the color scheme to reflect their brand, and adding modern touches like a liquid glass-style navigation bar built with a CSS backdrop-filter, on top of the initial Bootstrap template and video hero. Once that foundation was complete, the project became a team effort: work hand in hand with their VP continued from there, with a high level of ongoing consultation on design standards, responsiveness, SEO, AEO, and accessibility throughout his build.
- What makes this build technically advanced, and who built it?
- A Highway Miles to Rail calculator and interactive, clickable SVG maps of served locations. Both were built entirely by Finger Lakes Rail's Vice President of Sales and Marketing, to his own specifications, using Claude Code to build out the site's additional pages beyond the initial template.
- What are the Lighthouse scores?
- Desktop: 99 Performance, 98 Accessibility, 100 Best Practices, 100 SEO, 2/2 Agentic Browsing. Mobile: 83 Performance, 98 Accessibility, 100 Best Practices, 100 SEO, 2/2 Agentic Browsing.
- Why do these scores matter for this site specifically?
- Transportation and logistics is a highly competitive, technically demanding market, so strong Performance, Accessibility, and SEO scores directly support visibility and usability for a site built to convert freight and logistics inquiries.
- Who pushed for the SEO, AEO, and accessibility priorities?
- Liz Wyatt. Given that this is a transportation site in a highly competitive market, she pushed early in the project for perfect SEO, AEO, and accessibility scores to be treated as a top priority rather than an afterthought.