The shift
A fifth of jobs in motion
By 2030, 22% of today's jobs will be disrupted: 170 million created, 92 million displaced, and 39% of core skills changing.
Work brief · 7585 min read
This web. My web.
How I built and deployed this site with AI, end to end.
Web Development
Front-end
Design Systems
Branding
DesignOps
Roles — Product owner · UX designer · Front-end developer
Duration — Five months · Apr – Sep 2026
Scope — UX strategy → design system → development → operation
You are reading the live site right now.
AI now drafts résumés and cover letters, so sounding capable has never been cheaper. A senior professional has to show the work instead, and I chose to act on that shift rather than wait for it. This site is the core of my personal brand: a front-end build I designed and built with AI in five months. Scroll on for why it had to exist, how it grew from a single page, how it was built, and the figures behind it.
TABLE OF CONTENTS
Act 00 · Context
Careers in danger.
Urgent personal brands.
The builder gap
Designing is no longer enough
In Peru, 84% of tech employers demand AI modeling and app development. Pure designers now trail profiles who also build.
The edge
AI beats outdated experience
66% of leaders would not hire someone without AI skills, and 71% would choose a less experienced candidate who has them.
Sources: World Economic Forum, Future of Jobs Report 2025; Experis, Expectativas de Talento Tecnológico (Peru), 2026; Microsoft and LinkedIn, Work Trend Index 2024.
Act 01 · Problem
Prove, don't talk.
Tangible positioning.
The reading
Posts list requirements, not voices
Job posts spell out what a candidate must have, never how they think. Meeting every requirement gets an application read; being understood gets it believed.
The credential
Diplomas don't show the build
A work sample predicts performance 3× better than education. This live page translates my credentials into proof of critical thinking and method.
The claim
Everyone claims expertise
Three in four hiring teams see AI-written applications; 65% find skills harder to verify. Only strong portfolios win with serious employers.
Sources: Sackett et al. (2022) on selection validity; Robert Half, November 2025, n = 2,000+; Deel Global Hiring Report 2026.
Act 02 · Evolution
The three versions.
From templates to code.
Level 1
The Template era (2023–25)
Before coding, I used Canva, Figma and Framer. None matched the fidelity required. Learning code meant becoming a junior programmer.
Level 2
The Single-Page (Q2 2026)
Weeks on a one-scroll landing page gave me the practical experience no school could, locking the AI workflows behind this site.
Level 3
The Multi-Page (Now)
I accomplished this version with the Microsoft Front-End specialization. Seven pages, four case briefs, copy in two languages.
Building with AI takes orchestration, research to review, not a prompt.
Act 03 · Solution
The testament
Crushing generic noise.
-
Illustration
Strategy & tech
Senior judgment turned into software
I launched this independent product lab to prove that solutions make a real impact when you build, test and deploy them yourself.
Read the repository -
Illustration
Visual rigor
Refined design, solid build
I built a modular component system that delivers fluid navigation, accessibility and a seamless finish.
Read the repository -
Illustration
Delivery cadence
Continuous releases and improvements
I keep shipping improvements to prove rapid execution, autonomy and a constant focus on business impact.
Read the repository
01 / 03
Act 04 · Architecture
Scalable portfolio.
Integrated technical stack.
Speed
1) Light, fast and built to last
The site runs on the web's three core languages, with no framework so pages load fast and nothing breaks after a hard change.
Vanilla HTML, CSS and JavaScript: the web's native standards, with no framework, and no library, deployed as static files on GitHub Pages. No major-version migrations, no dependency to patch, full control of every byte, and a light payload that loads fast on an average phone.
Accessibility
2) Made for everyone
Anyone can navigate with a keyboard or a screen reader, with text readable in light and dark themes, on a phone or a wide screen.
Built to WCAG AA: every meaningful image carries alt text, every control is reachable by keyboard with a visible focus state, and contrast is verified in both themes. Responsive layout resolves at three declared breakpoints: <767px, 768–1023px, and ≥1024px.
Copy
3) Every word in its place
Every word lives in one of three dictionary types: text every page shares, text every case brief shares, and text for one page only.
Internationalization (i18n) runs on three layers of JSON dictionaries, merged in order: global for site chrome, regional for the strings every brief shares, local for each brief's own copy. Every string sits under one key at one level, and each English locale file has a Spanish twin with the same keys, checked by script. Spanish is transcreated, not translated.
Design System
4) The same scaffold on every brief
Every case brief uses the same interface components as templates: editorials, cards, panels, charts and dashboards.
The web applies principles from Atomic Design and DesignOps. Global tokens for color, type and spacing feed atoms such as buttons and tags, molecules such as cards and reveal panels, and organisms such as this schedule and dashboard. Each brief builds the same organisms from its own data and dictionary, so one fix lands everywhere, and every change is checked at three page widths, two themes and two languages.
For more, access the repository.
Act 05 · Schedule
The rollout.
Commits and pull requests.
This Gantt chart turns cold project work into a visual summary for tracking purposes. Each row is one stage of the work, read from left to right along the calendar, so you can see what happened when, how long each deploy took and where overlaps happen. This visual records completed work, not planned.
Before this site, a one-page version of this portfolio was built and tested internally. Work was carried out from 24 Apr to 04 Jul 2026. Epic 01: Single Page built section by section: hero, work, capabilities, and contact. Epic 02: Repo Hygiene prepared the handoff. In total, two GitHub repositories ('jdigital' and 'legacy-desops') carried 240 and 46 commits respectively in public history across 32 active build-days.
- 01Defect inventory28 Aug · 1 commit · 1 PR
- 02Case briefs30 Aug – 11 Sep · 30 commits · 4 PRs
- 03Core pages30 Aug – 20 Sep · 83 commits · 5 PRs
- 04Themes and artwork5–6 Sep · 22 commits · 2 PRs
- 05Bilingual copy20–26 Sep · 139 commits · 3 PRs
Commits. A commit is one saved change to the site's code, with a note on what changed.
Pull requests. A pull request is a set of commits proposed together, reviewed, then merged into the live site.
Source. The public history of github.com/jdsaire/designops, 28 Aug – 26 Sep 2026.
Act 06 · Impact
V2 vs V1.
Baseline contrast.
The figures
- 561 vs 286561 vs 286V2V1CommitsIn 45 days on the multi-page site, against 71 on the landing page.
- 64 vs 1064 vs 10V2V1OrganismsReusable page sections, across 7 pages against 1.
- 990 vs 175990 vs 175V2V1Dictionary keysLabeled pieces of text, each kept in EN/ES.
What it means
Reviewed, not rushed. In both builds nothing shipped without passing a check set first; the second started from a written list of known defects.
What transfers. What a team gains is not this code. It is the way of working that made the second build cheaper.
Method. Landing-page figures from the public commit history, jdigital and legacy-desops summed, 24 Apr – 04 Jul 2026 (71 days).
Cut-off. Multi-page figures measured on 12 Oct 2026, at the merge of PR #38.
Review gates. 21 pull requests in 45 days on the multi-page site, against 52 in 71 on the landing page.
Act 07 · Reflection
True legacy.
Key takeaways.
Governance
Checkpoints that hold
A run stops at every gate until I release it. Review happens on localhost before changes reach the live browser.
Tracking
One-time decisions
Every decision becomes a numbered ruling in one log, and every edit I make is recorded without a project controller.
Audience
Effective communication
Every claim traces to its source and is written for professionals outside systems engineering.
Next steps
Keep exploring
Read the case closest to yours.
-
Illustration
SPORTS
Boosting media teams at the FIFA World Cup 2026.
AccreditaPass: a Blazor and .NET app that tracks the whole journey of journalists across 3 countries and 16 stadiums. Built in five weeks.
Access Brief -
Illustration
BANKING
Yape photo says paid. This app validates it safely.
Trust & Verify: a React and TypeScript app that lets a merchant check a Yape payment is genuine. Built in under a week.
Access Brief -
Illustration
AIRPORT
Paying a fee Lima's airport had never charged.
TUUA Transfer: the web payment flow I designed for international transfer passengers at Jorge Chávez. Handed over in 2025.
Access Brief
01 / 03