Creative developer

I design and build websites and web apps. Clear interfaces, solid engineering, and motion or 3D when they earn their place.

Download CV Selected work

01About

I'm Mohammed, 20, a third-year software engineering student who learned design before code. I build complete websites and web apps, from the first sketch to the last deploy, and I care as much about how they feel as how they work.

  1. 013D first

    A year in Blender: modelling, light and rendering. That is where the eye for detail comes from.

  2. 02Then design

    A year of layout, type and interface design, learned in Figma and Framer before writing a line of code.

  3. 03Now, code

    Websites and web apps, designed and built straight in the browser, front end to back end, alongside a software engineering degree.

Age
20
Studying
Software engineering, 3rd yearFaculty of Sciences, Hassan II University
Baccalaureate
Mathematical Sciences, option B
Languages
Arabic, English, French

02Selected work

Things I've built(07)

A client website, a web app, a browser game and four more sites. Each one designed and developed by me, from the first frame to launch.

  1. Oxycoupe website: “Votre partenaire de construction métallique et montage industriel” over an engineering office

    01 Client website

    Oxycoupe

    Industrial steel construction

    The website of a steel-construction and industrial-assembly company founded in 1984: six trades, a portfolio of industrial projects, news, recruitment and a word from the CEO.

    • Client
    • Multi-page
    • SEO
    • Recruitment
    Visit the site
  2. Sirt9ra web app: “Study time that actually counts” beside a running focus timer

    02

    Sirt9ra

    Study app, Next.js

    A focus timer that only logs real work, flashcards that schedule your revision and a forecast of the grade you need. Front end, back end, auth and database: the whole product.

    • Product
    • Next.js
    • Auth
    • Database
    Open the app
  3. Riad Sebti website: an elegant escape in the heart of Fez, over the riad's courtyard

    03

    Riad Sebti

    Boutique riad and spa

    A boutique riad with five suites, an indoor pool and a spa: an editorial layout, full-bleed photography and a direct booking flow.

    • Design
    • Development
    • GSAP
    • SEO
    Visit the site
  4. Chaoui Bois website: “La référence du bois au Maroc” over a parquet floor

    04

    Chaoui Bois

    Timber merchant

    A family business in wood trading, joinery and transport since 1983: serif-led art direction, a materials catalogue and quote requests for trade customers.

    • Design
    • Development
    • GSAP
    • Forms
    Visit the site
  5. Biig Ramy gym website: “Révélez votre vrai potentiel” in neon green

    05

    Biig Ramy

    Gym and coaching

    A six-club gym: condensed type, neon on graphite, clubs, programmes and memberships, with every screen leading to the free trial.

    • Design
    • Conversion
    • GSAP
    Visit the site
  6. Foodly Shawarma website: “Bonne nourriture. Bonnes personnes. Bons moments.” over a shawarma platter

    06

    Foodly Shawarma

    Restaurant chain

    Flame-grilled shawarma in three locations: a filterable menu, a photo gallery, directions to each restaurant, reviews and a quick way to order.

    • Design
    • Menu
    • Locations
    Visit the site
  7. Smash Fort 3D title screen over a low-poly landscape at dusk

    07

    Smash Fort 3D

    Browser game, Three.js

    Charge the cannon, bring the fort down, chain the combos. Physics demolition levels, a shop and saved progress, playable on desktop and mobile.

    • Three.js
    • Physics
    • Game design
    Play the game

More code on GitHub.

03Process

From a brief to a live site.

Four steps, the same every time, so you always know where your project is, what comes next and what you will have in your hands.

  1. 01/ 04

    Understand

    Your goals, your audience, your content. I ask questions, study what works in your field and write down what success looks like before anything is drawn.

    You getA one-page brief and a sitemap

  2. 02/ 04

    Design

    Layout, type and colour, mobile first, drawn straight in the browser. You see real pages, not a mood board, and we refine them together before the build.

    You getA clickable prototype

  3. 03/ 04

    Build

    Responsive pages with motion where it helps. Speed, accessibility, SEO foundations and security are part of the build, not extras at the end.

    You getA private preview link, updated as I go

  4. 04/ 04

    Launch

    Domain, hosting and analytics, then final checks on real phones and browsers. A handover follows, so the site stays yours to run.

    You getA live site and a handover guide

04Tools

My stack, mapped.

Thirty-three tools on seven lines, drawn the way I use them. Where two lines meet, one tool does two jobs. Pick a stop to see what I use it for.

    Tools, line by line

    • HTML
    • CSS
    • JavaScript
    • TypeScript
    • Python
    • C
    • C++
    • React
    • Next.js
    • Tailwind CSS
    • Bootstrap
    • GSAP
    • Three.js
    • Node.js
    • PostgreSQL
    • Neon
    • Supabase
    • Firebase
    • MySQL
    • VS Code
    • Git
    • GitHub
    • Netlify
    • Cloudflare
    • Blender
    • CapCut
    • Photoshop
    • Figma
    • Framer
    • Claude
    • AI Studio
    • Colab
    • Flow

    05Capabilities

    Four crafts, one pair of hands.

    Design, code, motion and 3D under one roof, so nothing gets lost between the idea and the build. Every panel here is live: go ahead and play.

    1. 01

      Design

      I design what I build: layout, type and colour systems, drawn straight in the browser where they will live, with its constraints in mind from the first line.

      Variable typeDrag the dot
      widthweight

    2. 02

      Development

      Semantic HTML, modern CSS and TypeScript. React and Next.js when the product calls for it, plain JavaScript when it doesn't. Code another developer can pick up tomorrow.

      playground.jsDrag a number, click the ease
      gsap.to(".dot", {
  y: -120,
  rotation: 180,
  duration: 1.1,
  stagger: 0.08,
  ease: ,
  repeat: -1, yoyo: true
});

    3. 03

      Motion

      Scroll choreography, transitions and micro-interactions with GSAP. Motion that explains the interface instead of decorating it, and never makes you wait.

      SpringGrab it, throw it

    4. 04

      3D

      Three.js scenes lit and textured by hand, like the instrument on this page, modelled entirely in code. Blender when a shape needs sculpting.

      Exploded viewDrag to turn it

      36 parts / 0 imported models / 1 texture atlas

    And the unglamorous part, done properly: accessibility, performance budgets, SEO and a clean handover.

    06Contact

    Let's build something alive.

    A project, a role in your team, or a question about something on this page? Write to me and I'll reply within a day.

    essanaanimohammad@gmail.com
    Local time
    --:-- GMT+0
    Languages
    Arabic, English, French
    Reply time
    Within 24 hours
    Studying
    Software engineering, 3rd year