✨ Introduction

As a developer deeply passionate about automation and AI-driven workflows, I wanted my portfolio website to be more than just a static showcase.

I wanted it to speak, respond, and evolve — just like the technology I love working with.

So, instead of settling for a simple HTML portfolio, I decided to combine design, automation, and intelligence into one connected system.

The result?

A next-generation personal portfolio — built visually, powered by AI, and automated through Make.com.

This article explains how I planned, built, and automated my portfolio — and how Make.com helped me create a truly smart website without writing a single line of backend code.

💡 The Vision: Beyond a Traditional Portfolio

A typical portfolio only displays your projects, experience, and contact form.

But I wanted mine to do more:

📬 Automatically respond to visitor messages

📊 Track downloads, views, and engagement

🤖 Update data without touching code

🧠 Use AI to improve design and SEO dynamically

In short, my goal was to build a self-managing, intelligent portfolio that can adapt, track, and connect — all powered by no-code tools and automation.

🧱 Tech Stack Overview

Here’s what powers my project:

Component

Tool Used

Purpose

Hosting

Vercel

Fast, serverless deployment for frontend

Automation

Make.com

Workflow engine connecting email, forms, and data

Frontend Design

AI-generated (via prompt-based builder)

Responsive, creative design

Forms & Triggers

Webhook + Make.com

Automates contact and analytics

Analytics

Google Sheets & Email Automation

Data tracking and reporting

🎨 The Portfolio Structure

The website is neatly divided into four major sections — each one enhanced with automation:

🧍 About Me

A clean, professional introduction highlighting:

My journey as a developer

Skills in automation and AI integration

My passion for building smarter digital systems

🧩 Projects Section

Each project includes:

Description of the tech stack used

Live preview and GitHub links

Workflow integration (if applicable)

Some projects even demonstrate Make.com automations — showcasing my expertise hands-on.

📬 Contact Section

This is where the magic of Make.com shines.

When someone fills out the contact form:

The form sends data to Make.com via a Webhook.

Make.com then:

Stores the data in Google Sheets.

Sends an email notification to me.

Optionally, sends an auto-response email to the visitor.

All of this happens in seconds — no backend code needed.

📄 Resume Section

The “Download Resume” button is also connected to Make.com.

Each time someone downloads my CV, Make logs that activity in Google Sheets — helping me track engagement and analyze visitor behavior.

⚙ Behind the Scenes: The Make.com Workflow

Make.com acts as the brain of my portfolio.

Here’s a breakdown of how the workflow operates:

🪄 Step 1: The Trigger (Webhook Module)

When a user submits the contact form, the Webhook module in Make.com receives all the form data instantly.

📤 Step 2: Email Notifications

Using the Email module, Make sends me an alert containing:

Name

Email

Message content

Timestamp

This ensures I never miss a message.

📈 Step 3: Data Logging

The same data is recorded into a Google Sheet, creating a permanent log of all user interactions.

It’s like having an integrated CRM system — built entirely without code.

Step 4: Auto-Responses🔁

Optionally, Make can reply automatically to the sender, thanking them and confirming message delivery — enhancing professionalism and user trust.

🌐 Hosting & Deployment on Vercel

For hosting, I chose Vercel — because it’s fast, secure, and designed for developers.

Some benefits I leveraged:

Automatic Git integration

Zero-config deployment

Global CDN for speed

Environment variable support for webhook URLs

I used AI-driven prompts to generate design layouts and responsive CSS, ensuring a professional look without manually coding every component.

📊 Performance Analysis

After building and deploying my site, I ran a performance evaluation across SEO, GEO, and UI/UX metrics.

Metric

Score

Highlights

SEO (Search Engine Optimization)

⭐⭐⭐⭐☆ (4.3/5)

Strong structure and meta tags; improving backlinks next

GEO (Generative Engine Optimization)

⭐⭐⭐⭐☆ (4.2/5)

AI-readable and Q&A-friendly content

UI/UX (Design & Accessibility)

⭐⭐⭐⭐☆ (4.4/5)

Clean layout, responsive, slight room for accessibility improvements

Each score came from tools that analyze portfolio visibility, interaction flow, and search readiness.

🔮 Future Enhancements

I’m already planning my next set of features:

📊 Real-time analytics dashboards integrated with Make.com

✉ Automated email replies for specific project inquiries

🔄 Feedback management system synced with Google Sheets

🤖 AI chat integration for live portfolio assistance

Each new idea will make the system smarter, more responsive, and closer to an autonomous digital assistant.

🎨 AI-generated web design

⚙ Make.com automations

☁ Serverless deployment on Vercel

I built something that doesn’t just showcase my skills — it demonstrates them.

If you’re a developer exploring automation, AI, or no-code tools, this is your sign to try Make.com.

You’ll discover how automation can transform even the simplest projects into something remarkable.