← All work

This Portfolio

Designing and hand-coding my own site, from sketch to live.

I built my portfolio from scratch to keep sharpening my coding skills, because there's always more to practise and improve. I chose plain HTML, CSS and JavaScript to show a vanilla site, designed and developed entirely by hand with a responsive design.

The Beit el Arabi homepage, showing six hand-drawn doors
Role
Web Design & Development
Tools
HTML, CSS, JS, Illustrator
Year
2026
Live site
ykdesigns.co

The challenge

The biggest challenge was the design. I wanted the site to have a creative touch while still being functional and easy to use. Very creative websites can easily become hard to navigate, so I focused on keeping the personality in the details while making sure the content always came through clearly. The film strip and frames also had to work just as well on a phone as on a desktop, which made responsive design part of the challenge from the start.

Process

  1. 01

    Exploring the Concept

    I sketched three ideas for the About page timeline: a film strip, a photographer's contact sheet and index cards. I chose the film strip because it tied the page to the film frames and polaroids on my Work page. I wanted the site to evoke a sense of nostalgia, like a contact sheet marked up in red pen: a work in progress, still being developed.

  2. 03

    Building it by Hand

    I wrote the site in plain HTML, CSS and JavaScript, with no templates or frameworks. The sprocket holes on the film strip are pure CSS, using repeating gradients, so the strip stretches to fit however many entries I add.

  3. 04

    Hosting & Launching

    Self-hosted on my own domain, with self-hosted fonts and an SSL certificate set up through cPanel.