How I Built My Portfolio’s Tech Stack And Why It Matters

The first portable document formatted (pdf) file was created in 1991 by John Warnock, a co-founder of Adobe. He introduced it through a proejct called “Camelot” with the goal of creating a universal way to share documents across any computer. Two years after the internet goes public in 1993, the pdf also goes public and the rest is history.

If you are like most marketers, then your resume in pdf format is a well-curated list of campaigns and metrics finely designed to tell people what you’ve accomplished. The pdf is one of the most ubiquitous file formats on the plant, but for all its strengths there is still one major weakness. It’s primarily a static document devoid of any life and when it comes to your portfolio and resume — it doesn’t show how you think.

I wanted mine to be different. Not just a dead document about my skills, but a living demonstration of them. Why say it, when you can show it?

So I built a single-page portfolio and wired it into a real marketing tech stack. The same tools I use professionally, deployed on my own domain, generating real data. Here’s how I did it and why every marketing professional should consider doing the same.

Building the Site — Vibe Coding with Claude

Let’s face it, I’m not a developer, you’re likely not either, and if you are — in the near future, you likely wont be. I didn’t code this site from scratch, and nor should you.

Vibe coding — the back-and-forth collaboration with Claude, Anthropic’s AI (fill in with you favoriate AI tool), where I described what I wanted, reviewed what was produced, gave feedback, and iterated. No boilerplate templates. No WordPress themes. A single, handcrafted HTML file built through conversation. The key here is knowing how to have the conversation, and because of my decade plus experience as a digital marketer, I’m pretty fluent.

It sounds something like, “Design a single page portfolio with mobile first architecture using content from my LinkedIn profile and resume. Include mobile navigation, responsive hero stats, touch optimized interactions, and fluid spacing.” Claude then produces the code. I review it in the browser and then we’d move on to the next iteration. Sometimes that’s looking at the aesthetic, e.g. adjust color for accessibility, adjust white space, or even “make this section feel more editorial”. Sometimes it’s functional, e.g. the loader is glitching, the scroll reveal isn’t firing, the stat counters are showing zero, etc…

Vibe coding isn’t a shortcut that bypasses understanding. It’s a collaboration that benefits from it. For example, when my Cloudflare preview environment kept injecting its own email obfuscation script and breaking my JavaScript execution, I needed to understand why that was happening to describe the fix accurately. When the HubSpot form stopped rendering, I needed to know enough about how GTM fires scripts and how iframes interact with the DOM to diagnose the problem and communicate it clearly.

The analogy that kept coming to mind was directing a film (fyi I’ve been involved in a few video productions. DM if you want to see some samples). Claude was the cinematographer, technically skilled, fast, capable of executing complex sequences. I was the director responsible for the vision, the decisions, knowing when something wasn’t right even if I couldn’t always articulate exactly why on the first pass. Much of this is feels like synthesizing disparate feedback in a coherent way.

The broader point here for digital marketers is that the tools that let non-developers build real, production-grade web experiences are here now. The barrier isn’t technical knowledge anymore. It’s knowing just enough to ask the right questions, evaluate the output critically, and iterate with intention.

The whole site including the cinematic loader, the scramble animations, the HubSpot CRM integration, the GTM architecture, the structured data markup… all of it was built through conversation.

The TechStack

The infrastructure has four layers.

Cloudflare pages handles hosting. It’s free, deploys in seconds from a single HTML file (upload a Zip file containing your index.html), and serves assets from a global CND. For a one-page portfolio there’s no reason to pay a boatload of cash for hosting, and Cloudflare’s performance is fast everywhere, which matters for PageSpeed scores (which I tested and used results to further iterate with) and first impressions alike.

In light of not having a CMS backend, I used Google Tag Manager to meet some of those needs, but also serve as the connective tissue between layers. Rather than using Claude or hardcoding third-party scripts directly into my HTML, everything deploys through GTM, including HubSpot, GA4 and any future tags. Google Tag Manager enables me to scale up and down, to add, remove or modify code without touching the codebase. It’s the same architecture I’d implement for any client, and having it on my own site means I can demo it live in any interview.

HubSpot Free CRM closes the loop. A contact form at the bottom of the portfolio feeds directly into a CRM pipeline. Every person who reaches out becomes a contact record with source attribution, timestamp, and message. At the free tier you don’t get automation sequences, but you get the foundation and that foundation is what matters most.

GA4 adds the behavioral layer. Combined with GTM event tracking, I can see not just who visited but how they engaged, which sections they scrolled to, which CTAs they clicked, whether they visited the writing section before reaching out. That behavioral data is what separates a contact form from an actual lead intelligence system.

How It All Connects

Here’s the data flow that makes this interesting:

When someone lands on [emanuellusca.com](https://www.emanuellusca.com), Cloudflare serves the page in milliseconds. GTM fires on DOM ready, loading both the HubSpot tracking code and GA4. HubSpot drops a cookie and begins recording the session, including traffic source, UTM parameters, and page behavior — before the visitor has done anything at all.

If they fill out the contact form, HubSpot creates a contact record enriched with everything it observed during the session. Simultaneously, a custom generate_lead event fires into GA4 via a dataLayer push, marking the conversion and attributing it to the correct source and medium.

The result: every inbound contact comes with a full story. Where they came from, what they read, how long they spent, what made them reach out, and any conversion events I’ve configured.

Overkill? Perhaps for a portfolio, but that’s exaclty the point. It’s a demonstration of what’s possible on your organization’s site.

What I Learned

A few things surprised me in the build, and some others things are to be expected.

It’s no surprise how much friction exists at the intersection of free-tier tools. HubSpot’s free form embed uses an iframe, which means your site’s CSS can’t style it. You have to manage the form’s appearance inside HubSpot’s own interface, which you only gain access through their paid product. GTM’s script injection works beautifully in standard browsing but gets blocked by privacy settings in incognito mode (at least this is true in Safari). This can be remedied by inserting the script directly in the codebase, but then this learning would be moot. And finally, this indeed was a surprise… Cloudflare’s preview environment injects its own email obfuscation script that can break JavaScript execution if you’re not careful.

None of these are blockers. But each one required understanding why it was happening and what the right response was. That’s exactly the kind of problem-solving that doesn’t show up on a resume but absolutely shows up in the work.

Deploy, test, review, iterate. Repeat. Nothing is ever perfect, but progress can always be made with each cycle.

The Bigger Point

There’s a version of this post that’s purely technical; a how-to guide for replicating what I built. But the more important point is strategic.

Senior marketers are increasingly expected to understand the technology layer. Not to write production code, but to understand how data moves between systems, where attribution breaks down, and how to architect a stack that generates actionable intelligence rather than vanity metrics.

If you’re a marketer reading this, the question worth asking isn’t whether you could build this exact stack — I’m sure you can. It’s whether you could explain to a hiring manager or a client exactly how your current stack works from first touch to closed deal, where the gaps are, and what you can do operationally and in your marketing campaigns to bridge those gaps.

If you can’t, then that’s the real project.

Whats Next?

At the moment only one custom conversion event is being triggered upon form submission but there is so much additional data that can be created. From identifying which menu items are being clicked, to how far down visitors are scrolling, additional useful data can be collected to help shape insights into what visitors are interested in. Stay tuned to see how that shapes out.