From e93a5489bbc2f35b01f24ead866cb55f6dd48d89 Mon Sep 17 00:00:00 2001 From: Brian Luerssen Date: Fri, 3 Jul 2026 15:47:55 -0400 Subject: [PATCH 1/5] Remove Sketch/Gumroad promo section The Gumroad Sketch-file promo is stale; drop the card footer and its assets. Co-Authored-By: Claude Fable 5 --- public/images/sketch.svg | 1 - src/components/AvatarGenerator.css | 29 +---------------------------- src/components/AvatarGenerator.res | 11 ----------- 3 files changed, 1 insertion(+), 40 deletions(-) delete mode 100644 public/images/sketch.svg diff --git a/public/images/sketch.svg b/public/images/sketch.svg deleted file mode 100644 index d1ecb12..0000000 --- a/public/images/sketch.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/AvatarGenerator.css b/src/components/AvatarGenerator.css index 7fd0986..f917d90 100644 --- a/src/components/AvatarGenerator.css +++ b/src/components/AvatarGenerator.css @@ -10,6 +10,7 @@ justify-content: space-between; align-items: center; padding-top: 110px; + padding-bottom: 32px; } .AvatarGenerator-pngContainer { @@ -75,31 +76,3 @@ } } -.AvatarGenerator-footer { - width: 100%; - background-color: #f9fafc; - padding-top: 28px; - padding-bottom: 28px; - border-radius: 8px; - text-align: center; - margin-top: 24px; -} - -@media (min-width: 768px) { - .AvatarGenerator-footerTop { - margin-right: 48px; - margin-left: 24px; - } - - .AvatarGenerator-footer { - width: 100%; - background-color: #f9fafc; - padding-top: 28px; - padding-bottom: 28px; - display: flex; - justify-content: center; - align-items: center; - border-radius: 8px; - margin-top: 32px; - } -} diff --git a/src/components/AvatarGenerator.res b/src/components/AvatarGenerator.res index 5956865..1801a5b 100644 --- a/src/components/AvatarGenerator.res +++ b/src/components/AvatarGenerator.res @@ -97,16 +97,5 @@ let make = (~randomize, ~settings: array, ~onChange, ~onExport) = -
- -
- {React.string("Want to make your own?")} -
- - {React.string("Get the Sketch file on Gumroad.")} - -
- -
} From 8e125f9673e4ee8a7a9353e7ad3d83ad47d968de Mon Sep 17 00:00:00 2001 From: Brian Luerssen Date: Fri, 3 Jul 2026 15:48:40 -0400 Subject: [PATCH 2/5] Add UTM parameters to draftbit.com links utm_source=personas, utm_medium=referral, utm_campaign=avatar-generator, with utm_content distinguishing placement (header-wordmark, footer-wordmark, footer-link). Also fixes a 'fobust' typo in the footer link title. Co-Authored-By: Claude Fable 5 --- src/components/App.res | 8 ++++---- src/components/Wordmark.res | 9 +++++++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/App.res b/src/components/App.res index 3ce619b..d4b298a 100644 --- a/src/components/App.res +++ b/src/components/App.res @@ -79,7 +79,7 @@ let make = (
- +

{React.string("Personas")}

{React.string("Avatar Generator")}
@@ -96,7 +96,7 @@ let make = (
{React.string("Built by")}
- +
@@ -104,8 +104,8 @@ let make = (
diff --git a/src/components/Wordmark.res b/src/components/Wordmark.res index c632675..627d647 100644 --- a/src/components/Wordmark.res +++ b/src/components/Wordmark.res @@ -1,5 +1,10 @@ +let utmHref = (placement: string) => + `https://draftbit.com?utm_source=personas&utm_medium=referral&utm_campaign=avatar-generator&utm_content=${placement}` + @react.component -let make = () => - +let make = (~placement: string) => + From 59b9f63dccbb8e2868caf30de9748481a1c6a892 Mon Sep 17 00:00:00 2001 From: Brian Luerssen Date: Fri, 3 Jul 2026 15:49:07 -0400 Subject: [PATCH 3/5] Randomize the starting avatar on page load New visitors now start from a random persona instead of the fixed default; reuses randomizeStyles from the Randomize button. Co-Authored-By: Claude Fable 5 --- src/pages/Index.res | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/pages/Index.res b/src/pages/Index.res index a318454..02a1361 100644 --- a/src/pages/Index.res +++ b/src/pages/Index.res @@ -4,22 +4,6 @@ external config: Types.config = "default" @module("../helpers/exportImage.js") external exportImageAsync: unit => unit = "default" -let defaultStyles: Types.styles = { - skin: "Skin", - skinColor: "B16A5B", - hair: "Balding", - hairColor: "E16381", - facialHair: "Mustache", - facialHairColor: "6C4545", - body: "Square", - bodyColor: "5A45FF", - eyes: "Glasses", - mouth: "Pacifier", - nose: "Smallround", - bgColor: "FFCC65", - head: "Head", -} - let randomizeStyles = (config: Types.config): Types.styles => { let getRandom = _list => { let len = Array.length(_list) @@ -45,7 +29,7 @@ let randomizeStyles = (config: Types.config): Types.styles => { @react.component let make = () => { - let (styles, setStyles) = React.useState(_ => defaultStyles) + let (styles, setStyles) = React.useState(_ => randomizeStyles(config)) let (showModal, setShowModal) = React.useState(_ => false) let onChange = (key: Types.key, value) => From 8c462492672cd541c1f4aa0702699082fb46a49b Mon Sep 17 00:00:00 2001 From: Brian Luerssen Date: Fri, 3 Jul 2026 15:51:03 -0400 Subject: [PATCH 4/5] Pin avatar preview while scrolling on mobile Reimplements the sticky-preview idea from PR #40 (issue #34) by @luanraithz against the current layout: on <768px viewports the avatar sticks 20px from the top so style and color changes stay visible while scrolling the styler list. Desktop keeps the original absolute positioning since the card mostly fits in one viewport there. Co-Authored-By: Claude Fable 5 --- src/components/AvatarGenerator.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/AvatarGenerator.css b/src/components/AvatarGenerator.css index f917d90..6c355a7 100644 --- a/src/components/AvatarGenerator.css +++ b/src/components/AvatarGenerator.css @@ -40,6 +40,18 @@ top: -75px; } +/* On small screens the styler list is a long scroll; keep the avatar + preview pinned so changes stay visible (community request, #34) */ +@media (max-width: 767px) { + .AvatarGenerator-avatar { + position: sticky; + top: 20px; + margin-top: -185px; + margin-bottom: 35px; + z-index: 1; + } +} + .AvatarGenerator-faceFeature { position: absolute; top: 0; From 0f2713f41188ed6e75b67bf9d502063b7b978bc8 Mon Sep 17 00:00:00 2001 From: Brian Luerssen Date: Fri, 3 Jul 2026 15:53:36 -0400 Subject: [PATCH 5/5] Expand color palettes and expose the Curlybun hairstyle - Grow skin/hair/facial-hair/body/background palettes from 8-9 to 12 swatches each (adds blonde, blue, green, and grey hair among others), keeping the flat pastel aesthetic; hair and facial hair stay in sync - Add the finished-but-never-listed Curlybun style to hairStyles and make its curls respect the chosen hair color (pink hair-tie accent kept to distinguish it from Buncurls' teal tie) - Remove the duplicate Hat entry from hairStyles Co-Authored-By: Claude Fable 5 --- src/components/SvgLoader.res | 4 ++-- src/data/config.json | 31 +++++++++++++++++++++++++------ 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/components/SvgLoader.res b/src/components/SvgLoader.res index c819567..b2e535a 100644 --- a/src/components/SvgLoader.res +++ b/src/components/SvgLoader.res @@ -105,8 +105,8 @@ let getBuncurls = (fill, size) => `` let getBuzzcut = (fill, size) => `` -let getCurlybun = (_, size) => - `` +let getCurlybun = (fill, size) => + `` let getCurlyhightop = (fill, size) => `` let getHightopcurly = (fill, size) => diff --git a/src/data/config.json b/src/data/config.json index dc7c2b0..9b1baf0 100644 --- a/src/data/config.json +++ b/src/data/config.json @@ -9,6 +9,7 @@ "Bobcut", "Buncurls", "Buzzcut", + "Curlybun", "Hightopcurly", "Long", "Pigtails", @@ -17,7 +18,6 @@ "Bunundercut", "Extralong", "Fade", - "Hat", "Mohawk", "Shortcomboverchops", "Sidebuzz", @@ -63,34 +63,45 @@ "bgStyles": ["Background"], "skinColors": [ "FFCC22", + "FFDFC4", "FBD2C7", "F2AD9B", "E58F7B", "E4A070", "B16A5B", "92594B", + "7A4536", "623D36", - "C9E6DC" + "C9E6DC", + "C4B5F2" ], "hairColors": [ "362C47", "675E97", + "4E7DE0", "5AC4D4", + "58B368", "DEE1F5", "6C4545", "F29C65", + "F2C94C", "E16381", - "E15C66" + "E15C66", + "979FB0" ], "facialHairColors": [ "362C47", "675E97", + "4E7DE0", "5AC4D4", + "58B368", "DEE1F5", - "6c4545", + "6C4545", "F29C65", + "F2C94C", "E16381", - "E15C66" + "E15C66", + "979FB0" ], "bodyColors": [ "456DFF", @@ -100,7 +111,11 @@ "7555CA", "E24553", "54D7C7", - "F3B63A" + "F3B63A", + "FF8A5C", + "3E4E7C", + "C866D9", + "68C9F2" ], "bgColors": [ "93A7FF", @@ -110,6 +125,10 @@ "FF6674", "89E6E4", "FFCC65", + "FFB27A", + "B8EBC5", + "D9CCFF", + "6C7BC4", "F8FBFF" ], "disabledColors": [