The portfolio shows what I've shipped and what im working on. This is where things are actively being made: build logs, open hypotheses, bugs I haven't fixed yet.
The work here started from a simple question: most of the tools I build professionally are for construction workers in the field. What does it look like to build without corporate IT, change management sign-offs, or the need to justify ROI before starting?
Everything here is personal and experimental. Nothing is deployed in a formal context.
I've sat through this training. I've also lead it. Every version was the same: a slide deck with clip art, a 2009 video, or a wall of OSHA bullet points nobody retained past lunch.
The frustrating part is that the content matters. Meanwhile, hot work is one of the leading causes of construction fires. Workers need to know this. They just can't learn it from a Powerpoint.
This is an experiment in the obvious alternative: what if the training was actually interactive? Not "click next." Actually do the thing: drag the pin, find the hazard, break the triangle. does having a digital demo help retention when you can't practice live?This tool is a personal fork built to test whether that format is worth developing further before committing to something broader.
Task-based interaction pushes completion above 80% vs. ~50% reported for passive mandatory training.
Sustained drag on mobile isn't intuitive. A progress bar alone won't fix it - the mechanic may need rethinking.
Which hazards get missed, which safe items get false-flagged - that's diagnostic data. Tells you what prior training landed.
Consistent wrong selections point to conceptual gaps more useful than a pass/fail score.
The SVG touch-target bug creates device-specific failure at drag interactions, not general disengagement.
Moved all lab files from flat root into tiered subfolders (lab/fire-safety/, lab/construction-site/, lab/ai-chat/). Updated all internal links sitewide to absolute root-relative paths so they resolve correctly from any folder depth. Added CLAUDE.md documenting the three training modules, the open SVG touch-target bug, all five hypotheses with tracking metrics, and the build log. Gives any agent working on this project full context without reading through the HTML. Shipped a /lab-log skill for capturing session work going forward.
Touch targets are sized in SVG coordinate space (viewBox 800x400) but the rendered SVG scales to fit its container. On a 390px phone, a 35px SVG touch radius is physically ~17px - too small with gloves, borderline without. Evaluating options: HTML overlay layer with percentage-positioned hit areas, or restructuring interaction out of SVG entirely.
Added pulsing indicators to Hazard Hunt. Added a fill bar to the PASS sweep step. Enlarged touch targets on pin and nozzle. Scrubbed company branding for public release. SVG scaling issue remains open.
Original Hazard Hunt had no indication the scene was interactive. Users in a toolbox talk context won't explore - they need to know immediately what to do. Added pulsing indicators. Takeaway: training context demands faster time-to-first-interaction than a game or app.
Three modules: Hazard Hunt, PASS simulator, Fire Triangle quiz. Vanilla HTML/SVG/JS, zero dependencies. Forked for public release before any formal deployment. Identified UX issues on first phone test - good reminder to test on device before shipping.
Construction technology discussions exist at two extremes. The vendor pitch: "AI will transform construction" - big claims, no context. The individual case study: one tool solving one problem. Neither answers the question a builder actually has: how do all of these pieces fit together across a real project?
This is an attempt to answer that question through an interactive vertical scroll experience: a high-rise building, floor by floor, showing how sensors, robotics, AR/VR, AI, and real-time data apply at each phase of construction: steel erection, metal framing, MEP rough-in, drywall, unit finishes, parking garage, excavation.
Each floor connects speculative technology to field reality. Where I've already built something that applies, the NFC asset management system, the hot work permit platform, the sensor monitoring work for example, those link directly to the case studies. The idea is to show that vision without proof is just prediction, and proof without vision is just a feature demo.
The honest bet: this is better content coming from someone who's spent six years on jobsites than from someone who's read about them.
The risk is that a "future of construction" piece reads as speculative and disconnected from reality. The hypothesis is that grounding each floor in real construction phases - with links to proven implementations, prevents that.
Linking "here's what sensors could do on a jobsite" directly to "here's a sensor monitoring system I actually built" should validate the vision rather than undercut it.
If scroll depth drops off sharply after floor 2-3, the content depth per floor needs work - either too dense, too light, or the navigation isn't clear enough.
Built an interactive experience around a holographic construction worker silhouette — click any body zone to surface what gear is assigned, toggle between Standard and Next-Gen to compare current kit against the future spec, or browse the full 58-item technology library. Purple accent overlays distinguish next-gen items at a glance so the comparison is immediate. Took several passes to get right: body-part label was rendering blank when a zone had no items (fixed), sensor tech data needed a fallback popup when unavailable (fixed), and the layout needed a full responsive pass for mobile. The holographic glow and gear icon on the worker's chest give the module its visual identity.
The full-width embedded chat section was interrupting the floor-scroll flow on the construction site page — heavy, wrong context for someone moving through the building. Replaced it with a slim strip: avatar, a short framing line, and an "Ask Nick" button. The full chat now opens as a floating panel anchored bottom-right, with a backdrop overlay, close button, and escape key support. Mobile-responsive.
Added three role-specific data dashboards — worker, foreman, and exec — embedded directly into the trailer's POV screens. Each seat in the construction command center now has context behind it: the worker sees their task and safety feed, the foreman gets site operations, the exec gets project-level metrics with a weekly reporting template. Added a worker mobile app mockup showing the full incident response flow, aligned to the actual alert playbook logic rather than being decorative. The trailer experience now tells different stories depending on which screen you focus on.
The interactive technology knowledge graph was fully built but unreachable — the trailer door navigation was swallowing the click before the graph loaded. Traced it to a z-index and pointer-events cascade in the trailer overlay layer intercepting the trigger. Fixed the rendering order and wired the click through correctly. Also corrected the back link inside the knowledge graph, which was routing to a dead end; it now returns to the trailer interior as expected.
Each sensor info popup now includes a small thumbnail of the floor it belongs to, with an orange dot marking exactly where that sensor sits. Added a FLOOR_IMAGES lookup table and minimap dot positioning logic to showSensorPopup(). Also fixed a mobile bug where the popup was being cut off at the bottom — the scroll container now always resets to the top on open, and there's enough bottom padding for the close button to not feel cramped.
metal-framing-v2.png has a valid PNG header and correct file size (6.18MB) but the IDAT chunk is broken — zlib throws "invalid stored block lengths" on decompression. The browser sees a valid signature, renders the .floor-visual { background: white } behind it, and the SVG overlays sit on top normally, so symptoms look like a white box with sensor dots floating in it. The fallback metal-framing-floor.png has the same corruption. Fix is a clean re-upload of the floor 7 photo.
The interactive tech knowledge graph shipped and is fully built, but getting to it is blocked by a bug in the trailer door entry point on the construction site page. Still diagnosing — the z-index and pointer-events fixes from the previous pass didn't fully resolve it. Something in the click flow or navigation handler is swallowing the trigger before the graph loads. Open.
Changed all sensor dot and pulse ring colors from blue (#00A3FF) to orange (#f97316) to match the page's primary accent color — the blue wasn't wrong, it just didn't feel intentional next to the orange type. Replaced the SVG SMIL pulse animations with a CSS keyframe that scales the ring to 2.4x and fades out, so the effect is consistent across every floor without touching individual elements. Removed the debug coordinate grid that had been left in since the sensor positioning pass. Pushed everything live.
The sensor dots were clickable but the tech tags at the bottom of each floor were static labels. Added onclick handlers to all of them so clicking a tag surfaces the same callout overlay as clicking the dot directly. Floors 8, 7, and 6 already had this wired from a previous pass — added it to floors 5, 4, 3, and 1. Also caught that floor 6 had an HVAC callout with no corresponding tag at all; added it. Every sensor on every floor now has two entry points: the dot on the illustration and the label in the footer.
Worked through the four remaining unpositioned floors using the coordinate grid tool. A few patterns that emerged: some sensors make more sense as two dots connected to one callout (moisture monitoring on floor 5, IAQ on floor 4) rather than separate callouts — a dashed secondary line communicates "same system, different location" better than duplicating the card. Added sensors that were missing entirely: leak detection on floor 3, ergonomic/battery tools on floor 4. Floor 1 (foundation) also got a full pass — autonomous earthmovers, drone dock, AI security, and workforce tracking all repositioned onto the actual scene geometry.
Added a coordinate debug grid (1000x560 viewBox, 100-unit intervals, pink toggle button) to aid precise sensor placement on isometric floor illustrations. Worked floor-by-floor: repositioned crane load, wind speed, and fall detection sensors on floor 8; added laser measuring tools sensor and tech tag on floor 7; repositioned NFC fire extinguisher tracking, AR BIM view, and smart HVAC on floor 6. Added a second NFC fire extinguisher sensor and implemented triggerRevealMultiple() to show both callouts simultaneously from a single button. Also resolved deployment pipeline — changes need to be pushed to Nickrogoff.com/construction-mockup/index-v3.html, not the standalone mockup repo, for Cloudflare to pick them up.
construction-site-future.html moved to lab/construction-site/index.html. Fixed all remaining relative nav links (index.html#about, #journey, #projects, #contact) to absolute root-relative paths; from a subdirectory they were resolving against lab/construction-site/ instead of the portfolio root. Added CLAUDE.md documenting the iframe/wrapper architecture split, the fixed-height iframe constraint, the scroll indicator container height issue, the isometric coordinate system for SVG overlays, and the full build log. Shipped a /lab-log skill for session capture.
Added SVG overlays to the floor illustrations to visually identify and distinguish sensor types — without labels, the sensor markers were interchangeable and the scenes weren't communicating the technology load. The overlays are rendering, but sensor positions didn't map cleanly onto the isometric illustrations on first pass. The coordinate system doesn't account for perspective distortion, so markers are landing in the wrong places on several floors. Working through a fix using an overlaid reference grid per image to derive accurate coordinates before locking positions. Longer term: each sensor marker should open an inline card explaining what the sensor measures and why it matters on a real jobsite — so the experience is educational, not just decorative.
Three separate scroll issues resolved in one pass. The floor indicator dot was stuck at the top of the elevation drawing because its parent container had zero computed height — all children were absolutely positioned, so nothing gave the div real dimensions and every percentage top value resolved to zero. Fixed by moving the building elevation image inside the container so it provides actual height. The iframe was also causing the scroll listener to never fire: it was growing to match its content, so the parent page was scrolling, not the iframe. Changing it to a fixed 100vh height means the experience scrolls internally and the JavaScript scroll events work as expected. On top of that: auto-hiding nav (slides up after 80px of scroll, returns on scroll-up) so the building scene isn't blocked by the header. And an animated orange connector line that grows downward from the base of the elevation drawing to the site plan when you reach the foundation floor — so the visual descent reads as continuous.
The floor images were loading but the SVG overlay system — callout boxes, dashed connecting lines, sensor labels — was baked on top of them in code rather than in the images themselves. On first inspection this looked like an image loading failure; it was actually the overlays obscuring and competing with the illustrated scenes. Stripped all SVG callout overlays from floors 6, 7, and 8 so the illustrations render cleanly. Also switched floor 8 to the wider-angle steel erection illustration that captures the full site context instead of just the close-up welding shot. The plan is to add sensor callouts back through purpose-built SVG animations — this gives proper control over what appears, when, and with what data — rather than static overlay boxes that don't compose well with the images.
Sorted out the GitHub repo configuration that was blocking the site from building and deploying correctly. The Construction Site of the Future is now live and accessible from the portfolio. This is a preliminary deploy — the structure and navigation are working, but two things surfaced immediately on first real review: the floor illustrations and the overall design system both need work before this can be considered production-ready.
The images intended for the floor scenes — generated specifically for each construction phase — are not loading as expected on the live site. The SVG layout structure is present, but the correct image assets aren't resolving in the deployed context. Likely a path or asset reference issue introduced during the repo configuration fix. Need to audit all image references against the deployed file structure and confirm the right generated images are in place for each floor.
First real look at the deployed site made it clear the visual design doesn't have a coherent direction yet. Typography, color, spacing, and the relationship between the floor illustrations and the surrounding UI all feel provisional. The content concept is solid but the presentation isn't pulling its weight. Need to define a design direction before continuing content iteration — otherwise each pass will create more to undo later.
Full structural build complete: vertical scroll layout with floor navigation, scroll-triggered animations, 7 illustrated scenes (SVG layout with Gemini-generated images for better rendering quality, SVG icon overlays for consistency), and an integration hub dashboard mockup. Pushed to GitHub for version control. Three things to iterate on next: illustration quality consistency across floors, mobile responsiveness of the scroll experience, and content depth - some floors are more developed than others and that unevenness shows.
Cold outreach has a fundamental problem: the person you're reaching out to has no context before they decide whether to reply. You're asking them to make a bet on a stranger based on a short message and a LinkedIn profile.
The hypothesis is that a well-trained AI persona can change that calculus. Instead of reading about Nick, a recruiter or founder can just ask him something — and get a real answer in his voice, right now, at 11pm, without a calendar invite. The AI does the first meeting's work before the first meeting happens.
This is also a genuine product challenge: building a persona that's accurate but not creepy, specific but not scripted, and helpful without hallucinating credentials that don't exist.
A static portfolio is a brochure. A chat interface is a conversation. People who talk to an AI version of you are more likely to reach out directly because they already feel like they know you.
A detailed, well-structured system prompt with real voice patterns, specific metrics, and documented projects should outperform a vague prompt on a bigger model. The signal is in the context, not the compute.
The hardest part of a chat interface is the blank box. Pre-seeded chips remove the activation energy and suggest what kinds of questions are worth asking — which doubles as content strategy.
ai-chat.html moved to lab/ai-chat/index.html, nick-chat-widget.html moved to lab/ai-chat/widget.html. Fixed the relative index.html#contact link in the chat limit message; from the subdirectory it was resolving to lab/ai-chat/index.html#contact instead of the portfolio contact section. nick-chat-prompt.js and nick-chat-floating.js stay at root since they're loaded across the full portfolio. Added CLAUDE.md flagging the system prompt as single source of truth, the three files where the Worker proxy URL lives, and the stale deployment notice that needs removing. Shipped /lab-log for session capture going forward.
Isolated the root cause of the API failure: the chat interface was pointing at the wrong Worker URL in production, so requests were never reaching the proxy. Corrected the endpoint, redeployed, and confirmed end-to-end message flow live — from the browser, through the Cloudflare Worker, to the Anthropic API, and back. Chat is now functional on the dedicated page and across the floating widget. One bug remains open: the sizing inconsistency on smaller and wider viewports.
Deployed a Cloudflare Worker as a serverless proxy to handle all API communication with the LLM, keeping the API key server-side and enforcing rate limiting at the edge. The chat interface is now embedded and functional across the entire portfolio, not just the dedicated ai-chat.html page. The Worker approach keeps cost control and abuse protection server-side without requiring backend infrastructure spend. Two bugs surfaced on first cross-device pass.
The floating chat panel and embedded interface have inconsistent sizing behavior across screen sizes. It clips content on smaller phones and doesn't constrain properly on wider desktop displays. Investigating responsive CSS breakpoints and whether the issue is in the widget's own sizing logic or parent page context.
Chat interface loads but responses aren't returning. The Worker is deployed but the API connection is failing on the live site. Suspected cause: environment variable binding in the Cloudflare Worker or CORS headers on the response. Need to pull Worker logs to isolate.
Incorporating the chat widget across all portfolio pages surfaced styling inconsistencies. The chat's dark theme and typography don't fully harmonize with the lighter styles on the main portfolio and case study pages. A design pass is needed to unify color tokens, spacing, and widget presentation across contexts before this can be considered complete.
Complete front-end implementation: dark-themed chat interface with Barlow/DM Mono typography, animated typing indicator, auto-resizing textarea, prompt chips for guided first messages, and a detailed system prompt encoding Nick's voice patterns, project metrics, and career philosophy. The UI is fully functional — the only remaining step is wiring up a backend proxy (Cloudflare Worker or Vercel Edge Function) to keep the API key server-side. Intentionally transparent about this status via the in-page deployment notice. Next milestone: proxy deployment and live API connection.
I'm a safety director transitioning into construction technology product management. The work in this lab is what I do when there's no committee to convince and no budget to justify.
If you're working on something at the intersection of construction, safety, and technology - or if you just want to talk through an idea - I'm interested. I'm not looking for freelance work. I'm looking for conversations that go somewhere.