🌐 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