As a Cyber Security Engineer, I spend my days analyzing threat vectors and hardening complex infrastructure. Yet, for the longest time, my own digital footprint (my personal portfolio) was an afterthought. It was a classic case of the cobbler's children having no shoes.
Recently, I decided it was time to overhaul my online presence. I didn't just want a pretty UI; I wanted a site that reflected my security-first methodology.
The goal was simple but rigorous: build a high-performance, professional portfolio while achieving near-zero attack surface on the backend.
Here is a walkthrough of the architecture I chose, the trade-offs I managed, and why "less is more" when it comes to securing personal infrastructure.
The Philosophy: Immutable Infrastructure
In the world of web applications, complexity is the enemy of security. Every database connection, server-side script (PHP, Node.js backend), or CMS plugin is a potential entry point for SQL injection, RCE (Remote Code Execution), or privilege escalation attacks.
To mitigate this, I opted for a Jamstack architecture, shifting the entire site to static HTML, CSS, and JavaScript connected to headless APIs.
The Stack and The "Why"
Frontend Core: Vanilla JavaScript and CSS. No heavy frameworks, no unnecessary dependencies to audit for vulnerabilities.
The Edge: Vercel.
The "Backend": Serverless functions (Web3Forms) for communication.
By deploying statically to Vercel's edge network, I effectively removed the server OS from the equation. There is no Apache server to patch, no Linux kernel to exploit, and no database to breach. The infrastructure is immutable; every deployment is a fresh, read-only snapshot.
Furthermore, putting the site behind Vercel's global CDN provides inherent DDoS mitigation at Layer 3 and 4, absorbing volumetric attacks before they ever reach origin bandwidth limits.
The Implementation: Security Through Simplicity
The development process focused on clean code and strong identity signals.
While the frontend is minimalist, the metadata hidden in the <head> is dense. A crucial part of modern digital identity is ensuring that search engine bots (crawlers) understand exactly who you are.
To achieve this, I implemented robust JSON-LD Structured Data. This isn't just for SEO; it's a cryptographic-like handshake with Google's Knowledge Graph, triangulating my identity as a "Person" entity across my established profiles on LinkedIn and GitHub.
Here is a snippet of the schema architecture that defines my professional identity to the bots:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfilePage",
"mainEntity": {
"@type": "Person",
"name": "Francis Iyiola",
"jobTitle": "Cyber Security Engineer",
"description": "Specializing in penetration testing, secure software development, and malware analysis.",
"knowsAbout": ["Cybersecurity", "Python", "Rust", "Ethical Hacking"],
"sameAs": [
"https://www.linkedin.com/in/devrancis",
"https://github.com/devrancis"
]
}
}
</script>
By explicitly linking my high-authority profiles via the sameAs array, I am reducing the chance of identity ambiguity in search results.
Closing Thoughts
Building this portfolio wasn't just about having a place to show my projects. It was an exercise in applying the security principles I advocate for daily: minimizing the blast radius, utilizing immutable infrastructure, and trusting nothing by default.
The result is a site that is incredibly fast, requires zero server maintenance, and is hardened against the vast majority of common web attack vectors.
You can view the live, security-hardened result here: Francis Iyiola
Top comments (0)