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.
Top comments (0)