Portfolio site (mohamadmashal.com)

My role

I directed AI (Claude Code and Hermes Agent) to design and build the page. I supplied the facts, the wording rules and the look I wanted, and I reviewed the screenshots. The AI wrote the HTML, CSS and JavaScript. No other people worked on it.

What it is

This is the site you are reading. It is a single page with nine sections: a hero, animated stat tiles, things I have built, a studio-of-agents diagram with a QA gate, an agent messaging section, a job-search agent section, skills, career and contact.

It is built with no framework, no web fonts, no trackers and no external requests apart from a LinkedIn link, about 68 KB in total. The look is a soft silver style with one chrome orb as the hero idea. It respects reduced-motion settings.

A notes file maps every number and claim on the page to a source and labels illustrative content, so nothing on the page is invented.

How it was built

1. Researched award-level portfolios firstRESEARCH.md lists 17 sources (design teardowns, MDN, effect libraries, an animation article). It records what each taught and what was adopted. One finding: heavy WebGL portfolios stall, so the page uses only CSS and SVG.
2. Picked one hero ideaWinners were built around one strong spatial idea, so the hero is a single chrome orb in orbit with three small labels (Agents, Python, MCP). Everything else stays calm.
3. Applied design skills with explicit rulesThree AI design skills guided choices: custom easing curves, no transition-all, transform and opacity only, press-scale on buttons, one steel-blue accent, one radius system (24 for cards, 14 inner), no purple gradients.
4. Wrote three plain filesindex.html, style.css and app.js, copied into a dist folder. No build step is needed to edit them.
5. Built the effects in CSS and SVGMesh and drifting orbs (loops of 26, 32 and 38 seconds), fine SVG grain, conic sheen, cursor spotlight on desktop only, scroll-driven timeline line, SMIL pulses, packets moving along CSS offset paths, and IntersectionObserver-driven counters.
6. Made the diagram keyboard accessibleThe studio diagram nodes have tabindex, button roles and aria-labels. Hover, focus, Enter and the legend buttons all update the role panel.
7. Traced every claim to a sourceNOTES.md has a claims table: each section's claim and its source (owner facts, live Roblox API, research dossiers). Illustrative content such as the agent role names is labelled on the page.
8. Reviewed screenshots at three widths39 screenshots in the shots folder: 1440 light and dark (9 sections each), 390 phone light (9), 1024 light and dark (5 each), plus 2 final hero shots.
9. Checked accessibility and motionMeasured contrast ratios (6.9:1 for light muted text, 4.8:1 for faint text), zero horizontal overflow at 1440, 1024 and 390, and reduced-motion emulation with loops stopped and counters jumping to final values.
10. Deployed on Cloudflare PagesStatic files uploaded through Wrangler to a Cloudflare Pages project named mohamad-mashal. There is no backend.

Decisions and why

No framework, fonts or trackers

A portfolio for hiring managers should load instantly and have nothing to explain about privacy. Total size is about 68 KB.

CSS and SVG instead of WebGL

Research showed heavy WebGL portfolios stall and get abandoned.

Sourced claims table plus labelled illustrative content

A portfolio is only useful if every claim holds up in an interview.

State AI assistance once, plainly

The page says everything was built with AI assistance (Claude Code, Hermes Agent), which is true and avoids overclaiming.

Honour prefers-reduced-motion

Reduce, do not delete: final states stay visible while loops and pulses stop.

Hardest problems

Getting a premium look without WebGL or the common purple AI gradient.

Silver structuralism: many alternating light and dark gradient stops for metal, a conic highlight on the orb, and grain to prevent banding.

Cursor-follow effects can be expensive.

The pointer writes only two CSS variables directly to the element, never through state, and off-screen sections pause their loops.

Testing hover and keyboard in the browser harness.

Real mouse and Tab input timed out, so interaction was tested by dispatching events in JavaScript. NOTES.md lists real hover, Safari, Firefox and Lighthouse as not verified.

Numbers

Timeline

• Early Nov 2026Redesign researched and built as part of the job search (exact date not recorded).
• 6 Nov 2026Projects and credentials sections added to the claims table. Research for the project library started.

What I took from it

• One strong idea beats many effects. The orb and two diagrams carry the page.
• Writing a claims table forced me to cut anything I could not source.
• Be explicit about what was not verified, such as Safari, Firefox and Lighthouse.

Links

• Portfolio
• LinkedIn