Building My Developer Portfolio with Astro, WebGL and Structured Data

Monssif Zhairi — Sun, 04 Oct 2026 18:52:10 +0000

How I Built My Developer Portfolio with Astro

I wanted my portfolio to be more than a collection of project cards.

I wanted it to feel like a real digital space that represents how I think, what I build, and what I am currently learning.

So I built MONSSIF // DIGITAL LAB — my personal developer portfolio using Astro.

Why Astro?

For this project, I wanted a framework that could give me:

Fast static pages
Clean HTML output
Good SEO control
Minimal client-side JavaScript
Simple content organization
A good foundation for future interactive experiences

Astro fit those requirements very well.

The website is mostly static, which means the browser does not need to run a large JavaScript application just to display the main content.

The architecture

I organized the project around a few main parts:

src/
├── components/
├── data/
├── layouts/
├── lib/
└── pages/

The site configuration and identity information are centralized instead of being repeated across every page.

For example, the main site configuration contains information such as the site name, GitHub profile, topics, and site URL.

This makes it easier to keep the identity of the website consistent.

Projects

The portfolio includes projects I have actually worked on, including:

MR-CHESS — a chess project with a Dart-based chess engine.
MONSSIF FIT — a fitness application using Supabase.
NIKE D-LINE — a 3D/product-oriented web experiment.
PROMESATEC — a visual web experience built around transportation and logistics.

I wanted the projects section to show more than screenshots.

Each project has its own page with information about what it is, the technologies involved, and relevant links.

SEO and structured data

One of the parts I found particularly interesting was making the website understandable not only to people, but also to search engines.

I added standard metadata such as:

Page titles
Descriptions
Canonical URLs
Open Graph metadata
Twitter metadata
Robots directives

I also added JSON-LD structured data.

The website describes my identity using a Person entity and connects it with the website using stable IDs.

For example, the basic relationship is conceptually:

Monssif Zhairi
      │
      ├── Personal Website
      │
      ├── GitHub
      │
      └── Projects

The goal is simple: keep the information consistent and make the relationships between my website, projects, and public profiles clearer.

GitHub Pages

The website is deployed using GitHub Pages.

This gives me a simple workflow:

Code
  ↓
GitHub
  ↓
Build
  ↓
GitHub Pages
  ↓
monssifzhairi.github.io

The repository is public, so the source code and development history are available as well.

What I learned

Building the portfolio taught me that a website is not only about visual design.

There are several layers working together:

Frontend

How the interface looks and behaves.

Architecture

How the code and content are organized.

Performance

How much JavaScript and data the browser actually needs.

SEO

How search engines can discover and understand the pages.

Structured data

How machines can interpret entities and relationships.

Deployment

How the project moves from a local development environment to a public website.

Working on all of these at the same time gave me a much better understanding of what goes into a modern web project.

What's next?

The portfolio is still a work in progress.

I am currently exploring more areas including:

AI
Cybersecurity
Linux
Networking
Python
JavaScript
3D/WebGL
Mathematical logic

I also want to keep improving the interactive side of the website without sacrificing performance or accessibility.

For me, the portfolio is not a finished product.

It is an evolving record of what I build and what I learn.

Links

🌐 Portfolio: https://monssifzhairi.github.io/

💻 GitHub: https://github.com/monssifzhairi

🔗 LinkedIn: https://www.linkedin.com/in/monssif-z-80a744414/

I'm still learning, building, experimenting, and improving.

I don't just learn technology. I build with it.

DEV Community: Monssif Zhairi