NoCode LowCode  

Behind the Code: Building My Portfolio and Automating It with Make.com

As a developer, I’ve always believed that a personal portfolio should be more than a static showcase — it should reflect your growth, workflow, and creativity. That’s why I decided to build a dynamic AI-powered portfolio and automate its processes using Make.com.

In this article, I’ll walk you through how I built it, the challenges I faced, and the automation workflows that make it smarter.


Why Automate a Portfolio?

Traditional portfolios are static — you update them manually, track submissions with basic email forms, and have no insight into user interactions.

With automation, you can:

  • Capture resume downloads and form submissions in real time.

  • Track visitor interactions to understand your audience.

  • Maintain your portfolio without touching the backend every time.

Automation isn’t just convenient — it makes your portfolio interactive and professional.


Tech Stack

Here’s what I used:

  • Frontend: HTML, CSS, JavaScript

  • Automation: Make.com (formerly Integromat)

  • Storage: Google Sheets for logging form submissions and downloads

  • Email Notifications: Gmail API via Make.com

  • AI Tools: ChatGPT / AI-generated content for project descriptions


Step 1: Building the Portfolio Website

I started with a clean, responsive design. Key sections include:

  1. About Me – short intro with AI-enhanced content.

  2. Projects – interactive cards showcasing live demos and code links.

  3. Contact Form – sends data to Make.com for automation.

  4. Resume Download – triggers tracking workflow.

You can check the live portfolio here:
👉 https://prince8v4.github.io/my.portfolio/


Step 2: Automating with Make.com

Automation was the heart of this project. Here’s how I set it up:

Workflow 1: Contact Form Submission

  1. Trigger: Webhook in Make.com when the form is submitted.

  2. Action 1: Add submission to Google Sheets.

  3. Action 2: Send notification email via Gmail.

This workflow ensures I never miss a lead or message.

Workflow 2: Resume Download Tracking

  1. Trigger: Download button click on portfolio.

  2. Action: Log user details in Google Sheets.

  3. Action: Optional: send notification email.

Workflow 3: Analytics & Insights

  • Use Make.com to aggregate interactions.

  • Track which projects get the most clicks.

  • Adjust portfolio content based on engagement.


Challenges I Faced

  • Connecting Webhooks: Initially, the form wasn’t triggering Make.com. Solution: double-check URL and POST method.

  • Email Notifications: Gmail API required proper OAuth setup. Make.com simplifies it, but I had to troubleshoot permissions.

  • AI Content Integration: Ensuring AI-generated text matched my style required careful editing.


Lessons Learned

  1. Automation saves time and reduces errors.

  2. No-code tools like Make.com are powerful for small projects.

  3. Combining AI content and web design creates a dynamic, modern portfolio.

  4. Tracking user interactions helps improve your site strategically.


Next Steps

  • Add social media integration for more interactivity.

  • Use advanced AI modules to dynamically update project descriptions.

  • Implement user analytics dashboards directly on the portfolio.


Conclusion

Automating a personal portfolio with Make.com transformed a static website into a dynamic, interactive, and professional platform. This project taught me the power of AI, automation, and no-code tools for modern web development.

If you’re a developer looking to level up your portfolio, I highly recommend exploring Make.com workflows — the possibilities are endless.


Want to try it yourself? Start with a simple workflow: capture form submissions to Google Sheets and send yourself a notification. Once that works, expand to downloads, analytics, and AI-generated content.

Check my live portfolio here:
👉 https://prince8v4.github.io/my.portfolio/