🌐 Zumkellerspace

🔹 Origin

I was looking for a way to put a portfolio online, but the off-the-shelf solutions didn't appeal to me. I wanted a more flexible approach with more customization options, more freedom in the design choices, and something that stood out from the ordinary.
Building the site myself was the natural answer: full control over the layout, the structure, the visual identity, and the way each project is presented.

🔸 What Zumkellerspace is

Zumkellerspace is a fully custom-built portfolio website, written from scratch in HTML and CSS, with a Figma-inspired design (full credits available on the imprint page).
It hosts:
- A homepage with a project gallery, an "About me" section, and my CV
- Individual project pages following a shared structure (intro, illustration, description, personal notes, related projects)
- A French / English bilingual system, with a flag toggle on every page
- A light / dark mode theme switcher
- Custom interactive elements (image carousel, animated back button, hover effects)

🔹 What I did

✔ Front-end development

- Wrote the entire site in HTML and CSS, with a touch of JavaScript for interactive components
- Designed a responsive layout with separate stylesheets for mobile and desktop (breakpoint at 650px)
- Built the image carousel from scratch in vanilla JavaScript
- Implemented the theme switcher and the language toggle

✔ Project page standard

- Defined a consistent template for every project page: title with emoji, intro block, main illustration, structured sections, related projects, footer
- Established a visual grammar for the headings (🔹 main sections, 🔸 chronological phases, ✔ deliverables, 💬 personal notes, 🧰 skills) to make every page readable at a glance
- Wrote and translated each project page in both English and French

💬 Personal comment

I really enjoyed this challenge. Web development isn't a field I usually work in, so it was a great opportunity to learn and work in a new domain, far from my usual mechanical engineering projects.
I'd like to thank Corentin for his help — his input was very valuable along the way.
Beyond the technical side, this project was also an exercise in communication and presentation: deciding how to tell the story of each project, what to highlight, and how to make a portfolio that looks like me rather than a generic template.

🔸 What's left to do

- Fill in the empty pages for projects that are still under construction
- Optimize the site (asset weight, loading time, code cleanup)
- Add new projects as they come

🧰 Skills Used

Web development, HTML, CSS, JavaScript, Responsive design, Visual design, Bilingual content writing

Related Projects