How I Built My AI & Machine Learning Portfolio Website from Scratch

Safi Ullah — Sun, 04 Oct 2026 06:39:46 +0000

How I Built My AI & Machine Learning Portfolio Website from Scratch (Flask + Python + SEO)

By Safi Ullah — AI & ML Engineer | University of Layyah, Pakistan

Introduction

Every developer reaches a point where they ask themselves:

"How do I stand out from thousands of other applicants?"

For me, the answer was simple — build a professional portfolio website that not only showcases my Machine Learning and Computer Vision projects, but is also technically strong, fast, secure, and SEO-optimized.

In this article, I'll walk you through exactly how I built my portfolio from scratch using Python, Flask, PostgreSQL, and modern SEO techniques — and deployed it live on PythonAnywhere.

👉 Live Portfolio: safiulllah.pythonanywhere.com
🔗 GitHub: SAFIULLAH012

Why Flask? Why Not WordPress or Wix?

Many developers go for WordPress or no-code tools. I chose Flask for a few strong reasons:

Feature Flask WordPress
Full control over code ✅ ❌
Server-Side Rendering (SSR) ✅ ✅
Custom SEO control ✅ Limited
Python backend ✅ ❌
Security control ✅ ❌
Lightweight & fast ✅ ❌

As an ML Engineer who works in Python daily, Flask was the natural choice.

Tech Stack
Layer Technology
Backend Python 3.x + Flask
Database SQLite (dev) / PostgreSQL (prod)
ORM SQLAlchemy
Frontend HTML5, CSS3, Vanilla JavaScript
Email Resend API
Security Flask-WTF CSRF, Rate Limiting
Deployment PythonAnywhere
Version Control GitHub (Private Repo)
Project Architecture
portfolio/
│
├── app.py # Application factory + SEO routes
├── blueprints/
│ ├── public/ # Homepage, Project Detail, Contact
│ └── admin/ # Admin dashboard (protected)
├── models.py # SQLAlchemy models (Project, Settings, etc.)
├── templates/
│ ├── base.html # Master layout (SEO, GA4, Schemas)
│ ├── index.html # Homepage
│ ├── project_detail.html # Individual project pages
│ ├── privacy_policy.html # Legal page
│ ├── terms.html # Legal page
│ └── thank_you.html # Conversion tracking page
├── static/
│ ├── css/style.css
│ ├── js/script.js
│ └── img/ # WebP optimized images
└── tests/
└── test_app.py # 27 automated tests
Key Features I Built

Dynamic Admin Dashboard

I built a full admin panel where I can add/edit/delete projects, skills, certifications, and education — all without touching the code. Everything is stored in the database and rendered dynamically.

python
class Project(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(200), nullable=False)
slug = db.Column(db.String(200), unique=True, nullable=False)
short_description = db.Column(db.String(500))
published = db.Column(db.Boolean, default=False)
github_url = db.Column(db.String(300))
demo_url = db.Column(db.String(300))
category = db.Column(db.String(100))

Secure Contact Form (CSRF + Rate Limiting)

The contact form sends real emails via the Resend API and is protected against spam and CSRF attacks.

python
@limiter.limit("5 per hour")
def contact():
# CSRF validation
# Email sending via Resend API
# JSON response for AJAX

Server-Side Rendered (SSR) — Perfect for SEO & AI Bots

Unlike React or Next.js SPAs, Flask renders full HTML on the server. This means:

Google can read the full content immediately
AI bots (ChatGPT, Perplexity, Google AI Overviews) can cite my content
Page loads are fast and lightweight

Advanced SEO Setup

This was the part I spent the most time on:

html

{
"@type": "Person",
"name": "Safi Ullah",
"jobTitle": "Machine Learning Engineer",
"address": {
"addressLocality": "Layyah",
"addressCountry": "PK"
}
}

{
"@type": "FAQPage",
"mainEntity": [...]
}

Google Analytics (GDPR Compliant)

GA4 only loads after the user clicks "Accept" on the cookie banner — fully GDPR compliant.

javascript
acceptBtn.addEventListener('click', function() {
localStorage.setItem('safi_cookie_consent', 'accepted');
loadGA(); // Only now GA4 script loads
});

Performance Optimizations WebP images instead of JPEG (50% smaller file size) Canvas particles disabled on mobile (<768px) for faster load IntersectionObserver — animations only trigger when in viewport CSS version busting — style.css?v=5.8 prevents stale cache Automated Testing (27 Tests)

Before every deployment, I run 27 automated pytest tests to make sure nothing is broken:

python
def test_sitemap_xml(client, seed_db):
res = client.get('/sitemap.xml')
assert res.status_code == 200
assert b'brain-tumor-mri-classifier' in res.data
def test_robots_txt(client):
res = client.get('/robots.txt')
assert b'Disallow: /admin/' in res.data
def test_contact_form_csrf_required(client):
res = client.post('/contact', data={...})
assert res.status_code == 400

All 27 tests pass before every push to GitHub.

Deployment on PythonAnywhere

PythonAnywhere hosts Flask apps for free. The WSGI config:

python
import sys
sys.path.insert(0, '/home/safiulllah/mysite')
from app import create_app
application = create_app()
SEO Results After Launch

After implementing all technical SEO fixes:

✅ robots.txt — Clean, admin panel blocked
✅ sitemap.xml — Dynamic, all pages included
✅ Schema Markup — Person, FAQPage, SoftwareSourceCode, BreadcrumbList
✅ Google Search Console — Sitemap submitted, indexing requested
✅ Google Analytics GA4 — Real-time tracking active
✅ Core Web Vitals — Optimized for mobile performance
Lessons Learned
SSR beats SPA for portfolios — Flask renders faster and better for SEO than React
Security first — CSRF, rate limiting, and input validation are non-negotiable
Test everything — 27 automated tests saved me from deploying broken code multiple times
SEO is technical — It's not just keywords, it's schemas, canonical tags, and structured data
Database-driven > static — Being able to update projects without editing HTML is a game-changer
Conclusion

Building this portfolio from scratch taught me more than any tutorial ever could. If you are a Computer Science student or ML Engineer, I strongly recommend building your own custom portfolio rather than using a template.

It showcases your:

Backend skills (Flask, Python, SQLAlchemy)
Frontend skills (HTML, CSS, JS)
DevOps knowledge (Deployment, Git, Testing)
SEO & Marketing awareness

Check out the live result:

👉 safiulllah.pythonanywhere.com
🔗 GitHub: SAFIULLAH012

About the Author

Safi Ullah is a Computer Science student at the University of Layyah, Pakistan, specializing in Machine Learning, Computer Vision, Deep Learning, and Python development.

📧 safiullah477845@gmail.com 🌐 https://safiulllah.pythonanywhere.com

Tags: #Python #Flask #WebDevelopment #SEO #MachineLearning #Portfolio #PythonAnywhere #ComputerScience #DeepLearning #OpenSource

DEV Community: Safi Ullah

How I Built My AI & Machine Learning Portfolio Website from Scratch