Skip to content
fr (Français)en (English)
Mamady Bal
CV (opens in a new tab)LinkedIn (opens in a new tab)
Back to home

Personal project · 2026

Interactive portfolio

Create a digital experience that tells a career story differently from a CV, and that is itself proof of the skills it describes.

Concept

Basketball is the narrative system, not the decoration. Its vocabulary shapes the reading: you discover the story, then the scouting report on the staff tablet, the method, the experience, the highlights, and then you get in touch.

Each term of the metaphor is translated into plain language under its section title, so a recruiter understands the site without knowing basketball.

Journey

  1. 01Tip-offTell the story, from the court to digital
  2. 02ScoutingSum up the profile like a coach's report
  3. 03Game PlanExplain the working method
  4. 04GamesProve it through experience
  5. 05HighlightsShow the key achievements
  6. 06PlaybookList skills, with no made-up ratings
  7. 07The courtConnect the sports career to the job, with evidence
  8. 08Free agentSay what I'm looking for
  9. 09Next GameMake contact easy

Method

The project followed its own Game Plan.

  1. 01ObserveDetailed brief: goals, recruiter audience, constraints, and a strict “invent nothing” rule.
  2. 02AnalyzeArchitecture, site structure and UX priorities: the profile first, aesthetics second.
  3. 03BuildDesign system (colors, typography, components), then a static prototype of every section.
  4. 04ExecuteCase studies, interactions, animations, English version, technical SEO and launch.
  5. 05MeasureMobile and desktop testing, accessibility, performance, then cookie-free analytics.

Visual identity

The site applies the MB brand guidelines: a monogram drawn in a single stroke, where the M and the B share the same stem, and an orange dot, the ball, as the only touch of color. The curves of the B echo the court's arcs.

Logo horizontal Mamady Bal
Logo compact Mamady Bal
Symbole MB
Logo system: horizontal, compact, symbol
  • Court black#0E0F11
  • Charcoal#16171A
  • Chalk#F2F0EA
  • Tactical grey#9C9B96
  • Basketball orange#FF6A13

Big Shoulders for headings, figures and labels: a condensed typeface drawn from Chicago's signage, the lettering of scoreboards and jerseys. Familjen Grotesk for text, a grotesque with hand-drawn details. Icons follow the same rule as the logo: a 1.5 px stroke, rounded ends, no filled shapes.

Technical choices

  • Accessibility

    Semantic HTML, checked contrast, keyboard navigation, skip link, and respect for the “reduce motion” setting. No information is hidden behind an animation.

  • Performance

    Pre-rendered pages, self-hosted fonts, very little JavaScript: menus and panels rely on native browser features. The site stays complete without JavaScript.

  • Bilingual

    Two complete versions, French and English, each with its own URLs and language tags for search engines.

  • Maintainability

    All content is separate from the code: adding an experience or fixing a text never requires touching a component.

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • SVG
  • Vercel

Credits

Concept, brief, content and project management: Mamady Bal. Development carried out with the help of an AI (Claude), step by step and validated at each delivery.