✨ 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 of 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:
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
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.
Join the conversation! Your thoughts help the community grow.