Heritage Soil Station Website Development

This journey started with a minimalist Mobile App for a New Zealand farm, focusing on the essentials: Home, About, and Gallery.

To expand this vision, I moved into a full-scale web development process that bridged the gap between raw code and high-end design.

The Foundation: I began with existing HTML, CSS, and JS codebases.

The Bridge: Used the html.to.design plugin to bring the raw code into Figma.

The Refinement: Polished the Figma workspace by stripping away unnecessary overlays and strictly renaming layers for a clean handoff.

The Integration: Exported the final design to Framer using the Figma to HTML with Framer plugin.

True development is about problem-solving. I tackled three critical hurdles during the import:

The Nav Bar Rescue: Relocated the navigation bar, which had mistakenly imported to the footer, back to its rightful place at the top.

Layout Calibration: Fixed the Home section's alignment to ensure the hero image and text sat perfectly centered in the frame.

Asset Recovery: Restored missing imagery in the About section that didn't initially survive the transition.

A fully responsive, minimalist website that honors the peaceful life of the farm while utilizing a sophisticated development-to-design-tool pipeline.