AP1 — Professional portfolio

Project at a glance

The goal

The portfolio has to serve two purposes at once: a professional showcase for finding an apprenticeship, and an assessment deliverable for the diploma, where the examiners must easily find my projects, my skills and my tech watch.

One constraint I set myself: no framework, no CMS. I rely on AI assistants to write the code, but every page remains HTML and CSS that I review, correct and must be able to explain.

How I built it

• Scoping — defining the site structure, the pages and the content, written in Markdown first to focus on substance before form.
• Graphic charter — a dark theme with orange (#FF5C00) as the single accent colour, Montserrat as the typeface, and an “AK” logo.
• Integration — semantic HTML and CSS, written with the help of AI assistants and organised around reusable colour, spacing and radius variables.
• Responsive design — a fluid layout from mobile to large screens, with a full-screen hamburger menu below 900 px.
• English version — every page fully translated, with a flag-based language switcher.
• Compliance — a legal notice page and GDPR information on the contact form.

Technical highlights

Stack

What I put in place

• A single stylesheet shared by every page, built on CSS variables (--orange, --surface, --gouttiere…): changing a colour or a spacing value happens in one place.
• Fluid typography using clamp(): headings scale smoothly with the viewport instead of jumping between fixed sizes at each breakpoint.
• A dependency-free mobile menu — opening it relies on a checkbox and a CSS selector; JavaScript only closes it after a click.
• A bilingual site — every page exists in French and English, cross-linked to the same page in the other language.
• A working contact form — messages are delivered through Formspree, with no back-end to host and no database to maintain.
• Accessibility — contrast checked on the dark background, visible keyboard navigation, animations disabled for people who ask for it in their system settings.

Problems I ran into

• Responsive design — the first menu worked on desktop but was unusable on mobile. I had to redo the layout thinking small screen first, then scale up.
• File paths — broken internal links caused by stray spaces and underscores in file names. A good lesson in how to name the files of a website.
• Code duplication — the header and footer are copied into every file, so any change has to be repeated everywhere. That is the limit of a static site with no build tool, and the main area for improvement.
• Visual consistency — as pages were added, margins and text sizes drifted apart. Moving to CSS variables brought order back.

What I took away from it

This is the project that moved me from “it works on my screen” to “it works for whoever is reading it”. Working without a framework, even with AI help, forced me to understand positioning, the cascade and responsive layout: to fix what the AI suggests, you first have to be able to read it.

A portfolio is never really finished: with every workshop I add a page, fix what has aged and refine the charter. That is also what makes it a fair reflection of my progress.

Next steps

• Share the header and footer instead of duplicating them in every file.
• Host the site on a real domain name rather than locally.
• Optimise the weight of images and downloadable documents.

Curriculum skills involved