amrsakr.com: four redesign proposals

Each proposal is a complete five-page site (Home, Work, Reviews, About, Contact) with its own identity, motion, and page transitions. All four use the same real content: the same facts, the same numbers, and the same 174 verbatim Freelancer.com reviews.

01

Live Terminal

The site is the trading desk Amr built for himself. Visitors connect to graphite panels, a chart that draws one candle for each real review, and a tape of client quotes. It speaks to traders in the language of their own tools.

Open Live Terminal
Live Terminal home page on desktop: dark graphite panels, a large monospace headline, a candlestick chart, and a list of key numbers Live Terminal home page on a phone

Identity

  • #15171A
  • #1C1F23
  • #EEE8DA
  • #FFB547

Type: Martian Mono and Source Serif 4.

Signature moments

  • A 700 ms connect sequence that any key skips.
  • A review flow chart: one candle per verified review, no fake prices.
  • Headings that decode, and a page change that folds to one amber line.
  • A command line, number-key shortcuts, and a FREEZE switch for all motion.
  • Reviews filter built like an order-book ladder. Portrait as a 1-bit dither.

Build

  • Libraries: GSAP core, CustomEase, ScrambleText (ScrollTrigger on Work and About, Flip on Reviews).
  • Home weight: 41 KB own code + 35 KB libraries (gzip), 78 KB fonts.
  • Lighthouse mobile performance: 91 to 97. Accessibility 100.
02

Editorial Ledger

A career printed as the front page of a serious financial broadsheet. Every figure has a source footnote, and all 174 reviews are printed as letters to the editor. It is the only light proposal, and it reads as trust and record.

Open Editorial Ledger
Editorial Ledger home page on desktop: a newspaper masthead, a strip of key numbers, and a large serif headline on warm paper Editorial Ledger home page on a phone

Identity

  • #F3EDDF
  • #FBF8F1
  • #16130F
  • #B8291A

Type: Newsreader and Libre Franklin.

Signature moments

  • The nameplate prints into register on load.
  • Page changes turn like a newspaper leaf.
  • A statement of account that posts each figure with its chart as you scroll.
  • Full-bleed ink plates that set a client quote line by line.
  • Halftone portrait with a printer's loupe. A classified notice as the form receipt.

Build

  • Libraries: GSAP core, ScrollTrigger, SplitText, CustomEase, DrawSVG, Lenis.
  • Home weight: 45 KB own code + 60 KB libraries (gzip), 143 KB fonts.
  • Lighthouse mobile performance: 95 to 98. Accessibility 100.
03

Kinetic Signal

Noise in, signal out. Each page opens as restless market noise on electric blue, then locks into one lime signal line and exact type. It is the boldest proposal and the one with the most motion.

Open Kinetic Signal
Kinetic Signal home page on desktop: a very large name in white on electric blue, with a field of price lines and one lime signal line Kinetic Signal home page on a phone

Identity

  • #1D2CF3
  • #0A0C24
  • #F4F5FB
  • #D4FF3A

Type: Archivo, one variable font file for every voice.

Signature moments

  • A WebGL field of price ridgelines that calms into one signal line.
  • Numbers that rise, tremble, and lock.
  • Display type that trembles with scroll speed and settles at rest.
  • Page changes that slide up behind a lime band, also between blue and light pages.
  • Portrait drawn from signal traces. Contact form written as one sentence.

Build

  • Libraries: GSAP core, ScrollTrigger, CustomEase, Lenis, and OGL for WebGL on Home and About.
  • Home weight: 47 KB own code + 68 KB libraries (gzip), 88 KB fonts.
  • Lighthouse mobile performance: 97 to 99, after a pass that starts scripts and WebGL after the first paint. Accessibility 100.
04

Blueprint

A five-sheet engineering drawing set, printed as a cyanotype. Systems draw themselves in ink, dimension lines measure real facts, and each client review is an inspection report with a stamp. It says "systems architect", not "coder".

Open Blueprint
Blueprint home page on desktop: a deep blue drawing sheet with a grid, a tall condensed headline, and an exploded isometric drawing of a trading system Blueprint home page on a phone

Identity

  • #0D2D56
  • #12386A
  • #EAF2FF
  • #FF9466

Type: Saira, a DIN-style family, in a text cut and a condensed display cut.

Signature moments

  • A drafting intro: lettering guides, a pen nib, and dimension lines.
  • An exploded assembly of a trading system, from terminal to cloud.
  • Page changes that print the next sheet under a lamp line.
  • Schematics that ink themselves beside the spec text.
  • Inspection stamps on 174 reports, a CAD crosshair, and an engraved portrait.

Build

  • Libraries: GSAP core, CustomEase, SplitText, DrawSVG (ScrollTrigger on Home and Work).
  • Home weight: 46 KB own code + 55 KB libraries (gzip), 41 KB fonts.
  • Lighthouse mobile performance: 91 to 97. Accessibility 100.

Compare

Proposal Theme Home weight (gzip) Performance Accessibility Review scores
01 Live Terminal Dark graphite, amber accent 41 + 35 KB 91 to 97 100 8.3 / 8.0
02 Editorial Ledger Light newsprint, red accent 45 + 60 KB 95 to 98 100 8.3 / 8.5
03 Kinetic Signal Electric blue, lime accent 47 + 68 KB 97 to 99 100 8.0 / 8.0
04 Blueprint Cyanotype blue, redline accent 46 + 55 KB 91 to 97 100 7.6 / 8.3

How to read the numbers

Measurements

  • Home weight is own code plus libraries, gzip, without fonts and images.
  • Performance is Lighthouse mobile, the range across the five pages, best of two runs on an idle machine. The test machine's antivirus removes compression, so production scores are a little higher.
  • Review scores are from two independent reviewers (design, then function) out of 10, given before the last two fix rounds.

Checks every proposal passed

  • All 174 reviews are on the Reviews page, word for word. A script compares every quote on every page with the source file.
  • Every number comes from the approved list. No invented facts, clients, or dates.
  • All pages work without JavaScript and with reduced motion, at 1440, 768, and 390 px.
  • The contact form was tested against a stub only. Send one real message before launch.

Before a proposal goes live

  • Remove <meta name="robots" content="noindex"> from each page.
  • Minify CSS and JS, and check the canonical URLs.
  • Test in Safari and Firefox and on real phones. All checks ran in Chrome.
  • Each folder has a README.md with its file map, licenses, and owner decisions.

Files

  • Each proposal is self-contained in its folder: pages, css/, js/, fonts/, vendor/, assets/, and tools/ (generator scripts).
  • DESIGN.md in each folder holds the full art direction.
  • _content/ holds the shared facts and the 174 reviews.