When you're selling "Invisible" work like automation and backend pipelines, the biggest challenge is making the value visible.
Saying "I built a Power Automate flow that files photos" is one thing. Showing a professional, interactive map of that data moving from a phone to SharePoint is another.
For my SiteLog Automator project, I used xyflow (React Flow) to build a live visualization of the field-to-folder process.
Why Visuals Matter for Contractors
In the construction world, everything is tangible. You can see the slab being poured and the framing going up. Automation, however, is abstract.
By using an interactive diagram, I can:
- Lower the Technical Bar: Clients don't need to know what an API is if they can see the "Email Node" connecting to the "SharePoint Node."
- Increase Trust: Showing the "logic" behind the scenes proves that the system is structured and reliable.
- Building in Public: It shows that I'm not just a scripter; I'm a system architect.
The Tool: xyflow (React Flow)
React Flow is a powerhouse for creating node-based UIs. It's highly customizable, handles zoom/pan effortlessly, and integrates perfectly with Tailwind CSS or standard CSS.
Here is the basic structure of the SiteLog visualization:
const initialNodes = [
{ id: 'field', data: { label: '📱 Field Team: Take Photo' }, position: { x: 250, y: 0 } },
{ id: 'power-automate', data: { label: '⚡ Power Automate' }, position: { x: 250, y: 200 } },
{ id: 'sharepoint', data: { label: '📂 SharePoint' }, position: { x: 250, y: 350 } },
];Making it Pop with HSL Colors
To make it match the premium look of my portfolio, I used custom CSS classes on each node to add glow effects and vivid borders. Using specific brand colors like "Indigo-400" for the Brain (Power Automate) and "Green-400" for the Goal (SharePoint) creates a subconscious "Path to Success."
Conclusion
Standard blog posts are great for SEO, but interactive elements are what keep people on the page. If you're building a portfolio in 2026, don't just tell people what you built—show them the map.
Check out the live diagram on the SiteLog Project Page.
