https://www.connorlove.com/_next/static/chunks/pages/projects/[id]-66984bab5f23acbb.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[92],{1672:function(e,t,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/projects/[id]",function(){return o(5387)}])},8493:function(e,t,o){"use strict";o.d(t,{Z:function(){return u}});var n=o(5893),s=o(512),i=o(3844),r=o.n(i),a=o(4903),c=o(7294),l=o(5829),d=o(6038),p=o(6805),h=(e,t)=>{(0,p.L)(()=>{let o=d.p8.context(()=>{let o=new l.Z(e.current,{types:"chars",tagName:"span",charClass:t.char});return o.chars.forEach((e,t)=>{e.style.setProperty("--i",t)}),()=>{o.kill()}},e);return()=>o.kill()},[])},u=function(e){let{children:t}=e,o=(0,c.useRef)(),i=(0,a.Z)(o);return h(o,r()),(0,n.jsx)("span",{ref:o,className:(0,s.Z)(r().title,i&&r().visible),"aria-hidden":"true",children:t})}},1223:function(e,t){"use strict";t.Z=[{id:"honestui",title:"HonestUI",img:"/honestui/project.webp",imgAlt:"HonestUI landing page with the headline Good interfaces. Honest code. and interactive React component previews",link:"/projects/honestui",date:"2026",liveLink:"https://honestui.com",githubLink:"https://github.com/honestui/honestui",seoTitle:"HonestUI Case Study: Source-First React UI Library | Connor Love",seoDescription:"HonestUI is a source-first React component library by Connor Love with accessible UI components, Apache ECharts charts, icons, visual effects, and editable source code.",primary:"#111111",accentColor:"#F4F4F5",secondary:"#232323",fillColor:"#181818",menuColor:"#516BDB",menuFontColor:"#FFFFFF",fluidColor:"#516BDB",topics:["Source-first React components","Accessible UI building blocks","CLI and manual installation","Semantic themes and tokens","Apache ECharts components","Icons and visual effects","MIT-licensed source code"],intro:["HonestUI is a React component library with good defaults and no lock-in.","Developers can copy UI components into a project, edit the source directly, and import charts, icons, or visual effects only when they need them.","The documentation keeps installation, behavior, accessibility responsibilities, examples, and source code close together."],images:[{src:"/honestui/1.webp",tag:"big",isRight:!1,alt:"HonestUI landing page showing its source-first React component library and interactive account interface previews"},{src:"/honestui/2.webp",tag:"big",isRight:!1,alt:"HonestUI Button documentation with interactive previews for button variants, sizes, disabled states, and links"},{src:"/honestui/3.webp",tag:"big",isRight:!1,alt:"HonestUI Color Picker documentation with an interactive saturation field, hue and opacity controls, and color output"},{src:"/honestui/4.webp",tag:"big",isRight:!1,alt:"HonestUI Charts documentation comparing when to use area, bar, line, pie, scatter, and heatmap charts"},{src:"/honestui/5.webp",tag:"big",isRight:!1,alt:"HonestUI Bar Chart documentation with an interactive grouped monthly bar chart and selection brush"},{src:"/honestui/6.webp",tag:"big",isRight:!1,alt:"HonestUI Pie Chart documentation with a five-category interactive chart and legend"}],desc:["HonestUI is a source-first React component library for building product interfaces without locking application code behind a package API.","UI components can be installed with the HonestUI CLI or copied manually. Each component page explains its purpose, behavior, states, accessibility responsibilities, installation, usage, examples, and API.","The component collection covers common interface primitives and more involved controls, including forms, dialogs, menus, tables, color picking, and kanban lists. Semantic CSS tokens support themes and project-specific customization.","Charts are composable React components built on Apache ECharts. They are imported from honestui/charts and include area, bar, line, pie, scatter, and heatmap options, plus tooltips, legends, dots, and brushes.","HonestUI also includes icons and optional visual effects. The project is MIT licensed, and its source remains available to inspect and adapt."]},{id:"clove-colors",title:"Clove Colors",img:"/clove-colors/project.webp",imgAlt:"Clove Colors palette builder with five editable color columns",link:"/projects/clove-colors",date:"2026",liveLink:"https://colors.connorlove.com",githubLink:"https://github.com/loveconnor/clove-colors",seoTitle:"Clove Colors Case Study: Color System Workbench | Connor Love",seoDescription:"Clove Colors is a free color workbench by Connor Love for creating palettes, semantic themes, color ramps, WCAG contrast reports, previews, and production-ready design tokens.",primary:"#172A3A",accentColor:"#F4F1DE",secondary:"#F3B61F",fillColor:"#F4F1DE",menuColor:"#F3B61F",menuFontColor:"#172A3A",fluidColor:"#5FB49C",topics:["Color palette workbench","Semantic color systems","WCAG contrast reports","Design token exports","Light and dark themes","Read-only MCP tools"],intro:["Clove Colors is a free color workbench for designers and developers.","It turns a palette into color ramps, light and dark themes, contrast reports, previews, and design tokens that are ready to use in a product.","It works without an account and keeps saved palettes in the browser."],images:[{src:"/clove-colors/1.webp",tag:"big",isRight:!1,alt:"Clove Colors palette builder with controls for harmony, color count, history, generation, and saving"},{src:"/clove-colors/2.webp",tag:"big",isRight:!1,alt:"Clove Colors system builder showing semantic color roles and coordinated color ramps"},{src:"/clove-colors/3.webp",tag:"big",isRight:!1,alt:"Clove Colors curated palette library with search and measurable filters"}

