DEV Community

Cover image for "My Portfolio Got 17-Minute Average Engagement - Here's How It Happened"
Neeraj S
Neeraj S

Posted on

"My Portfolio Got 17-Minute Average Engagement - Here's How It Happened"

#webdev #portfolio #analytics

My Portfolio Got 17-Minute Average Engagement. I'm 16. Here's How It Happened.

About 3 months ago, I shipped my first developer portfolio using GitHub Pages. I added Google Analytics on a whim, just to see if anyone would ever visit.

Yesterday, I checked the report and my jaw hit the floor.

Average User Engagement: 17 minutes, 5 seconds.

I'm a 16-year-old developer from Kerala, India, and this is the story of how it happened—from the first mysterious user to the analytics deep dive that revealed everything.

The Humble Beginning: What I Built

My stack was simple:

  • HTML & CSS for the structure and style
  • Vanilla JavaScript for a contact form
  • SheetDB as a backend to save submissions to Google Sheets
  • GitHub Pages for hosting
  • Google Analytics 4 (GA4) to track everything

The portfolio itself features my projects, which are a mix of web development and Arduino hardware builds, like VigiLight (a motion-activated visual alert system for the hearing impaired) and the IntelliToll System (an automated toll gate).

I didn't use any fancy frameworks. I just built it and put it out there.

The "Aha!" Moment: The User from Tucson and the Ghost Submission

The first sign that something was working was when I saw a form submission from a user in Tucson, Arizona, USA. I was ecstatic... until I checked my Google Sheet and the data wasn't there.

This began a frantic debugging session that taught me my first big lesson: always use a <form> tag.

My original contact "form" was just a collection of <input> fields and a <button> with an onclick handler. It worked most of the time, but if a user's browser blocked scripts or the connection was slow, it would fail silently.

The Fix:

<!-- Before (The Problem) -->
<section id="contact">
  <input type="text" id="name">
  <button onclick="postData()">Submit</button>
</section>

<!-- After (The Solution) -->
<form id="contact-form">
  <input type="text" id="name">
  <button type="button" onclick="postData()">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

This small change stabilized everything. The form was now a proper HTML form, and my JavaScript fetch function to SheetDB worked reliably.

Cracking the 17-Minute Engagement Code

Once the data started flowing consistently, the real story was in the GA4 dashboard.

Here's what the data showed for this month:

  • 👥 21 Active Users
  • ⏱️ 17m 05s Average Engagement Time
  • 👀 107 Views
  • 🖱️ 255 Event Count

My first thought was: "This has to be a mistake." Who spends 17 minutes on a simple portfolio?

But looking deeper, it made sense. My Arduino projects were the differentiator. They weren't just another To-Do app or calculator. They were unique, physical projects with a story. People weren't just scanning; they were reading.

The data showed users were viewing ~5 pages per session, exploring multiple projects and reading the detailed descriptions.

What I Learned: The Real Takeaways

  1. Build Unique Projects. In a sea of web app tutorials, a hardware project like an Arduino-based alert system stands out and creates a genuine reason for people to stay.

  2. Analytics Are Your Best Teacher. Without GA4, I would have never known what was working. It turns guesses into data-driven decisions.

  3. Just Ship It. I didn't wait to learn React or build a perfect full-stack app. I used the tools I had (HTML, CSS, JS) and put my work online. The feedback and traffic became my motivation to learn more.

  4. The Fundamentals Matter. That missing <form> tag caused a major bug. Understanding the basics of how HTML forms work is more important than jumping to the latest framework.

My Stack & Tools That Made It Possible

  • Frontend: Pure HTML, CSS, JavaScript
  • Backend/Data: SheetDB.io (turns a Google Sheet into an API)
  • Hosting: GitHub Pages (free and perfect for static sites)
  • Analytics: Google Analytics 4 (free and incredibly powerful)

What's Next?

I'm now diving deeper into JavaScript and React to make my projects more interactive, while also beginning my journey into backend development with Node.js. Understanding the full stack will let me build more complex, full-featured applications. This entire analytics-driven experience has been the best motivation possible.

I'd love to hear from you:

  • What's one thing I should improve on my portfolio?
  • How do I turn this engagement into real opportunities?
  • What should I learn next?

You can check out my portfolio here: My Portfolio
The code is, of course, open source on GitHub.
Thanks for reading! This is only the beginning.

Top comments (0)