Throwback — Legacy Site Sandbox

Explore earlier versions of my site in a live, contained preview. Pick a version, choose a viewport, and interact with it as if it were deployed—links and routing stay inside the sandbox.

Version: Use the switcher below to load a legacy build.
Viewport: In the toolbar, pick Mobile / Tablet / Desktop / Fluid to resize the frame.
Reload: Hard-refresh the iframe (cache-busted) if assets look stale.
Full Screen: Open the current version in a dedicated tab.

Viewport

Experience it in full screen

2022 – HTML/CSS/JS: notes & breakdown

Stack: HTML • CSS • JavaScript

Expand

Thought process

• Ship a real homepage fast; learn by doing
• Prototype timeline → viewer flow before polishing
• Keep scope small but iterate constantly

What I liked

• Typed headline effect felt magical at the time
• Finally owning a domain and publishing something personal

What I’d improve

• Layout tuned to my laptop → broke on many screens
• Inconsistent spacing/typography and weak semantics
• Mobile/tablet experience was rough

Ideas I explored (never deployed)

• Timeline with card-style entries for projects/experience/education
• Viewer page per entry with full-screen screenshots + details
• Education hub (languages, frameworks, tools, awards, extracurriculars, courses)
• Filters to switch between experience / education / projects
• Lightweight screenshot carousel per entry

Comments

Everything beyond the homepage lived in development and never shipped. I paused the project when I discovered React and decided to rebuild from scratch.

Deep dive

This was the spark. Second year of university, fresh off learning HTML/CSS/JS, I wanted something that felt like *mine*. I bought zaidokal.com, sketched a one-page layout, and hacked together the typed headline—“Hey, I’m Zaid Okal / Software Engineer / …”. It was simple JavaScript, but to me it felt like wizardry. I showed it to family and friends way too many times. I had big plans: a proper Timeline of my work and history (each item as a card in a responsive grid), and a Viewer page where a click on any card opened a full-screen section with screenshots and a longer write-up. I also drafted an Education hub to catalog languages, frameworks, tools, awards, extracurriculars, and coursework—basically, a living index of everything I was learning. Reality check: responsiveness. I tuned the site to my laptop, then watched it fall apart on phones and tablets. The CSS was brittle, spacing inconsistent, semantics fuzzy. I never shipped the timeline, viewer, or education pages because the foundation needed a rethink. That’s when I discovered React—and the idea of components, routing, and clean state. Instead of wrestling the old code, I started over with v2.