The site you are exploring
September 2026 – today · Personal · live
The site in front of you, built as a product in its own right: a real-time 3D backdrop, an AI assistant that answers from the content, a built-in console, a command palette, filterable projects with views and likes, two languages and a private dashboard.
Guided tour
Each feature is explained, shown and above all one click away: the buttons below open it for real, right here.
0 / 15
tried
01 · Explore differently
Ask a question, type a command or search with two letters: pick your own way.
Ask a question in English or in French: it answers from the content of the site, writes its answer word by word and names projects as links that open them.
Where : “Ask the AI” button, bottom right of every page
karim@mko:~$ p
24 commands to drive everything from the keyboard: list the projects, open one, change the language or the sky, ask the assistant. History, Tab completion, and a few surprises.
Where : “>_” button in the top bar
Two letters are enough to jump to a section, open a project or an internship, copy the e-mail or switch language. Arrows and Enter do the rest.
Where : “Search” field in the top bar
02 · A living backdrop
The backdrop and the logo are computed live in the browser. They react, then step back.
Real renders of the logo, captured on the siteSpin it with the mouse, click to shatter it, change its material (crystal, ice, holographic, obsidian, chrome) or look at it in exploded view.
Where : Top of the home page, with its settings bar
The backdrop follows the time in Tunis: lighter by day, a violet glow at dawn and dusk, deeper at night. Always in the brand colours.
Where : Behind every page; the time shows in the footer
One button gently slows the whole backdrop to a stop, without touching useful transitions. The choice is remembered, and the device's “reduce motion” setting is respected from the start.
Where : Wave icon in the top bar
Off by default. Once on, light sounds follow page openings, important clicks and the logo as it shatters.
Where : Speaker icon in the top bar
03 · The projects
Cards that open full screen, filters that combine, and counters that are real.
Mobile, web, IoT, AI, then the exact technology: both filters combine and the cards glide to their new place. The gallery moves with the arrows, the mouse or a finger.
Where : “Projects” section of the home page
Each project opens from its card and returns to it when closed. Inside: 3D mockups of the screens, a case study, figures, architecture and captures. Each page also has its own address to share.
Where : You are on one: this page
Each page counts its visits and its likes, anonymously. The heart reacts at once, then the server confirms.
Where : Under the title of each project, and at the bottom of each card
04 · Skills and background
Nothing is listed without proof: each technology leads to the projects and internships where it was used.
The main technologies are stars, linked when a project uses them together. A click on one filters the project gallery.
What it is for, who created it, and above all in which projects and internships I used it. Cards can be browsed with the arrow keys.
Where : A click on any technology in the skills
The contribution calendar of the year and the split of languages, read from GitHub and drawn on a single canvas.
Where : Under the constellation
Each internship opens its page: the mission, what was delivered, the technologies, and a presentation of the company with its sources.
Where : “Experience” section
05 · Two languages, one simple contact
The site reads in English as well as in French, and the contact card fits in a phone.
The whole site switches language on the fly, the address follows, and each language is indexed separately by search engines.
Where : FR / EN button in the top bar
A QR code to scan or a button to add me straight to your contacts, the e-mail copied in one click and a form to write without leaving the page.
Where : “Contact” section, at the bottom of the home page
06 · On every screen
It is not the desktop version made smaller: on a phone, the assistant becomes a sheet rising from the bottom, the gallery slides under a finger, the logo settings fit in one button and the console takes the whole screen.
On a phone
07 · Behind the scenes
Behind the site, a reserved space shows me what visitors look at: visits, most viewed projects, where they come from, devices. The captures below come from that dashboard, with its real figures.
Private access, password protected
Anonymous by design
No cookies, no IP address kept: only counters per day.
Home-made
The measurements, the charts and the export are built into the site, with no third-party tracker.
Useful to decide
Knowing which projects draw the most attention helps choose what to put forward.
08 · Its story
From the first visual identity to this page, the milestones of the site.
09 · Under the hood
Automated tests
A robot opens the site in a real browser and checks the essential journeys at every change.
Careful SEO
Clean addresses per language, a sitemap, structured data and a share image generated for every project.
Keyboard navigation
Palette, console, pages and cards all work without a mouse, with Escape to close.
Secure by default
Protection headers on every page, rate limits, and no personal data stored.
3D that paces itself
The scene tunes its detail to the device and rests as soon as it is out of sight.
Content that is easy to keep alive
Adding a project means completing one file: the gallery, the assistant and the console follow.
By the numbers
0
languages, each with its own addresses
0
commands in the built-in console
0
materials for the 3D logo
0
project and internship pages
Case study
A portfolio often looks like a résumé with a layout. I wanted the opposite: a site to explore, where you can ask a question, open a console or change the material of the logo, while staying easy to read for someone who only has two minutes.
Interface
Server
Data
Connected services
Interface
Server
Data
Connected services
01
One content, several ways in
Projects, internships and skills live in a single file per language. The gallery, the AI assistant, the console and the command palette all read the same source: adding a project makes it available everywhere.
02
An assistant that only knows what the site says
The assistant answers only from the content of the portfolio, names projects as clickable links and writes its answer word by word, like a real conversation.
03
3D that adapts to the device
The scene tunes its own level of detail to the power of the machine, rests when a page covers it, and one button calms every ambient animation.
04
Respectful statistics
Visits are counted anonymously, with no cookie and no IP address kept, and read from a private dashboard.
Screenshots (12)
A word about this projectA word about this project
A question, an opinion, an idea?
Write to me right from here. Your message is not published: I am the only one who reads it.
Private: never shown on the site