โจ 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.