1,{src:"/clove-colors/4.webp",tag:"big",isRight:!1,alt:"Clove Colors visualizer applying a palette to a sample marketing page"}],desc:["Clove Colors helps designers and developers turn a group of colors into a complete product color system.","You can create and edit a palette, assign colors to clear roles, build coordinated ramps, and check exact foreground and background pairs against WCAG contrast rules.","The visualizer applies the palette to sample marketing, dashboard, and mobile screens. Exports are available as CSS, Tailwind, design-token JSON, or plain JSON.","The site also includes 24 original curated palettes and read-only MCP tools. It has no accounts or database, and palettes saved in the app stay in the browser."]},{id:"tokenizer",title:"Tokenizer",img:"/tokenizer/project.webp",imgAlt:"Tokenizer comparison showing token counts across ten tokenizers",link:"/projects/tokenizer",date:"2026",liveLink:"https://tokenizer.connorlove.com",githubLink:"https://github.com/loveconnor/tokenizer",seoTitle:"Connor's Tokenizer Case Study: Interactive Token Comparison",seoDescription:"Connor's Tokenizer is a browser-based tool by Connor Love for comparing a byte-lossless Unigram tokenizer with nine established tokenizer baselines using text and reproducible benchmarks.",primary:"#171717",accentColor:"#F7F7F5",secondary:"#F0EDE7",fillColor:"#F7F7F5",menuColor:"#A6633C",menuFontColor:"#FFFFFF",fluidColor:"#A6633C",topics:["Byte-lossless Unigram tokenizer","Interactive token comparison","Ten tokenizer baselines","Multilingual benchmarks","Browser-local processing","Reproducible research"],intro:["Connor's Tokenizer is an interactive browser tool for comparing how ten tokenizers split and count text.","It places Connor's byte-lossless Unigram tokenizer beside nine established baselines and shows every result in one view.","The site also includes a fixed, reproducible benchmark for compression, multilingual text, robustness, and speed."],images:[{src:"/tokenizer/1.webp",tag:"big",isRight:!1,alt:"Connor's Tokenizer comparing token counts for a prose sample across ten tokenizers"},{src:"/tokenizer/2.webp",tag:"big",isRight:!1,alt:"Connor's Tokenizer comparing multilingual text and showing the local token output"},{src:"/tokenizer/3.webp",tag:"big",isRight:!1,alt:"Connor's Tokenizer benchmark suite showing the fixed corpus size, source bytes, tracks, and source groups"}],desc:["Connor's Tokenizer is an interactive tool for comparing a byte-lossless Unigram tokenizer with nine established tokenizer baselines.","You can enter text or choose a prepared example to compare token counts, token boundaries, and simple ratios across all ten tokenizers. The work runs locally in a browser worker, so entered text is not sent to an AI provider.","A separate benchmark uses 2,116 fixed records to compare compression, multilingual coverage, robustness, and throughput. The repository includes source revisions, licenses, hashes, and scripts needed to reproduce the results.","The project keeps its claim narrow: token counts and benchmark metrics can compare tokenizers, but they do not prove that a language model will be better or cheaper to train."]},{id:"lovesans",githubLink:"https://github.com/loveconnor/lovesans",title:"LoveSans",img:"/lovesans/project1.webp",link:"/projects/lovesans",date:"2026",primary:"#000000",accentColor:"#f0f4f1",secondary:"#F9F9F9",fillColor:"#ebfaf8",menuColor:"#00a8c1",menuFontColor:"#f0f4f1",fluidColor:"#FF573E",images:[{src:"/lovesans/1.webp",tag:"big",isRight:!1},{src:"/lovesans/2.webp",tag:"big",isRight:!1},{src:"/lovesans/3.webp",tag:"big",isRight:!1},{src:"/lovesans/4.webp",tag:"big",isRight:!1},{src:"/lovesans/5.webp",tag:"big",isRight:!1}],desc:["LoveSans is a custom sans-serif typeface system designed for modern digital products, branding, and interface design.","The project focuses on creating a consistent typographic foundation across web applications, balancing readability with strong visual identity.","Built as both a design and engineering exercise, it bridges typography with real-world UI implementation and product usage."]}]},3023:function(e,t,o){"use strict";var n=o(5893),s=o(512),i=o(5830),r=o.n(i),a=o(5697),c=o.n(a),l=o(6577);let d={home:{eyebrow:"What I do",heading:"I build thoughtful digital products.",subheading:"From the first idea to the final production details.",paragraphs:["I design and develop custom websites, web applications, and product interfaces. My work brings design and engineering together through clear structure, fast performance, accessible interaction, and details that make each experience feel considered.","I am based in Columbus, Ohio, and work with founders, agencies, and product teams wherever they are."],services:l.xK},about:{eyebrow:"My approach",heading:"Thoughtful by default.",subheading:"Design and engineering belong in the same process.",paragraphs:["I start by understanding the goal, the audience, and the constraints. From there, I shape the content, interaction, and technical foundation together so the finished product feels cohesive rather than assembled 

1in pieces.","My usual toolkit includes React, Next.js, semantic HTML, thoughtful motion, and performance-minded implementation. The tools can change; clarity, accessibility, and maintainability do not."],services:l.xK},projects:{eyebrow:"Selected work",heading:"A closer look at my work.",subheading:"Different problems, the same attention to detail.",paragraphs:["These projects cover reusable interface systems, color tools, tokenizer research, and digital typography. Each one began with a different problem and called for a different balance of design and engineering.","Across the work, I focus on responsive interfaces, useful motion, durable component systems, and code that stays understandable as a product grows."],services:l.xK}},p=e=>({eyebrow:"Case study",heading:e.title,subheading:"What I focused on",paragraphs:["For ".concat(e.title,", I brought product thinking, interface design, and frontend engineering together around one clear problem."),...e.desc],services:l.xK});function h(e){let{variant:t="home",project:o}=e,i=o?p(o):d[t]||d.home;return(0,n.jsxs)("section",{className:(0,s.Z)(r().root,"layout-grid-inner"),"aria-labelledby":"".concat(t,"-details-heading"),children:[(0,n.jsxs)("div",{className:r().heading,children:[(0,n.jsx)("p",{className:"p-l",children:i.eyebrow}),(0,n.jsx)("h2",{id:"".concat(t,"-details-heading"),className:"h2",children:i.heading})]}),(0,n.jsxs)("div",{className:r().content,children:[(0,n.jsx)("h3",{className:"h4",children:i.subheading}),i.paragraphs.map(e=>(0,n.jsx)("p",{className:"p-l",children:e},e)),(0,n.jsxs)("div",{className:r().extractableContent,children:[(0,n.jsx)("h3",{className:"h4",children:"What I can help with"}),(0,n.jsx)("ul",{className:r().list,children:i.services.map(e=>(0,n.jsxs)("li",{children:[(0,n.jsx)("span",{className:"h6",children:e.title}),(0,n.jsx)("p",{className:"p-l",children:e.text})]},e.title))})]})]})]})}h.propTypes={variant:c().oneOf(["home","about","projects"]),project:c().shape({title:c().string.isRequired,date:c().string.isRequired,desc:c().arrayOf(c().string).isRequired})},h.defaultProps={variant:"home",project:null},t.Z=h},5387:function(e,t,o){"use strict";o.r(t),o.d(t,{__N_SSG:function(){return P},default:function(){return U}});var n=o(5893),s=o(7294),i=o(770),r=o(8493),a=o(5675),c=o.n(a),l=o(1664),d=o.n(l),p=o(512),h=o(743),u=o.n(h),g=function(e){let{nextProject:t}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("section",{className:(0,p.Z)(u().titleContainer,"layout-block-inner"),children:(0,n.jsx)("h2",{className:(0,p.Z)(u().title,"h1"),children:(0,n.jsx)(r.Z,{children:"Next Project"})})}),(0,n.jsx)("section",{className:(0,p.Z)(u().nextRoot,"layout-block-inner"),children:(0,n.jsx)("div",{className:u().innerContainer,children:(0,n.jsxs)(d(),{"aria-label":"Go ".concat(t.title),id:t.id,scroll:!1,href:t.link,className:(0,p.Z)(u().card),children:[(0,n.jsx)("div",{className:u().projectsWrap,children:(0,n.jsxs)("div",{className:(0,p.Z)(u().container,"layout-grid-inner"),children:[(0,n.jsxs)("div",{className:u().projectsDetails,children:[(0,n.jsx)("p",{className:(0,p.Z)(u().text,"h6"),children:t.date}),(0,n.jsx)("h3",{className:(0,p.Z)(u().text,"h3"),children:t.title})]}),(0,n.jsx)("div",{className:u().imageContainer,children:(0,n.jsx)(c(),{priority:!0,sizes:"100%",src:t.img,fill:!0,alt:t.title})})]})}),(0,n.jsx)("div",{className:u().canvas,children:(0,n.jsx)(c(),{priority:!0,sizes:"100%",src:t.img,fill:!0,alt:t.title})})]})})})]})},m=o(496),b=o(8454),v=o.n(b),f=function(e){let{project:t}=e,o=t.intro||t.desc;return(0,n.jsxs)("div",{className:v().root,children:[(0,n.jsx)("h1",{className:(0,p.Z)(v().title,"h3"),children:t.title}),(0,n.jsxs)("p",{className:(0,p.Z)(v().date,"h4"),children:["(",t.date,")"]}),(0,n.jsxs)("div",{className:v().others,children:[(0,n.jsx)("div",{className:v().desc,children:o.map((e,o)=>(0,n.jsx)("p",{className:"p-l",children:e},"".concat(t.title,"-").concat(o)))}),t.liveLink?(0,n.jsx)("div",{className:v().buttonContainer,children:(0,n.jsx)(m.Z,{target:!0,href:t.liveLink,label:"VISIT LIVE SITE"})}):null,t.githubLink?(0,n.jsx)("div",{className:v().buttonContainer,children:(0,n.jsx)(m.Z,{target:!0,href:t.githubLink,label:"VIEW GITHUB"})}):null]})]})},C=o(5697),j=o.n(C),k=o(3837),x=o.n(k),y=o(255);function _(e){let{project:t}=e,o=(0,y.Z)(),i=(0,s.useCallback)((e,t)=>

1"".concat(e," project interface screenshot ").concat(t+1," from Connor Love's creative development portfolio"),[]),r=(0,s.useCallback)(e=>{let{tag:t,src:s,isRight:r,alt:a,index:l,title:d}=e,p=a||i(d,l);return"video"===t?(0,n.jsx)("div",{className:x().videoContainer,children:(0,n.jsx)("video",{loop:!0,muted:!0,autoPlay:!0,children:(0,n.jsx)("source",{src:s,type:"video/mp4"})})}):"small"===t?(0,n.jsx)("div",{style:{gridColumn:o?r?" 4 / 7":"1 / 4":r?" 9 / 17":"1 / 9"},className:x().imageContainer,children:(0,n.jsx)(c(),{priority:!0,sizes:"100%",src:s,fill:!0,alt:p})}):"big"===t?(0,n.jsx)("div",{className:x().bigContainer,children:(0,n.jsx)(c(),{priority:!0,sizes:"100%",src:s,fill:!0,alt:p})}):"medium"===t?(0,n.jsx)("div",{className:x().mediumContainer,children:(0,n.jsx)(c(),{priority:!0,sizes:"100%",src:s,fill:!0,alt:p})}):null},[i,o]);return(0,n.jsx)("section",{className:(0,p.Z)(x().root,"layout-grid-inner"),children:t.images.map((e,o)=>(0,n.jsx)(s.Fragment,{children:r({...e,index:o,title:t.title})},"".concat(t.title,"-image-").concat(o)))})}_.propTypes={project:j().shape({title:j().string.isRequired,images:j().arrayOf(j().shape({tag:j().string.isRequired,src:j().string.isRequired,alt:j().string,isRight:j().bool})).isRequired}).isRequired};var w=o(6546),I=o(3023),N=o(6038),F=o(1223),z=o(9264),R=o.n(z),T=o(6805),L=o(2010),Z=o(9404),S=o(8353),P=!0,U=function(e){let{id:t}=e,o=(0,y.Z)(),r=(0,s.useRef)(),a=(0,s.useRef)(),[c]=(0,Z.o)((0,L.N)(e=>[e.isLoading])),l=(0,S.iP)(),d=(0,s.useMemo)(()=>F.Z.findIndex(e=>e.id===t),[t]),h=(0,s.useMemo)(()=>F.Z[d],[d]);(0,T.L)(()=>{let e=N.p8.context(()=>{if(!c&&!o){var e;w.ScrollTrigger.create({id:"project",trigger:r.current,start:"top top",end:"bottom bottom",pin:a.current,scrub:!0,scroller:null===(e=document)||void 0===e?void 0:e.querySelector("main"),invalidateOnRefresh:!0,pinSpacing:!1})}});return()=>{var t;e.kill(),null===(t=w.ScrollTrigger.getById("project"))||void 0===t||t.kill()}},[o,c,l.width]);let u=(0,s.useMemo)(()=>({title:h.seoTitle||"".concat(h.title," Case Study | Connor Love Ohio Web Developer"),description:h.seoDescription||"".concat(h.title," is a web development case study by Connor Love, a Columbus-based Ohio web developer building websites, web apps, and AI product interfaces for clients across Ohio and worldwide.")}),[h]);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.Z,{...u,pageType:"projects",project:h}),(0,n.jsxs)("section",{className:(0,p.Z)(R().root,"layout-grid-inner"),children:[(0,n.jsx)("div",{ref:a,className:R().leftContainer,children:(0,n.jsx)(f,{project:h})}),(0,n.jsx)("div",{ref:r,className:R().rightContainer,children:(0,n.jsx)(_,{project:h})})]}),(0,n.jsx)(I.Z,{variant:"projects",project:h}),(0,n.jsx)(g,{nextProject:d===F.Z.length-1?F.Z[0]:F.Z[d+1]})]})}},3844:function(e){e.exports={title:"appearByWords_title__c1a1A",char:"appearByWords_char__KmySQ",visible:"appearByWords_visible__ljtoz"}},5830:function(e){e.exports={root:"seo_root__J0cXa",heading:"seo_heading__fYDfE",content:"seo_content__YotSI",extractableContent:"seo_extractableContent__L6XmX",list:"seo_list__eX_1c"}},743:function(e){e.exports={titleContainer:"nextProject_titleContainer__1FYiL",title:"nextProject_title__zIncZ",nextRoot:"nextProject_nextRoot__5sE5C",innerContainer:"nextProject_innerContainer__IQVNd",card:"nextProject_card__t8zeN",projectsWrap:"nextProject_projectsWrap__j4sm2",container:"nextProject_container__CPmOM",projectsDetails:"nextProject_projectsDetails__K00_K",canvas:"nextProject_canvas__ns81Z",imageContainer:"nextProject_imageContainer__PcAmO"}},8454:function(e){e.exports={root:"projectDetails_root__5VHuz",date:"projectDetails_date__XeFUC",others:"projectDetails_others__0B6cz",desc:"projectDetails_desc__zWiK_",buttonContainer:"projectDetails_buttonContainer__XL3kd"}},3837:function(e){e.exports={root:"projectImages_root__eNSn9",imageContainer:"projectImages_imageContainer__EoLWy",mediumContainer:"projectImages_mediumContainer__OkVTI",bigContainer:"projectImages_bigContainer__bg23V",videoContainer:"projectImages_videoContainer__e5hzh"}},9264:function(e){e.exports={root:"project_root__dx2rH",leftContainer:"project_leftContainer__er91e",rightContainer:"project_rightContainer__Q_IWp"}}},function(e){e.O(0,[838,770,888,774,179],function(){return e(e.s=1672)}),_N_E=e.O()}]);