Work / Product UX/UI / Portfolio 2026 · Audit of my own site
Project 07 of 28 in the archive 07 of 09 in Product design UX/UI See the whole discipline ↗
The project, in two halves
Part 01
(00) — The thesis
Average score across design, system and technical execution
First impression, visual, architecture and mobileScore for the contact flow on the day of the audit: the form ended in a mailto:
Testimonials and outcome metrics anywhere on the site
With the quote slider already coded and unusedMeasurement: no analytics, no events, no heatmaps
None of the above can be checked against data todayA portfolio shows outcomes; an audit shows judgement. This document applies to my own site exactly the method I apply to a client —code review, cognitive walkthrough, heuristics, calculated contrast ratios and benchmarking— and publishes the result without filtering out the failing grades. Every finding is verified in the source code or in the browser; anything I could not measure without traffic data is flagged as to verify rather than presented as certainty.
This report is published with a date on it and does not get rewritten: the scores and the seventeen findings are the ones from the day of the audit, exactly as they came out. What does change is the status of each finding as it gets fixed, marked in the table in chapter 10 and in the chapter the finding belongs to.
mailto: — Resolved. The form now POSTs to a relay (Web3Forms) which forwards the message to the inbox; the mailto: is kept as a visible fallback for when sending fails, the success message is now truthful, and there is an anti-spam honeypot. It works without JavaScript too.As a shop window for craft, the site plays in the top league: careful typography, a clean token system, light and dark themes, two complete languages, zero dependencies and sophisticated motion that respects prefers-reduced-motion.
As a channel for winning work, it did not function on the day of the audit. The social links point at the platforms' generic front pages, the form relied on a mailto: that failed silently —Resolved—, there isn't a single testimonial or outcome metric in the case studies, and there is no analytics: it is still impossible to know how many people arrive, how far they get and where they drop out.
| Dimension | Score | Reading |
|---|---|---|
| Visual design and consistency | 8.5 | A real system, not styling: tokens, fluid scale and colour per discipline |
| First impression / above the fold | 8.0 | Passes the blink test: role, three disciplines and location without scrolling |
| Information architecture | 7.0 | Two levels, filterable archive and shareable URLs; debatable labels |
| Mobile experience | 7.0 | Genuinely optimised, not shrunk; loses the availability signal |
| Accessibility | 6.5 | Well above the average portfolio, with specific and cheap gaps |
| Copywriting and value proposition | 6.5 | A memorable voice with no figures behind it |
| Speed and performance | 5.0 | Light code, heavy images: 23 MB with no srcset |
| Calls to action | 4.5 | Right where they exist, missing where they pay most |
| Trust and social proof | 3.5 | Placeholder social links and not one testimonial |
| Conversion flow | 3.0 | The form sent nothing and the site said it did · Resolved |
| Data and analytics | 0.5 | Zero measurement: no claim can be checked |
Verified in the menu and the footer: a bare href="https://www.linkedin.com/in/edgfree/". A recruiter's most likely click lands on LinkedIn's front page. Beyond losing the lead, it gives away an unfinished site — the opposite of "code that holds".
mailto:On a machine with a configured mail client it works. On webmail, or on a work phone with no default account, nothing opens — and the site still shows "your mail client is open". The user believes they have made contact.
The template —brief, solution, images, next— reads well but has no result block and no close towards contact. The metrics from the GAME case exist: they are buried inside a JPG instead of written as text.
No GA4, no Plausible, no Clarity, not a single pixel anywhere in the file tree. Without a baseline there is no way to know whether a change improves anything, or to justify the next one.
No image uses srcset or modern formats. With cards rendered at around 420 px, serving 1,200 px JPGs is three to four times more than needed, and on mobile it shows.
The five fixes above add up to less than two working days and turn a shop window into a measurable channel. The second wave —outcomes in the case studies and three testimonials— carries the most persuasive weight and takes longest, because it depends on other people. That order is deliberate: plug the leak first, fill the tank second.
Auditing your own work carries an obvious bias, and the only defence against it is method: check in the code what you claim, calculate what can be calculated, and declare what you could not measure.
Not one conclusion in this report rests on an aesthetic impression.
| Block | Material analysed | Method |
|---|---|---|
| Code audit | HTML of the 40 pages across both language trees, 4,090 lines of CSS and JavaScript, 23 MB of assets | Line-by-line reading, asset inventory |
| Browser inspection | Desktop at 1366 px and mobile at 375 px: menu, form, validation, themes and navigation | Live functional verification |
| Heuristic evaluation | Nielsen's ten heuristics over home, archive, case study and contact | Structured review with assigned severity |
| Cognitive walkthrough | The two core tasks: "assess in order to hire" and "get in touch" | Step by step, marking every leak |
| Accessibility | Semantics, focus, ARIA, reduced motion and contrast | WCAG 2.2, relative luminance calculated |
| Benchmarking | Six international reference portfolios | Comparison of conversion patterns, not of aesthetics |
| Not verified | How it would be checked |
|---|---|
| How visitors actually behave | GA4 + Microsoft Clarity over four weeks |
How many enquiries the mailto: loses today | Impossible by definition: the failure is silent for both parties |
| Field metrics (LCP, INP, CLS) | PageSpeed Insights and the CrUX report, with real traffic |
| Full screen-reader navigation | Manual protocol with NVDA and VoiceOver |
| Whether the claim communicates what it intends | Five-second test with 25 participants |
What a visitor sees on arrival: four role labels, the headline "Design that ships & code that holds", the "Available for 2026" chip and the navigation. Within three seconds it is clear who is behind the site and what she does — well above the sector average.
What they don't see: any work, and anything to do. The first viewport is one hundred per cent typography.
#ux, #front, #graphic).index.html#contact, with a curtain, a page load and a scroll in between.It is the first impression for someone arriving from LinkedIn with forty-five seconds of attention and fifteen other portfolios in the next tab. A 000-to-100 counter on a site that would be ready almost instantly is pure waiting. The recommendation is not to remove it —it belongs to the language of the site— but to bring it down to 700 ms or less, or tie it to the actual loading of the hero.
The copy is among the best things on the site. "Design that ships & code that holds", "Three jobs, one head", "Skipping a step is where budgets die": it has a voice of its own, and the real differentiator —she designs, codes and does the graphics, with no handover— is well articulated.
The problem is that the promise never rests on a verifiable outcome, and that it is written for a design lead rather than for whoever signs the invoice.
| Finding | Description | Severity |
|---|---|---|
| Not a single business figure on the site | The GAME case metrics —81.9%, 38%, +20/+45%— exist, but they live inside a JPG. A search engine can't read them and a fast reader won't either | High |
| It speaks to designers, not to buyers | "Tokens", "Figma governance" or "empty states" win over a design lead; an SME buyer needs timelines, process and deliverables | Medium |
| The form question filters too hard | "What are you building?" rhetorically excludes anyone after brand or editorial work — and eight of the eighteen projects are graphic | Low |
| Location | Current CTA | Diagnosis | Recommendation |
|---|---|---|---|
| Hero, first viewport | "Scroll ↓" | A passive cue, not a call to action | "See selected work" + "Start a project" |
| Header | "Available for 2026", not clickable | An urgency signal going to waste | Turn it into a link to contact and keep it on mobile |
| Work block | "See all 17 projects" | Clear and numbered: well handled | — |
| Contact | "Send message" + visible email | Visually strong, functionally broken | A real endpoint and a copy-email button |
| End of case study | "Next project" | An exploration loop with no exit to contact | A contact block at the foot of every case study |
| Archive and about | "Start a project" / "Get in touch" | Well written, but they jump to another page | Repeat the contact block, or give contact its own page |
The rule applied is simple: every screen of scrolling should leave an action within reach. Today there are gaps of two and three viewports —process and figures— with no action available at all.
The form was well designed —three fields, floating labels, inline validation written in both languages, autocomplete— and it ended in a mailto:.
For anyone with a configured mail client, it works. For most people —webmail on desktop, a work phone with no default account— nothing opened, and the site confirmed the message was sent anyway. This was the critical finding of the report, and it is the first one to have been fixed.
"The user believes they have made contact; they haven't. It is the worst kind of conversion failure: invisible to both parties."
The message is POSTed to Web3Forms, which forwards it to the inbox; method and action sit on the <form> itself, so the enquiry is delivered even if the JavaScript never loads. With JavaScript it is intercepted and sent over fetch(), which means the visitor is never taken off the page and is told what happened: a status line with role="status" announces sending, sent, or the error.
The design rule was that no enquiry is ever lost silently again: if the relay fails, the network drops or it takes longer than fifteen seconds, the text stays intact in the fields and a pre-written mail link appears. Bots are filtered with an off-screen honeypot and by discarding submissions made in under two seconds.
Checked in the browser across all nine paths, including the one where Web3Forms answers200 with success:false
mailto: with a real endpointFormspree, Basin or Web3Forms keep the static-site, no-backend philosophy intact. The mailto: stays as a visible fallback, the success message becomes truthful, and a honeypot field is added against spam.
Next to the large email address there is no copy button with confirmation — a standard pattern in the reference portfolios. It is the preferred route for anyone who won't fill in a form.
An optional select —project type and budget range— filters browsers and sets priorities. A calendar link ("book twenty minutes") adds a lower-friction alternative conversion.
LinkedIn, Dribbble and GitHub point at the platforms' front pages. If a profile isn't presentable, removing the link beats leaving the placeholder: it gives away a half-finished site.
The JavaScript includes a fully working quote slider that no HTML uses: the infrastructure is ready and empty. After twenty years of practice, gathering three quotes is a week of emails.
Unnecessary while there is no form backend and no analytics; mandatory the moment either exists. They also signal seriousness to a corporate client.
A real phone number and email, Madrid with a local clock, a downloadable CV, the "replies within one working day" promise and correct Person JSON-LD. The urgency of "Available for 2026" is credible and unobtrusive. The trust gap isn't one of tone: it's one of proof. What's missing is someone other than me saying the work delivers.
Accessibility sits above the average portfolio: a real skip link, global :focus-visible, correct ARIA on the menu, the accordion and the form, and a complete —not cosmetic— implementation of prefers-reduced-motion. Without JavaScript the site remains one hundred per cent readable.
Contrast ratios are calculated, not eyeballed: body text ≈ 16.8:1 (AAA), secondary ≈ 5.8:1 and the accent on dark ≈ 17:1.
| Finding | Measured | Action | Severity |
|---|---|---|---|
| 9.9 px monospaced text on mobile | 9.92 px measured at a 375 px viewport | Raise the clamp minimum from 0.62rem to 0.72rem | Medium |
| Light-theme secondary text at the limit | #6b675f on #eeeae3 ≈ 4.6:1; on the raised surface it drops below 4.5:1 | Darken to #5d5951 | Medium |
| Alt text correct but flat | It describes the project, not the content of the image | Rewrite the case-study alt attributes | Low |
| "Available for 2026" disappears on mobile | It exists only on wide desktop: neither in the header nor in the menu | Add it to the menu and to the contact block | Medium |
No image uses srcset | 23 MB of assets; a 420 px card downloads a 1,200 px JPG | <picture> with AVIF/WebP and a JPG fallback | High |
| Individually heavy images | 946 KB for the largest; the portrait is a 772 KB PNG | Re-encode to WebP at quality 75-80 and resize | High |
| Three type families from Google Fonts | Three requests plus render-blocking CSS | Self-host with subsetting; ui-monospace can replace one family | Medium |
| Vertical social image | The 698 × 1109 portrait crops badly on LinkedIn | Create a 1200 × 630 image with name, claim and work | Low |
| Typographic bug: "? LET'S TALK" | The word splitter isolates the mark and lets it wrap alone | Attach orphan punctuation to the preceding word | Low |
Virtual scrolling gives the site an agency feel and is well implemented: it respects sticky positioning, the keyboard, touch and reduced motion. But it introduces perceptible lag with a wheel or a trackpad. It is an aesthetic bet with a usability cost, and it should be tested rather than defended on taste: lower the intensity and measure rage-scrolls and time on page.
No GA4, no Plausible, no Clarity, no pixel of any kind: verified across the whole file tree. With no baseline, any promised improvement would be invented.
Proposed stack for a static, GDPR-compatible site: GA4 —or Plausible if you'd rather avoid a cookie banner— plus Microsoft Clarity for heatmaps, recordings and rage clicks. Hotjar would be redundant; Mixpanel, oversized.
| Event | Trigger | What it answers |
|---|---|---|
form_start · form_submit | First field filled · successful submission | Primary conversion and form abandonment |
email_click · email_copy · phone_click | Click on the email, on copy or on the phone number | Secondary conversions, entirely invisible today |
cv_download | CV download | A strong signal of hiring intent |
case_open | Entry to a case study, with name and discipline | Which work sells, and which discipline each source cares about |
filter_use · view_toggle | Archive filters and view switch | Validation of the archive's architecture |
outbound_social | Exit to LinkedIn, GitHub or Dribbble | The real route taken by someone checking credentials |
scroll_depth 25/50/75/90 | Home and case studies | Does anyone reach the form? Does the preloader scare people off? |
theme_toggle · lang_switch | Interface | Real use of the light theme and of the two languages |
Headline indicators: contact rate —form, email and phone over sessions—, CV downloads, share of sessions with at least one case study opened, and average depth in the flagship cases.
The audit defines two archetypes with opposite needs and a single site for both. One comes to verify seniority in sixty seconds; the other, to find out whether this is any use to them and what it costs.
The value percentages are working estimates, not measurements: there is no first-party data today to calculate them from.
Reviews fifteen portfolios in an afternoon and gives each one between forty-five and ninety seconds on the first pass. High design literacy: she spots craft — and placeholders — instantly. She wants process, decisions and outcome.
A services business, browsing on mobile, to whom "design systems" means nothing. He needs to know whether I do "his kind of thing" —site, logo, cards—, roughly what it costs and how to talk to me now.
| Step | What happens today | State |
|---|---|---|
| Entry | A click from LinkedIn or from a referral | Fine |
| Preloader | A 000-to-100 counter for 2.3 s with no real loading behind it | Leak |
| Hero | Roles and claim. Nothing to act on: only "Scroll" | Friction |
| Two screens of scrolling | Intro and portrait, three discipline cards, archive | Fine |
| Case study | Brief and solution, with no outcome and no testimonial; "next project" returns to the loop | Leak |
| Checking credentials | The LinkedIn click lands on LinkedIn's front page | Leak |
| Contact | Back to index.html#contact: curtain, load and scroll | Friction |
| Form | The mailto: opened nothing and the site confirmed the send regardless | Resolved |
Hero in under 0.7 s with a double action · three featured cases with a visible metric on the card · case studies with a result block, a testimonial and a close towards contact · real credentials, with this site's own repository as proof of "zero dependencies" · contact with a backend, copy email, a calendar and visible availability. Two clicks from hero to case study, every path ends in contact, and every step leaves a measurable trace.
| Week | Method | Sample | Question it answers |
|---|---|---|---|
| 1 | Five-second test | 25 participants | What comes across from the hero? Does "Index" confuse people? |
| 1-2 | Short twenty-minute interviews | 4 recruiters + 3 SME clients | What do they look for in sixty seconds? What's missing before they write? |
| 2 | Unmoderated usability test, on mobile | 5 users | Task: "work out what she'd do for you, then contact her" |
| 3 | Tree test of the archive | 15 participants | Do the three disciplines group the way people expect? |
| 3-4 | Heatmaps and session recordings | Real traffic, 2+ weeks | Actual scroll depth, filter use and form abandonment |
With typical portfolio traffic —under a thousand sessions a month— very few tests reach classical significance. The honest approach is to run the first three as before and after measurements over three or four weeks, and the rest as perception tests with twenty to thirty participants. Any proposal for an A/B testing programme at this volume deserves scepticism — starting with mine.
| # | Hypothesis | Variant B | Success metric |
|---|---|---|---|
| 1 | The preloader increases bounce from cold traffic | 700 ms, or no preloader | Bounce and 25% scroll depth in new sessions |
| 2 | A hero action shortens the path to the work | "See selected work" + "Start a project" | % of sessions that reach a case study |
| 3 | A real form multiplies enquiries | Endpoint, truthful success state and copy email | form_submit and email_copy per session |
| 4 | Visible metrics raise interest in case studies | Card with an outcome badge | Card-to-case clicks, on home and archive |
| 5 | The claim communicates less than a benefit-led one | An alternative claim centred on the engagement | Five-second test: recall of what I do |
| 6 | Native scrolling reduces perceived friction | Native scrolling, or minimal easing | Rage clicks and time on page |
A selection covering the three sides of the positioning: product, front-end and graphics. The comparison is about conversion patterns, not aesthetics: on visual execution this site already plays in the top league.
All six beat it on exactly the same three things: work sooner, verifiable proof, frictionless contact.
| Portfolio | Profile | What it does better | What to adopt |
|---|---|---|---|
| Dennis Snellenberg | Creative developer | Straight after the hero it shows featured work, and the email copies in one click | Featured work right after the hero; a copy-email button |
| Adham Dannaway | UX/UI who codes | The same dual positioning, resolved with case studies that document process and outcome with figures | Case structure: problem → process → measurable outcome |
| Brittany Chiang | Front-end engineer | Zero friction: real links, live projects and the site's own code public as a credential | A real GitHub with this portfolio's repository |
| Sean Halpin | Product designer | Warmth and trust: availability always visible, testimonials woven in, contact at every scroll | Persistent availability, on mobile too; short testimonials with a name |
| Malika Favre | Graphics and illustration | The work is the home page: an immediate grid, no preamble | More visual cards and grid view by default for graphic work |
| Jessica Hische | Lettering and graphics | Explicit terms of engagement: what she takes on, how she works and in what timeframe | A "what it's like to work with me" block: engagement types, timelines and indicative range |
Every finding carries an impact, a realistic effort estimate and a concrete action. The order isn't by theoretical severity: it's by the ratio between what it recovers and what it costs.
There isn't a single promised improvement percentage. Without a baseline —the site measures nothing today— any figure would be invented.
| # | Finding | Impact | Effort | Concrete action | Status |
|---|---|---|---|---|---|
| 1 | Placeholder social links | High | 10 min | Real LinkedIn, GitHub and Dribbble URLs, or remove them | Open |
| 2 | mailto: form with a misleading success state | High | 1-2 h | A real endpoint, a truthful message and an anti-spam honeypot | Resolved |
| 3 | Case studies with no outcomes or metrics | High | 1-2 d | A "result" block in the template; move the figures out of the JPG into text | Open |
| 4 | No analytics | High (indirect) | ½ d | GA4 and Clarity with the event plan from block 07 | Open |
| 5 | 23 MB of images, no srcset | Medium-high | ½ d | AVIF/WebP with srcset; portrait under 120 KB | Open |
| 6 | A 2.3 s artificial preloader | Medium-high | 1 h | Cut to 700 ms or tie it to actual loading | Open |
| 7 | Zero testimonials, with the slider already coded | High | 1 wk | Three quotes with name and company in the existing component | Open |
| 8 | Hero with no call to action | Medium | 1 h | "See selected work" and "Start a project" | Open |
| 9 | Availability invisible on mobile | Medium | 1 h | A clickable chip in the menu and in the contact block | Open |
| 10 | Contact depends on index#contact | Medium | 2-3 h | A contact block on archive and about, or a page of its own | Open |
| 11 | No lead qualification or calendar | Medium | 2 h | Type and budget selects; a calendar link | Open |
| 12 | 9.9 px monospaced text on mobile | Low | 5 min | clamp minimum to 0.72rem | Open |
| 13 | Secondary contrast in the light theme | Low | 5 min | --fg-dim: #5d5951 | Open |
| 14 | "Index" ambiguous in the navigation | Low | 10 min | Rename to "Home" or drop the label | Open |
| 15 | Orphan-punctuation typographic bug | Low | 30 min | Attach punctuation to the preceding word when splitting | Resolved |
| 16 | Vertical social image | Low | 1 h | Create a 1200 × 630 image with claim and work | Open |
| 17 | No legal notice or privacy policy | Low | 2 h | Legal pages and consent as soon as analytics exists | Open |
Form endpoint Done · real social links · analytics and events · images in modern formats · preloader down to 700 ms · minimum monospaced size · light-theme contrast.
One working day: with that, the site goes from shop window to measurable channel. The first item is in; the rest is still open.
A result block in the case template · metrics moved out of the JPG into text · three testimonials in the component that already exists · actions in the hero and at the end of each case · availability visible on mobile.
The wave with the most persuasive weight, and the one that depends on other people.
The research plan —five-second test, interviews, tree test— and a first read of heatmaps and recordings with real traffic.
From here on, decisions stop being opinions. Including mine.
The experiment programme in order of impact, measured before and after, plus panel-based perception tests.
Documented iterative improvement, with the statistical scepticism this traffic volume demands.
This document was produced in August 2026 on version 11 of lemonadefactory.eu, from direct analysis of the code and browser verification at 1366 and 375 px, with contrast ratios calculated to WCAG. Publishing it in full, failing grades included, is part of the argument: judgement is proven by applying it to your own work, not only to other people's.
Part 02
(00) — The interface
Widths drawn for every screen, rather than improvised at build time
Desktop 1440 · Tablet 834 · Mobile 390Complete themes, built from the same variables swapped over
Dark and light, in Spanish and EnglishScreens per set, from the preloader to the error page
Preloader · Home · Work · About · Case · Menu · 404Published library everything else is dragged out of
Components with variants, consumed from AssetsThe eight boards run in the order they were made, not the order that flatters them: flow first, then the screens, then the system holding them up, and last the prototype that puts them to the test. All of them are captures of the Figma file and the FigJam board exactly as they stand today, panels and tool noise included.
Before opening Figma I drew the whole site in FigJam: where the visitor comes in, what the language gate decides and how many steps there are between a cover and a sent email. The flow starts at language detection —redirect automatically if a choice is already stored, otherwise offer ES/EN— and opens from there into three branches: global navigation, main pages, and the case studies with their discipline filter.
Drawing it exposed what the audit would later say with numbers: every path ends in the same contact box, and that box was the weak link. The 404 and the CV download hang off the flow as side exits, not as dead ends.
FigJam · User flowPortfolio 2026
The dark version built in Figma as three parallel runs of the same page: desktop 1440, tablet 834 and mobile 390. Every run carries the full set —preloader, home, work, about, case study, menu overlay and 404— so that how each block reorders can be compared vertically instead of assumed.
This is where the decisions the CSS later merely executes get made: when the navigation becomes a burger, when the three-column grid drops to one, and which column of the archive row leaves as the viewport narrows.
Figma · Screens · DarkResponsive prototyping
The light theme is not the dark one with its colours flipped: text weight changes, shadows change, and the accent itself moves from green to blue to hold contrast against a bone background. These are the Spanish screens in their light version at all three widths, assembled from exactly the same components as the dark one.
Having the light mode drawn before writing the CSS is what lets the site's theme toggle be a swap of variables rather than a parallel stylesheet to maintain twice over.
Figma · Screens · LightDesktop, tablet and mobile
The foundations of the file on a single board: both palettes —dark and light— with every colour named after its job rather than its hue (color/bg, color/fg-dim, color/accent, color/discipline/ux), the type ramp from Giant down to the mono of the labels, the spacing scale, and the radii with their breakpoints.
Naming by role is what makes the light theme free: color/accent is green or blue depending on the mode, and the component using it never finds out. The text styles in the right-hand panel —Giant, H1, H2, Wordmark, Menu, Number— are the ones that later live in tokens.css.
Figma · FoundationsPalettes · Type ramp · Spacing · Radius
The components page: header, archive row and archive card, marquee, work bar, button, group header, accordion item, timeline row, discipline card, footer, form, next-project block and the pending-image placeholder. Each one built as a component with its own variables —state, size, discipline, theme— instead of as five near-identical copies.
The real gain showed up at build time: when the archive row changed height, it changed across all forty screens at once, and the front-end only had to copy that decision once.
Figma · ComponentsVariants and properties
The same components, published as a library and consumed from the assets panel: accordion item, archive card, archive row, arrow circle, brand, brand mark, burger, button, case meta cell, discipline card, discipline tag, eyebrow… Next to it, the screens assembled end to end out of instances of that library.
It is the proof that the system is a system and not a mood board: if a whole screen can be assembled by dragging pieces out of the library, the library is complete.
Figma · LibraryAssets and the screens built from them
The prototype layer over the screens: every blue line is a real connection between an element and its destination —the header to home, work, about and contact; the discipline card to its section of the archive; the archive row to its case study; the burger to the menu overlay and back.
With this the prototype is walked the way the site would be walked, which is the only way to find the dead ends before they get built: on the first pass the case study had no route back to the filtered archive, and the browser's back button had to do the work.
Figma · PrototypeConnections and interactions · Flow 1
The result in the hand: the work archive scrolling on a real phone, the front-end development rows giving way to the graphic design section and the discipline tags changing colour as they do.
It is the last check of the cycle —what was drawn in Figma against what the browser gives back on a real phone— and the piece that closes the interface half of this project.
Mockup · Capture of the siteThe archive, scrolling on mobile
All of the above is built and running: the system designed in this Figma file exists in code, with 37 components and 57 tokens, and it can be opened, searched and copied whole on the front-end development page. This site is made with it — and so is the business card, which prints those same tokens at 55 × 85 mm.
Next in Product design UX/UI
